@atelic-action/ui 2.0.0 → 2.2.0

package/README.md

@@ -20,7 +20,10 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `Brand`, `BrandLogo`, `CallToAction`, `HoursRow`, `MenuContact`, `NavLink`, `Phone`, `PostalAddress`, `SiteLink`, `SocialLink`, `PageStop` | `@atelic-action/ui/chrome` | The shapes the chrome renders from (types) | none |
 | `NotFound` | `@atelic-action/ui/components` | The body of the page an unknown path renders | [#not-found](https://ui.atelic.me/#not-found) |
 | `Checklist` | `@atelic-action/ui/components` | A short list of checks, each passed or failed | [#checklist](https://ui.atelic.me/#checklist) |
+| `IconList` | `@atelic-action/ui/components` | A list whose bullets are icons, one for the list or one per item, each in a tone | [#icon-list](https://ui.atelic.me/#icon-list) |
 | `DataTable` | `@atelic-action/ui/components` | A table whose first column names each row, sortable, stacking on a phone | [#data-table](https://ui.atelic.me/#data-table) |
+| `ReportCard` | `@atelic-action/ui/components` | A name, a grade, and a line per row, in labeled groups, each row a link to its section | [#report-card](https://ui.atelic.me/#report-card) |
+| `Rank` | `@atelic-action/ui/components` | A figure with its badge in a tone, for a table cell: a rank, a place in an answer, or a dash | [#rank](https://ui.atelic.me/#rank) |
 | `StatRow` | `@atelic-action/ui/components` | A row of large figures with periods, deltas, and trends | [#stat-row](https://ui.atelic.me/#stat-row) |
 | `Callout` | `@atelic-action/ui/components` | One finding: an icon in its tone, the title, the explainer | [#callout](https://ui.atelic.me/#callout) |
 | `Disclosure` | `@atelic-action/ui/components` | A section that folds: controlled, an app's card; uncontrolled, a native details fold that prints open | [#disclosure](https://ui.atelic.me/#disclosure) |
@@ -352,7 +355,7 @@ export function ArtifactShell(props: Omit<ArtifactShellProps, "currentPath">) {
 }
 ```
 
-The pieces import no stylesheet of their own. A site imports `@atelic-action/ui/styles/artifact.css` in its base sheet after `gate.css`, then `@atelic-action/artifact/styles/documents.css`, and then its `theme.css`, so every page carries the rules whichever route it is. This sheet holds the pieces alone (the grade chip, the sign off, the shot, and the shell's logo rule) and sets no `@page`; both `@page` rules, the monthly page's and then the writeup's, moved with the documents into their sheet, where their order stays load bearing.
+The pieces import no stylesheet of their own. A site imports `@atelic-action/ui/styles/artifact.css` in its base sheet after `gate.css`, then `@atelic-action/artifact/styles/documents.css`, and then its `theme.css`, so every page carries the rules whichever route it is. This sheet holds the pieces alone (the sign off, the shot, and the shell's logo rule; the grade chip's rules sit in `components.css`, since `ReportCard` wears it) and sets no `@page`; both `@page` rules, the monthly page's and then the writeup's, moved with the documents into their sheet, where their order stays load bearing.
 
 ### The Artifact Vite Config
 
@@ -694,7 +697,10 @@ The blocks a page composes, each styled in `styles/components.css` inside the `a
 | Component | What it is | Notes |
 |---|---|---|
 | `Checklist` | A short list of checks, each passed or failed | Two columns when there is room, one on a phone. `passLabel` and `failLabel` name the icons for a screen reader |
-| `DataTable` | A table whose first column names each row, sortable by any column marked `sortable` | A click on a heading sorts on a wide screen. On a phone each row stacks, every fact wearing its column's label, and a dropdown sorts. A cell is a node, or `{ display, sort }` when what it shows is not what it sorts by; a formatted number in a string (`"$12,047"`, `"0.24%"`) sorts as a number. It renders in `defaultSort` on the server |
+| `IconList` | A list whose bullets are icons | `icon` and `tone` on the list set every bullet; an item's own override them. The bullet is decoration, so a screen reader hears only the items. A dot when no icon is set; the text's color when no tone is |
+| `ReportCard` | A name, a grade, and one line on it per row, in labeled groups, each row's parts centered on it | A row with `href` is a link from edge to edge with a chevron at its end; a link inside `line` still goes where it points. `before` sets the earlier grade faded beside the grade; no `grade` draws a dash read as not graded. `legend` explains the letters beside the `title`, or under the card with `legendAt="foot"`; `labels` sets the screen reader's words. The grade is `GradeChip` |
+| `Rank` | A figure with its badge, for a table cell | `figure` is the rank, the place, or a dash for none; `tone` colors the badge and `meaning` names it for a screen reader; `href` links the figure, in a new tab with `newTab`. The figure's slot is a fixed width, so the badges line up down a column |
+| `DataTable` | A table whose first column names each row, sortable by any column marked `sortable` | A click on a heading sorts on a wide screen. On a phone each row stacks, every fact wearing its column's label, and a dropdown sorts. A cell is a node, or `{ display, sort }` when what it shows is not what it sorts by; a formatted number in a string (`"$12,047"`, `"0.24%"`) sorts as a number. It renders in `defaultSort` on the server. Every other row sits on a tinted ground; `striped={false}` turns that off. A column marked `fit` hugs its content, for a swatch or a mark beside a figure |
 | `StatRow` | A row of large figures, each over what it counts and its `period`. `variant="quiet"` is the glance row for a working page: a light figure in the text color over a small capitalized label, hairlines between; `unit` sets a figure's unit small beside it | `trend` draws an arrow before a figure that is itself a change. `deltas` list comparisons beneath: an arrow, how far, against what (`basis`), and the earlier figure (`was`), each in its own tone, since a spend falling and a cost falling read differently |
 | `Callout` | One finding: an icon in its tone beside the title, the explainer under it | `variant="box"` sets it apart on a tinted ground, for something missing or owed |
 | `Disclosure` | A section the reader opens and closes, in two forms chosen by whether `open` is passed | Controlled (`open` and `onToggle`), it is an app's card: the caller remembers what was folded, a closed body is not rendered, the label is the toggle, `meta` (a count, a flag) sits beside it outside its name, and `headingLevel` makes the label a real heading. Uncontrolled, it is a document's fold: a native `details` with a `summary` line that carries the point and `defaultOpen`, so it works before any script loads, find in page opens it, and it prints open. `Collapsible`, the fold's old name, was folded in at 0.18.0 |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/artifact/GradeChip.tsx

@@ -18,8 +18,8 @@ export const gradeLabel: Record<WriteupGrade, string> = {
 /**
  * The letter as a chip in its grade's color. The documents in
  * @atelic-action/artifact (the writeup, the read, the monthly page) wear it,
- * so its styles live in the base sheet chain (styles/artifact.css), never in
- * a document's stylesheet.
+ * and so does ReportCard, so its styles live in styles/components.css, which
+ * an app may load alone; never in a document's stylesheet.
  */
 export function GradeChip({ grade }: { grade: WriteupGrade }) {
 	return (

package/src/components/DataTable.tsx

@@ -13,6 +13,8 @@ export interface DataTableColumn {
 	sortable?: boolean;
 	/** The direction a first click sorts in; numbers usually read best largest first. */
 	firstSort?: SortDirection;
+	/** The column hugs its content (a swatch, a mark) instead of sharing the width. */
+	fit?: boolean;
 }
 
 /** A cell whose display is not what it sorts by, e.g. an icon over a number. */
@@ -37,6 +39,8 @@ export interface DataTableProps {
 	defaultSort?: { column: number; direction: SortDirection };
 	/** The label on the phone's sort control. */
 	sortLabel?: string;
+	/** Every other row on a tinted ground, so a wide table reads across. On by default. */
+	striped?: boolean;
 	className?: string;
 }
 
@@ -71,6 +75,7 @@ export function DataTable({
 	rows,
 	defaultSort,
 	sortLabel = "Sort by",
+	striped = true,
 	className,
 }: DataTableProps) {
 	const [sort, setSort] = useState(defaultSort ?? null);
@@ -102,7 +107,7 @@ export function DataTable({
 	};
 
 	return (
-		<div className={["data-table", className].filter(Boolean).join(" ")}>
+		<div className={["data-table", striped && "is-striped", className].filter(Boolean).join(" ")}>
 			{anySortable && (
 				<div className="data-table-sort">
 					<label htmlFor={selectId}>{sortLabel}</label>
@@ -135,21 +140,20 @@ export function DataTable({
 						{columns.map((column, index) => {
 							const active = sort?.column === index;
 							const Icon = !active ? ArrowUpDown : sort?.direction === "asc" ? ArrowUp : ArrowDown;
+							const head = {
+								"data-align": column.align ?? "left",
+								"data-fit": column.fit || undefined,
+								"aria-sort": column.sortable
+									? active
+										? sort?.direction === "asc"
+											? ("ascending" as const)
+											: ("descending" as const)
+										: ("none" as const)
+									: undefined,
+							};
 							return (
-								<th
-									scope="col"
-									key={column.label}
-									data-align={column.align ?? "left"}
-									aria-sort={
-										column.sortable
-											? active
-												? sort?.direction === "asc"
-													? "ascending"
-													: "descending"
-												: "none"
-											: undefined
-									}
-								>
+								// biome-ignore lint/suspicious/noArrayIndexKey: columns sit in order, and two may share a blank label
+								<th scope="col" key={index} {...head}>
 									{column.sortable ? (
 										<button
 											type="button"
@@ -171,16 +175,19 @@ export function DataTable({
 					{sorted.map(({ row, index }) => (
 						<tr key={index} data-tone={row.tone}>
 							{row.cells.map((cell, c) => {
-								const align = columns[c]?.align ?? "left";
 								const body = isValueCell(cell) ? cell.display : cell;
+								const shape = {
+									"data-align": columns[c]?.align ?? "left",
+									"data-fit": columns[c]?.fit || undefined,
+								};
 								return c === 0 ? (
 									// biome-ignore lint/suspicious/noArrayIndexKey: cells sit in column order
-									<th scope="row" key={c} data-align={align}>
+									<th scope="row" key={c} {...shape}>
 										{body}
 									</th>
 								) : (
 									// biome-ignore lint/suspicious/noArrayIndexKey: cells sit in column order
-									<td key={c} data-align={align} data-label={columns[c]?.label}>
+									<td key={c} {...shape} data-label={columns[c]?.label}>
 										{body}
 									</td>
 								);

package/src/components/IconList.tsx

@@ -0,0 +1,43 @@
+import { Dot } from "lucide-react";
+import type { ReactNode } from "react";
+import type { Tone } from "./tone";
+
+export interface IconListItem {
+	/** The item itself. */
+	body: ReactNode;
+	/** The icon it leads with, e.g. a lucide icon at size 16; the list's when left out. */
+	icon?: ReactNode;
+	/** The tone its bullet reads in; the list's when left out. */
+	tone?: Tone;
+}
+
+export interface IconListProps {
+	items: IconListItem[];
+	/** The bullet every item without its own leads with; a dot when left out. */
+	icon?: ReactNode;
+	/** The tone every bullet without its own reads in; the text's color when left out. */
+	tone?: Tone;
+	className?: string;
+}
+
+/**
+ * A list whose bullets are icons: one for the whole list, or one per item,
+ * each in a tone set the same two ways. The bullets are decoration; the
+ * items carry the meaning, so a screen reader hears the list and not the
+ * icons.
+ */
+export function IconList({ items, icon, tone, className }: IconListProps) {
+	return (
+		<ul className={["icon-list", className].filter(Boolean).join(" ")} data-tone={tone}>
+			{items.map((item, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: items are static content in a fixed order
+				<li key={i} data-tone={item.tone}>
+					<span className="icon-list-bullet" aria-hidden="true">
+						{item.icon ?? icon ?? <Dot size={16} strokeWidth={4} />}
+					</span>
+					<span className="icon-list-body">{item.body}</span>
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/components/Rank.tsx

@@ -0,0 +1,37 @@
+import { newTabProps } from "../lib/newTabProps";
+import type { Tone } from "./tone";
+
+export interface RankProps {
+	/** The figure: a rank, a place in an answer, or a dash for none. */
+	figure: string;
+	/** The tone its badge reads in. */
+	tone: Tone;
+	/** What the badge means, for a screen reader, e.g. "Top ten". */
+	meaning: string;
+	/** Where the figure leads, e.g. the page that holds the rank. */
+	href?: string;
+	/** Open the link in a new tab. */
+	newTab?: boolean;
+	className?: string;
+}
+
+/**
+ * A figure with its badge, for a table cell: the badge in its tone on the
+ * left, the figure on the right, linked when it has somewhere to go. The
+ * figure's slot is a fixed width, so every rank in a column is the same width
+ * and the badges line up down it.
+ */
+export function Rank({ figure, tone, meaning, href, newTab, className }: RankProps) {
+	return (
+		<span className={["rank", className].filter(Boolean).join(" ")} data-tone={tone}>
+			<span className="chart-swatch" role="img" aria-label={meaning} />
+			{href ? (
+				<a href={href} {...newTabProps(href, newTab)}>
+					{figure}
+				</a>
+			) : (
+				<span>{figure}</span>
+			)}
+		</span>
+	);
+}

package/src/components/ReportCard.tsx

@@ -0,0 +1,153 @@
+import { ChevronRight } from "lucide-react";
+import { Fragment, type ReactNode, useId } from "react";
+import { GradeChip, gradeLabel, type WriteupGrade } from "../artifact/GradeChip";
+
+export interface ReportCardRow {
+	/** The row's name, e.g. a section's trade name. */
+	name: ReactNode;
+	/** Where the row leads, e.g. "#technical-seo"; the whole row is the link when set. */
+	href?: string;
+	/** The grade; a dash, read as not graded, when left out. */
+	grade?: WriteupGrade;
+	/** The earlier grade, faded beside the grade: what moved. */
+	before?: WriteupGrade;
+	/** The line behind the grade, in the owner's words. */
+	line?: ReactNode;
+}
+
+export interface ReportCardGroup {
+	/** The label over the group's rows, e.g. "Health". */
+	title: string;
+	rows: ReportCardRow[];
+}
+
+/** The words a screen reader hears around the letters. */
+export interface ReportCardLabels {
+	/** Before a grade; "Grade". */
+	grade: string;
+	/** Before the earlier grade; "Before". */
+	before: string;
+	/** For a row with no grade; "Not graded yet". */
+	notGraded: string;
+}
+
+export const reportCardLabels: ReportCardLabels = {
+	grade: "Grade",
+	before: "Before",
+	notGraded: "Not graded yet",
+};
+
+export interface ReportCardProps {
+	id?: string;
+	/** The heading over the card, e.g. "At a Glance". */
+	title?: ReactNode;
+	/** What a screen reader calls the card when it has no title. */
+	label?: string;
+	/** What each letter means, in a few words each, right of the title. */
+	legend?: Array<{ grade: WriteupGrade; label: string }>;
+	/** Where the legend sits: beside the title, or under the card so nothing sits between a heading and the rows. */
+	legendAt?: "head" | "foot";
+	groups: ReportCardGroup[];
+	labels?: Partial<ReportCardLabels>;
+	className?: string;
+}
+
+/**
+ * A report card: a name, a grade, and one line on it per row, in labeled
+ * groups, each row's parts centered on it. A group's label
+ * is not a heading: the card sits inside a document whose outline the
+ * sections already carry. A row with an
+ * href is a link from edge to edge, with a chevron at its end; a link inside
+ * the line still goes where it points. The grade is the chip every document
+ * wears, and the earlier grade, when there is one, sits faded beside it.
+ */
+export function ReportCard({
+	id,
+	title,
+	label,
+	legend,
+	legendAt = "head",
+	groups,
+	labels: overrides,
+	className,
+}: ReportCardProps) {
+	// An override left undefined keeps the default, so a caller can pass what it has.
+	const titleId = useId();
+	const labels = { ...reportCardLabels };
+	for (const key of Object.keys(labels) as Array<keyof ReportCardLabels>) {
+		const word = overrides?.[key];
+		if (word !== undefined) labels[key] = word;
+	}
+	const shown = groups.filter((group) => group.rows.length > 0);
+	const hasLegend = legend !== undefined && legend.length > 0;
+	const key = hasLegend && (
+		<ul className={legendAt === "foot" ? "rc-legend rc-legend-foot" : "rc-legend"}>
+			{legend.map((entry, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: a legend is static, and two entries may share a letter
+				<li key={`${i}-${entry.grade}`}>
+					<GradeChip grade={entry.grade} />
+					<span>{entry.label}</span>
+				</li>
+			))}
+		</ul>
+	);
+	return (
+		<section
+			className={["report-card", className].filter(Boolean).join(" ")}
+			id={id}
+			aria-labelledby={title ? titleId : undefined}
+			aria-label={title ? undefined : label}
+		>
+			{(title || (hasLegend && legendAt === "head")) && (
+				<div className="rc-head">
+					{title && (
+						<h2 className="rc-title" id={titleId}>
+							{title}
+						</h2>
+					)}
+					{legendAt === "head" && key}
+				</div>
+			)}
+			<div className="rc-card">
+				{shown.map((group, g) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: two groups may share a title
+					<Fragment key={`${g}-${group.title}`}>
+						<div className="rc-group">{group.title}</div>
+						{group.rows.map((row, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: rows are static content in a fixed order
+							<div className="rc-row" key={i}>
+								<span className="rc-grade">
+									{row.before && (
+										<span className="rc-before">
+											<span className="rc-sr">{`${labels.before}: ${gradeLabel[row.before]}. `}</span>
+											<span aria-hidden="true">
+												<GradeChip grade={row.before} />
+											</span>
+										</span>
+									)}
+									{row.grade ? (
+										<>
+											<span className="rc-sr">{`${labels.grade} ${gradeLabel[row.grade]}: `}</span>
+											<span aria-hidden="true">
+												<GradeChip grade={row.grade} />
+											</span>
+										</>
+									) : (
+										<>
+											<span className="rc-sr">{`${labels.notGraded}: `}</span>
+											<span className="rc-dash" aria-hidden="true" />
+										</>
+									)}
+								</span>
+								<b className="rc-name">{row.href ? <a href={row.href}>{row.name}</a> : row.name}</b>
+								{row.line != null && <span className="rc-line">{row.line}</span>}
+								{row.href && <ChevronRight className="rc-go" size={18} aria-hidden="true" />}
+							</div>
+						))}
+					</Fragment>
+				))}
+			</div>
+			{legendAt === "foot" && key}
+		</section>
+	);
+}

package/src/components/StackedBar.tsx

@@ -48,8 +48,8 @@ export function StackedBar({ segments, showKey = true, className }: StackedBarPr
 					{segments.map((segment) => (
 						<li key={segment.label} data-tone={segment.tone} style={fill(segment)}>
 							<span className="chart-swatch" aria-hidden="true" />
-							<b>{figure(segment)}</b>
 							<span>{segment.label}</span>
+							<b>{figure(segment)}</b>
 						</li>
 					))}
 				</ul>

package/src/components/index.ts

@@ -23,7 +23,17 @@ export {
 	type DisclosureProps,
 } from "./Disclosure";
 export { GateLogin, type GateLoginProps } from "./GateLogin";
+export { IconList, type IconListItem, type IconListProps } from "./IconList";
 export { NotFound, type NotFoundProps } from "./NotFound";
+export { Rank, type RankProps } from "./Rank";
+export {
+	ReportCard,
+	type ReportCardGroup,
+	type ReportCardLabels,
+	type ReportCardProps,
+	type ReportCardRow,
+	reportCardLabels,
+} from "./ReportCard";
 export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";
 export { describeStarRating, StarRating, type StarRatingProps } from "./StarRating";
 export {

package/src/styles/artifact.css

@@ -1,5 +1,6 @@
 /* The pieces the artifact documents are built from, under src/artifact: the
-   grade chip, the sign off, the shot, and the shell's logo and print rules. The
+   sign off, the shot, and the shell's logo and print rules (the grade chip's
+   rules sit in components.css, since ReportCard wears it there). The
    composed documents (the writeup, the read, the monthly page, the note,
    and the sealed document stage) and their sheet, with both @page rules,
    live in @atelic-action/artifact (its styles/documents.css), which a site
@@ -8,58 +9,17 @@
    a layer still wins over it whatever its specificity. */
 @layer atelic-ui {
 	/* =================================================================
-	   SHARED: the vocabulary every document wears, the grade chip
-	   (GradeChip), the sign off lockup (SignOff), and the shot (Shot). A
+	   SHARED: the vocabulary every document wears, the sign off lockup
+	   (SignOff) and the shot (Shot). A
 	   class used by more than one document lives in the base sheet chain
 	   rather than in a component's stylesheet, so it can never vanish from
 	   a page that does not import the component that defined it.
 
-	   Tokens only, with one deliberate literal set: the four grade colors.
+	   Tokens only.
 	   ================================================================= */
 
-	/* ---- the grade chip ---- */
-	.atelic-ui .op-grade {
-		display: inline-block;
-		vertical-align: 0.1em;
-		margin-left: 0.6em;
-		padding: 0.1em 0.55em 0.12em;
-		border: 1px solid var(--hairline-strong);
-		border-radius: 999px;
-		font-family: var(--font-mono);
-		font-size: 7pt;
-		font-weight: 600;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--ink-soft);
-		line-height: 1.3;
-		min-width: 1.6em;
-		text-align: center;
-	}
-	/* The four grade colors are a deliberate literal set: a grade reads
-	   green, yellow, orange, red
-	   everywhere, whatever the brand's palette, so they are not theme tokens.
-	   The orange sits between the yellow's hue and the red's so the four stay
-	   apart on paper, and its letter clears AA on its own tint. */
-	.atelic-ui .op-grade[data-grade="a"] {
-		color: #1b7f3b;
-		border-color: #1b7f3b;
-		background: #eaf6ee;
-	}
-	.atelic-ui .op-grade[data-grade="b"] {
-		color: #9a6b00;
-		border-color: #c99a1a;
-		background: #fdf5dc;
-	}
-	.atelic-ui .op-grade[data-grade="c"] {
-		color: #a84500;
-		border-color: #e8650a;
-		background: #fff0e3;
-	}
-	.atelic-ui .op-grade[data-grade="d"] {
-		color: #b3261e;
-		border-color: #b3261e;
-		background: #fdecea;
-	}
+	/* The grade chip's rules, its phone size included, live in components.css,
+	   since ReportCard wears it there and an app may load that sheet alone. */
 
 	/* ---- the sign off lockup: its container sets the size and the color ---- */
 	.atelic-ui .op-who {
@@ -93,9 +53,6 @@
 	}
 
 	@media screen and (max-width: 899px) {
-		.atelic-ui .op-grade {
-			font-size: 10px;
-		}
 		.atelic-ui .op-sign {
 			font-size: 22px;
 		}

package/src/styles/components.css

@@ -390,7 +390,303 @@
 		color: var(--ink-soft);
 	}
 
-	/* ---- The charts' shared key: a swatch, a figure, a label ---- */
+	/* ---- IconList: a list whose bullets are icons, each in a tone ---- */
+	.atelic-ui .icon-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 8px;
+	}
+	.atelic-ui .icon-list li {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		column-gap: 10px;
+		align-items: start;
+		line-height: 1.45;
+		text-wrap: pretty;
+	}
+	/* A list with no tone of its own reads in the text color, whatever tone its ancestor carries; an item's own tone still wins on its row. */
+	.atelic-ui .icon-list:not([data-tone]) {
+		--tone: currentColor;
+	}
+	.atelic-ui .icon-list-bullet {
+		display: inline-flex;
+		margin-top: 0.2em;
+		line-height: 0;
+		color: var(--tone, currentColor);
+	}
+
+	/* ---- GradeChip: the letter in its grade's color. The four colors are a
+	   deliberate literal set, green, yellow, orange, red, whatever the
+	   brand's palette, so they are not theme tokens. It lives here rather
+	   than in artifact.css because ReportCard wears it, and an app may load
+	   this sheet alone. ---- */
+	.atelic-ui .op-grade {
+		display: inline-block;
+		vertical-align: 0.1em;
+		margin-left: 0.6em;
+		padding: 0.1em 0.55em 0.12em;
+		border: 1px solid var(--hairline-strong);
+		border-radius: 999px;
+		font-family: var(--font-mono);
+		font-size: 7pt;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--ink-soft);
+		line-height: 1.3;
+		min-width: 1.6em;
+		text-align: center;
+	}
+	/* The orange sits between the yellow's hue and the red's so the four
+	   stay apart on paper, and its letter clears AA on its own tint. */
+	.atelic-ui .op-grade[data-grade="a"] {
+		color: #1b7f3b;
+		border-color: #1b7f3b;
+		background: #eaf6ee;
+	}
+	.atelic-ui .op-grade[data-grade="b"] {
+		color: #9a6b00;
+		border-color: #c99a1a;
+		background: #fdf5dc;
+	}
+	.atelic-ui .op-grade[data-grade="c"] {
+		color: #a84500;
+		border-color: #e8650a;
+		background: #fff0e3;
+	}
+	.atelic-ui .op-grade[data-grade="d"] {
+		color: #b3261e;
+		border-color: #b3261e;
+		background: #fdecea;
+	}
+	@media screen and (max-width: 899px) {
+		.atelic-ui .op-grade {
+			font-size: 10px;
+		}
+	}
+
+	/* ---- ReportCard: a name, a grade, and a line per row, in labeled
+	   groups ---- */
+	.atelic-ui .report-card {
+		min-width: 0;
+	}
+	.atelic-ui .rc-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px 20px;
+		margin-bottom: 10px;
+	}
+	.atelic-ui .rc-title {
+		margin: 0;
+		font-family: var(--font-mono);
+		font-size: 13px;
+		font-weight: 500;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--neutral-500);
+	}
+	.atelic-ui .rc-legend {
+		list-style: none;
+		margin: 0 0 0 auto;
+		padding: 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 16px;
+		font-size: 13.5px;
+		color: var(--ink-soft);
+	}
+	.atelic-ui .rc-legend-foot {
+		justify-content: flex-end;
+		margin: 10px 0 0;
+		padding: 0 4px;
+	}
+	.atelic-ui .rc-legend li {
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+	}
+	.atelic-ui .rc-legend .op-grade {
+		display: inline-grid;
+		place-items: center;
+		width: 22px;
+		height: 22px;
+		margin-left: 0;
+		padding: 0;
+		border-radius: 6px;
+		font-size: 12px;
+		line-height: 1;
+	}
+	.atelic-ui .rc-card {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		background: var(--ui-card, var(--card));
+		border: 1px solid var(--neutral-100);
+		border-radius: var(--radius-md);
+		box-shadow: var(--shadow-sm, none);
+		overflow: hidden;
+	}
+	.atelic-ui .rc-group {
+		grid-column: 1 / -1;
+		margin: 0;
+		padding: 7px 16px;
+		background: var(--surface-alt, var(--neutral-100));
+		font-family: var(--font-mono);
+		font-size: 11.5px;
+		font-weight: 500;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--ink-soft);
+	}
+	/* A row is a subgrid of the card, so its parts line up down the card. On
+	   a phone the name sits over the line; wide, they sit side by side. The
+	   name's link stretches over the whole row. */
+	.atelic-ui .rc-row {
+		position: relative;
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-template-rows: auto auto;
+		column-gap: 12px;
+		row-gap: 2px;
+		align-items: center;
+		align-content: center;
+		padding: 12px 12px 12px 16px;
+		border-top: 1px solid var(--neutral-100);
+		transition: background-color 120ms ease;
+	}
+	.atelic-ui .rc-grade {
+		grid-row: 1 / span 2;
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.atelic-ui .rc-grade .op-grade {
+		display: inline-grid;
+		place-items: center;
+		width: 30px;
+		height: 30px;
+		margin-left: 0;
+		padding: 0;
+		border-radius: 9px;
+		font-size: 15px;
+		line-height: 1;
+	}
+	.atelic-ui .rc-before .op-grade {
+		opacity: 0.45;
+	}
+	.atelic-ui .rc-dash {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		color: var(--neutral-500);
+	}
+	.atelic-ui .rc-dash::before {
+		content: "";
+		width: 12px;
+		border-top: 2px solid currentColor;
+	}
+	.atelic-ui .rc-name {
+		grid-column: 2;
+		font-size: 16px;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+		line-height: 1.35;
+		color: var(--ink);
+	}
+	.atelic-ui .rc-name a {
+		color: inherit;
+		text-decoration: none;
+	}
+	.atelic-ui .rc-name a::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+	.atelic-ui .rc-line {
+		grid-column: 2;
+		font-size: 15px;
+		line-height: 1.45;
+		color: var(--ink-soft);
+		text-wrap: pretty;
+	}
+	.atelic-ui .rc-line a {
+		position: relative;
+		z-index: 1;
+		color: var(--ui-primary, var(--primary));
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.atelic-ui .rc-go {
+		grid-column: 3;
+		grid-row: 1 / span 2;
+		color: var(--neutral-500);
+	}
+	.atelic-ui .rc-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	@media print, (min-width: 721px) {
+		.atelic-ui .rc-card {
+			grid-template-columns: auto 232px minmax(0, 1fr) auto;
+		}
+		.atelic-ui .rc-group {
+			padding: 7px 20px;
+		}
+		.atelic-ui .rc-row {
+			grid-template-rows: auto;
+			column-gap: 16px;
+			padding: 11px 14px 11px 20px;
+		}
+		.atelic-ui .rc-grade,
+		.atelic-ui .rc-go {
+			grid-row: 1;
+		}
+		.atelic-ui .rc-line {
+			grid-column: 3;
+		}
+		.atelic-ui .rc-go {
+			grid-column: 4;
+		}
+	}
+	@media print {
+		.atelic-ui .rc-card {
+			box-shadow: none;
+			border-color: var(--neutral-200);
+		}
+		.atelic-ui .rc-go {
+			display: none;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.atelic-ui .rc-row {
+			transition: none;
+		}
+	}
+	.atelic-ui .rc-row:has(.rc-name a):hover,
+	.atelic-ui .rc-row:has(.rc-name a):focus-within {
+		background: color-mix(in srgb, var(--ui-primary, var(--primary)) 6%, transparent);
+	}
+	.atelic-ui .rc-row:has(.rc-name a):hover .rc-name,
+	.atelic-ui .rc-row:has(.rc-name a):focus-within .rc-name,
+	.atelic-ui .rc-row:has(.rc-name a):hover .rc-go,
+	.atelic-ui .rc-row:has(.rc-name a):focus-within .rc-go {
+		color: var(--ui-primary, var(--primary));
+	}
+
+	/* ---- The charts' shared key: a swatch, a label, a figure ---- */
 	.atelic-ui .chart-key {
 		list-style: none;
 		margin: 10px 0 0;
@@ -420,6 +716,24 @@
 		flex: none;
 	}
 
+	/* ---- Rank: a figure with its badge; the figure's slot is a fixed
+	   width, so every rank in a column is the same width and the badges
+	   line up down it ---- */
+	.atelic-ui .rank {
+		display: inline-grid;
+		grid-template-columns: auto 2.6em;
+		column-gap: 8px;
+		align-items: center;
+	}
+	.atelic-ui .rank .chart-swatch {
+		justify-self: start;
+	}
+	.atelic-ui .rank > a,
+	.atelic-ui .rank > span:last-child {
+		justify-self: end;
+		font-variant-numeric: tabular-nums;
+	}
+
 	/* ---- StackedBar: one bar, the parts of a whole ---- */
 	.atelic-ui .stacked-bar-track {
 		display: flex;
@@ -619,6 +933,9 @@
 		border-bottom: 0;
 		padding-bottom: 0;
 	}
+	.atelic-ui .data-table.is-striped tbody tr:nth-child(even) {
+		background: color-mix(in srgb, var(--ink) 3%, transparent);
+	}
 	.atelic-ui .data-table tbody th {
 		width: 100%;
 		text-align: left;
@@ -686,6 +1003,10 @@
 		.atelic-ui .data-table [data-align="center"] {
 			text-align: center;
 		}
+		.atelic-ui .data-table [data-fit] {
+			width: 1%;
+			white-space: nowrap;
+		}
 		.atelic-ui .data-table [data-align="right"] {
 			text-align: right;
 		}
@@ -719,11 +1040,22 @@
 			color: var(--ui-primary, var(--primary));
 		}
 		.atelic-ui .data-table thead th button svg {
+			flex: none;
 			opacity: 0.55;
 		}
 		.atelic-ui .data-table thead th button[data-active] svg {
 			opacity: 1;
 		}
+		/* Striped, the cells take side padding so the band reads, the last column included. */
+		.atelic-ui .data-table.is-striped th,
+		.atelic-ui .data-table.is-striped td {
+			padding-left: 10px;
+			padding-right: 10px;
+		}
+		.atelic-ui .data-table.is-striped th:last-child,
+		.atelic-ui .data-table.is-striped td:last-child {
+			padding-right: 10px;
+		}
 		.atelic-ui .data-table tbody tr:last-child th,
 		.atelic-ui .data-table tbody tr:last-child td {
 			border-bottom: 0;