@certrev/cert-block 1.2.1 → 2.0.0

package/src/reader/reader.css

@@ -2,7 +2,7 @@
 /* GENERATED by scripts/build-cert-reader-css.mjs from src/lib/cert-render/reader/site-snapshot/ (certrev.com,
  * component Reader, "What your reader sees"). DO NOT EDIT: run `pnpm build:cert-reader-css`. The face is driven by
  * four variables the Liquid root sets inline: --cr-ba accent, --cr-ba-fg accent foreground, --cr-br corner, --cr-bf
- * font. */
+ * font; a toned face (class certrev-r-toned) adds --cr-sf surface and --cr-ink ink. */
 .certrev-reader {
 	color: #141414 !important;
 	font-family: var(--cr-bf) !important;
@@ -36,7 +36,7 @@
 .certrev-reader *:after {
 	box-sizing: border-box;
 }
-.certrev-reader :is(div, section, aside, p, blockquote, span, a, b, strong, em, i, time, small) {
+.certrev-reader :is(div, section, aside, details, summary, p, blockquote, span, a, b, strong, em, i, time, small) {
 	color: inherit !important;
 	font-family: inherit !important;
 	font-size: inherit !important;
@@ -505,6 +505,116 @@
 .certrev-reader .certrev-r-bys.solo {
 	grid-template-columns: minmax(0, 1fr);
 }
+/* Card wrap (owner request 2026-10-12): a date never splits and the credential line breaks only between its parts. Selectors the snapshot does not carry. */
+.certrev-reader .certrev-r-by > div b,
+.certrev-reader .certrev-r-by > div em {
+	overflow-wrap: break-word;
+}
+.certrev-reader .certrev-r-by > div em > span:first-child {
+	max-width: 100%;
+	display: inline-block;
+}
+.certrev-reader .certrev-r-by .certrev-r-nw {
+	white-space: nowrap;
+}
+/* Balanced card (owner request 2026-10-12, "split evenly between the author and expert ... balanced symmetry"): the
+   two bylines are equal 50/50 columns (the snapshot's 0.82fr/1.18fr tilted the card to the expert), carry the same
+   42px face, type scale and rhythm, and their role labels ("Written by" / "Reviewed by") sit on one shared baseline
+   at the foot of each column in one style (the snapshot inked only "Reviewed by"). Under 821px the columns stack
+   with the snapshot's single 18px gap between them, so both entries get identical spacing. */
+@media (min-width: 821px) {
+	.certrev-reader .certrev-r-bys {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 24px;
+	}
+}
+.certrev-reader .certrev-r-bys .certrev-r-by > div {
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+}
+.certrev-reader .certrev-r-bys .certrev-r-role {
+	color: #141414 !important;
+	font-weight: 700 !important;
+	margin-top: auto;
+	padding-top: 9px;
+}
+/* The certified date and the compensation cue sit on one row under both columns, on a shared baseline, left-justified
+   like the rest of the card (Owen 2026-10-17, on a live client's pictures: "where it says certified is weirdly center aligned
+   instead of left justified"; the 2026-10-12 balanced card had centred it). */
+.certrev-reader .certrev-r-card .certrev-r-foot {
+	justify-content: flex-start;
+	align-items: baseline;
+	gap: 6px 28px;
+	text-align: left;
+	flex-wrap: wrap;
+	display: flex;
+}
+.certrev-reader .certrev-r-card .certrev-r-foot span {
+	white-space: nowrap;
+}
+/* The hairline above the footer is an empty div: a theme that hides every empty div (a live client theme does, and a scoped one such as .rte div:empty would out-specify a plain rule, so it is important and carries the card and the element)
+   removes it, and the footer then sits tight under the role labels. */
+.certrev-reader .certrev-r-card div.certrev-r-rule {
+	display: block !important;
+}
+.certrev-reader .certrev-r-card .certrev-r-foot span:empty {
+	display: none;
+}
+.certrev-reader .certrev-r-card .certrev-r-bys + .certrev-r-foot {
+	border-top: 1px solid #14141421;
+	margin-top: 15px;
+	padding-top: 12px;
+}
+@media (max-width: 560px) {
+	.certrev-reader .certrev-r-card .certrev-r-foot {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 6px;
+	}
+}
+/* Memo (owner request 2026-10-13, a live client's iPhone capture): a theme rule such as .rte blockquote centres the quote, pads 80px above it,
+   adds block margins and paints a large mask-image quote glyph (::before); none of that is the face's. The quote is
+   pinned left with no block padding or margin and no pseudo-element glyph (important: the theme's selector can be as
+   specific as ours). On a phone (560px and under) the avatar and name sit on one row and the quote spans the full card
+   width beneath them (the inner div becomes display: contents so the name, quote and links are grid items of the
+   memo); the vertical rule is dropped, the two links share one row, and every item starts at the card's own edge, the
+   same edge as "Verified by CertREV" and the disclaimer. One row gap sets the vertical rhythm. No JS, no clamp. */
+.certrev-reader .certrev-r-memo blockquote {
+	text-align: left !important;
+	margin-block: 0 !important;
+	padding-block: 0 !important;
+}
+.certrev-reader .certrev-r-memo blockquote::before,
+.certrev-reader .certrev-r-memo blockquote::after {
+	content: none !important;
+	display: none !important;
+}
+@media (max-width: 560px) {
+	.certrev-reader .certrev-r-memo {
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: center;
+		gap: 12px;
+		display: grid;
+	}
+	.certrev-reader .certrev-r-memo > div {
+		display: contents;
+	}
+	.certrev-reader .certrev-r-memo .certrev-r-memo-name {
+		margin: 0;
+	}
+	.certrev-reader .certrev-r-memo blockquote {
+		border-left: 0 !important;
+		grid-column: 1 / -1;
+		padding-left: 0 !important;
+	}
+	.certrev-reader .certrev-r-memo .certrev-r-links {
+		flex-flow: row wrap;
+		grid-column: 1 / -1;
+		gap: 6px 20px;
+		margin-top: 0;
+	}
+}
 .certrev-reader .certrev-r-pill {
 	position: fixed;
 	margin-bottom: env(safe-area-inset-bottom, 0px);
@@ -526,10 +636,195 @@
 .certrev-reader .certrev-r-side-links.single a:first-child {
 	border-right: 0;
 }
+/* Collapsible on phones (owner decision 3d0838a4): wider than 640px the card's own bio and memo, at 640px and under the
+   same pair in a closed details. */
+.certrev-reader .certrev-r-more {
+	display: none !important;
+}
+@media (max-width: 640px) {
+	.certrev-reader .certrev-r-side-body > p,
+	.certrev-reader .certrev-r-side-body > blockquote {
+		display: none !important;
+	}
+	.certrev-reader .certrev-r-more {
+		display: block !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		border: 0 !important;
+		border-radius: 0 !important;
+		background: none !important;
+		box-shadow: none !important;
+		height: auto !important;
+		max-height: none !important;
+		overflow: visible !important;
+		opacity: 1 !important;
+		visibility: visible !important;
+		transform: none !important;
+	}
+}
+.certrev-reader .certrev-r-more > summary {
+	display: flex !important;
+	align-items: center;
+	gap: 8px;
+	min-height: 44px;
+	margin: 3px 0 -10px !important;
+	padding: 12px 0 !important;
+	border: 0 !important;
+	background: none !important;
+	list-style: none !important;
+	cursor: pointer;
+	color: #141414 !important;
+	font-size: 13px !important;
+	font-weight: 700 !important;
+	line-height: 1.55 !important;
+}
+.certrev-reader .certrev-r-more > summary::-webkit-details-marker {
+	display: none;
+}
+.certrev-reader .certrev-r-more > summary::before {
+	content: none !important;
+	display: none !important;
+}
+.certrev-reader .certrev-r-more > summary::after {
+	content: "" !important;
+	display: block !important;
+	position: static !important;
+	float: none !important;
+	flex: none;
+	width: 6px !important;
+	height: 6px !important;
+	margin: -3px 0 0 !important;
+	border: solid currentColor !important;
+	border-width: 0 2px 2px 0 !important;
+	background: none !important;
+	transform: rotate(45deg) !important;
+}
+.certrev-reader .certrev-r-more[open] > summary::after {
+	margin-top: 3px !important;
+	transform: rotate(-135deg) !important;
+}
+.certrev-reader .certrev-r-more > summary:focus-visible {
+	outline: 2px solid currentColor !important;
+	outline-offset: 2px;
+}
+.certrev-reader .certrev-r-more::details-content {
+	transition: none !important;
+	animation: none !important;
+}
+.certrev-reader .certrev-r-more[open]::details-content {
+	display: block !important;
+	content-visibility: visible !important;
+	block-size: auto !important;
+	height: auto !important;
+	max-height: none !important;
+	overflow: visible !important;
+	opacity: 1 !important;
+	visibility: visible !important;
+	transform: none !important;
+}
 :is(.certrev-card-wrap, .certrev-memo-wrap):has(.certrev-reader) {
 	margin-block: 0 !important;
 	padding: 0 !important;
 }
+/* Surface and ink (generated from the rules above, nothing hand-copied: a TONED face, whose root carries
+ * .certrev-r-toned, reads the white panel as --cr-sf and the #141414 ink as --cr-ink; an untoned face matches none of
+ * these rules; see build-cert-reader-css.mjs). */
+.certrev-reader.certrev-r-toned {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-card {
+	border: 1px solid color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+	background: var(--cr-sf, #fff);
+}
+.certrev-reader.certrev-r-toned .certrev-r-by em {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-role {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-role.on {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-face {
+	background: color-mix(in srgb, var(--cr-ink, #141414) 7.06%, transparent);
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-rule {
+	background: color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+}
+.certrev-reader.certrev-r-toned .certrev-r-foot em {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-foot span + span {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-kick {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-memo-name {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-memo-name b {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned blockquote {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 72.16%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-links a {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-verified {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 72.16%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-scope {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 58.43%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-side {
+	border: 1px solid color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+	box-shadow: 0 4px 18px color-mix(in srgb, var(--cr-ink, #141414) 7.06%, transparent);
+	background: var(--cr-sf, #fff);
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-body p {
+	color: color-mix(in srgb, var(--cr-ink, #141414) 72.16%, transparent) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-links {
+	border-top: 1px solid color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-links a {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-links a:first-child {
+	border-right: 1px solid color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+}
+.certrev-reader.certrev-r-toned .certrev-r-pill {
+	box-shadow: 0 10px 26px color-mix(in srgb, var(--cr-ink, #141414) 16.08%, transparent);
+}
+.certrev-reader.certrev-r-toned .certrev-r-links a:not(:hover),
+.certrev-reader.certrev-r-toned .certrev-r-side-links a:not(:hover) {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-bys .certrev-r-role {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-card .certrev-r-bys + .certrev-r-foot {
+	border-top: 1px solid color-mix(in srgb, var(--cr-ink, #141414) 12.94%, transparent);
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-links.single a:first-child {
+	border-right: 0;
+}
+.certrev-reader.certrev-r-toned .certrev-r-more > summary {
+	color: var(--cr-ink, #141414) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-links a:hover {
+	color: var(--cr-ba) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-side-links a:hover {
+	color: var(--cr-ba) !important;
+}
+.certrev-reader.certrev-r-toned .certrev-r-more > summary:focus-visible {
+	outline: 2px solid currentColor !important;
+	outline-offset: 2px;
+}
 /* Reader fonts (generated from site-snapshot/site-fonts.css.txt: certrev.com's own faces and metric-matched
  * fallbacks, the same declarations but for the file, the committed copy on assets.certrev.com, and the stretch, which
  * keeps them to reader text; see build-cert-reader-css.mjs). */

package/src/reader/render.ts

@@ -1,6 +1,7 @@
 /**
  * ─────────────────────────────────────────────────────────────────────────────
- * `renderReaderFace` — the certrev.com "reader" face, as the Builder card paints it (1.2.0)
+ * `renderReaderFace` — the certrev.com "reader" face, as the Builder card paints it (1.2.0; caught up to the portal's
+ * one face in 1.3.1)
  * ─────────────────────────────────────────────────────────────────────────────
  *
  * The same markup, byte for byte, as the Shopify `certrev-reader-{banner,memo,sidebar,pill}` snippets, which are the
@@ -12,6 +13,17 @@
  * It is a NEW face, selected only by a delivered render def that says `face: 'reader'` (see `envelopeCardHtml`).
  * Nothing in the legacy `renderCertBlock` is read or changed here.
  *
+ * Since 1.3.1 it also follows the portal's ONE FACE, as the Shopify snippets and the WordPress plugin paint it:
+ *  - the def's `rung` (credentialed and named: no memo, bio or photo, so the memo card is not printed and the banner
+ *    and sidebar are the memo-less card; named: no credential either; minimal: the band and the links only; any other
+ *    value is the memo rung);
+ *  - the sidebar's phone fold: the bio and the memo are printed twice, once as the card's own pair and once inside a
+ *    closed `<details class="certrev-r-more">` (the stylesheet shows one or the other: 640px and under, the fold);
+ *  - a TONED def (an ink, or a surface that is not white) adds `certrev-r-toned` to the root and `--cr-sf` / `--cr-ink`
+ *    to its style (`tokens.ts`); a def with no design paints the memo-rung defaults;
+ *  - the banner's author takes the same 42px face as the reviewer, and the credential date never breaks
+ *    (`<span class="certrev-r-nw">`).
+ *
  * The facts are read exactly as the snippets read the same envelope:
  *  - the card renders only with a reviewer name (the memo and sidebar too); the pill needs only a verify URL;
  *  - the credential is each credential's `cardLabel` (else `abbreviation`), joined; the "Credential verified by CertREV"
@@ -55,7 +67,7 @@ import {
 	textOr,
 } from './helpers.js'
 import { readerLogo } from './logo.js'
-import { readerTokens } from './tokens.js'
+import { isTonedStyle, readerTokens } from './tokens.js'
 
 export type ReaderLayout = 'banner' | 'sidebar' | 'floating'
 
@@ -85,6 +97,8 @@ export interface ReaderFaceInput {
  */
 
 /** What every section of one render shares: the facts read once from the envelope and the def. */
+type Rung = 'memo' | 'credentialed' | 'named' | 'minimal'
+
 interface Facts {
 	readonly content: Rec
 	readonly expert: Rec
@@ -92,13 +106,20 @@ interface Facts {
 	readonly def: unknown
 	readonly certId: string
 	readonly ename: string
-	/** Whether a photo may be painted: neither `reviewerPhoto` hidden nor `showExpertPhoto: false`. */
+	/** The def's rung: `memo` unless it says `minimal`, `named` or `credentialed` (any other value is the memo rung). */
+	readonly rung: Rung
+	/** The minimal rung: the band and the links, nothing else. */
+	readonly minimal: boolean
+	/** Whether a photo may be painted: neither `reviewerPhoto` hidden nor `showExpertPhoto: false`, and the memo rung. */
 	readonly showPhoto: boolean
-	/** The joined credential labels, '' when there are none. */
+	/** The joined credential labels, '' when there are none or the rung shows none (named, minimal). */
 	readonly creds: string
 	readonly hasCue: boolean
 	readonly illus: boolean
-	readonly noMemo: boolean
+	/** Whether the memo is printed: there is one, and the rung is the memo rung. */
+	readonly hasMemo: boolean
+	/** Whether the root carries `certrev-r-toned` (the token style says so). */
+	readonly toned: boolean
 	readonly purl: string
 	readonly vurl: string
 	readonly style: string
@@ -112,7 +133,9 @@ function readFacts(input: ReaderFaceInput): Facts {
 	const def = input.def
 	const rd = rec(def)
 
-	const showPhoto = disp.showExpertPhoto !== false && !contains(rd.hidden, 'reviewerPhoto')
+	const rung: Rung = rd.rung === 'minimal' || rd.rung === 'named' || rd.rung === 'credentialed' ? rd.rung : 'memo'
+	const minimal = rung === 'minimal'
+	const showPhoto = disp.showExpertPhoto !== false && !contains(rd.hidden, 'reviewerPhoto') && rung === 'memo'
 
 	// POR-9738: each credential's cardLabel over its bare abbreviation, joined with ', ' (labels are not trimmed).
 	const labels: string[] = []
@@ -133,11 +156,14 @@ function readFacts(input: ReaderFaceInput): Facts {
 		def,
 		certId: asText(input.certId),
 		ename: textOr(expert.displayName),
+		rung,
+		minimal,
 		showPhoto,
-		creds: labels.join(', '),
+		creds: rung === 'named' || minimal ? '' : labels.join(', '),
 		hasCue,
 		illus: input.illustrative === true && !hasCue,
-		noMemo: isBlank(content.memo),
+		hasMemo: !isBlank(content.memo) && rung === 'memo',
+		toned: isTonedStyle(style),
 		purl: cleaned(safeUrl(expert.profileUrl)),
 		vurl: cleaned(safeUrl(content.verifyUrl)),
 		style,
@@ -147,7 +173,7 @@ function readFacts(input: ReaderFaceInput): Facts {
 
 /** The `<section>` open tag every reader section shares. `badge` is the `.certrev-badge` hook the revalidation reads. */
 function sectionOpen(f: Facts, badge: boolean, aria: string): string {
-	const cls = badge ? 'certrev-reader certrev-badge' : 'certrev-reader'
+	const cls = `certrev-reader${badge ? ' certrev-badge' : ''}${f.toned ? ' certrev-r-toned' : ''}`
 	// `{% if rd %}`: any def that is not nil/false stamps its version.
 	const version = isTruthy(f.def) ? ` data-certrev-def-version="${esc(rec(f.def).v)}"` : ''
 	return (
@@ -165,7 +191,7 @@ const anchor = (href: string, modal: string, label: string): string =>
  * name the wording stays one leaf.
  */
 function profileLabel(f: Facts): string {
-	const first = cleaned(firstName(f.ename))
+	const first = f.minimal ? '' : cleaned(firstName(f.ename))
 	return first !== '' ? `View <!-- -->${esc(first)}<!-- -->&rsquo;s profile` : 'View profile'
 }
 
@@ -194,15 +220,15 @@ const SCOPE = CERT_SCOPE_LINE
  * The muted credential line, empty when the reviewer has no displayed credential (so no "verified" claim prints).
  *
  * The banner's is the demo's three leaves in one `<em>`: the credential, " · ", and the attribution, which reads
- * "Credential verified by CertREV on {date}" or, with no date, just "Credential verified by CertREV". The spans carry
- * no style of their own. The sidebar names the credential in its bold line already, so its `<em>` is the attribution
- * alone.
+ * "Credential verified by CertREV on {date}" or, with no date, just "Credential verified by CertREV". The banner's date
+ * sits in its own `<span class="certrev-r-nw">`, which the stylesheet never lets break. The sidebar names the credential
+ * in its bold line already, so its `<em>` is the attribution alone, and its date is plain text.
  */
 function verifiedLine(f: Facts, withCredentials: boolean): string {
 	if (f.creds === '') return ''
 	const date = cleaned(isBlank(f.expert.credentialVerifiedAt) ? '' : longDate(f.expert.credentialVerifiedAt))
-	const on = date !== '' ? ` on ${esc(date)}` : ''
-	if (!withCredentials) return `<em>Credential verified by CertREV${on}</em>`
+	if (!withCredentials) return `<em>Credential verified by CertREV${date !== '' ? ` on ${esc(date)}` : ''}</em>`
+	const on = date !== '' ? ` on <span class="certrev-r-nw">${esc(date)}</span>` : ''
 	return `<em><span>${esc(f.creds)}</span> · <span>Credential verified by CertREV${on}</span></em>`
 }
 
@@ -215,24 +241,34 @@ function bannerCard(f: Facts): string {
 	const author = rec(f.content.author)
 	const authorName = textOr(author.name)
 	const authorTitle = textOr(author.title)
-	const hasAuthor = f.disp.showAuthor !== false && authorName !== '' && authorName !== f.ename
-	const avatar = (photo: unknown, name: string, size: 'sm' | ''): string =>
-		readerFace({ photo, show: f.showPhoto, name, size, width: 84 })
+	const hasAuthor = f.disp.showAuthor !== false && authorName !== '' && authorName !== f.ename && !f.minimal
+	// Both bylines take the same 42px face, photo or initials, at every width.
+	const avatar = (photo: unknown, name: string): string =>
+		readerFace({ photo, show: f.showPhoto, name, size: '', width: 84 })
 
 	const authorBy = hasAuthor
-		? `<div class="certrev-r-by">${avatar(author.photoUrl, authorName, 'sm')}<div>\n              <b>${esc(authorName)}</b>` +
+		? `<div class="certrev-r-by">${avatar(author.photoUrl, authorName)}<div>\n              <b>${esc(authorName)}</b>` +
 			`${authorTitle !== '' ? `<em>${esc(authorTitle)}</em>` : ''}<span class="certrev-r-role">Written by</span>\n            </div>\n          </div>`
 		: ''
 	const expertBy =
-		`<div class="certrev-r-by">${avatar(f.expert.photoUrl, f.ename, '')}<div>\n            <b>${esc(f.ename)}</b>` +
+		`<div class="certrev-r-by">${avatar(f.expert.photoUrl, f.ename)}<div>\n            <b>${esc(f.ename)}</b>` +
 		`${verifiedLine(f, true)}<span class="certrev-r-role on">Reviewed by</span>\n          </div>\n        </div>`
+	// The minimal rung is the band and the links: no bylines, no date, no cue, no scope line.
+	const bys = f.minimal
+		? ''
+		: `<div class="certrev-r-bys${hasAuthor ? '' : ' solo'}">${authorBy}${expertBy}\n      </div>`
 
 	const certifiedAt = f.content.certifiedAt
-	const certified = isBlank(certifiedAt) ? '' : cleaned(longDate(certifiedAt))
+	const certified = f.minimal || isBlank(certifiedAt) ? '' : cleaned(longDate(certifiedAt))
+	const hasCue = f.hasCue && !f.minimal
+	const illus = f.illus && !f.minimal
+	// Without a printed memo (none, or a rung that prints none) this card is the sole claim face and carries the scope line.
+	const noMemo = !f.hasMemo
+	const scopeOn = noMemo && !f.minimal
 
 	// A memo-less article gets the profile and certificate row, so the certificate stays reachable.
 	let links = ''
-	if (f.noMemo && (f.purl !== '' || f.vurl !== '')) {
+	if (noMemo && (f.purl !== '' || f.vurl !== '')) {
 		links =
 			'<div class="certrev-r-links">' +
 			(f.purl !== '' ? anchor(f.purl, '="expert"', profileLabel(f)) : '') +
@@ -240,8 +276,8 @@ function bannerCard(f: Facts): string {
 			'</div>'
 	}
 
-	const hasFoot = certified !== '' || f.hasCue || f.illus
-	const rule = hasFoot || f.noMemo ? '<div class="certrev-r-rule"></div>' : ''
+	const hasFoot = certified !== '' || hasCue || illus
+	const rule = hasFoot || scopeOn ? '<div class="certrev-r-rule"></div>' : ''
 
 	let foot = ''
 	if (hasFoot) {
@@ -249,29 +285,29 @@ function bannerCard(f: Facts): string {
 		// span paints the mono cue and the date's own face.
 		const when = certified !== '' ? `<span><em>Certified</em>${esc(certified)}</span>` : '<span></span>'
 		let cue = ''
-		if (f.hasCue) {
+		if (hasCue) {
 			// The locked cue in plain words, as the demo's foot (judge round 6, E1): no link, so nothing underlines
 			// "expert"; the reviewer's profile is the card's or the memo's "View … profile" link.
 			cue = `<span>${COMPENSATED_EXPERT_CUE}</span>`
-		} else if (f.illus) {
+		} else if (illus) {
 			cue = '<span>Illustrative example</span>'
 		}
 		foot = `<div class="certrev-r-foot">${when}${cue}</div>`
 	}
 
 	// POR-9317: the memo card carries the scope line when there is a memo; with none this card is the sole claim face.
-	const scope = f.noMemo ? `<div class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${SCOPE}</div>` : ''
+	const scope = scopeOn ? `<div class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${SCOPE}</div>` : ''
 
 	return (
-		`${sectionOpen(f, true, credentialAria(f))}\n  <div class="certrev-r-card">\n` +
-		`    <div class="certrev-r-cap">${readerLogo(f.fg === '#ffffff' ? 'white' : 'mono', 18, 'CertREV')}Expert reviewed &amp; certified</div>\n` +
-		`    <div class="certrev-r-cap-body">\n      <div class="certrev-r-bys${hasAuthor ? '' : ' solo'}">${authorBy}${expertBy}\n      </div>` +
+		`${sectionOpen(f, true, f.minimal ? 'Expert reviewed' : credentialAria(f))}\n  <div class="certrev-r-card">\n` +
+		`    <div class="certrev-r-cap">${readerLogo(f.fg === '#ffffff' ? 'white' : 'mono', 18, 'CertREV')}Expert reviewed${f.minimal ? '' : ' &amp; certified'}</div>\n` +
+		`    <div class="certrev-r-cap-body">\n      ${bys}` +
 		`${links}${rule}${foot}${scope}</div>\n  </div>\n</section>`
 	)
 }
 
 function bannerMemo(f: Facts): string {
-	if (f.ename === '' || isBlank(f.content.memo)) return ''
+	if (f.ename === '' || !f.hasMemo) return ''
 	const links =
 		f.purl !== '' || f.vurl !== ''
 			? '<div class="certrev-r-links">' +
@@ -298,8 +334,6 @@ function bannerMemo(f: Facts): string {
 
 function sidebar(f: Facts): string {
 	if (f.ename === '') return ''
-	const bio = f.disp.showBio !== false && !isBlank(f.expert.bio) ? asText(f.expert.bio) : ''
-	const avatar = readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, name: f.ename, size: 'lg', width: 112 })
 	const both = f.purl !== '' && f.vurl !== ''
 	const links =
 		f.purl !== '' || f.vurl !== ''
@@ -308,13 +342,28 @@ function sidebar(f: Facts): string {
 				(f.vurl !== '' ? anchor(f.vurl, '', 'View Certificate') : '') +
 				'</div>'
 			: ''
+	const open =
+		`${sectionOpen(f, true, f.minimal ? 'Expert reviewed' : credentialAria(f))}\n  <div class="certrev-r-side">\n` +
+		`    <div class="certrev-r-cap center">${readerLogo(f.fg === '#ffffff' ? 'white' : 'mono', 18, 'CertREV')}Expert reviewed</div>\n    `
+	// The minimal rung is the band and the links: no body at all.
+	if (f.minimal) return `${open}${links}</div>\n</section>`
+
+	const bio = f.disp.showBio !== false && !isBlank(f.expert.bio) && f.rung === 'memo' ? asText(f.expert.bio) : ''
+	const avatar = readerFace({ photo: f.expert.photoUrl, show: f.showPhoto, name: f.ename, size: 'lg', width: 112 })
+	// The bio and the memo are printed twice: as the card's own pair, and again inside a closed <details> the stylesheet
+	// shows instead on a phone (640px and under; owner decision 3d0838a4, plugin 1.8.3). The disclosure and both links
+	// stay outside the fold. With no memo the toggle says "About the expert"; with neither bio nor memo there is no fold.
+	const fold =
+		`${bio !== '' ? `<p>${esc(bio)}</p>` : ''}` +
+		`${f.hasMemo ? `<blockquote>${esc(f.content.memo)}</blockquote>` : ''}`
+	const more =
+		fold !== ''
+			? `<details class="certrev-r-more"><summary>${f.hasMemo ? 'Read the expert memo' : 'About the expert'}</summary>${fold}</details>`
+			: ''
 	return (
-		`${sectionOpen(f, true, credentialAria(f))}\n  <div class="certrev-r-side">\n` +
-		`    <div class="certrev-r-cap center">${readerLogo(f.fg === '#ffffff' ? 'white' : 'mono', 18, 'CertREV')}Expert reviewed</div>\n` +
-		`    <div class="certrev-r-side-body">\n      <div class="certrev-r-by">${avatar}<div>\n` +
+		`${open}<div class="certrev-r-side-body">\n      <div class="certrev-r-by">${avatar}<div>\n` +
 		`          <b>${esc(f.ename)}${f.creds !== '' ? `<!-- -->, <!-- -->${esc(f.creds)}` : ''}</b>${verifiedLine(f, false)}</div>\n      </div>` +
-		`${bio !== '' ? `<p>${esc(bio)}</p>` : ''}` +
-		`${isBlank(f.content.memo) ? '' : `<blockquote>${esc(f.content.memo)}</blockquote>`}` +
+		`${fold}${more}` +
 		`<div class="certrev-r-scope" data-ftc-disclosure data-ftc-line>${scopeLead(f)}${SCOPE}</div>\n    </div>` +
 		`${links}</div>\n</section>`
 	)

package/src/reader/tokens.ts

@@ -1,24 +1,32 @@
 /**
- * `certrev-reader-tokens`: the four CSS custom properties a reader section carries on its root, from the render def.
+ * `certrev-reader-tokens`: the CSS custom properties a reader section carries on its root, from the render def.
  *
  *   --cr-ba     the accent the card cap and pill paint: the def's `barInk`, else its `accentColor`, else navy
  *   --cr-ba-fg  the ink on that accent: white, or `#141414` when the def baked it for the colour that painted
  *   --cr-br     the corner radius
  *   --cr-bf     the font stack for the brand's `fontSlot`
+ *   --cr-sf     (toned face only) the card surface, the def's `surface`
+ *   --cr-ink    (toned face only) the card ink, the def's `inkColor`
  *
  * The values land inside a double-quoted `style` attribute, and they are held to the allow-list the Liquid snippet and
  * the PHP twin's def parser hold them to: a colour is `#RGB` or `#RRGGBB`, a radius one non-negative px / rem / em / %
- * length or a bare `0`, and anything else paints the default (navy, 14px). A denylist of characters is not enough: a
+ * length or a bare `0`, and anything else paints the default (navy `#0a1b3f`, 12px: the design guide's memo-rung
+ * defaults, as the plugin and the hosted embed paint a face with no design). A denylist of characters is not enough: a
  * quote, a backslash, a comment opener or a bracket left in a value hides the `;` that ends it and swallows the
  * declarations after it. The variable names are the reader stylesheet's (`reader.css`), which `.certrev-reader`
  * declares defaults for.
+ *
+ * A face is TONED when the def sets an ink, or a surface that is not white (`#fff` / `#ffffff`, either case): only
+ * then are `--cr-sf` / `--cr-ink` written (each only when valid), and the section root gains `certrev-r-toned`
+ * (`isTonedStyle`, which reads the style string as the snippets do).
  */
 import { asText } from '../components/escape.js'
 import { esc, rec, textOr } from './helpers.js'
 
-/** The accent when the def has none: CertREV navy. */
-const DEFAULT_ACCENT = '#0A1B3F'
-const DEFAULT_RADIUS = '14px'
+/** The accent when the def has none: the design guide's memo-rung default (CertREV navy). */
+const DEFAULT_ACCENT = '#0a1b3f'
+/** The corner when the def has none: the design guide's memo-rung default. */
+const DEFAULT_RADIUS = '12px'
 /** The foreground the def bakes for a light accent; anything else is the white default. */
 const DARK_INK = '#141414'
 
@@ -71,6 +79,9 @@ export interface ReaderTokens {
 	readonly fg: string
 }
 
+/** Whether a root `style` is a toned face's: the snippets' `cr_style contains ';--cr-sf:' or ';--cr-ink:'`. */
+export const isTonedStyle = (style: string): boolean => style.includes(';--cr-sf:') || style.includes(';--cr-ink:')
+
 export function readerTokens(def: unknown): ReaderTokens {
 	const rd = rec(def)
 	const tokens = rec(rd.tokens)
@@ -90,5 +101,17 @@ export function readerTokens(def: unknown): ReaderTokens {
 
 	const br = radius(tokens.cornerRadius) || DEFAULT_RADIUS
 	const bf = fontStack(asText(tokens.fontSlot))
-	return { style: `--cr-ba:${esc(ba)};--cr-ba-fg:${fg};--cr-br:${esc(br)};--cr-bf:${bf}`, fg }
+
+	// A toned face: an ink, or a surface that is not white. `downcase` in the snippet; the digits are ASCII.
+	const surface = hexColour(tokens.surface)
+	const ink = hexColour(tokens.inkColor)
+	const surfaceLc = surface.toLowerCase()
+	const toned = ink !== '' || (surface !== '' && surfaceLc !== '#fff' && surfaceLc !== '#ffffff')
+
+	let style = `--cr-ba:${esc(ba)};--cr-ba-fg:${fg};--cr-br:${esc(br)};--cr-bf:${bf}`
+	if (toned) {
+		if (surface !== '') style += `;--cr-sf:${esc(surface)}`
+		if (ink !== '') style += `;--cr-ink:${esc(ink)}`
+	}
+	return { style, fg }
 }