@atelic-action/artifact 2.0.0 → 4.0.0

package/README.md

@@ -7,7 +7,7 @@ The documents the practice hands or sends a business, as a published package and
 
 Three layers, each a version the next depends on (ATE-671): `@atelic-action/ui` holds the pieces, this package holds the documents built from them, and each business's folder holds only its content, routes, and config. A document fix reaches a folder by bumping this package; a piece fix by bumping ui here, then this package in the folder.
 
-Five artifacts live in the template site: the **writeup** at `/writeup`, the graded document an owner gets, a web page first with its printed copy derived from it; the **read** at `/the-read`, what a customer gets at the end of an engagement's first week, the baseline's grades explained by cause with the plan in order; the **proposal** at `/proposal`, sealed into the page and opened by the reader's own email address; the **monthly page** at `/report`, what an Operate client gets each month on one letter sheet; and the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page. The bare host sends a reader to the writeup. Every artifact prerenders to static HTML, stays out of every index, and carries the practice's brand by default.
+Five artifacts live in the template site: the **writeup** at `/writeup`, the graded document an owner gets, a web page first with its printed copy derived from it; the **read** at `/the-read`, what a customer gets at the end of an engagement's first week, the baseline's grades explained by cause, with the plan in order between the gist and the cards; the **proposal** at `/proposal`, sealed into the page and opened by the reader's own email address; the **monthly page** at `/report`, what an Operate client gets each month on one letter sheet; and the **note** at `/notes`, the first touch for a business whose site publishes no email address, set as a short page. The bare host sends a reader to the writeup. Every artifact prerenders to static HTML, stays out of every index, and carries the practice's brand by default.
 
 The method behind them (the seven sections, the four grades from A to D, the rented line, what moved, and when an artifact is private) is the practice repo's `FOOTPRINT.md`. This repo builds to it and never restates it.
 
@@ -26,8 +26,8 @@ Every export of the package, all from the one entry, `@atelic-action/artifact`.
 | `ratingCell` | A star rating table cell for a writeup table, sorted by its figure | `/writeup` |
 | `WriteupBlock`, `WriteupTopic`, `WriteupPart`, `WriteupSheet`, `WriteupSummary`, `WriteupSummaryRow`, `WriteupMarkets`, `WriteupRented`, `WriteupMark`, `WriteupCell`, `WriteupTone`, and the rest of the `Writeup*` types | The shapes a writeup's content is written in | none |
 | `WriteupGrade`, `WriteupPerson`, `WriteupShot` | The grade letter, the sign off person, and the owner's screen, shared by every document, all three re exported from ui | none |
-| `Read`, `ReadProps` | The baseline's grades explained by cause: the gist table, with an optional `note` callout under it for what the read leaves out; each section on the writeup's card (`ReadSection` extends `WriteupTopic`: the trade name linked to its definition, the one liner, the grade, the why line as the summary, the writeup's blocks, and the sources at the foot) plus the read's own today and after (a two column table) and what we recommend (a checklist); then the plan in order. A beat with no data is left out | `/the-read` |
-| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the gist table's columns, Today, After, Recommendations, the plan's heading), each overridable through `labels` | `/the-read` |
+| `Read`, `ReadProps` | The baseline's grades explained by cause: the gist table, each row a link to its card, with an optional `note` callout over it for what the read leaves out; each section on the writeup's card (`ReadSection` extends `WriteupTopic`: the trade name linked to its definition, the one liner, the grade, the why line as the summary, the writeup's blocks, and the sources at the foot) plus the read's own today and after (a two column table) and what we recommend (a checklist). The plan, numbered and in order, sits between the gist and the cards, so the whole program reads before any one card's detail. A beat with no data is left out | `/the-read` |
+| `readLabels`, `ReadLabels` | The fixed words the read sets (Prepared for, the scorecard's screen reader words, Today, After, Recommendations, the plan's heading), each overridable through `labels` | `/the-read` |
 | `ReadTier`, `ReadSection`, `ReadChange`, `ReadStep`, `ReadPlan`, `ReadClose`, `ReadLink`, `ReadParagraph` | The shapes a read's content is written in. `ReadSection` is a `WriteupTopic` plus `gist`, `changes`, and `recommend`; its `why` and a finding's `body` take a paragraph (a string, or runs of text and links) as well as a node, so a routine can still write a read as JSON | none |
 | `Report`, `ReportProps` | The monthly page: the four questions, the seven grades now and before, the sign off, on one letter sheet | `/report` |
 | `ReportLead`, `ReportLeads`, `ReportGradeRow` | The shapes a monthly page's content is written in | none |
@@ -45,7 +45,7 @@ What a document is built from stays in `@atelic-action/ui`, and this package imp
 bun add @atelic-action/artifact @atelic-action/ui
 ```
 
-Peer dependencies: `@atelic-action/ui` at `^2.1.0`, `react` at `^19.0.0`, and `lucide-react` at `^1.23.0`. The package ships TSX and CSS as source, compiled inside the site's own Vite like ui's; a site whose `vite.config.ts` is one `artifactConfig` call from `@atelic-action/ui/vite` needs nothing more, for the build, the prerender, and the dev server alike. The default labels a document sets live in the document: the read's `readLabels` and the sealed document's gate copy are overridden through props, and the monthly page's four questions are fixed on purpose, since they are its contract with the Statement of Work.
+Peer dependencies: `@atelic-action/ui` at `^3.0.0`, `react` at `^19.0.0`, and `lucide-react` at `^1.23.0`. The package ships TSX and CSS as source, compiled inside the site's own Vite like ui's; a site whose `vite.config.ts` is one `artifactConfig` call from `@atelic-action/ui/vite` needs nothing more, for the build, the prerender, and the dev server alike. The default labels a document sets live in the document: the read's `readLabels` and the sealed document's gate copy are overridden through props, and the monthly page's four questions are fixed on purpose, since they are its contract with the Statement of Work.
 
 ```tsx
 import { Writeup } from "@atelic-action/artifact";
@@ -136,6 +136,8 @@ Static files. `vercel.json` points Vercel at `dist/client` with no framework pre
 
 A document is fixed or grown here, in `src/documents/`, with its test in `tst/documents/`, and released as a version of this package; a folder takes it with `bun update @atelic-action/artifact`. A piece a document is built from (the grade chip, the sign off, a page component, the chrome, the wall, a command) is fixed in `@atelic-action/ui` and released there first, then taken here by bumping the ui range. An improvement to the seed itself (a route, a stub file, the example content) is made here and copied into the folders by hand.
 
+A folder taking 4.0.0 takes ui 3.0.0 with it (`bun update @atelic-action/artifact @atelic-action/ui --latest --cwd <short>`) and repoints its own routes, since ui 3.0.0 keeps acronyms capitalized with no alias for the old spelling: `canonicalUrl` from `@atelic-action/ui/artifact` becomes `canonicalURL` in `src/routes/index.tsx`, and the root route's `baseCss` import becomes `baseCSS`.
+
 ## Releasing
 
 1. Bump `version` in `package.json` and merge it to `main`: patch for a fix, minor for a new document or prop, major for a breaking prop, type, or class rename.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/artifact",
-	"version": "2.0.0",
+	"version": "4.0.0",
 	"description": "The composed documents the Atelic practice hands or sends a business (the writeup, the read, the monthly page, the note, and the sealed document), built from the pieces in @atelic-action/ui",
 	"type": "module",
 	"license": "MIT",
@@ -37,12 +37,12 @@
 		"format": "biome format . --write"
 	},
 	"peerDependencies": {
-		"@atelic-action/ui": "^2.1.0",
+		"@atelic-action/ui": "^3.0.0",
 		"lucide-react": "^1.23.0",
 		"react": "^19.0.0"
 	},
 	"devDependencies": {
-		"@atelic-action/ui": "^2.1.0",
+		"@atelic-action/ui": "^3.0.0",
 		"@biomejs/biome": "^2.0.0",
 		"@playwright/test": "^1.60.0",
 		"@sentry/react": "^10.0.0",

package/src/documents/Gate.tsx

@@ -227,7 +227,7 @@ export function Gate({
 	errorText = "That email does not open this document. Use the address it was sent to.",
 	onUnlock,
 }: GateProps) {
-	const [html, setHtml] = useState<string | null>(null);
+	const [html, setHTML] = useState<string | null>(null);
 	const [failed, setFailed] = useState(false);
 	const [busy, setBusy] = useState(false);
 	const [value, setValue] = useState("");
@@ -253,7 +253,7 @@ export function Gate({
 				if (opened) {
 					writeStored(storageKey, fromQuery);
 					identifyReader(opened.email, identifyDomain);
-					setHtml(opened.html);
+					setHTML(opened.html);
 					onUnlockRef.current?.(opened.person);
 					return;
 				}
@@ -267,7 +267,7 @@ export function Gate({
 			const opened = await openDocument(payload, stored);
 			if (cancelled || !opened) return;
 			identifyReader(opened.email, identifyDomain);
-			setHtml(opened.html);
+			setHTML(opened.html);
 			onUnlockRef.current?.(opened.person);
 		}
 
@@ -290,7 +290,7 @@ export function Gate({
 		}
 		writeStored(storageKey, value);
 		identifyReader(opened.email, identifyDomain);
-		setHtml(opened.html);
+		setHTML(opened.html);
 		onUnlockRef.current?.(opened.person);
 	}
 

package/src/documents/Read.tsx

@@ -1,17 +1,16 @@
 import {
 	type ArtifactLink,
 	type ArtifactParagraph,
-	GradeChip,
-	gradeLabel,
 	isEmpty,
+	newTabProps,
 	Paragraph,
 	Runs,
 	SignOff,
 	type WriteupGrade,
 	type WriteupPerson,
 } from "@atelic-action/ui/artifact";
-import { IconList, type Tone } from "@atelic-action/ui/components";
-import { Check } from "lucide-react";
+import { IconList, ReportCard, type Tone } from "@atelic-action/ui/components";
+import { ArrowUpRight, Check } from "lucide-react";
 import type { ReactNode } from "react";
 import { Topic, type WriteupTopic } from "./Writeup";
 
@@ -87,6 +86,8 @@ export interface ReadTier {
 	id?: string;
 	/** The tier's name, e.g. "Health". */
 	title: string;
+	/** Where the name is defined, e.g. the practice's glossary; the heading links there when set. */
+	href?: string;
 	/** The questions the tier answers, in the owner's words. */
 	lead?: string;
 	sections: ReadSection[];
@@ -98,9 +99,11 @@ export interface ReadStep {
 	body?: ReadParagraph;
 	/** Whose step it is when it is not the practice's, e.g. "Yours" or a name; set beside the title. */
 	who?: string;
+	/** The cards the step draws on, linked in a line beneath it, e.g. { text: "Local SEO", href: "#local-seo" }. */
+	cards?: ReadLink[];
 }
 
-/** The plan: the steps in order, numbered. */
+/** The plan: the steps in order, numbered, between the gist and the cards, so the whole program reads before any one card's detail. */
 export interface ReadPlan {
 	/** The anchor a header stop points at, e.g. "plan". */
 	id?: string;
@@ -123,12 +126,10 @@ export interface ReadClose {
 export interface ReadLabels {
 	/** The dateline's words before the business, e.g. "Prepared for". */
 	preparedFor: string;
-	/** The gist table's first column. */
-	section: string;
-	/** The gist table's second column. */
-	grade: string;
-	/** The gist table's third column. */
+	/** What a screen reader calls the gist card when it has no title. */
 	gist: string;
+	/** What a screen reader hears before a letter, on the gist card and each section's card. */
+	grade: string;
 	/** What a screen reader hears for a section with no grade. */
 	notGraded: string;
 	/** The today and after table's first column. */
@@ -147,9 +148,8 @@ export interface ReadLabels {
 
 export const readLabels: ReadLabels = {
 	preparedFor: "Prepared for",
-	section: "Section",
-	grade: "Grade",
 	gist: "The Gist",
+	grade: "Grade",
 	notGraded: "Not graded yet",
 	now: "Today",
 	after: "After",
@@ -167,9 +167,13 @@ export interface ReadProps {
 	date: string;
 	/** Two or three sentences under the title. */
 	lede: ReadParagraph;
-	/** The heading over the gist table, e.g. "At a Glance". */
+	/** The heading over the scorecard, e.g. "The Scorecard". */
 	gistTitle?: string;
-	/** A callout under the gist table, e.g. what the read leaves out and when it follows. */
+	/** The line under the scorecard's heading, e.g. what it is. */
+	gistLead?: string;
+	/** The anchor a header stop points at for the scorecard, e.g. "scorecard". */
+	gistId?: string;
+	/** A callout over the scorecard, under its heading, e.g. what the read leaves out and when it follows. */
 	note?: ReadParagraph;
 	/** The key: what each letter means, in a few words each. */
 	gradeKey?: Array<{ grade: WriteupGrade; label: string }>;
@@ -261,85 +265,51 @@ function Recommend({ items, label }: { items: ReadRecommendation[]; label: strin
 
 function Gist({
 	tiers,
+	id,
 	title,
+	lead,
+	note,
 	gradeKey,
 	labels,
 }: {
 	tiers: ReadTier[];
+	id?: string;
 	title?: string;
+	lead?: string;
+	note?: ReadProps["note"];
 	gradeKey?: ReadProps["gradeKey"];
 	labels: ReadLabels;
 }) {
-	const key = gradeKey ?? [];
 	return (
-		<section className="rd-gist" aria-label={title ? undefined : labels.gist}>
-			{(title || key.length > 0) && (
-				<div className="op-ov-head">
-					{title && <h2 className="op-ov-title">{title}</h2>}
-					{key.length > 0 && (
-						<ul className="op-legend">
-							{key.map((entry) => (
-								<li key={entry.grade}>
-									<GradeChip grade={entry.grade} />
-									<span>{entry.label}</span>
-								</li>
-							))}
-						</ul>
-					)}
+		<>
+			{title && (
+				<div className="op-part" id={id}>
+					<h2>{title}</h2>
+					{lead && <p>{lead}</p>}
 				</div>
 			)}
-			<div className="rd-gist-card">
-				<table className="rd-gist-table">
-					<thead>
-						<tr>
-							<th scope="col" className="rd-gist-section">
-								{labels.section}
-							</th>
-							<th scope="col" className="rd-gist-grade">
-								{labels.grade}
-							</th>
-							<th scope="col" className="rd-gist-read">
-								{labels.gist}
-							</th>
-						</tr>
-					</thead>
-					{tiers.map((tier) => (
-						<tbody key={tier.title}>
-							<tr className="rd-gist-tier">
-								<th scope="rowgroup" colSpan={3}>
-									{tier.title}
-								</th>
-							</tr>
-							{tier.sections.map((section) => (
-								<tr key={section.id}>
-									<th scope="row" className="rd-gist-section">
-										<a href={`#${section.id}`}>{section.title}</a>
-									</th>
-									<td className="rd-gist-grade">
-										{section.grade ? (
-											<>
-												<span className="op-sr-only">{gradeLabel[section.grade]}</span>
-												<span aria-hidden="true">
-													<GradeChip grade={section.grade} />
-												</span>
-											</>
-										) : (
-											<>
-												<span className="op-sr-only">{labels.notGraded}</span>
-												<span className="op-dash" aria-hidden="true" />
-											</>
-										)}
-									</td>
-									<td className="rd-gist-read">
-										<Runs paragraph={section.gist} />
-									</td>
-								</tr>
-							))}
-						</tbody>
-					))}
-				</table>
-			</div>
-		</section>
+			{filled(note) && (
+				<div className="rd-note" role="note">
+					<Paragraph paragraph={note} />
+				</div>
+			)}
+			<ReportCard
+				className="rd-gist"
+				label={title ?? labels.gist}
+				legend={gradeKey}
+				legendAt="foot"
+				labels={{ grade: labels.grade, notGraded: labels.notGraded }}
+				groups={tiers.map((tier) => ({
+					title: tier.title,
+					rows: tier.sections.map((section) => ({
+						name: section.title,
+						href: `#${section.id}`,
+						grade: section.grade,
+						line: <Runs paragraph={section.gist} />,
+					})),
+				}))}
+			/>
+		</>
 	);
 }
 
@@ -392,21 +362,24 @@ function Plan({ plan, labels }: { plan: ReadPlan; labels: ReadLabels }) {
 			<ol className="rd-steps">
 				{plan.steps.map((step) => (
 					<li className="rd-step" key={step.title}>
-						<p>
-							<b className="rd-step-title">{step.title}</b>
-							{step.who && (
-								<>
-									{" "}
-									<span className="rd-step-who">{step.who}</span>
-								</>
+						<div className="rd-step-body">
+							<p className="rd-step-head">
+								<b className="rd-step-title">{step.title}</b>
+								{step.who && <span className="rd-step-who">{step.who}</span>}
+							</p>
+							{filled(step.body) && <Paragraph paragraph={step.body} />}
+							{(step.cards ?? []).some((card) => card?.href) && (
+								<p className="rd-step-cards">
+									{(step.cards ?? [])
+										.filter((card) => card?.href)
+										.map((card, i) => (
+											<a href={card.href} key={`${i}-${card.href}`}>
+												{card.text}
+											</a>
+										))}
+								</p>
 							)}
-							{filled(step.body) && (
-								<>
-									{" "}
-									<Runs paragraph={step.body} />
-								</>
-							)}
-						</p>
+						</div>
 					</li>
 				))}
 			</ol>
@@ -420,6 +393,8 @@ export function Read({
 	date,
 	lede,
 	gistTitle,
+	gistLead,
+	gistId,
 	note,
 	gradeKey,
 	tiers,
@@ -444,19 +419,30 @@ export function Read({
 					{filled(lede) && <Paragraph paragraph={lede} className="op-intro rd-lede" />}
 				</header>
 				{shownTiers.length > 0 && (
-					<>
-						<Gist tiers={shownTiers} title={gistTitle} gradeKey={gradeKey} labels={labels} />
-						{filled(note) && (
-							<div className="rd-note" role="note">
-								<Paragraph paragraph={note} />
-							</div>
-						)}
-					</>
+					<Gist
+						tiers={shownTiers}
+						id={gistId}
+						title={gistTitle}
+						lead={gistLead}
+						note={note}
+						gradeKey={gradeKey}
+						labels={labels}
+					/>
 				)}
+				{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
 				{shownTiers.map((tier) => (
 					<div className="rd-tier" key={tier.title}>
 						<div className="op-part" id={tier.id}>
-							<h2>{tier.title}</h2>
+							<h2>
+								{tier.href ? (
+									<a href={tier.href} {...newTabProps(tier.href, true)}>
+										{tier.title}
+										<ArrowUpRight size={14} aria-hidden="true" />
+									</a>
+								) : (
+									tier.title
+								)}
+							</h2>
 							{tier.lead && <p>{tier.lead}</p>}
 						</div>
 						{tier.sections.map((section) => (
@@ -464,7 +450,6 @@ export function Read({
 						))}
 					</div>
 				))}
-				{plan.steps.length > 0 && <Plan plan={plan} labels={labels} />}
 				{filled(close.line) && <Paragraph paragraph={close.line} className="rd-closing" />}
 				{close.signOff && close.person && (
 					<footer className="op-close rd-close">

package/src/documents/Writeup.tsx

@@ -18,6 +18,7 @@ import {
 	type ColumnChartGroup,
 	DataTable,
 	Disclosure,
+	ReportCard,
 	StackedBar,
 	type StackedBarSegment,
 	type StatItem,
@@ -27,7 +28,7 @@ import {
 	type ThresholdZone,
 	type Tone,
 } from "@atelic-action/ui/components";
-import { ArrowUpRight, ChevronRight, CircleAlert, CircleCheck, CircleX, Star } from "lucide-react";
+import { ArrowUpRight, CircleAlert, CircleCheck, CircleX, Star } from "lucide-react";
 import type { ReactNode } from "react";
 
 export type { WriteupGrade, WriteupPerson, WriteupShot } from "@atelic-action/ui/artifact";
@@ -609,61 +610,30 @@ export function Topic({ topic, extra }: { topic: WriteupTopic; extra?: ReactNode
 }
 
 function Summary({ summary }: { summary: WriteupSummary }) {
-	const tiers: Array<{ tier: string; rows: WriteupSummaryRow[] }> = [];
+	const groups: Array<{ title: string; rows: WriteupSummaryRow[] }> = [];
 	for (const row of summary.rows) {
-		const last = tiers[tiers.length - 1];
-		if (last && last.tier === row.tier) last.rows.push(row);
-		else tiers.push({ tier: row.tier, rows: [row] });
+		const last = groups[groups.length - 1];
+		if (last && last.title === row.tier) last.rows.push(row);
+		else groups.push({ title: row.tier, rows: [row] });
 	}
-	const beforeLabel = summary.beforeLabel ?? "Before";
 	return (
-		<section className="op-ov" id={summary.id}>
-			<div className="op-ov-head">
-				{summary.title && <h2 className="op-ov-title">{summary.title}</h2>}
-				{summary.legend && (
-					<ul className="op-legend">
-						{summary.legend.map((entry) => (
-							<li key={entry.grade}>
-								<GradeChip grade={entry.grade} />
-								<span>{entry.label}</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-			<div className="op-ov-card">
-				{tiers.map(({ tier, rows }) => (
-					<div className="op-ov-tier" key={tier}>
-						<div className="op-ov-tier-label">{tier}</div>
-						<ul>
-							{rows.map((row) => (
-								<li className="op-ov-row" key={row.section}>
-									<span className="op-ov-grade">
-										{row.before && (
-											<span className="op-ov-before">
-												<span className="op-sr-only">{`${beforeLabel}: ${gradeLabel[row.before]}. `}</span>
-												<span aria-hidden="true">
-													<GradeChip grade={row.before} />
-												</span>
-											</span>
-										)}
-										<span className="op-sr-only">{`Grade ${gradeLabel[row.grade]}: `}</span>
-										<span aria-hidden="true">
-											<GradeChip grade={row.grade} />
-										</span>
-									</span>
-									<b className="op-ov-name">
-										{row.href ? <a href={row.href}>{row.section}</a> : row.section}
-									</b>
-									<span className="op-ov-read">{row.read}</span>
-									{row.href && <ChevronRight className="op-ov-go" size={18} aria-hidden="true" />}
-								</li>
-							))}
-						</ul>
-					</div>
-				))}
-			</div>
-		</section>
+		<ReportCard
+			className="op-ov"
+			id={summary.id}
+			title={summary.title}
+			legend={summary.legend}
+			labels={{ before: summary.beforeLabel }}
+			groups={groups.map((group) => ({
+				title: group.title,
+				rows: group.rows.map((row) => ({
+					name: row.section,
+					href: row.href,
+					grade: row.grade,
+					before: row.before,
+					line: row.read,
+				})),
+			}))}
+		/>
 	);
 }
 

package/src/documents/documents.css

@@ -921,134 +921,11 @@
 
 	/* ---- the overview: the key, then every section under its tier, each a
 	   grade, a name that links to the section, and one plain read ---- */
+	/* the overview is the ReportCard (@atelic-action/ui); this is its place on the page */
 	.atelic-ui .op-ov {
 		margin-top: 22px;
 		scroll-margin-top: calc(var(--nav-height) + 16px);
 	}
-	.atelic-ui .op-ov-head {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px 20px;
-		margin-bottom: 10px;
-	}
-	.atelic-ui .op-ov-title {
-		font-size: 13px;
-		font-family: var(--font-mono);
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-faint);
-		margin: 0;
-	}
-	.atelic-ui .op-legend {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px 16px;
-		font-size: 13.5px;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .op-legend li {
-		display: inline-flex;
-		align-items: center;
-		gap: 7px;
-	}
-	.atelic-ui .op-legend .op-grade {
-		width: 22px;
-		height: 22px;
-		border-radius: 6px;
-		font-size: 12px;
-	}
-	.atelic-ui .op-ov-card {
-		background: var(--op-card);
-		border: 1px solid var(--op-rule);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-sm);
-		overflow: hidden;
-	}
-	.atelic-ui .op-ov-tier-label {
-		padding: 7px 16px;
-		background: var(--surface-alt);
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .op-ov-tier ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-	.atelic-ui .op-ov-row {
-		position: relative;
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-		column-gap: 12px;
-		row-gap: 2px;
-		align-items: start;
-		padding: 12px 12px 12px 16px;
-		border-top: 1px solid var(--op-rule);
-	}
-	.atelic-ui .op-ov-row:hover {
-		background: var(--surface);
-	}
-	.atelic-ui .op-ov-grade {
-		grid-row: 1 / span 2;
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-	}
-	.atelic-ui .op-ov-grade .op-grade {
-		width: 30px;
-		height: 30px;
-		border-radius: 9px;
-		font-size: 15px;
-	}
-	.atelic-ui .op-ov-before .op-grade {
-		opacity: 0.45;
-	}
-	.atelic-ui .op-ov-name {
-		font-size: 16px;
-		font-weight: 650;
-		letter-spacing: -0.01em;
-		line-height: 1.35;
-		padding-top: 3px;
-	}
-	/* The name is the link, and it covers the row; a link inside the read
-	   sits above it. */
-	.atelic-ui .op-ov-name a::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-	}
-	.atelic-ui .op-ov-row:hover .op-ov-name {
-		color: var(--op-accent);
-	}
-	.atelic-ui .op-ov-read {
-		grid-column: 2;
-		font-size: 15px;
-		line-height: 1.45;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .op-ov-read a {
-		position: relative;
-		z-index: 1;
-		color: var(--op-accent);
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-	.atelic-ui .op-ov-go {
-		grid-column: 3;
-		grid-row: 1;
-		margin-top: 5px;
-		color: var(--neutral-300);
-	}
 
 	/* ---- a part: the tier and the question it answers ---- */
 	.atelic-ui .op-part {
@@ -1068,6 +945,23 @@
 		font-size: 16.5px;
 		color: var(--op-ink-soft);
 	}
+	/* a part's name linked to its definition, the way a card's name is */
+	.atelic-ui .op-part h2 a {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: inherit;
+		text-decoration: none;
+		border-bottom: 1px solid var(--neutral-200);
+	}
+	.atelic-ui .op-part h2 a svg {
+		color: var(--op-ink-faint);
+	}
+	.atelic-ui .op-part h2 a:hover,
+	.atelic-ui .op-part h2 a:hover svg {
+		color: var(--op-accent);
+		border-color: var(--op-accent);
+	}
 
 	/* ---- a topic: one section, a card of blocks ---- */
 	.atelic-ui .op-topic {
@@ -1549,24 +1443,6 @@
 		.atelic-ui .op-intro {
 			font-size: 18px;
 		}
-		.atelic-ui .op-ov-tier-label {
-			padding: 7px 20px;
-		}
-		.atelic-ui .op-ov-row {
-			grid-template-columns: auto 232px minmax(0, 1fr) auto;
-			column-gap: 16px;
-			padding: 11px 14px 11px 20px;
-		}
-		.atelic-ui .op-ov-grade {
-			grid-row: 1;
-		}
-		.atelic-ui .op-ov-read {
-			grid-column: 3;
-			padding-top: 4px;
-		}
-		.atelic-ui .op-ov-go {
-			grid-column: 4;
-		}
 		.atelic-ui .op-part {
 			margin: 40px 0 12px;
 		}
@@ -1682,8 +1558,8 @@
 		html:has(.atelic-ui .op-doc) {
 			zoom: 0.74;
 		}
-		.atelic-ui .op-ov-go,
-		.atelic-ui .op-topic h3 a svg {
+		.atelic-ui .op-topic h3 a svg,
+		.atelic-ui .op-part h2 a svg {
 			display: none;
 		}
 		.atelic-ui,
@@ -1728,12 +1604,12 @@
 			width: auto;
 			display: block;
 		}
-		.atelic-ui .op-ov-card,
 		.atelic-ui .op-topic {
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
-		.atelic-ui .op-topic h3 a {
+		.atelic-ui .op-topic h3 a,
+		.atelic-ui .op-part h2 a {
 			border-bottom: 0;
 		}
 		/* A small block stays whole; a table or a disclosure may run over a
@@ -2177,7 +2053,6 @@
 	.atelic-ui .rd-note a,
 	.atelic-ui .rd-doc .op-why a,
 	.atelic-ui .rd-beat a,
-	.atelic-ui .rd-gist-read a,
 	.atelic-ui .rd-plan a,
 	.atelic-ui .rd-closing a {
 		color: var(--op-accent);
@@ -2187,72 +2062,12 @@
 		overflow-wrap: anywhere;
 	}
 
-	/* ---- the gist table: section, grade, and one line, under its tier ---- */
+	/* ---- the gist: the ReportCard (@atelic-action/ui), and this is its place on the page ---- */
 	.atelic-ui .rd-gist {
 		margin-top: 26px;
 	}
-	.atelic-ui .rd-gist-card {
-		min-width: 0;
-		background: var(--op-card);
-		border: 1px solid var(--op-rule);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-sm);
-		overflow: hidden;
-	}
-	.atelic-ui .rd-gist-table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 15px;
-		line-height: 1.45;
-	}
-	.atelic-ui .rd-gist-table thead th {
-		padding: 9px 12px;
-		text-align: left;
-		font-family: var(--font-mono);
-		font-size: 11px;
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-faint);
-		border-bottom: 1px solid var(--op-rule);
-	}
-	.atelic-ui .rd-gist-tier th {
-		padding: 7px 12px;
-		background: var(--surface-alt);
-		text-align: left;
-		font-family: var(--font-mono);
-		font-size: 11.5px;
-		font-weight: 500;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .rd-gist-table tbody tr + tr > * {
-		border-top: 1px solid var(--op-rule);
-	}
-	.atelic-ui .rd-gist-table tbody th[scope="row"],
-	.atelic-ui .rd-gist-table td {
-		padding: 11px 12px;
-		vertical-align: top;
-		text-align: left;
-	}
-	.atelic-ui .rd-gist-table .rd-gist-section {
-		font-weight: 650;
-		letter-spacing: -0.01em;
-		width: 30%;
-	}
-	.atelic-ui .rd-gist-table tbody .rd-gist-section a:hover {
-		color: var(--op-accent);
-	}
-	.atelic-ui .rd-gist-table .rd-gist-grade {
-		width: 1%;
-		white-space: nowrap;
-		text-align: center;
-	}
-	.atelic-ui .rd-gist-table td.rd-gist-read {
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-		min-width: 0;
+	.atelic-ui .op-part + .rd-gist {
+		margin-top: 0;
 	}
 	.atelic-ui .rd-beat {
 		margin-top: 20px;
@@ -2366,22 +2181,6 @@
 	.atelic-ui .rd-doc .op-shots-row[data-count="3"] {
 		max-width: none;
 	}
-	/* Content patterns for a table inside a read, written by the content with ui's swatch: a rank with its badge in one cell, two equal halves, the swatch on the left and the figure on the right. These are the read's patterns, not a piece, until a consumer beyond the first wants them, when they move to ui. */
-	.atelic-ui .rd-ranked {
-		display: inline-grid;
-		grid-template-columns: 1fr 1fr;
-		column-gap: 8px;
-		align-items: center;
-		min-width: 3.4em;
-	}
-	.atelic-ui .rd-ranked .chart-swatch {
-		justify-self: start;
-	}
-	.atelic-ui .rd-ranked > a,
-	.atelic-ui .rd-ranked > span:last-child {
-		justify-self: end;
-		font-variant-numeric: tabular-nums;
-	}
 	/* A swatch as a table cell: the chart key's box, keying the row in its tone, in a column marked fit. */
 	.atelic-ui .op-table .chart-swatch,
 	.atelic-ui .op-findings .callout-body .chart-swatch {
@@ -2407,10 +2206,12 @@
 		font-size: 16.5px;
 		color: var(--op-ink-soft);
 	}
+	/* the steps: a large numeral in the accent, the title on its own line,
+	   the body under it, and the cards it draws on in a small line beneath */
 	.atelic-ui .rd-steps {
 		list-style: none;
 		counter-reset: rd-step;
-		margin: 12px 0 0;
+		margin: 14px 0 0;
 		padding: 0;
 		background: var(--op-card);
 		border: 1px solid var(--op-rule);
@@ -2420,38 +2221,66 @@
 	.atelic-ui .rd-step {
 		counter-increment: rd-step;
 		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
+		grid-template-columns: 44px minmax(0, 1fr);
 		column-gap: 12px;
-		padding: 14px 16px;
+		padding: 18px 20px 18px 18px;
 	}
 	.atelic-ui .rd-step + .rd-step {
 		border-top: 1px solid var(--op-rule);
 	}
 	.atelic-ui .rd-step::before {
-		content: counter(rd-step);
-		display: inline-grid;
-		place-items: center;
-		width: 28px;
-		height: 28px;
-		border: 1.5px solid var(--op-accent);
-		border-radius: 999px;
+		content: counter(rd-step, decimal-leading-zero);
+		margin-top: 1px;
+		font-family: var(--font-mono);
+		font-size: 22px;
+		font-weight: 500;
+		line-height: 1.1;
+		letter-spacing: -0.02em;
 		color: var(--op-accent);
-		font-size: 14px;
-		font-weight: 700;
-		line-height: 1;
+		font-variant-numeric: tabular-nums;
 	}
-	.atelic-ui .rd-step p {
-		margin: 3px 0 0;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
+	.atelic-ui .rd-step-body {
+		min-width: 0;
+	}
+	.atelic-ui .rd-step-head {
+		margin: 0;
 	}
 	.atelic-ui .rd-step-title {
+		font-size: 17px;
 		font-weight: 650;
+		letter-spacing: -0.015em;
+		line-height: 1.3;
 		color: var(--op-ink);
 	}
+	.atelic-ui .rd-step-body > p + p {
+		margin: 5px 0 0;
+		font-size: 15.5px;
+		line-height: 1.5;
+		color: var(--op-ink-soft);
+		text-wrap: pretty;
+	}
+	.atelic-ui .rd-step-body > .rd-step-cards {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 18px;
+		margin-top: 9px;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		font-weight: 500;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+	}
+	.atelic-ui .rd-step-cards a {
+		color: var(--op-accent);
+		text-decoration: none;
+	}
+	.atelic-ui .rd-step-cards a:hover {
+		text-decoration: underline;
+		text-underline-offset: 3px;
+	}
 	.atelic-ui .rd-step-who {
 		display: inline-block;
-		margin-left: 2px;
+		margin-left: 8px;
 		padding: 1px 8px;
 		border: 1px solid var(--neutral-200);
 		border-radius: 999px;
@@ -2474,13 +2303,6 @@
 
 	/* ---- wide and on paper: the pictures beside each other ---- */
 	@media print, (min-width: 721px) {
-		.atelic-ui .rd-gist-table tbody th[scope="row"],
-		.atelic-ui .rd-gist-table td,
-		.atelic-ui .rd-gist-table thead th,
-		.atelic-ui .rd-gist-tier th {
-			padding-left: 20px;
-			padding-right: 16px;
-		}
 		.atelic-ui .rd-changes-table {
 			display: table;
 			table-layout: fixed;
@@ -2546,12 +2368,10 @@
 	/* ---- print: the writeup's rules carry the page; these hold the read's
 	   own blocks whole ---- */
 	@media print {
-		.atelic-ui .rd-gist-card,
 		.atelic-ui .rd-steps {
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
-		.atelic-ui .rd-gist-table tr,
 		.atelic-ui .rd-changes-table tr,
 		.atelic-ui .rd-checks li,
 		.atelic-ui .rd-closing,