@tangle-network/charts 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { C as listJoin, D as wrap, E as textWidth, S as fitLines, T as textBlock, _ as svgRoot, a as eventsTable, b as capitalize, c as MARKER_SHAPES, f as hbar, g as rect, h as polyline, i as eventsGap, l as circle, m as markerPath, n as drawBands, o as isRefusal, p as line, r as drawMarks, s as table, t as EVENTS_READ, u as hatch, v as text, w as plural, x as esc, y as titled } from "./events-Cw6abvgR.js";
+import { $ as esc, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as capitalize, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as wrap, b as TIERS_BEST_FIRST, d as drawGroups, et as fitLines, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textWidth, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as plural, o as checkerColor, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as textBlock, s as EVENTS_READ, t as timeline, tt as listJoin, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-BAwebuqb.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -526,138 +526,6 @@ function draw$2(rows, total, width, short) {
 	return svgRoot(width, top + rows.length * rowH + 2, body);
 }
 //#endregion
-//#region src/format.ts
-const TIERS_BEST_FIRST = [
-	"S",
-	"A",
-	"B",
-	"C",
-	"F"
-];
-const LADDER = [
-	"F",
-	"C",
-	"B",
-	"A",
-	"S"
-];
-function tierAtLeast(tier, floor) {
-	return LADDER.indexOf(tier) >= LADDER.indexOf(floor);
-}
-function pct(value) {
-	return `${Math.round(value * 100)}%`;
-}
-/** A difference in points: "+25 pts". */
-function pts(value) {
-	const n = Math.round(value * 100);
-	return `${n > 0 ? "+" : n < 0 ? "−" : ""}${Math.abs(n)} pts`;
-}
-function usd(value) {
-	if (value >= 100) return `$${Math.round(value).toLocaleString("en-US")}`;
-	if (value >= 1) return `$${value.toFixed(2)}`;
-	if (value >= .01) return `$${value.toFixed(3)}`;
-	return `$${value.toFixed(4)}`;
-}
-/** Axis ticks: "$30", "$2.5", "$0.05". */
-function usdTick(value) {
-	return `$${Number(value.toPrecision(2)).toLocaleString("en-US", { maximumFractionDigits: 4 })}`;
-}
-function duration(ms) {
-	const s = ms / 1e3;
-	if (s < 60) return `${Math.round(s)} s`;
-	if (s < 3600) return `${(s / 60).toFixed(1)} min`;
-	return `${(s / 3600).toFixed(1)} h`;
-}
-function kn(k, n) {
-	return `${k}/${n}`;
-}
-const METHOD_NAME = {
-	"task-cluster-bootstrap": "task-clustered bootstrap",
-	"mcnemar-exact": "exact McNemar",
-	wilson: "Wilson score"
-};
-/** "95% Wilson score" */
-function intervalName(interval) {
-	return `${Math.round((interval.level ?? 0) * 100)}% ${interval.method ? METHOD_NAME[interval.method] : ""}`.trim();
-}
-/** Why an interval cannot be drawn, or null when it can. */
-function intervalGap(interval) {
-	if (!interval) return "no interval";
-	const missing = [interval.level === null ? "level" : "", interval.method === null ? "method" : ""].filter(Boolean);
-	if (missing.length) return `the interval names no ${missing.join(" or ")}`;
-	if (!(interval.method in METHOD_NAME)) return "the interval method is unknown";
-	if (!Number.isFinite(interval.level) || interval.level <= 0 || interval.level >= 1) return "the interval level is outside 0–1";
-	if (!Number.isFinite(interval.lower) || !Number.isFinite(interval.upper)) return "the interval bounds are not finite";
-	if (!(interval.lower <= interval.upper)) return "the interval bounds are out of order";
-	return null;
-}
-/** Whether a rate bar may be drawn for this estimate. */
-function drawable(estimate) {
-	return estimate === "descriptive" || estimate === "bootstrap";
-}
-function estimateNote(estimate, units) {
-	if (estimate === "none") return units === 1 ? "1 unit" : `${units} units`;
-	if (estimate === "insufficient") return "too few units";
-	return "";
-}
-/**
-* The positive cost per pass this figure can print or place, or null.
-* A zero value needs a separate verified-free representation; this field alone
-* cannot distinguish a free run from missing spend, so it prints "unknown".
-*/
-function perPass(cost) {
-	return cost.basis !== "unknown" && cost.perSolvedUsd !== null && Number.isFinite(cost.perSolvedUsd) && cost.perSolvedUsd > 0 ? cost.perSolvedUsd : null;
-}
-/** "$23.76", "$23.76 est.", "unknown", "no pass" */
-function costText(cost, solved) {
-	if (solved === 0) return "no pass";
-	const value = perPass(cost);
-	if (value === null) return "unknown";
-	return cost.basis === "receipts" ? usd(value) : `${usd(value)} est.`;
-}
-/** Wilson can describe an eligible rate; clustered bootstrap needs the producer's bootstrap class. */
-function rateIntervalGap(row) {
-	if (!drawable(row.estimate)) return `${row.estimate} estimate`;
-	if (!Number.isFinite(row.rate) || row.rate < 0 || row.rate > 1) return "rate is outside 0–1";
-	const gap = intervalGap(row.interval);
-	if (gap) return gap;
-	if (row.interval.method === "mcnemar-exact") return "exact McNemar applies to paired comparisons, not rates";
-	if (row.estimate === "descriptive" && row.interval.method !== "wilson") return `descriptive estimate does not support ${intervalName(row.interval)}`;
-	if (row.interval.lower < 0 || row.interval.upper > 1) return "the rate interval is outside 0–1";
-	if (row.rate < row.interval.lower - 1e-6 || row.rate > row.interval.upper + 1e-6) return "the rate falls outside its interval";
-	return null;
-}
-/** Check the source arithmetic before using a rate in a finding or a mark. */
-function rateDataGap(row) {
-	if (!Number.isInteger(row.attempts) || row.attempts < 0 || !Number.isInteger(row.solved) || row.solved < 0 || row.solved > row.attempts) return "passed and attempt counts are invalid";
-	if (!Number.isFinite(row.rate) || row.rate < 0 || row.rate > 1) return "rate is outside 0–1";
-	if (row.attempts > 0 && Math.abs(row.rate - row.solved / row.attempts) > 1e-6) return "rate disagrees with passed/attempts";
-	if (row.attempts === 0 && row.rate !== 0) return "rate has no attempts";
-	if (drawable(row.estimate) && row.attempts === 0) return "drawable estimate has no attempts";
-	return null;
-}
-/**
-* The order rows are drawn in. Ranked rows keep their rank. Otherwise rows
-* with enough units to draw a rate come first, highest rate first; rows with
-* too few units follow, most units first, so a 1/1 row never heads the list.
-*/
-function rateOrder(rows) {
-	if (rows.length > 0 && rows.every((row) => row.rank !== null && row.estimate === "bootstrap")) return [...rows].sort((a, b) => a.rank - b.rank);
-	const drawn = rows.filter((row) => drawable(row.estimate)).sort((a, b) => b.rate - a.rate);
-	const counted = rows.filter((row) => !drawable(row.estimate)).sort((a, b) => b.attempts - a.attempts);
-	return [...drawn, ...counted];
-}
-/** "2A 1F" */
-function tierSummary(tiers, unmeasured = 0, flagged = 0) {
-	const parts = tiers ? TIERS_BEST_FIRST.filter((t) => tiers[t] > 0).map((t) => `${tiers[t]}${t}`) : [];
-	if (flagged) parts.push(`${flagged} flagged`);
-	if (unmeasured) parts.push(`${unmeasured}U`);
-	return parts.join(" ");
-}
-function tierTotal(tiers) {
-	return tiers ? LADDER.reduce((sum, t) => sum + tiers[t], 0) : 0;
-}
-//#endregion
 //#region src/scale.ts
 function linear(domain, range) {
 	const [d0, d1] = domain;
@@ -1268,7 +1136,7 @@ function plot$1(costed, unplaced, drawLine, o) {
 //#endregion
 //#region src/css.generated.ts
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
-const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 25px;\n  font-weight: 650;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 15px;\n  line-height: 23px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n";
+const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 25px;\n  font-weight: 650;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 15px;\n  line-height: 23px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted, .tgc-tick-other { stroke: var(--chart-outcome-neutral); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette for attempt outcomes and check versions in every view (src/outcomes.ts names them). Each is a\n * light-dark() pair picked by the page's color-scheme. Outcomes pass the dataviz colour-vision checks as adjacent\n * pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on the light surface and on #161616; checkers pass\n * as adjacent series (current, then older). `scripts/palette-check.mjs` re-runs the validator. A page may override\n * any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#2a78d6, #3987e5);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#1baf7a, #199e70);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#1baf7a, #199e70);\n  --chart-checker-2: light-dark(#6250d6, #9085e9);\n  --chart-checker-3: light-dark(#eda100, #c98500);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
 /** --chart-* resolved per theme, for documents without brand tokens: light, dark by preference or [data-theme="dark"], light in print. */
 const chartTokensCss = ":root{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}}";
 //#endregion
@@ -2304,11 +2172,433 @@ function metricBars(rows, o) {
 	};
 }
 //#endregion
+//#region src/axis.ts
+/**
+* Shared x and y axes for the recorded-scalar figures: an ordinal x of weighted categories (release tags grouped by
+* run) or a continuous one, and a linear or log y with caller-named gridlines and target bands. Validation lives
+* here so `timeSeries` and `smallMultiples` refuse the same inputs with the same sentences.
+*/
+const TARGET_KINDS = ["target", "stretch"];
+/** Why categories cannot be drawn on `domain`, or null. */
+function categoriesGap(categories, domain) {
+	if (categories === void 0) return null;
+	if (!Array.isArray(categories) || !categories.length) return "An ordinal axis needs at least one category.";
+	let previous = -Infinity;
+	for (const category of categories) {
+		if (!category || typeof category.label !== "string") return "Every category needs a label.";
+		if (!Number.isFinite(category.at) || category.at <= previous || category.at < domain[0] || category.at > domain[1]) return `${category.label}: category positions must be finite, strictly increasing and inside the axis domain.`;
+		if (category.weight !== void 0 && (!Number.isFinite(category.weight) || category.weight <= 0)) return `${category.label}: a category weight must be a positive number.`;
+		previous = category.at;
+	}
+	return null;
+}
+/** Why a y axis (scale, gridlines and targets) cannot be drawn on `domain`, or null. */
+function yAxisGap(y, label = "The y axis") {
+	if (y.scale !== void 0 && y.scale !== "linear" && y.scale !== "log") return `${label}: the scale is linear or log.`;
+	if (y.scale === "log" && !(y.domain[0] > 0)) return `${label}: a log axis needs a positive domain.`;
+	const inside = (v) => Number.isFinite(v) && v >= y.domain[0] && v <= y.domain[1];
+	for (const tick of y.ticks ?? []) {
+		if (!tick || typeof tick.label !== "string" || !tick.label.trim()) return `${label}: every gridline needs a label.`;
+		if (!inside(tick.at)) return `${label}: gridline ${tick.label} is outside the axis domain.`;
+	}
+	for (const target of y.targets ?? []) {
+		if (!target || typeof target.label !== "string" || !target.label.trim()) return `${label}: every target needs a label.`;
+		if (!TARGET_KINDS.includes(target.kind)) return `${target.label}: a target kind is target or stretch.`;
+		if (!inside(target.from) || !inside(target.to) || target.from > target.to) return `${target.label}: a target needs finite, ordered bounds inside the axis domain.`;
+	}
+	return null;
+}
+/** Why a value cannot sit on this y scale, beyond the domain check. */
+function logValueGap(value, scale) {
+	return scale === "log" && value !== null && !(value > 0) ? "A log axis cannot place zero or a negative value." : null;
+}
+/** A continuous x, or an ordinal x whose columns divide [left, right] by weight; values between categories interpolate. */
+function xAxis(domain, categories, left, right) {
+	if (!categories?.length) {
+		const px = (x) => left + (x - domain[0]) / (domain[1] - domain[0]) * (right - left);
+		return {
+			px,
+			extent: (from, to) => [px(from), px(to)],
+			column: () => null,
+			category: () => void 0,
+			ats: null
+		};
+	}
+	const total = categories.reduce((sum, c) => sum + (c.weight ?? 1), 0);
+	const edges = [left];
+	for (const c of categories) edges.push(edges.at(-1) + (c.weight ?? 1) / total * (right - left));
+	const centres = categories.map((_, i) => (edges[i] + edges[i + 1]) / 2);
+	const index = new Map(categories.map((c, i) => [c.at, i]));
+	const px = (x) => {
+		const exact = index.get(x);
+		if (exact !== void 0) return centres[exact];
+		const first = categories[0], last = categories.at(-1);
+		if (x < first.at) return first.at === domain[0] ? centres[0] : left + (x - domain[0]) / (first.at - domain[0]) * (centres[0] - left);
+		if (x > last.at) return last.at === domain[1] ? centres.at(-1) : centres.at(-1) + (x - last.at) / (domain[1] - last.at) * (right - centres.at(-1));
+		let i = 0;
+		while (categories[i + 1].at < x) i++;
+		return centres[i] + (x - categories[i].at) / (categories[i + 1].at - categories[i].at) * (centres[i + 1] - centres[i]);
+	};
+	return {
+		px,
+		extent: (from, to) => [index.has(from) ? edges[index.get(from)] : px(from), index.has(to) ? edges[index.get(to) + 1] : px(to)],
+		column: (at) => index.has(at) ? edges[index.get(at) + 1] - edges[index.get(at)] : null,
+		category: (at) => index.has(at) ? categories[index.get(at)] : void 0,
+		ats: categories.map((c) => c.at)
+	};
+}
+/** A linear or log10 y between `bottom` (domain start) and `top`. */
+function yScale(domain, scale, top, bottom) {
+	if (scale === "log") {
+		const [a, b] = [Math.log10(domain[0]), Math.log10(domain[1])];
+		return (y) => bottom - (Math.log10(y) - a) / (b - a) * (bottom - top);
+	}
+	return (y) => bottom - (y - domain[0]) / (domain[1] - domain[0]) * (bottom - top);
+}
+/** The y gridlines: the caller's, else log ticks (1, 2, 5 × 10^k) or `count` even steps. */
+function yGridlines(y, label, count = 5) {
+	if (y.ticks?.length) return [...y.ticks];
+	if (y.scale === "log") {
+		const ticks = logTicks(y.domain[0], y.domain[1]);
+		return (ticks.length ? ticks : [y.domain[0], y.domain[1]]).map((at) => ({
+			at,
+			label: label(at)
+		}));
+	}
+	return Array.from({ length: count }, (_, i) => y.domain[0] + i / (count - 1) * (y.domain[1] - y.domain[0])).map((at) => ({
+		at,
+		label: label(at)
+	}));
+}
+/** Target bands under the data, labelled above their upper edge: a target at the right end, a stretch at the left. */
+function drawTargets(targets, py, left, right, yLabel, labels = true) {
+	return targets.map((target) => {
+		const y0 = py(target.to), y1 = py(target.from);
+		const cls = `tgc-target tgc-target-${target.kind}`;
+		const mark = y1 - y0 < 1.5 ? line(left, y0, right, y0, `${cls} tgc-target-line`) : rect(left, y0, right - left, y1 - y0, cls) + line(left, y0, right, y0, `${cls}-edge`) + line(left, y1, right, y1, `${cls}-edge`);
+		return titled(`${target.label}: ${target.from === target.to ? yLabel(target.from) : `${yLabel(target.from)} to ${yLabel(target.to)}`}`, `<g data-target="${target.kind}">${mark}</g>`);
+	}).join("") + (labels ? targets.map((target) => text(target.kind === "stretch" ? left + 4 : right - 4, py(target.to) - 4, target.label, {
+		size: 11,
+		anchor: target.kind === "stretch" ? "start" : "end",
+		cls: "tgc-target-label"
+	})).join("") : "");
+}
+/** A key row naming each target by its line style, for a panel too small to label bands in place. Returns its width. */
+function targetKey(targets, x, y, maxWidth) {
+	let out = "", at = x;
+	for (const target of targets) {
+		const w = textWidth(target.label, 10) * 1.1 + 34;
+		if (at + w - x > maxWidth) break;
+		out += line(at, y - 3.5, at + 14, y - 3.5, `tgc-target-${target.kind}-edge`) + text(at + 18, y, target.label, {
+			size: 10,
+			cls: "tgc-target-label"
+		});
+		at += w;
+	}
+	return out;
+}
+/** The table form of target bands. Empty when there are none. */
+function targetsTable(targets, yLabel) {
+	if (!targets.length) return "";
+	return table("Recorded targets", [
+		{ label: "Target" },
+		{ label: "Kind" },
+		{
+			label: "From",
+			numeric: true
+		},
+		{
+			label: "To",
+			numeric: true
+		}
+	], targets.map((t) => [
+		t.label,
+		t.kind,
+		yLabel(t.from),
+		yLabel(t.to)
+	]));
+}
+/**
+* X labels at recorded positions, spread evenly across the plot and measured so none overlap: at most as many as fit,
+* each snapped to the nearest recorded x, always keeping the first and the last that fit.
+*/
+function xTicks(xs, px, left, right, width, label, size = 12) {
+	if (!xs.length) return [];
+	const span = (x) => {
+		const w = textWidth(label(x), size, "mono");
+		return [px(x) - w / 2, px(x) + w / 2];
+	};
+	const widest = Math.max(...xs.map((x) => textWidth(label(x), size, "mono")));
+	const slots = Math.max(1, Math.min(xs.length, Math.floor((right - left) / (widest + 12)) + 1));
+	const anchors = slots === 1 ? [xs[0]] : Array.from({ length: slots }, (_, i) => left + (right - left) * i / (slots - 1)).map((target) => xs.reduce((best, x) => Math.abs(px(x) - target) < Math.abs(px(best) - target) ? x : best, xs[0]));
+	const kept = [];
+	for (const x of [...new Set(anchors)]) {
+		const [a, b] = span(x);
+		if (a < 2 || b > width - 2) continue;
+		const previous = kept.at(-1);
+		if (previous !== void 0 && a < span(previous)[1] + 10) {
+			if (x !== xs.at(-1) || kept.length === 1) continue;
+			kept.pop();
+		}
+		kept.push(x);
+	}
+	return kept;
+}
+const TURN = 40;
+const SIN = Math.sin(TURN * Math.PI / 180);
+const COS = Math.cos(TURN * Math.PI / 180);
+/** The fit for labels of `size` px in columns no narrower than `narrowest` px, and the extra height turned labels take. */
+function columnLabelFit(labels, narrowest, size) {
+	if (!labels.length) return {
+		fit: "level",
+		extra: 0
+	};
+	const widest = Math.max(...labels.map((l) => textWidth(l, size, "mono")));
+	if (widest + 4 <= narrowest) return {
+		fit: "level",
+		extra: 0
+	};
+	if (narrowest >= size + 2) return {
+		fit: "turned",
+		extra: Math.ceil(widest * SIN + size * COS - size)
+	};
+	return {
+		fit: "thin",
+		extra: 0
+	};
+}
+/**
+* Ordinal column labels with their baseline at `y`: every column level when they fit, every column turned 40° when
+* the columns are at least a line high, otherwise as many level labels as fit.
+*/
+function columnLabels(xs, px, fit, left, right, width, label, size, y) {
+	const level = (x) => text(px(x), y, label(x), {
+		anchor: "middle",
+		size,
+		cls: "tgc-ink-muted tgc-num"
+	});
+	if (fit === "level") return xs.map(level).join("");
+	if (fit === "thin") return xTicks(xs, px, left, right, width, label, size).map(level).join("");
+	const r2 = (n) => Math.round(n * 100) / 100;
+	return xs.map((x) => `<text class="tgc-ink-muted tgc-num tgc-turned" x="${r2(px(x) + 3)}" y="${r2(y - size / 2)}" font-size="${size}" text-anchor="end" transform="rotate(-${TURN} ${r2(px(x) + 3)} ${r2(y - size / 2)})">${esc(label(x))}</text>`).join("");
+}
+//#endregion
+//#region src/points.ts
+/**
+* Recorded marks on a scalar axis that carry more than a value: a verdict (filled, outlined or hatched), how many
+* recorded rows the mark stands for, when they were first and last recorded, whether the value is comparable with
+* the goal, a status glyph and a short direct label. The producer records every field; nothing here is inferred.
+*/
+const POINT_GLYPHS = ["check", "cross"];
+/** Why a point's recorded fields cannot be drawn, or null. */
+function pointFieldsGap(p) {
+	if (p.verdict !== void 0 && !MARK_VERDICTS.includes(p.verdict)) return "A verdict is pass, fail or unknown.";
+	if (p.count !== void 0 && (!Number.isInteger(p.count) || p.count < 1)) return "A count is a whole number of at least 1.";
+	for (const at of [p.firstAt, p.lastAt]) if (at !== void 0 && !Number.isFinite(at)) return "First and last times must be finite.";
+	if (p.firstAt !== void 0 && p.lastAt !== void 0 && p.firstAt > p.lastAt) return "The first time is after the last.";
+	if (p.comparable !== void 0 && p.comparable !== null && typeof p.comparable !== "boolean") return "Comparable is true, false or null.";
+	if (p.glyph !== void 0 && !POINT_GLYPHS.includes(p.glyph)) return "A glyph is check or cross.";
+	if (p.marker !== void 0 && !MARKER_SHAPES.includes(p.marker)) return "A marker is circle, square, triangle or diamond.";
+	if (p.label !== void 0 && (typeof p.label !== "string" || !p.label.trim())) return "A point label needs text.";
+	return null;
+}
+/** Whether any point uses the recorded fields, so a figure adds their table columns only when they carry data. */
+function hasPointFields(points) {
+	return points.some((p) => p.verdict !== void 0 || p.count !== void 0 || p.firstAt !== void 0 || p.lastAt !== void 0 || p.comparable !== void 0 || p.glyph !== void 0 || p.label !== void 0);
+}
+const utc = (ms) => `${new Date(ms).toISOString().slice(5, 16).replace("T", " ")}Z`;
+const VERDICT_WORD = {
+	pass: "pass",
+	fail: "fail",
+	unknown: "undecided"
+};
+/** The recorded fields as hover lines. */
+function pointFacts(p) {
+	return [
+		...p.verdict ? [`Verdict: ${VERDICT_WORD[p.verdict]}`] : [],
+		...p.count !== void 0 && p.count > 1 ? [`${p.count} recorded rows`] : [],
+		...p.firstAt !== void 0 || p.lastAt !== void 0 ? [`${p.firstAt !== void 0 ? `First ${utc(p.firstAt)}` : ""}${p.firstAt !== void 0 && p.lastAt !== void 0 ? ", " : ""}${p.lastAt !== void 0 ? `last ${utc(p.lastAt)}` : ""}`] : [],
+		...p.comparable === false ? ["Not comparable with the goal (*)"] : p.comparable === null ? ["Comparability unknown (?)"] : [],
+		...p.glyph === "check" ? ["✓ solved"] : p.glyph === "cross" ? ["✕ failing"] : []
+	];
+}
+/** The table cells for the recorded fields: verdict, count, first, last, comparable. */
+function pointCells(p) {
+	return [
+		p.verdict ? VERDICT_WORD[p.verdict] + (p.glyph === "check" ? " ✓" : p.glyph === "cross" ? " ✕" : "") : "",
+		p.count === void 0 ? "" : String(p.count),
+		p.firstAt === void 0 ? "" : utc(p.firstAt),
+		p.lastAt === void 0 ? "" : utc(p.lastAt),
+		p.comparable === void 0 ? "" : p.comparable === null ? "unknown" : p.comparable ? "yes" : "no"
+	];
+}
+const POINT_COLUMNS = [
+	{ label: "Verdict" },
+	{
+		label: "Rows",
+		numeric: true
+	},
+	{
+		label: "First",
+		numeric: true
+	},
+	{
+		label: "Last",
+		numeric: true
+	},
+	{ label: "Comparable" }
+];
+/**
+* The mark: filled for a pass (or no verdict), outlined for a fail, a not-comparable value or an unknown
+* comparability, dashed for an undecided verdict.
+*/
+function pointMark(x, y, shape, r, p) {
+	const outline = p.verdict === "fail" || p.comparable === false || p.comparable === null;
+	return `<path class="${p.verdict === "unknown" ? "tgc-series-point tgc-point-undecided" : outline ? "tgc-series-point tgc-point-outline" : "tgc-series-point"}" d="${markerPath(shape, x, y, r)}"/>`;
+}
+/**
+* Text beside a mark: the status glyph, `*` or `?`, the label and `×n`. Drawn to the right, or to the left when it
+* would cross `limit`; returns the markup and its width so a caller can skip it when the column has no room.
+*/
+function pointBadge(x, y, r, p, limit) {
+	const parts = [];
+	if (p.glyph === "check") parts.push(["✓", "tgc-glyph-check"]);
+	if (p.glyph === "cross") parts.push(["✕", "tgc-glyph-cross"]);
+	if (p.comparable === false) parts.push(["*", "tgc-glyph-note"]);
+	if (p.comparable === null) parts.push(["?", "tgc-glyph-note"]);
+	if (p.label) parts.push([p.label, "tgc-point-label"]);
+	if (p.count !== void 0 && p.count > 1) parts.push([`×${p.count}`, "tgc-point-label"]);
+	if (!parts.length) return {
+		svg: "",
+		width: 0
+	};
+	const width = textWidth(parts.map(([t]) => t).join(" "), 10, "mono");
+	const left = x + r + 3 + width > limit;
+	const tx = left ? x - r - 3 : x + r + 3;
+	const spans = parts.map(([t, cls], i) => `<tspan class="${cls}">${i ? " " : ""}${esc(t)}</tspan>`).join("");
+	return {
+		svg: `<text class="tgc-point-badge" x="${Math.round(tx * 100) / 100}" y="${Math.round((y + 3.5) * 100) / 100}" font-size="10"${left ? " text-anchor=\"end\"" : ""}>${spans}</text>`,
+		width
+	};
+}
+/** A verdict recorded without a value: a square in the strip under the plot, hatched when undecided. */
+function stripMark(x, y, size, p) {
+	const h = size / 2;
+	if (p.verdict === "unknown") return `<g class="tgc-strip-mark tgc-point-undecided">${hatch(x - h, y - h, size, size, "tgc-strip-hatch")}${rect(x - h, y - h, size, size, "tgc-strip-edge")}</g>`;
+	return rect(x - h, y - h, size, size, p.verdict === "fail" ? "tgc-series-point tgc-point-outline" : "tgc-series-point");
+}
+/**
+* Places each mark's badge to its right, or to its left at the plot's edge, skipping any that would cover a mark or
+* an earlier badge: a skipped badge stays in the mark's hover and the table. Solves and failing candidates go first.
+*/
+function placeBadges(pending, marks, left, right) {
+	const placed = [...marks];
+	const free = (box) => box[0] >= left && box[1] <= right && placed.every((b) => box[1] < b[0] || box[0] > b[1] || box[3] < b[2] || box[2] > b[3]);
+	const rank = (p) => p.glyph ? 0 : p.comparable !== void 0 && p.comparable !== true ? 1 : p.label ? 2 : 3;
+	let out = "";
+	for (const { x, y, r, point } of [...pending].sort((a, b) => rank(a.point) - rank(b.point))) {
+		const badge = pointBadge(x, y, r, point, right);
+		if (!badge.svg) continue;
+		const box = badge.svg.includes("text-anchor=\"end\"") ? [
+			x - r - 3 - badge.width,
+			x - r - 3,
+			y - 6,
+			y + 6
+		] : [
+			x + r + 3,
+			x + r + 3 + badge.width,
+			y - 6,
+			y + 6
+		];
+		if (!free(box)) continue;
+		placed.push(box);
+		out += badge.svg;
+	}
+	return out;
+}
+/**
+* A key row for the recorded fields the points use: shapes the caller named, filled and outlined verdicts, the
+* strip, the status glyphs, `*`, `?` and `×n`. Only what the data contains is listed; items wrap to `width`.
+*/
+function verdictKey(points, markers, x, y, width) {
+	if (!hasPointFields(points)) return {
+		svg: "",
+		height: 0
+	};
+	const has = (test) => points.some(test);
+	const shape = (s, cls) => (gx, gy) => `<path class="tgc-key-mark ${cls}" d="${markerPath(s, gx + 5, gy - 4, 4)}"/>`;
+	const sign = (t, cls) => (gx, gy) => text(gx + 1, gy, t, {
+		size: 11,
+		cls
+	});
+	const items = [
+		...MARKER_SHAPES.filter((s) => markers?.[s] && has((p) => p.marker === s)).map((s) => ({
+			glyph: shape(s, "tgc-key-filled"),
+			label: markers[s]
+		})),
+		...has((p) => p.y !== null && p.verdict === "pass") ? [{
+			glyph: shape("circle", "tgc-key-filled"),
+			label: "filled: pass"
+		}] : [],
+		...has((p) => p.y !== null && (p.verdict === "fail" || p.comparable !== void 0 && p.comparable !== true)) ? [{
+			glyph: shape("circle", "tgc-key-outline"),
+			label: "outline: fail or not comparable"
+		}] : [],
+		...has((p) => p.y !== null && p.verdict === "unknown") ? [{
+			glyph: shape("circle", "tgc-key-dashed"),
+			label: "dashed: undecided"
+		}] : [],
+		...has((p) => p.y === null && p.verdict !== void 0) ? [{
+			glyph: (gx, gy) => `<g class="tgc-key-strip">${hatch(gx + 1, gy - 8, 8, 8, "tgc-strip-hatch")}${rect(gx + 1, gy - 8, 8, 8, "tgc-strip-edge")}</g>`,
+			label: "square: verdict without a value"
+		}] : [],
+		...has((p) => p.glyph === "check") ? [{
+			glyph: sign("✓", "tgc-glyph-check"),
+			label: "solved"
+		}] : [],
+		...has((p) => p.glyph === "cross") ? [{
+			glyph: sign("✕", "tgc-glyph-cross"),
+			label: "failing candidate"
+		}] : [],
+		...has((p) => p.comparable === false) ? [{
+			glyph: sign("*", "tgc-glyph-note"),
+			label: "not comparable"
+		}] : [],
+		...has((p) => p.comparable === null) ? [{
+			glyph: sign("?", "tgc-glyph-note"),
+			label: "comparability unknown"
+		}] : [],
+		...has((p) => (p.count ?? 1) > 1) ? [{
+			glyph: sign("×n", "tgc-point-label"),
+			label: "recorded rows"
+		}] : []
+	];
+	let svg = "", at = x, line = 0;
+	for (const item of items) {
+		const lead = item.label === "recorded rows" ? 24 : 16;
+		const w = lead + textWidth(item.label, 11) * 1.1 + 16;
+		if (at > x && at + w - x > width) {
+			at = x;
+			line++;
+		}
+		const gy = y + 12 + line * 16;
+		svg += item.glyph(at, gy) + text(at + lead, gy, item.label, {
+			size: 11,
+			cls: "tgc-ink-muted"
+		});
+		at += w;
+	}
+	return {
+		svg: items.length ? `<g class="tgc-verdict-key">${svg}</g>` : "",
+		height: items.length ? (line + 1) * 16 + 8 : 0
+	};
+}
+//#endregion
 //#region src/time-series.ts
 /** Recorded trajectories. Explicit null observations break lines without interpolation. */
 function timeSeries(rows, o) {
 	const id = o.id ?? "time-series";
-	const gap = domainGap(o.x.domain) ?? domainGap(o.y.domain);
+	const gap = domainGap(o.x.domain) ?? domainGap(o.y.domain) ?? categoriesGap(o.x.categories, o.x.domain) ?? yAxisGap(o.y);
 	if (gap) return {
 		id,
 		refused: gap
@@ -2326,24 +2616,32 @@ function timeSeries(rows, o) {
 		id,
 		refused: "Duplicate trajectory ids."
 	};
+	const columns = o.x.categories?.length ? new Set(o.x.categories.map((c) => c.at)) : null;
 	for (const row of rows) {
+		if (row.colorIndex !== void 0 && (!Number.isInteger(row.colorIndex) || row.colorIndex < 0)) return {
+			id,
+			refused: `${row.label}: a colour index is a whole number of at least 0.`
+		};
 		let previous = -Infinity;
 		for (const point of row.points) {
-			if (!Number.isFinite(point.x) || point.x <= previous || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
+			const ordered = columns ? point.x >= previous && columns.has(point.x) : point.x > previous;
+			if (!Number.isFinite(point.x) || !ordered || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
 				id,
-				refused: `${row.label}: x values must be finite, strictly increasing and inside the axis domain.`
+				refused: columns ? `${row.label}: x values must be categories, in order.` : `${row.label}: x values must be finite, strictly increasing and inside the axis domain.`
 			};
 			previous = point.x;
-			const problem = scalarGap(point.y, point.interval, point.observations, o.y.domain);
+			const problem = scalarGap(point.y, point.interval, point.observations, o.y.domain) ?? logValueGap(point.y, o.y.scale) ?? logValueGap(point.interval?.lower ?? null, o.y.scale) ?? pointFieldsGap(point);
 			if (problem) return {
 				id,
 				refused: `${row.label} at ${point.x}: ${problem}`
 			};
 		}
 	}
-	const xLabel = (x) => o.formatX ? o.formatX(x) : String(x);
+	const category = new Map((o.x.categories ?? []).map((c) => [c.at, c.label]));
+	const xLabel = (x) => o.formatX ? o.formatX(x) : category.get(x) ?? String(x);
 	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
-	if (axisGutter(Array.from({ length: 5 }, (_, i) => o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0])), yLabel) >= 270) return {
+	const grid = yGridlines(o.y, yLabel);
+	if (axisGutter(grid) >= 270) return {
 		id,
 		refused: "Formatted y-axis labels leave no room for the phone chart. Use a shorter formatter or unit."
 	};
@@ -2352,263 +2650,202 @@ function timeSeries(rows, o) {
 		point
 	})));
 	const measured = flat.filter(({ point }) => point.y !== null);
+	const stripped = flat.filter(({ point }) => point.y === null && point.verdict !== void 0);
+	const recorded = hasPointFields(flat.map(({ point }) => point));
 	const marks = o.marks ?? [], bands = o.bands ?? [];
 	const hasEvents = marks.length + bands.length > 0;
+	const groups = bands.some((band) => band.kind === "group");
+	const stripName = o.y.strip?.trim() || "no value";
+	const valueText = (point) => point.y !== null ? yLabel(point.y) : point.verdict !== void 0 ? `${stripName} (${VERDICT_WORD[point.verdict]})` : "not measured";
 	const facts = (row, point) => [
 		row.label,
 		`${o.x.label}: ${xLabel(point.x)}`,
-		`${o.y.label}: ${point.y === null ? "not measured" : yLabel(point.y)}`,
-		observationLabel(point.observations),
+		`${o.y.label}: ${valueText(point)}`,
+		...point.label ? [point.label] : [],
+		...pointFacts(point),
+		...point.observations || !hasPointFields([point]) ? [observationLabel(point.observations)] : [],
 		...point.interval ? [`Interval: ${scalarIntervalLabel(point.interval, o.y.unit, o.formatY)}`] : [],
 		...point.annotation ? [point.annotation] : []
 	];
+	const head = [
+		{ label: "Setup" },
+		{
+			label: o.x.label,
+			numeric: true
+		},
+		{
+			label: o.y.label,
+			numeric: true
+		},
+		{ label: "Observations" },
+		{ label: "Recorded interval" },
+		{ label: "Recorded annotation" },
+		...recorded ? [{ label: "Label" }, ...POINT_COLUMNS] : []
+	];
+	const cells = (row, point) => [
+		row.label,
+		xLabel(point.x),
+		point.y === null ? point.verdict !== void 0 ? `${stripName} (${VERDICT_WORD[point.verdict]})` : "not measured" : yLabel(point.y),
+		observationLabel(point.observations),
+		scalarIntervalLabel(point.interval, o.y.unit, o.formatY),
+		point.annotation ?? "",
+		...recorded ? [point.label ?? "", ...pointCells(point)] : []
+	];
 	return {
 		id,
 		finding: `${capitalize(o.y.label)} by ${o.x.label}.`,
-		lede: `${measured.length} of ${flat.length} positions have a recorded value.`,
-		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${hasEvents ? ` ${EVENTS_READ}` : ""}`,
+		lede: `${measured.length} of ${flat.length} positions have a recorded value.${stripped.length ? ` ${stripped.length} recorded ${plural(stripped.length, "verdict")} without a value ${stripped.length === 1 ? "sits" : "sit"} in the strip under the plot.` : ""}`,
+		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${recorded ? " A filled mark is a pass, an outline a fail, a dashed outline undecided; * is not comparable with the goal and ? of unknown comparability; ×n counts the recorded rows a mark stands for." : ""}${stripped.length ? ` Hatched squares under the plot are verdicts recorded without a value (${stripName}).` : ""}${o.y.targets?.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${groups ? " Brackets above the plot group positions, such as one run's releases." : ""}${hasEvents ? ` ${EVENTS_READ}` : ""}`,
 		svg: {
-			wide: plot(rows, o, 720, xLabel, yLabel, facts),
-			narrow: plot(rows, o, 358, xLabel, yLabel, facts),
+			wide: plot(rows, o, 720, xLabel, yLabel, grid, facts, stripName),
+			narrow: plot(rows, o, 358, xLabel, yLabel, grid, facts, stripName),
 			interactive: true
 		},
-		table: table(`${capitalize(o.y.label)} by ${o.x.label}`, [
-			{ label: "Setup" },
-			{
-				label: o.x.label,
-				numeric: true
-			},
-			{
-				label: o.y.label,
-				numeric: true
-			},
-			{ label: "Observations" },
-			{ label: "Recorded interval" },
-			{ label: "Recorded annotation" }
-		], flat.map(({ row, point }) => [
-			row.label,
-			xLabel(point.x),
-			point.y === null ? "not measured" : yLabel(point.y),
-			observationLabel(point.observations),
-			scalarIntervalLabel(point.interval, o.y.unit, o.formatY),
-			point.annotation ?? ""
-		])).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\"") + eventsTable(marks, bands, o.x.label, xLabel),
+		table: table(`${capitalize(o.y.label)} by ${o.x.label}`, head, flat.map(({ row, point }) => cells(row, point))).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\"") + targetsTable(o.y.targets ?? [], yLabel) + eventsTable(marks, bands, o.x.label, xLabel),
 		note: {
 			method: "Recorded scalar observations. Missing positions are not interpolated; no uncertainty or statistical comparison is inferred.",
 			n: "Observation counts are recorded separately at each position.",
-			exclusions: [...flat.filter(({ point }) => point.y === null).map(({ row, point }) => `${row.label}, ${o.x.label} ${xLabel(point.x)}: not measured.`), ...bands.filter((band) => band.kind === "missing").map((band) => `${band.label}: no data from ${o.x.label} ${xLabel(band.from)} to ${xLabel(band.to)}.`)]
+			exclusions: [...flat.filter(({ point }) => point.y === null).map(({ row, point }) => `${row.label}, ${o.x.label} ${xLabel(point.x)}: ${point.verdict !== void 0 ? `${VERDICT_WORD[point.verdict]}${point.count && point.count > 1 ? ` ×${point.count}` : ""}, no value` : "not measured"}.`), ...bands.filter((band) => band.kind === "missing").map((band) => `${band.label}: no data from ${o.x.label} ${xLabel(band.from)} to ${xLabel(band.to)}.`)]
 		}
 	};
 }
-function plot(rows, o, width, xLabel, yLabel, facts) {
-	const ticks = Array.from({ length: 5 }, (_, i) => o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0]));
-	const left = axisGutter(ticks, yLabel);
-	const right = width - 24, top = 36, bottom = 260;
-	const px = (x) => left + (x - o.x.domain[0]) / (o.x.domain[1] - o.x.domain[0]) * (right - left);
-	const py = (y) => bottom - (y - o.y.domain[0]) / (o.y.domain[1] - o.y.domain[0]) * 224;
+function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
+	const left = axisGutter(grid);
+	const right = width - 24;
+	const axis = xAxis(o.x.domain, o.x.categories, left, right);
+	const px = axis.px;
+	const labelRows = markLabelRows(o.marks ?? [], px, left, right);
+	const top = 36 + (labelRows ? labelRows * 14 + 2 : 0) + groupRowHeight(o.bands), bottom = top + 224;
+	const py = yScale(o.y.domain, o.y.scale, top, bottom);
+	const strip = rows.some((row) => row.points.some((point) => point.y === null && point.verdict !== void 0)) ? 24 : 0;
 	let marks = text(left, 18, o.y.label, { cls: "tgc-ink-muted" });
-	for (const [i, y] of ticks.entries()) marks += line(left, py(y), right, py(y), i === 0 ? "tgc-axis" : "tgc-gridline") + text(left - 8, py(y) + 4, yLabel(y), {
+	for (const [i, tick] of grid.entries()) marks += line(left, py(tick.at), right, py(tick.at), i === 0 && !o.y.ticks?.length ? "tgc-axis" : "tgc-gridline") + text(left - 8, py(tick.at) + 4, tick.label, {
 		anchor: "end",
 		cls: "tgc-ink-muted tgc-num",
 		size: 12
 	});
-	const xs = [...new Set(rows.flatMap((row) => row.points.map((point) => point.x)))].sort((a, b) => a - b);
-	const tickStep = Math.max(1, Math.ceil(xs.length / (width < 720 ? 5 : 10)));
-	for (const [i, x] of xs.entries()) if (i % tickStep === 0 || i === xs.length - 1) marks += text(px(x), 280, xLabel(x), {
+	if (o.y.ticks?.length) marks += line(left, bottom, right, bottom, "tgc-axis");
+	marks += drawTargets(o.y.targets ?? [], py, left, right, yLabel);
+	const recordedXs = [...new Set(rows.flatMap((row) => row.points.map((point) => point.x)))].sort((a, b) => a - b);
+	const full = (o.x.categories ?? []).filter((c) => (c.weight ?? 1) >= 1).map((c) => c.at);
+	const xs = (axis.ats ? full.length ? full : axis.ats : recordedXs).filter((x) => xLabel(x) !== "");
+	let turn = 0;
+	if (axis.ats) {
+		const fit = columnLabelFit(xs.map(xLabel), Math.min(...xs.map((x) => axis.column(x))), 12);
+		turn = fit.extra;
+		marks += columnLabels(xs, px, fit.fit, left, right, width, xLabel, 12, bottom + strip + 20);
+	} else for (const x of xTicks(xs, px, left, right, width, xLabel)) marks += text(px(x), bottom + strip + 20, xLabel(x), {
 		anchor: "middle",
 		cls: "tgc-ink-muted tgc-num"
 	});
-	marks += text((left + right) / 2, 303, o.x.label, {
+	marks += text((left + right) / 2, bottom + strip + turn + 43, o.x.label, {
 		anchor: "middle",
 		cls: "tgc-ink-muted"
 	});
-	marks += drawBands(o.bands ?? [], px, top, bottom, xLabel);
-	let legendY = 332;
+	marks += drawBands(o.bands ?? [], px, top, bottom, xLabel, void 0, axis.extent);
+	marks += drawGroups(o.bands ?? [], axis.extent, top, bottom, left, right, xLabel);
+	if (strip) marks += text(left - 8, bottom + 16, stripName, {
+		anchor: "end",
+		cls: "tgc-ink-muted",
+		size: 11
+	}) + line(left, bottom + strip, right, bottom + strip, "tgc-gridline");
+	const spread = (inStrip) => {
+		const byX = /* @__PURE__ */ new Map();
+		for (const row of rows) for (const point of row.points) if (point.y === null === inStrip && (!inStrip || point.verdict !== void 0)) byX.set(point.x, [...byX.get(point.x) ?? [], point]);
+		const at = /* @__PURE__ */ new Map();
+		for (const [x, list] of byX) {
+			const room = axis.column(x);
+			const step = room === null ? 0 : Math.min(10, room / (list.length + 1));
+			list.forEach((point, k) => at.set(point, px(x) + (k - (list.length - 1) / 2) * step));
+		}
+		return at;
+	};
+	const plotX = spread(false), stripX = spread(true);
+	let legendY = bottom + strip + turn + 72;
 	let points = "", tips = "", rules = "";
+	const placed = [];
+	const pending = [];
 	let pointId = 0;
+	const legend = /* @__PURE__ */ new Set();
 	for (const [seriesIndex, row] of rows.entries()) {
-		const dash = seriesIndex === 0 ? "" : `${2 + seriesIndex * 2} 3`;
+		const ord = row.colorIndex ?? seriesIndex;
+		const dash = ord === 0 ? "" : `${2 + ord * 2} 3`;
+		const group = checkerClass(row.colorIndex);
+		const wrapSeries = (inner) => group ? `<g class="${group}">${inner}</g>` : inner;
 		let segment = [];
+		let lines = "";
 		const flush = () => {
-			if (segment.length > 1) marks += `<g data-series="${esc(row.id)}" style="stroke-dasharray:${dash}">${polyline(segment, "tgc-series-line")}</g>`;
+			if (segment.length > 1) lines += `<g data-series="${esc(row.id)}" style="stroke-dasharray:${dash}">${polyline(segment, "tgc-series-line")}</g>`;
 			segment = [];
 		};
+		let own = "";
 		for (const point of row.points) {
 			if (point.y === null) {
 				flush();
+				if (point.verdict === void 0) continue;
+				const x = stripX.get(point), y = bottom + 12, size = Math.min(9, Math.max(3, (axis.column(point.x) ?? 11) - 2));
+				const title = facts(row, point).join(" · ");
+				own += titled(title, `<g class="tgc-strip-observation" data-strip="${esc(row.id)}" tabindex="0" role="img" aria-label="${esc(title)}">${rect(x - 8, y - 8, 16, 16, "tgc-series-hit")}${stripMark(x, y, size, point)}</g>`);
+				placed.push([
+					x - size / 2,
+					x + size / 2,
+					y - size / 2,
+					y + size / 2
+				]);
+				pending.push({
+					x,
+					y,
+					r: size / 2,
+					point
+				});
 				continue;
 			}
-			const x = px(point.x), y = py(point.y);
+			const x = plotX.get(point), y = py(point.y);
 			segment.push([x, y]);
 			const pointFacts = facts(row, point);
 			const key = pointId++;
-			let dot = circle(x, y, 10, "tgc-series-hit") + (seriesIndex === 0 ? circle(x, y, 3.5, "tgc-series-point") : `<path class="tgc-series-point" d="${markerPath(MARKER_SHAPES[seriesIndex % MARKER_SHAPES.length], x, y, 3.5)}"/>`);
+			const recorded = hasPointFields([point]) || point.marker !== void 0;
+			const r = recorded ? 4.5 : 3.5;
+			const shape = point.marker ?? (ord === 0 ? "circle" : MARKER_SHAPES[ord % MARKER_SHAPES.length]);
+			let dot = circle(x, y, 10, "tgc-series-hit") + (recorded ? pointMark(x, y, shape, r, point) : seriesIndex === 0 && ord === 0 ? circle(x, y, 3.5, "tgc-series-point") : `<path class="tgc-series-point" d="${markerPath(shape, x, y, 3.5)}"/>`);
 			if (point.interval) dot += line(x, py(point.interval.lower), x, py(point.interval.upper), "tgc-whisker") + line(x - 4, py(point.interval.lower), x + 4, py(point.interval.lower), "tgc-whisker") + line(x - 4, py(point.interval.upper), x + 4, py(point.interval.upper), "tgc-whisker");
-			points += `<g class="tgc-series-observation" data-point="${key}" tabindex="0" role="img" aria-label="${esc(pointFacts.join(" · "))}"><title>${esc(pointFacts.join(" · "))}</title>${dot}</g>`;
+			own += `<g class="tgc-series-observation" data-point="${key}" tabindex="0" role="img" aria-label="${esc(pointFacts.join(" · "))}"><title>${esc(pointFacts.join(" · "))}</title>${dot}</g>`;
+			placed.push([
+				x - r,
+				x + r,
+				y - r,
+				y + r
+			]);
+			if (recorded) pending.push({
+				x,
+				y,
+				r,
+				point
+			});
 			const tipWidth = Math.min(280, width - 24), tipX = Math.max(12, Math.min(width - tipWidth - 12, x - tipWidth / 2));
-			const lines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
-			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, lines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(lines, tipX + 12, 56, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
+			const tipLines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
+			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, tipLines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(tipLines, tipX + 12, top + 20, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
 			rules += `.tgc-trajectories:has([data-point="${key}"]:hover) [data-series-tip="${key}"],.tgc-trajectories:not(:has(.tgc-series-observation:hover)):has([data-point="${key}"]:focus-visible) [data-series-tip="${key}"]{opacity:1}`;
 		}
 		flush();
+		marks += wrapSeries(lines);
+		points += wrapSeries(own);
+		const legendKey = `${row.label}\u0000${row.colorIndex ?? `s${seriesIndex}`}`;
+		if (legend.has(legendKey)) continue;
+		legend.add(legendKey);
 		const label = wrap(row.label, right - left - 32, 12, "sans", 8);
-		marks += `<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + (rows.length > 1 ? `<path class="tgc-series-key" d="${markerPath(MARKER_SHAPES[seriesIndex % MARKER_SHAPES.length], left + 12, legendY - 4, 3.5)}"/>` : "") + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
+		marks += wrapSeries(`<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + (rows.length > 1 ? `<path class="tgc-series-key" d="${markerPath(row.colorIndex !== void 0 ? "circle" : MARKER_SHAPES[ord % MARKER_SHAPES.length], left + 12, legendY - 4, 3.5)}"/>` : "")) + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
 		legendY += label.lines.length * 16 + 8;
 	}
-	const events = drawMarks(o.marks ?? [], px, top, bottom, left, right, xLabel);
-	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${points}${tips}</svg>`;
+	const badges = placeBadges(pending, placed, left - 4, width - 2);
+	const key = verdictKey(rows.flatMap((row) => row.points), o.markers, left, legendY + 4, right - left);
+	legendY += key.height;
+	marks += key.svg;
+	const events = drawMarks(o.marks ?? [], px, top - groupRowHeight(o.bands), bottom, left, right, xLabel, 22);
+	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${points}${badges}${tips}</svg>`;
 }
-function axisGutter(ticks, label) {
-	return Math.max(64, ...ticks.map((value) => Math.ceil(textWidth(label(value), 12, "mono")) + 20));
-}
-//#endregion
-//#region src/timeline.ts
-/** Lanes of recorded spans on one time axis, with recorded marks; an open span runs to the supplied `now`. */
-const utcClock = (ms) => new Date(ms).toISOString().slice(11, 16);
-function timeline(lanes, o) {
-	const id = o.id ?? "timeline";
-	if (!lanes.length) return {
-		id,
-		refused: "No lanes recorded."
-	};
-	if (!o.measure?.trim()) return {
-		id,
-		refused: "A timeline needs a measure."
-	};
-	if (new Set(lanes.map((lane) => lane.id)).size !== lanes.length) return {
-		id,
-		refused: "Duplicate lane ids."
-	};
-	if (o.now !== void 0 && !Number.isFinite(o.now)) return {
-		id,
-		refused: "now must be a finite time."
-	};
-	const spans = lanes.flatMap((lane) => lane.spans.map((span) => ({
-		lane,
-		span
-	})));
-	for (const { lane, span } of spans) {
-		if (typeof span.state !== "string" || !span.state.trim()) return {
-			id,
-			refused: `${lane.label}: every span needs a state.`
-		};
-		if (!Number.isFinite(span.start) || span.end !== null && (!Number.isFinite(span.end) || span.end < span.start)) return {
-			id,
-			refused: `${lane.label}: span times must be finite and end at or after their start.`
-		};
-		if (span.end === null && o.now === void 0) return {
-			id,
-			refused: `${lane.label}: an open span needs now.`
-		};
-		if (span.end === null && o.now < span.start) return {
-			id,
-			refused: `${lane.label}: an open span starts after now.`
-		};
-	}
-	const shape = eventsGap(o.marks, o.bands);
-	if (shape) return {
-		id,
-		refused: shape
-	};
-	const marks = o.marks ?? [], bands = o.bands ?? [];
-	const ends = (span) => span.end ?? o.now;
-	const times = [
-		...spans.flatMap(({ span }) => [span.start, ends(span)]),
-		...marks.map((m) => m.at),
-		...bands.flatMap((b) => [b.from, b.to]),
-		...o.now === void 0 ? [] : [o.now]
-	];
-	if (!times.length) return {
-		id,
-		refused: "No spans, marks or bands recorded."
-	};
-	const t0 = o.start ?? Math.min(...times), t1 = o.end ?? Math.max(...times);
-	if (!Number.isFinite(t0) || !Number.isFinite(t1) || t1 <= t0) return {
-		id,
-		refused: "The window needs two finite, increasing times."
-	};
-	if (times.some((t) => t < t0 || t > t1)) return {
-		id,
-		refused: "A span, mark, band or now falls outside the recorded window."
-	};
-	const fmt = o.formatTime ?? utcClock;
-	const hatched = new Set(o.hatch ?? ["missing", "untraced"]), muted = new Set(o.muted ?? ["idle"]);
-	const open = spans.filter(({ span }) => span.end === null).length;
-	const noData = spans.filter(({ span }) => hatched.has(span.state));
-	const noDataMs = noData.reduce((sum, { span }) => sum + ends(span) - span.start, 0);
-	const spanLabel = (lane, span) => `${lane.label}: ${span.state} ${fmt(span.start)} to ${span.end === null ? `now (${fmt(o.now)}, open)` : fmt(span.end)}, ${duration(ends(span) - span.start)}${span.note ? ` · ${span.note}` : ""}`;
-	const draw = (width) => {
-		const phone = width === 358, left = phone ? 12 : 150, right = width - 16;
-		const top = marks.length ? 8 + Math.min(3, marks.length) * 14 + 4 : 8;
-		const rowH = phone ? 38 : 24, bottom = top + lanes.length * rowH;
-		const px = (t) => left + (t - t0) / (t1 - t0) * (right - left);
-		let body = drawBands(bands, px, top, bottom, fmt);
-		for (let i = 0; i <= 4; i++) {
-			const x = left + (right - left) * i / 4;
-			body += line(x, top, x, bottom, "tgc-gridline") + text(x, bottom + 16, fmt(t0 + (t1 - t0) * i / 4), {
-				size: 11,
-				cls: "tgc-ink-muted tgc-num",
-				anchor: i === 0 ? "start" : i === 4 ? "end" : "middle"
-			});
-		}
-		lanes.forEach((lane, i) => {
-			const y = top + i * rowH;
-			const label = wrap(lane.label, phone ? width - 24 : left - 10, phone ? 11 : 12, "sans", 1);
-			body += titled(lane.label, text(phone ? 12 : 2, y + (phone ? 12 : 16), label.lines[0], { size: phone ? 11 : 12 }));
-			const barY = y + (phone ? 18 : 5), barH = phone ? 14 : 14;
-			for (const span of lane.spans) {
-				const x = px(span.start), w = Math.max(1, px(ends(span)) - x);
-				const mark = hatched.has(span.state) ? hatch(x, barY, w, barH, "tgc-span tgc-span-missing") : rect(x, barY, w, barH, `tgc-span${muted.has(span.state) ? " tgc-span-muted" : ""}${span.end === null ? " tgc-span-open" : ""}`, "rx=\"2\"");
-				body += titled(spanLabel(lane, span), `<g data-state="${span.state.replace(/[^a-z0-9-]/gi, "")}"${span.end === null ? " data-open=\"true\"" : ""}>${mark}</g>`);
-			}
-		});
-		if (o.now !== void 0) body += line(px(o.now), top, px(o.now), bottom, "tgc-now") + text(px(o.now), bottom + 30, `now ${fmt(o.now)}`, {
-			size: 11,
-			cls: "tgc-ink tgc-num",
-			anchor: px(o.now) > (left + right) / 2 ? "end" : "start"
-		});
-		body += drawMarks(marks, px, 4, bottom, left, right, fmt);
-		return svgRoot(width, bottom + (o.now === void 0 ? 22 : 36), body);
-	};
-	return {
-		id,
-		finding: `${capitalize(o.measure)} across ${lanes.length} ${plural(lanes.length, "lane")}, ${fmt(t0)} to ${fmt(t1)}.`,
-		lede: `${spans.length} recorded ${plural(spans.length, "span")}; ${open} open${o.now === void 0 ? "" : ` at ${fmt(o.now)}`}; ${noData.length} without data (${duration(noDataMs)}).`,
-		read: `Each lane shows its recorded spans on one time axis. Muted spans are ${[...muted].join(", ") || "none"}; hatched spans have no data; an open span runs to now.${marks.length + bands.length ? ` ${EVENTS_READ}` : ""}`,
-		svg: {
-			wide: draw(720),
-			narrow: draw(358)
-		},
-		table: table(`${capitalize(o.measure)} by lane`, [
-			{ label: "Lane" },
-			{ label: "State" },
-			{
-				label: "Start",
-				numeric: true
-			},
-			{
-				label: "End",
-				numeric: true
-			},
-			{
-				label: "Duration",
-				numeric: true
-			},
-			{ label: "Note" }
-		], spans.map(({ lane, span }) => [
-			lane.label,
-			span.state,
-			fmt(span.start),
-			span.end === null ? "open" : fmt(span.end),
-			duration(ends(span) - span.start),
-			span.note ?? ""
-		])) + eventsTable(marks, bands, "time", fmt),
-		note: {
-			method: "Recorded span start and end times as supplied by the producer; open spans are drawn to the supplied now. No span is inferred, merged or reordered.",
-			n: `${spans.length} spans in ${lanes.length} lanes.`,
-			exclusions: noData.map(({ lane, span }) => `${lane.label}: ${span.state} ${fmt(span.start)} to ${span.end === null ? "now" : fmt(span.end)} has no data.`)
-		}
-	};
+function axisGutter(ticks) {
+	return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20));
 }
 //#endregion
 //#region src/small-multiples.ts
@@ -2623,15 +2860,16 @@ function smallMultiples(panels, o) {
 		id,
 		refused: "Small multiples need shared axes: both or x."
 	};
-	const axis = domainGap(o.x.domain) ?? domainGap(o.y.domain);
+	const axis = domainGap(o.x.domain) ?? domainGap(o.y.domain) ?? categoriesGap(o.x.categories, o.x.domain);
 	if (axis) return {
 		id,
 		refused: axis
 	};
-	if (!o.y.unit?.trim()) return {
+	if (o.columns !== void 0 && (!Number.isInteger(o.columns) || o.columns < 1)) return {
 		id,
-		refused: "Small multiples need a y unit."
+		refused: "Columns must be a whole number of at least 1."
 	};
+	const columns = o.x.categories?.length ? new Set(o.x.categories.map((c) => c.at)) : null;
 	if (!panels.length) return {
 		id,
 		refused: "No panels recorded."
@@ -2640,11 +2878,28 @@ function smallMultiples(panels, o) {
 		id,
 		refused: "Duplicate panel ids."
 	};
+	const ownUnits = o.shared === "x";
+	if (!o.y.unit?.trim() && !(ownUnits && panels.every((p) => p.unit?.trim()))) return {
+		id,
+		refused: "Small multiples need a y unit."
+	};
 	for (const panel of panels) {
-		if (panel.unit !== void 0 && panel.unit !== o.y.unit) return {
+		if (!ownUnits && panel.unit !== void 0 && panel.unit !== o.y.unit) return {
 			id,
 			refused: `Mixed units: ${panel.label} records ${panel.unit}, the figure draws ${o.y.unit}.`
 		};
+		if (ownUnits && panel.unit !== void 0 && !panel.unit.trim()) return {
+			id,
+			refused: `${panel.label}: a panel unit needs text.`
+		};
+		if (panel.format !== void 0 && !ownUnits) return {
+			id,
+			refused: `${panel.label}: a panel format needs shared: "x"; panels on a shared y axis use formatY.`
+		};
+		if (panel.format !== void 0 && typeof panel.format !== "function") return {
+			id,
+			refused: `${panel.label}: a panel format is a function.`
+		};
 		if (panel.missing) {
 			if (!panel.missing.why?.trim()) return {
 				id,
@@ -2665,19 +2920,24 @@ function smallMultiples(panels, o) {
 			id,
 			refused: `${panel.label}: an x-only shared figure needs each panel's y domain.`
 		};
-		const own = domainGap(domain);
+		const own = domainGap(domain) ?? yAxisGap({
+			domain,
+			scale: panel.scale,
+			targets: panel.targets
+		}, panel.label);
 		if (own) return {
 			id,
 			refused: `${panel.label}: ${own}`
 		};
 		let previous = -Infinity;
 		for (const point of panel.points) {
-			if (!Number.isFinite(point.x) || point.x <= previous || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
+			const ordered = columns ? point.x >= previous && columns.has(point.x) : point.x > previous;
+			if (!Number.isFinite(point.x) || !ordered || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
 				id,
-				refused: `${panel.label}: x values must be finite, strictly increasing and inside the shared domain.`
+				refused: columns ? `${panel.label}: x values must be categories, in order.` : `${panel.label}: x values must be finite, strictly increasing and inside the shared domain.`
 			};
 			previous = point.x;
-			const problem = scalarGap(point.y, point.interval, point.observations, domain);
+			const problem = scalarGap(point.y, point.interval, point.observations, domain) ?? logValueGap(point.y, panel.scale) ?? pointFieldsGap(point);
 			if (problem) return {
 				id,
 				refused: `${panel.label} at ${point.x}: ${problem}`
@@ -2705,8 +2965,11 @@ function smallMultiples(panels, o) {
 		};
 	}
 	const noun = o.noun?.trim() || "panel";
-	const xLabel = (x) => o.formatX ? o.formatX(x) : String(x);
-	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
+	const category = new Map((o.x.categories ?? []).map((c) => [c.at, c.label]));
+	const xLabel = (x) => o.formatX ? o.formatX(x) : category.get(x) ?? String(x);
+	const recorded = hasPointFields(panels.flatMap((p) => p.points ?? []));
+	const targets = panels.filter((p) => p.targets?.length);
+	const yLabelOf = (p) => (y) => scalarLabel(y, (ownUnits ? p.unit : void 0) ?? o.y.unit, (ownUnits ? p.format : void 0) ?? o.formatY);
 	const withData = panels.filter((p) => !p.missing), ended = withData.filter((p) => p.end);
 	const marksOf = (p) => [...p.marks ?? [], ...p.end ? [{
 		at: p.end.at,
@@ -2717,12 +2980,26 @@ function smallMultiples(panels, o) {
 		p.label,
 		"",
 		`no data: ${p.missing.why}`,
-		p.missing.detail ?? ""
+		p.missing.detail ?? "",
+		...recorded ? [
+			"",
+			"",
+			"",
+			"",
+			"",
+			"",
+			""
+		] : []
 	]] : p.points.map((pt) => [
 		p.label,
 		xLabel(pt.x),
-		pt.y === null ? "not measured" : yLabel(pt.y),
-		observationLabel(pt.observations)
+		pt.y === null ? "not measured" : yLabelOf(p)(pt.y),
+		observationLabel(pt.observations),
+		...recorded ? [
+			pt.label ?? "",
+			...pointCells(pt),
+			pt.annotation ?? ""
+		] : []
 	]));
 	const events = panels.flatMap((p) => marksOf(p).map((m) => ({
 		...m,
@@ -2732,10 +3009,10 @@ function smallMultiples(panels, o) {
 		id,
 		finding: `${capitalize(o.y.label)} by ${o.x.label}, one panel per ${noun}, on ${o.shared === "both" ? "shared axes" : "a shared x axis"}.`,
 		lede: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} have data${ended.length ? `; ${ended.length} ended before the window closed` : ""}.`,
-		read: `Each panel is one ${noun} on ${o.shared === "both" ? "the same x and y axes" : "the same x axis; y axes differ per panel"}. Hatched panels have no data and name the reason. A vertical rule with a cross marks where a line ended.`,
+		read: `Each panel is one ${noun} on ${o.shared === "both" ? "the same x and y axes" : "the same x axis; y axes differ per panel"}. Hatched panels have no data and name the reason. A vertical rule with a cross marks where a line ended.${recorded ? " A filled mark is a pass, an outline a fail; * is not comparable with the goal and ? of unknown comparability; ✓ marks a solve and ✕ a failing candidate." : ""}${targets.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${panels.some((p) => p.scale === "log") ? " Log-scale panels say so in their y labels." : ""}`,
 		svg: {
-			wide: draw(panels, o, 720, xLabel, yLabel, marksOf),
-			narrow: draw(panels, o, 358, xLabel, yLabel, marksOf)
+			wide: draw(panels, o, 720, xLabel, yLabelOf, marksOf),
+			narrow: draw(panels, o, 358, xLabel, yLabelOf, marksOf)
 		},
 		table: table(`${capitalize(o.y.label)} by ${o.x.label} and ${noun}`, [
 			{ label: capitalize(noun) },
@@ -2747,8 +3024,13 @@ function smallMultiples(panels, o) {
 				label: o.y.label,
 				numeric: true
 			},
-			{ label: "Observations or detail" }
-		], rows) + eventsTable(events, [], o.x.label, xLabel),
+			{ label: "Observations or detail" },
+			...recorded ? [
+				{ label: "Label" },
+				...POINT_COLUMNS,
+				{ label: "Recorded annotation" }
+			] : []
+		], rows) + targets.map((p) => targetsTable(p.targets, yLabelOf(p)).replace("<caption>Recorded targets</caption>", `<caption>${esc(p.label)}: recorded targets</caption>`)).join("") + eventsTable(events, [], o.x.label, xLabel),
 		note: {
 			method: "Recorded values per panel on explicit axis domains. Missing panels and positions are not interpolated or drawn as zero; no ranking is made.",
 			n: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} with data.`,
@@ -2759,22 +3041,49 @@ function smallMultiples(panels, o) {
 function domainOf(panel, o) {
 	return o.shared === "both" ? o.y.domain : panel.domain ?? null;
 }
-function draw(panels, o, width, xLabel, yLabel, marksOf) {
-	const cols = width === 358 ? 1 : Math.min(3, panels.length), gap = 16;
-	const panelW = (width - gap * (cols - 1)) / cols, panelH = width === 358 ? 150 : 170;
+function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
+	const cols = width === 358 ? 1 : Math.min(o.columns ?? 3, panels.length), gap = 16;
+	const panelW = (width - gap * (cols - 1)) / cols;
+	const labelled = (o.x.categories ?? []).filter((c) => xLabel(c.at) !== "" && (c.weight ?? 1) >= 1).map((c) => c.at);
+	const gutterOf = (panel) => {
+		const domain = domainOf(panel, o) ?? o.y.domain, yLabel = yLabelOf(panel);
+		const logged = panel.scale === "log" ? logTicks(domain[0], domain[1]) : [];
+		const decades = logged.filter((v) => Number.isInteger(Math.log10(v)));
+		const ticks = panel.scale === "log" ? decades.length >= 2 ? decades : logged.length >= 2 ? [logged[0], logged.at(-1)] : [domain[0], domain[1]] : [domain[0], domain[1]];
+		return {
+			ticks,
+			gutter: Math.max(...ticks.map((v) => Math.ceil(textWidth(yLabel(v), 10, "mono")) + 10), 40)
+		};
+	};
+	const narrowestPlot = panelW - 6 - Math.max(...panels.map((p) => gutterOf(p).gutter));
+	const totalWeight = (o.x.categories ?? []).reduce((sum, c) => sum + (c.weight ?? 1), 0);
+	const labelFit = labelled.length ? columnLabelFit(labelled.map(xLabel), Math.min(...labelled.map((x) => (o.x.categories.find((c) => c.at === x).weight ?? 1) / totalWeight * narrowestPlot)), 10) : {
+		fit: "level",
+		extra: 0
+	};
+	const panelH = (width === 358 ? 150 : 170) + labelFit.extra;
 	let body = "";
 	panels.forEach((panel, i) => {
 		const ox = i % cols * (panelW + gap), oy = Math.floor(i / cols) * (panelH + gap);
 		const domain = domainOf(panel, o) ?? o.y.domain;
-		const left = ox + Math.max(...[domain[0], domain[1]].map((v) => Math.ceil(textWidth(yLabel(v), 10, "mono")) + 10), 40), right = ox + panelW - 6;
-		const top = oy + 40, bottom = oy + panelH - 24;
-		const px = (x) => left + (x - o.x.domain[0]) / (o.x.domain[1] - o.x.domain[0]) * (right - left);
-		const py = (y) => bottom - (y - domain[0]) / (domain[1] - domain[0]) * (bottom - top);
-		const name = wrap(panel.label, panelW - 4, 12, "sans-semibold", 1);
+		const yLabel = yLabelOf(panel);
+		const log = panel.scale === "log";
+		const { ticks: yTicks, gutter } = gutterOf(panel);
+		const left = ox + gutter, right = ox + panelW - 6;
+		const top = oy + 40, bottom = oy + panelH - 24 - labelFit.extra;
+		const axis = xAxis(o.x.domain, o.x.categories, left, right);
+		const px = axis.px;
+		const py = yScale(domain, panel.scale, top, bottom);
+		const name = wrap(panel.label, panelW - 4 - (log ? 52 : 0), 12, "sans-semibold", 1);
 		body += titled(panel.label, text(ox + 2, oy + 14, name.lines[0], {
 			size: 12,
 			weight: 600
 		}));
+		if (log) body += text(right, oy + 14, "log scale", {
+			size: 10,
+			anchor: "end",
+			cls: "tgc-ink-muted"
+		});
 		if (panel.missing) {
 			body += `<g data-panel="${esc(panel.id)}" data-missing="true">${hatch(ox, top - 12, panelW, bottom - top + 12, "tgc-panel-missing")}`;
 			const why = wrap(`no data: ${panel.missing.why}`, panelW - 24, 12, "sans", 3);
@@ -2782,8 +3091,15 @@ function draw(panels, o, width, xLabel, yLabel, marksOf) {
 			body += "</g>";
 			return;
 		}
-		body += `<g data-panel="${esc(panel.id)}">`;
-		for (const [j, y] of [
+		body += `<g data-panel="${esc(panel.id)}"${log ? " data-scale=\"log\"" : ""}>`;
+		if (log) {
+			body += line(left, bottom, right, bottom, "tgc-axis");
+			for (const y of yTicks) body += (y === domain[0] ? "" : line(left, py(y), right, py(y), "tgc-gridline")) + text(left - 6, py(y) + 4, yLabel(y), {
+				size: 10,
+				anchor: "end",
+				cls: "tgc-ink-muted tgc-num"
+			});
+		} else for (const [j, y] of [
 			domain[0],
 			(domain[0] + domain[1]) / 2,
 			domain[1]
@@ -2795,7 +3111,9 @@ function draw(panels, o, width, xLabel, yLabel, marksOf) {
 				cls: "tgc-ink-muted tgc-num"
 			});
 		}
-		body += text(left, bottom + 16, xLabel(o.x.domain[0]), {
+		body += drawTargets(panel.targets ?? [], py, left, right, yLabel, false) + targetKey(panel.targets ?? [], ox + 2, oy + 30, panelW - 4);
+		if (labelled.length) body += columnLabels(labelled, px, labelFit.fit, left, right, right + 4, xLabel, 10, bottom + 16);
+		else body += text(left, bottom + 16, xLabel(o.x.domain[0]), {
 			size: 10,
 			cls: "tgc-ink-muted tgc-num"
 		}) + text(right, bottom + 16, xLabel(o.x.domain[1]), {
@@ -2803,9 +3121,18 @@ function draw(panels, o, width, xLabel, yLabel, marksOf) {
 			anchor: "end",
 			cls: "tgc-ink-muted tgc-num"
 		});
+		const shared = /* @__PURE__ */ new Map();
+		for (const point of panel.points) if (point.y !== null) shared.set(point.x, [...shared.get(point.x) ?? [], point]);
+		const xOf = (point) => {
+			const list = shared.get(point.x), room = axis.column(point.x);
+			const step = room === null ? 0 : Math.min(9, room / (list.length + 1));
+			return px(point.x) + (list.indexOf(point) - (list.length - 1) / 2) * step;
+		};
+		const placed = [];
+		const pending = [];
 		let segment = [];
 		const flush = () => {
-			if (segment.length > 1) body += polyline(segment, "tgc-series-line");
+			if (segment.length > 1 && o.connect !== false) body += polyline(segment, "tgc-series-line");
 			segment = [];
 		};
 		for (const point of panel.points) {
@@ -2813,15 +3140,43 @@ function draw(panels, o, width, xLabel, yLabel, marksOf) {
 				flush();
 				continue;
 			}
-			segment.push([px(point.x), py(point.y)]);
-			body += titled(`${panel.label} · ${o.x.label} ${xLabel(point.x)} · ${yLabel(point.y)} · ${observationLabel(point.observations)}`, circle(px(point.x), py(point.y), 2.5, "tgc-series-point"));
+			const x = xOf(point), y = py(point.y);
+			segment.push([x, y]);
+			if (!hasPointFields([point]) && point.marker === void 0) {
+				body += titled(`${panel.label} · ${o.x.label} ${xLabel(point.x)} · ${yLabel(point.y)} · ${observationLabel(point.observations)}`, circle(x, y, 2.5, "tgc-series-point"));
+				continue;
+			}
+			const facts = [
+				panel.label,
+				`${o.x.label} ${xLabel(point.x)}`,
+				yLabel(point.y),
+				...point.label ? [point.label] : [],
+				...pointFacts(point),
+				...point.observations ? [observationLabel(point.observations)] : [],
+				...point.annotation ? [point.annotation] : []
+			];
+			body += titled(facts.join(" · "), `<g data-point-verdict="${point.verdict ?? "none"}">${circle(x, y, 9, "tgc-series-hit")}${pointMark(x, y, point.marker ?? "circle", 4, point)}</g>`);
+			placed.push([
+				x - 4,
+				x + 4,
+				y - 4,
+				y + 4
+			]);
+			pending.push({
+				x,
+				y,
+				r: 4,
+				point
+			});
 		}
 		flush();
+		body += placeBadges(pending, placed, left - 4, right + 4);
 		body += drawMarks(marksOf(panel), px, top - 12, bottom, left, right, xLabel);
 		body += "</g>";
 	});
-	const rows = Math.ceil(panels.length / cols);
-	return svgRoot(width, rows * panelH + (rows - 1) * gap, body);
+	const rows = Math.ceil(panels.length / cols), height = rows * panelH + (rows - 1) * gap;
+	const key = verdictKey(panels.flatMap((p) => p.points ?? []), o.markers, 2, height + 4, width - 4);
+	return svgRoot(width, height + key.height, body + key.svg);
 }
 //#endregion
-export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };
+export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };