@atelic-action/artifact 1.3.0 → 3.0.0

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 {
@@ -1126,7 +1020,7 @@
 		font-weight: 650;
 		color: var(--op-ink);
 	}
-	.atelic-ui .op-topic-head > .op-grade {
+	.atelic-ui .op-topic-head .op-grade {
 		width: 42px;
 		height: 42px;
 		border-radius: 12px;
@@ -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;
 		}
@@ -1582,7 +1458,7 @@
 		.atelic-ui .op-topic h3 {
 			font-size: 23px;
 		}
-		.atelic-ui .op-topic-head > .op-grade {
+		.atelic-ui .op-topic-head .op-grade {
 			width: 46px;
 			height: 46px;
 			border-radius: 13px;
@@ -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
@@ -2160,20 +2036,23 @@
 	   column, the head, the grade chip and its key, the tier heading, the
 	   section card, the screen, the close, and every print rule of the
 	   writeup's are its own already. This block adds only what the read has
-	   and the writeup does not: the gist table, the beats of a section (the
-	   tools we looked through, what they showed with its facts and
-	   examples, why, today and after, and what we recommend), the proof
-	   pictures in a row, and the numbered plan. It sets no @page; the writeup's, earlier in this sheet and the
+	   and the writeup does not: the gist table and the note under it, the
+	   two beats a section adds to the writeup's card (today and after, and
+	   what we recommend), and the numbered plan. It sets no @page; the writeup's, earlier in this sheet and the
 	   later of the two there, sets letter paper for every artifact page.
 
 	   Tokens only (theme.css).
 	   ================================================================= */
 
+	/* The lede runs the full width of the page; the writeup's intro is the one that is capped. */
+	.atelic-ui .rd-lede {
+		max-width: none;
+	}
 	/* Prose links read as links here, where the writeup's are quiet. */
 	.atelic-ui .rd-lede a,
 	.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);
@@ -2183,88 +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;
-	}
-
-	/* ---- a section: the trade name over the question, then its beats ---- */
-	/* The owner's question sits under the section's name. */
-	.atelic-ui .rd-question {
-		margin: 4px 0 0;
-		font-size: 15.5px;
-		line-height: 1.4;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .rd-grade .op-grade {
-		width: 42px;
-		height: 42px;
-		border-radius: 12px;
-		font-size: 21px;
+	.atelic-ui .op-part + .rd-gist {
+		margin-top: 0;
 	}
 	.atelic-ui .rd-beat {
 		margin-top: 20px;
@@ -2287,104 +2090,7 @@
 	.atelic-ui .rd-beat p:last-child {
 		margin-bottom: 0;
 	}
-	/* Where we looked: the tools in a row at the top of the section, each a
-	   link with its line under it. */
-	.atelic-ui .rd-tools-list {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px 28px;
-	}
-	.atelic-ui .rd-tools-list li {
-		display: flex;
-		flex-direction: column;
-		gap: 1px;
-		min-width: 0;
-		max-width: 100%;
-	}
-	.atelic-ui .rd-tools-list a,
-	.atelic-ui .rd-tool-name {
-		display: inline-flex;
-		align-items: center;
-		gap: 3px;
-		font-size: 15px;
-		font-weight: 600;
-		color: var(--op-accent);
-		text-decoration: none;
-	}
-	.atelic-ui .rd-tool-name {
-		color: var(--op-ink);
-	}
-	.atelic-ui .rd-tools-list a:hover {
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-	.atelic-ui .rd-tools-list svg {
-		flex: none;
-	}
-	.atelic-ui .rd-tool-note {
-		font-size: 13px;
-		line-height: 1.35;
-		color: var(--op-ink-faint);
-	}
-
-	/* What it showed: the facts as a compact table of label and value, in
-	   the writeup's table dress (an ink rule over thin row rules). */
-	.atelic-ui .rd-facts {
-		width: 100%;
-		max-width: 620px;
-		margin: 12px 0 0;
-		border-collapse: collapse;
-		border-top: 1.5px solid var(--op-ink);
-		font-size: 15px;
-		line-height: 1.4;
-	}
-	.atelic-ui .rd-facts th,
-	.atelic-ui .rd-facts td {
-		padding: 7px 14px 7px 0;
-		border-bottom: 1px solid var(--neutral-100);
-		text-align: left;
-		vertical-align: top;
-	}
-	.atelic-ui .rd-facts th {
-		width: 55%;
-		font-weight: 400;
-		color: var(--op-ink-soft);
-	}
-	.atelic-ui .rd-facts td {
-		padding-right: 0;
-		font-weight: 600;
-		color: var(--op-ink);
-		font-variant-numeric: tabular-nums;
-	}
-	.atelic-ui .rd-facts tr:last-child > * {
-		border-bottom: 0;
-	}
-
-	/* The examples: a list or more, each under its own short heading. */
-	.atelic-ui .rd-examples-block {
-		margin-top: 14px;
-		max-width: 68ch;
-	}
-	.atelic-ui .rd-examples-block h5 {
-		margin: 0 0 4px;
-		font-size: 15px;
-		font-weight: 650;
-		color: var(--op-ink);
-	}
-	.atelic-ui .rd-examples {
-		list-style: disc;
-		margin: 0;
-		padding-left: 1.2em;
-		color: var(--op-ink-soft);
-		text-wrap: pretty;
-	}
-	.atelic-ui .rd-examples li + li {
-		margin-top: 4px;
-	}
-	/* The note under the gist table: what the read leaves out, on the why panel's tint. */
+	/* The note under the gist table: what the read leaves out, on a tinted panel with the accent's rule. */
 	.atelic-ui .rd-note {
 		margin-top: 18px;
 		padding: 12px 14px;
@@ -2398,31 +2104,6 @@
 		color: var(--op-ink);
 		text-wrap: pretty;
 	}
-	/* Why is one sentence, set apart: a tinted panel with the accent's rule. */
-	.atelic-ui .rd-why {
-		padding: 12px 14px;
-		border-left: 3px solid var(--op-accent);
-		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-		background: var(--surface-alt);
-	}
-	.atelic-ui .rd-why p {
-		font-size: 16.5px;
-		font-weight: 550;
-		line-height: 1.45;
-		color: var(--op-ink);
-	}
-	/* The proof pictures sit in a row at one size, a search capture per
-	   market; a phone stacks them. */
-	.atelic-ui .rd-shots {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		gap: 14px;
-		margin-top: 14px;
-	}
-	/* A lone picture keeps a screen's size rather than filling the card. */
-	.atelic-ui .rd-shots[data-count="1"] {
-		max-width: 380px;
-	}
 
 	/* Today and after: what a thing is, and what it becomes. Two columns
 	   wide; on a phone each row stacks, each half wearing its label. */
@@ -2484,26 +2165,27 @@
 		color: var(--op-accent);
 	}
 
-	/* What we recommend: a checklist, each item led by the accent's check. */
-	.atelic-ui .rd-checks {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: grid;
-		gap: 8px;
-		max-width: 68ch;
+	/* The recommendations: ui's icon list across the card's width, each bullet the accent's check unless the item brings its own icon or tone. */
+	.atelic-ui .rd-recommend .rd-checks {
+		--tone: var(--op-accent);
 	}
-	.atelic-ui .rd-checks 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 or a table inside a finding: a little air above it. */
+	.atelic-ui .op-findings .callout-body .icon-list {
+		margin-top: 6px;
 	}
-	.atelic-ui .rd-checks svg {
-		margin-top: 0.2em;
-		color: var(--op-accent);
+	.atelic-ui .op-findings .callout-body .data-table,
+	.atelic-ui .rd-checks .data-table {
+		margin-top: 12px;
+	}
+	/* In the read, three pictures fill the card's width. */
+	.atelic-ui .rd-doc .op-shots-row[data-count="3"] {
+		max-width: none;
+	}
+	/* 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 {
+		display: inline-block;
+		vertical-align: middle;
 	}
 
 	/* ---- the plan: the steps in order, numbered ---- */
@@ -2524,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);
@@ -2537,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;
@@ -2591,16 +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-facts th {
-			width: 45%;
-		}
 		.atelic-ui .rd-changes-table {
 			display: table;
 			table-layout: fixed;
@@ -2661,37 +2363,24 @@
 		.atelic-ui .rd-changes-table tbody tr:last-child td {
 			border-bottom: 0;
 		}
-		.atelic-ui .rd-shots[data-count="2"] {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
-		.atelic-ui .rd-shots[data-count="3"] {
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-		}
 	}
 
 	/* ---- 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-facts,
-		.atelic-ui .rd-tools,
 		.atelic-ui .rd-checks li,
 		.atelic-ui .rd-closing,
 		.atelic-ui .rd-note,
-		.atelic-ui .rd-why,
 		.atelic-ui .rd-step,
-		.atelic-ui .rd-close,
-		.atelic-ui .rd-shots .op-shot {
+		.atelic-ui .rd-close {
 			break-inside: avoid;
 		}
 		.atelic-ui .rd-beat h4,
-		.atelic-ui .rd-examples-block h5,
 		.atelic-ui .rd-plan h2 {
 			break-after: avoid;
 		}