/*
 * CertREV certified-article chrome — theme app extension styles.
 *
 * Loaded by the single "CertREV" body app embed (its schema's "stylesheet" key), which renders the
 * contributors card + expert memo together. A PIXEL-FAITHFUL port of the live iframe designs:
 *   - the contributors card → src/app/embed/[id]/contributors/route.ts <style> block
 *   - the expert memo       → renderMemo() inline styles in src/lib/embed/render.ts
 *
 * THEME-SAFE CONTRACT (load-bearing — these run inside a customer's Shopify theme): the navy alpha
 * scale + drop-shadows are --certrev-navy-* / --certrev-shadow-* custom properties defined on the
 * CertREV component roots (the CERTREV-DESIGN-TOKENS block below, single-sourced from
 * src/lib/design-guide/colors.ts). They are theme-SAFE by construction — self-defined on the card
 * subtree so they always resolve, and the --certrev- prefix cannot collide with a host theme. The
 * solid #0a1b3f ink stays a literal; class names are CertREV-scoped so the host stylesheet can't
 * bleed in. NO property is theme-influenced: nothing here reads the store theme's custom properties
 * or inherits its font (owner decision 2026-09-26 — all embed styling lives in the CertREV portal
 * customizer). A face is styled only by these CertREV defaults and the render def's `--certrev-*`
 * vars (accent / surface / radius / font / bar ink / ink), which the snippets set inline from
 * sanitized values when the brand has a def.
 *
 * Palette: the navy scale lives in the CERTREV-DESIGN-TOKENS block below (--certrev-navy-06 … -75,
 * --certrev-shadow-card/rail/pill). Still literal: #0a1b3f (solid ink), #f1f1f2 (avatar-initials bg),
 * surface #ffffff, radius 12px, and the 2 accordion lines (0.72/0.45) pending the Step-C tint sign-off.
 * Fonts: DM Sans (body/labels), Playfair Display (names/wordmark), JetBrains Mono (eyebrows).
 */

/* Self-hosted cert fonts (POR-10470). The render-blocking Google Fonts @import that lived here was
 * removed: it was a nested cross-origin stylesheet on the critical render path AND — running inside
 * thousands of third-party storefronts — a per-merchant GDPR liability (hotlinked Google Fonts leak
 * visitor IPs to Google; LG München 2022). The five families are self-hosted on CertREV's own R2
 * (assets.certrev.com/fonts/*.woff2 — which storefronts already contact for avatars + the badge
 * re-verify, so no NEW third party; GDPR-clean) and referenced by ABSOLUTE URL below. They are NOT
 * extension assets: Shopify theme app extensions reject .woff2 (only jpg/js/css/png/svg/wasm/json).
 * This sheet still render-blocks (unchanged), but declaring @font-face loads the FONT FILES
 * non-blocking (font-display:swap) — the render-blocking nested @import STYLESHEET is what's gone.
 * @font-face is inert until a glyph uses it, so the modal-only families (Plus Jakarta Sans, Allura)
 * and the latin-ext subsets cost zero bytes on a Western-name article. Declared at DOCUMENT level: the
 * Shadow-DOM cert modal (certrev-cert.js) resolves document-level @font-face, and a
 * constructable/shadow stylesheet cannot declare @font-face itself. certrev.liquid emits a
 * `<link rel="preconnect" href="https://assets.certrev.com" crossorigin>` so the CORS font fetch warms
 * its own connection. The block between the CERTREV-FONTS markers is written by
 * scripts/build-cert-fonts.mjs (which also documents the R2 upload) — do not hand-edit between them. */
/* CERTREV-FONTS:BEGIN */
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-dm-sans-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-dm-sans-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-playfair-italic-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-playfair-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-playfair-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-jetbrains-mono-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-jakarta-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Allura";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-allura-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Allura";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://assets.certrev.com/fonts/cert-allura-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CERTREV-FONTS:END */

/* CERTREV-DESIGN-TOKENS:BEGIN */
/* GENERATED from src/lib/design-guide/colors.ts by scripts/build-cert-design-artifacts.ts — DO NOT EDIT (pnpm build:cert-design; guarded by pnpm lint:cert-design-sync). */
.certrev-card,
.certrev-memo,
.certrev-pill {
	--certrev-navy: #0a1b3f;
	--certrev-navy-06: rgba(10, 27, 63, 0.06);
	--certrev-navy-10: rgba(10, 27, 63, 0.1);
	--certrev-navy-35: rgba(10, 27, 63, 0.35);
	--certrev-navy-55: rgba(10, 27, 63, 0.55);
	--certrev-navy-60: rgba(10, 27, 63, 0.6);
	--certrev-navy-75: rgba(10, 27, 63, 0.75);
	--certrev-shadow-card: 0 6px 22px rgba(10, 27, 63, 0.09);
	--certrev-shadow-rail: 0 4px 18px rgba(10, 27, 63, 0.06);
	--certrev-shadow-pill: 0 10px 26px rgba(10, 27, 63, 0.1);
}
/* CERTREV-DESIGN-TOKENS:END */

/* The optional <certrev-badge> custom-element wrapper is an unknown (inline) element until the
 * Web Component asset loads — pin it to block so layout is correct either way. */
certrev-badge {
	display: block;
}

/* ── Suppression kill-switch — an author-origin rule, because [hidden] alone is not ──────────
 * The revocation kill-switch is an ATTRIBUTE, not a class. certrev-cert.js's revalidate hook sets
 * `hidden` + `data-certrev-suppressed="<reason>"` on the `.certrev-badge` face root whenever the
 * delivery API returns anything but `render` (revoked / expired / tampered), and the cert modal's
 * own suppressed path sets `hidden` on every `[data-certrev-modal-open]` affordance. Both lean on
 * `[hidden] { display: none }` — which lives in the USER-AGENT stylesheet, so ANY author `display`
 * on the marked element wins the cascade by origin and the kill-switch silently no-ops.
 *
 * That is measured, not theoretical: `.certrev-pill { display: inline-flex }` (below) left a REVOKED
 * certification pinned to the viewport — an 8.08 × 19 bounding box in Chrome 153 — while the card
 * and sidebar faces collapsed to 0 × 0 purely because neither happens to set `display` on its root.
 * A per-face patch (`.certrev-pill:not([hidden])`) would make one layout's accident the fix for a
 * stylesheet-wide invariant, and the next face that needs a `display` reintroduces the defect.
 *
 * So state the invariant ONCE, in author origin, with `!important`: an element the kill-switch has
 * marked paints nothing — whatever any present or future face, or any host theme, says about its
 * display. `!important` is not specificity insurance here, it is the point: this is a compliance
 * control, and it must be un-outrankable by construction. Proven per-layout, in a real browser,
 * by e2e/specs/cert-face-suppression.spec.ts.
 *
 * `[data-certrev-suppressed][hidden]` is the general form and the one to reach for. The class
 * selectors below it enumerate faces; the marker is what the kill-switch actually writes, on
 * whatever it marks. Once @certrev/cert-block ships the placement fan-out, that is the whole
 * PLACEMENT rather than one element: the contributors card AND the standalone `.certrev-memo` that
 * the banner layout renders in a separate wrap. Neither 1.1.0 nor 1.1.1 carries the fan-out yet;
 * the vendored bundle marks only the `.certrev-badge` inside its host (the e2e spec pins that lag).
 * A class list is exactly the kind of thing that goes stale one face at a time. `.certrev-memo`
 * sets no `display`
 * today, so the UA rule would carry it; that is the same accident the pill disproved, and stating
 * the invariant is cheaper than re-measuring it. The `[hidden]` conjunct is deliberate: the modal
 * stamps `data-certrev-suppressed` on ITSELF without hiding it, and this rule must not act on that.
 * The enumerated selectors stay because they cover marks that carry no reason attribute:
 * `[data-certrev-modal-open]` affordances get `hidden` + `aria-hidden` only. */
[data-certrev-suppressed][hidden],
.certrev-badge[hidden],
.certrev-memo[hidden],
certrev-badge[hidden],
[data-certrev-modal-open][hidden] {
	display: none !important;
}

/* ── Theme-bleed armor ───────────────────────────────────────────────────────
 * The body app embed renders INSIDE the host theme's article-content container
 * (.rte / .article-template__content / [id^="ArticleContent"]), so element-level
 * theme rules leak onto the card + memo. Class-NAME scoping alone does NOT stop
 * element-rule bleed, and some brand themes mark those rules !important — e.g.
 * Intellipure's theme ships `.rte img { margin: 48px 0 !important }` (which dropped
 * the avatars ~48px below the names and ballooned each contributor row to 138px of
 * dead space) and `.rte a { text-decoration: underline !important }` (which force-
 * underlined the reviewer name the card sets to none). Reset the load-bearing
 * properties here: class-scoped so specificity clears `.rte img` / `.rte a`, and
 * !important so it survives themes that !important their own. Keep this list to
 * the properties themes actually weaponize against an injected widget. */
.certrev-card .avatar,
.certrev-memo .certrev-memo__avatar {
	margin: 0 !important;
	max-width: 100% !important;
	float: none !important;
}
/* Themes also underline links via a `background-image` linear-gradient (a faux underline) and
 * force a link colour — both seen with !important on Intellipure's `.rte a`. Kill the faux
 * underline on every CertREV link, and re-assert each link's intended colour with !important so
 * the host can't repaint the reviewer name / CTA / accent links. */
.certrev-card a,
.certrev-memo a,
.certrev-pill a {
	background-image: none !important;
}
.certrev-card .name a {
	color: inherit !important;
	text-decoration: none !important;
}
.certrev-card .name a:hover {
	text-decoration: underline !important;
}
.certrev-card .cert-link,
.certrev-memo .cert-link {
	color: var(--certrev-accent) !important;
}
/* The memo's own links were missing from that list. The card and memo now paint on a fixed white
 * base (the chameleon background is gone, owner decision 2026-09-26), so a dark theme's
 * `.rte a { color: #fff }` (0-1-1), which ties `.certrev-memo__name a` and beats `.certrev-memo__link`
 * (0-1-0), would paint the reviewer name and "Profile | Certificate" white on white (Codex, PR #7348). */
.certrev-memo .certrev-memo__name a {
	color: inherit !important;
}
.certrev-memo .certrev-memo__link {
	color: #0a1b3f !important;
}

/* ── Cert wrappers — the two units placement.js moves (iframe→native parity): the contributors
 * card to the TOP of the article (.certrev-card-wrap) and the expert memo to the BOTTOM
 * (.certrev-memo-wrap). Each normally relocates next to the article content, inheriting the theme's
 * article width. On the body-bottom fallback (no semantic/theme anchor matched, or JS off) a wrap
 * stays at the end of <body>, so center + constrain it there so it always reads as an intentional
 * card rather than a stray full-bleed element. When relocated, the inner .certrev-card / .certrev-memo
 * both span the full content width (matching each other) and carry their own vertical rhythm. */
.certrev-card-wrap,
.certrev-memo-wrap {
	box-sizing: border-box;
}
.certrev-card-wrap[data-certrev-placement="body-fallback"],
.certrev-memo-wrap[data-certrev-placement="body-fallback"] {
	max-width: 752px;
	margin-inline: auto;
	padding: 1rem 1rem 2.5rem;
}

/* ── Contributors card (the .certrev-badge section keeps that class for the JS re-verify hook) ── */

.certrev-card {
	--certrev-accent: #0a1b3f;
	box-sizing: border-box;
	/* Full content width — the contributors card spans the article column edge-to-edge, matching the
	 * legacy iframe block (the memo below keeps its 720px reading measure). The two columns
	 * (author + expert) need the room; a narrow card cramps them. */
	max-width: none;
	width: 100%;
	margin: 1.5rem 0;
	background: #ffffff;
	/* Flat guide banner card (Owen 2026-07-17): 1px navy-10 border + calc(--br*0.7) radius, NO shadow. */
	border: 1px solid var(--certrev-navy-10);
	border-radius: calc(var(--certrev-radius, 14px) * 0.7);
	overflow: hidden;
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: #0a1b3f;
	line-height: 1.4;
	/* Long credential / bio tokens with no natural break point must not clip on narrow columns. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.certrev-card *,
.certrev-card *::before,
.certrev-card *::after {
	box-sizing: border-box;
}

.certrev-card .cert-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 22px;
	/* Brand-ink chrome (v2 Phase 1): the header/seal bar reads its fill from the render-def's
	 * `barInk` token and its foreground from the auto-contrast `barInkFg` — emitted inline by the
	 * engine ONLY on a themed face. ABSENT ⇒ the navy/white fallbacks = today's exact bytes (a
	 * no-def or un-barInk'd face is byte-identical). `color` cascades to the eyebrow (no color set)
	 * and the CTA (`color: inherit`); the mark SVG is repainted below (a scoped CSS `fill` wins over
	 * its presentation attribute). */
	background: var(--certrev-bar-bg, #0a1b3f);
	color: var(--certrev-bar-fg, #ffffff);
}

/* The trust mark follows the bar foreground on a themed bar (a scoped CSS `fill` overrides the
 * SVG's `fill="#ffffff"` presentation attribute). ABSENT bar-fg ⇒ #ffffff = the attribute's own
 * value, so the default render is byte-identical. */
.certrev-card .cert-header .cert-mark svg path {
	fill: var(--certrev-bar-fg, #ffffff);
}

.certrev-card .cert-header[data-certrev-modal-open] {
	cursor: pointer;
}

.certrev-card .cert-header__lead {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

/* The subtle right-aligned arrow that opens the certificate (mouse via the bar, keyboard via this
   focusable <a>, no-JS via its href). White on navy, muted until hover/focus. */
.certrev-card .cert-header__cta {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	border-radius: 6px;
	transition: opacity 0.15s ease-out;
}

.certrev-card .cert-header__cta:hover {
	opacity: 1;
}

.certrev-card .cert-header__cta:focus-visible {
	opacity: 1;
	outline: 2px solid rgba(255, 255, 255, 0.65);
	outline-offset: 2px;
}

.certrev-card .cert-header__cta-arrow {
	display: block;
}

.certrev-card .cert-mark {
	display: flex;
	flex-shrink: 0;
}

.certrev-card .cert-mark svg {
	display: block;
}

.certrev-card .cert-eyebrow {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.certrev-card .card-body {
	padding: 22px 24px 18px;
}

.certrev-card .contributors {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.certrev-card .contributor {
	flex: 1;
	min-width: 200px;
}

.certrev-card .person-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.certrev-card .avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}

.certrev-card img.avatar {
	object-fit: cover;
	display: block;
}

.certrev-card .avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f2;
	color: var(--certrev-navy-55);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-weight: 700;
	font-size: 12px;
}

.certrev-card .info {
	flex: 1;
	min-width: 0;
}

.certrev-card .name {
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: #0a1b3f;
}

.certrev-card .name a {
	color: inherit;
	text-decoration: none;
}

.certrev-card .name a:hover {
	text-decoration: underline;
}

.certrev-card .title {
	font-size: 13px;
	color: var(--certrev-navy-55);
	margin-top: 1px;
}

/* Locked design (Owen 2026-07-17): the reviewer byline stacks the dated CertREV credential-
 * verification disclosure ("Credential verified by CertREV" / "on {date}") beneath the inline
 * "Name, {credential}" line — muted, quiet, legally load-bearing. */
.certrev-card .rev-verified {
	font-size: 13px;
	line-height: 1.4;
	color: var(--certrev-navy-55);
	margin-top: 3px;
}

.certrev-card .rev-verified-date {
	font-size: 13px;
	line-height: 1.4;
	color: var(--certrev-navy-55);
}

/* Label-first eyebrows (Owen 2026-07-01): WRITTEN BY / REVIEWED BY lead each column, so the two
 * columns pair perfectly at the top (label / name / subtitle) and only the subtitle depth varies. */
.certrev-card .label {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 1px 0 5px;
}

/* Guide emphasis (Owen refinement, 2026-07-17): WRITTEN BY is muted (navy-35), REVIEWED BY leads
 * emphasized (full navy, 700) — the reviewer is the certification's authority voice. */
.certrev-card .label.author {
	color: var(--certrev-navy-35);
}

.certrev-card .label.expert {
	color: #0a1b3f;
	font-weight: 700;
}

/* The card's only rule is the guide's HORIZONTAL divider (navy-10, margin 16px 0 14px) — the
 * card-footer's border-top IS that rule: 16px of air above it, 14px below to the footer lockup.
 * The guide has NO vertical rule between the two contributor columns (removed 2026-07-17). */
.certrev-card .card-footer {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--certrev-navy-10);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* Locked footer lockup (Owen 2026-07-17): mono uppercase, muted, with the certified date in navy. */
.certrev-card .footer-date {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--certrev-navy-55);
}

.certrev-card .footer-date__value {
	/* The date matches "Certified" exactly — same mono font, size, weight AND color (inherits the
	 * navy-55 from .footer-date); only the 8px gap is added (Owen 2026-07-17). */
	margin-left: 8px;
}

/* "expert" reads at the SAME size/weight/color as "Compensated" (Owen 2026-07-17) — it was inheriting
 * the larger link size (12px/600/accent). It stays a functional profile-modal link, just visually
 * uniform with the cue. */
.certrev-card .compensated-cue .cert-link {
	font-size: inherit;
	font-weight: inherit;
	color: inherit !important;
}

.certrev-card .footer-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.certrev-card .compensated-cue {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--certrev-navy-55);
}

/* WS2 compliance (design-guide §3): the verbatim FTC scope line renders on EVERY claim-bearing badge
 * face — memo or not. It sits as a full-width row under the footer's date/cue (the card-footer is a
 * flex row, so flex-basis:100% drops it onto its own line), muted to match the memo's FTC line.
 * `color` is pinned like every other FTC line (see `.certrev-memo__ftc`): at 0-2-0 this rule already
 * out-specifies a theme's `.rte p`, and the `!important` keeps it that way against a theme that
 * `!important`s its paragraph colour. */
.certrev-card .certrev-badge__ftc {
	flex-basis: 100%;
	width: 100%;
	margin: 2px 0 0;
	font-size: 10.5px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--certrev-navy-55) !important;
}

.certrev-card .cert-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	color: var(--certrev-accent);
	text-decoration: none;
}

.certrev-card .cert-link__arrow {
	display: block;
}

@media (max-width: 700px) {
	.certrev-card .card-body {
		padding: 14px;
	}
	.certrev-card .contributors {
		flex-direction: column;
		gap: 14px;
	}
	.certrev-card .contributor {
		min-width: 0;
	}
}

@media (max-width: 360px) {
	.certrev-card .card-body {
		padding: 12px;
	}
	.certrev-card .name {
		font-size: 13.5px;
	}
}

/* ── Expert memo card (renderMemo parity) ── */

.certrev-memo {
	--certrev-accent: #0a1b3f;
	box-sizing: border-box;
	/* Full content width — matches the contributors card above so the memo spans the article column
	 * edge-to-edge, not a narrower reading measure (Owen 2026-07, iframe→native parity: the two units
	 * read as one stacked block, same width). */
	max-width: none;
	width: 100%;
	margin: 1.5rem 0;
	background: #ffffff;
	/* Plain guide memo card (Owen 2026-07-17): 1px navy-10 border all around + calc(--br*0.7) radius +
	 * 24px padding, NO left-accent bar, NO shadow — matching the guide's expert-memo card. */
	border: 1px solid var(--certrev-navy-10);
	border-radius: calc(var(--certrev-radius, 14px) * 0.7);
	box-shadow: none;
	padding: 24px;
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: #0a1b3f;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.certrev-memo *,
.certrev-memo *::before,
.certrev-memo *::after {
	box-sizing: border-box;
}

.certrev-memo__label {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--certrev-navy-55);
	margin-bottom: 14px;
}

.certrev-memo__row {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.certrev-memo__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex-shrink: 0;
}

.certrev-memo img.certrev-memo__avatar {
	object-fit: cover;
	display: block;
}

.certrev-memo__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f2;
	color: var(--certrev-navy-55);
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-weight: 700;
	font-size: 13px;
}

.certrev-memo__main {
	flex: 1;
	min-width: 0;
}

.certrev-memo__name {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #0a1b3f;
}

.certrev-memo__name a {
	color: inherit;
	text-decoration: none;
}

.certrev-memo__name a:hover {
	text-decoration: underline;
}

.certrev-memo__credentials {
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--certrev-accent);
}

/* `<p>`, inserted inside the theme's RTE container like the sidebar's bio: a merchant `.rte p { color }`
 * (0-1-1) beats this class (0-1-0). The memo now paints on a fixed white base (the chameleon background
 * is gone, owner decision 2026-09-26), so a dark theme's `.rte p { color: #fff }` would paint the memo
 * white on white (Codex, PR #7348). `color` is pinned; the value is a variable, and the ink layer's
 * equal-specificity `!important` later in the sheet still re-points it at `--cr-ink-soft`. */
.certrev-memo__body {
	/* Readable, upright body text (Owen 2026-07-17: the display-serif italic hurt legibility for a full
	 * quote). The left accent rule + the "Expert memo" label mark it as the expert's quote. */
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--certrev-navy-75) !important;
	margin: 11px 0 14px;
	/* Preserve the expert's paragraph breaks. The memo carries "\n\n" between paragraphs
	   (the live cert path stores reviewAssignment.expertMemo verbatim); without this the
	   newlines collapse to one block. Matches the reviewer's intended structure. POR-9716. */
	white-space: pre-line;
}

/* One row under the footer hairline: "Verified by CertREV" trust mark on the LEFT, the profile/certificate
 * actions RIGHT-aligned inline with it (Owen 2026-07-17). Wraps gracefully on a narrow card. */
.certrev-memo__trustrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 22px;
	flex-wrap: wrap;
}

.certrev-memo__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

/* Muted divider between the compact "Profile | Certificate" actions (Owen 2026-07-20). */
.certrev-memo__link-sep {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	color: var(--certrev-navy-35);
}

.certrev-memo__link {
	/* Mono uppercase, matching the badge footer stamp (Owen 2026-07-17). Kept navy (darker than the
	 * verified line) + hover-underline so they still read as tappable actions, not static labels. */
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #0a1b3f;
	text-decoration: none;
}

.certrev-memo__link:hover {
	text-decoration: underline;
}

.certrev-memo__footer {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--certrev-navy-10);
}

.certrev-memo__verified {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	/* Mono lockup, matching the badge footer's "CERTIFIED / COMPENSATED" stamp (Owen 2026-07-17). */
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--certrev-navy-55);
}

.certrev-memo__mark {
	display: block;
	flex-shrink: 0;
}

.certrev-memo__wordmark {
	/* Inherits the mono lockup from .certrev-memo__verified (Owen 2026-07-17); a touch bolder + navy so the
	 * brand name reads within the uppercase stamp. */
	font-weight: 700;
	color: #0a1b3f;
}

/* `<p>`, and the LEGALLY LOAD-BEARING one: pinned against a merchant `.rte p { color }` (0-1-1) for the
 * same reason as `.certrev-memo__body` above and `.certrev-sidebar__ftc` (Codex, PR #7348). */
.certrev-memo__ftc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--certrev-navy-55) !important;
}

/* ── Contributor accordion (POR-9827 chevron model) ──
 * A row carrying [data-certrev-acc] toggles `.open` (via certrev-cert.js), revealing its `.acc-bio`
 * IN PLACE beneath the credentials/label — the card grows only when the reader asks. The name caret
 * is the persistent affordance; it rotates when open. The bio is collapsed by default at EVERY width. */

.certrev-card .contributor.clickable {
	cursor: pointer;
	transition: opacity 0.15s;
	border-radius: 8px;
}

.certrev-card .contributor.clickable:hover {
	opacity: 0.82;
}

.certrev-card .credentials {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--certrev-navy-60);
	margin-top: 2px;
}

.certrev-card .acc-bio {
	display: none;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--certrev-navy-75);
}

.certrev-card .contributor.open .acc-bio {
	display: block;
}

/* The caret + its leading nbsp live in this nowrap wrapper so the caret can never break onto its own
 * line (suppresses the SVG replaced-element boundary break the bare nbsp couldn't). */
.certrev-card .name-caret-wrap {
	white-space: nowrap;
}

.certrev-card .name-caret {
	display: inline-block;
	vertical-align: middle;
	/* The nbsp inside .name-caret-wrap supplies the gap. */
	margin-left: 0;
	position: relative;
	top: -1px;
	color: var(--certrev-navy-55);
	transition:
		color 0.15s ease-out,
		transform 0.18s ease-out;
}

.certrev-card .contributor.open .name-caret {
	transform: rotate(180deg);
}

.certrev-card .contributor.clickable:hover .name-caret,
.certrev-card .contributor.clickable:focus-visible .name-caret {
	color: var(--certrev-accent, #0a1b3f);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * INK LAYER — the card BODY + memo text colours, as one family a render def's inkColor can move.
 *
 * `--cr-fg` is the LOCKED navy trust ink and `--cr-ink` the FREE-content ink (reviewer/author
 * names, title, credentials, bio, initials). `--cr-ink` defaults to `--cr-fg`; only the themed-face
 * block below re-points it at the def's `--certrev-ink`, and the -sub/-soft/-avbg derivations
 * re-resolve lazily off whichever ink the element carries. The LOCKED trust text (disclosures,
 * credential verification, section labels, footer date) stays on `--cr-fg`/`--cr-sub` so a brand
 * ink can never drag legally load-bearing text below its floor (Owen boundary 2026-07-20).
 *
 * NOTHING HERE READS THE STORE THEME. This block used to be the CHAMELEON LAYER (2026-06-27): it
 * took the card body + memo's foreground, background, accent and font from the host theme's
 * `--color-foreground` / `--color-background` / `--color-primary-button-background` /
 * `--color-base-accent-1` and `font-family: inherit`. That is gone (owner decision 2026-09-26: all
 * embed styling lives in the CertREV portal customizer), so an unthemed face paints CertREV's navy
 * on white in DM Sans whatever the store theme defines, and a themed face paints its def.
 *
 * Gated behind @supports(color-mix): a browser without color-mix() skips this layer and paints the
 * literal base palette above rather than a half-resolved blend.
 * ───────────────────────────────────────────────────────────────────────────── */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.certrev-card,
	.certrev-memo {
		--cr-fg: #0a1b3f;
		--cr-sub: color-mix(in srgb, var(--cr-fg) 55%, transparent);
		--cr-soft: color-mix(in srgb, var(--cr-fg) 80%, transparent);
		--cr-hair: color-mix(in srgb, var(--cr-fg) 12%, transparent);
		--cr-avbg: color-mix(in srgb, var(--cr-fg) 7%, transparent);
		/* DO NOT read `--certrev-ink` here — INK AND SURFACE MUST TRAVEL TOGETHER. A def's inkColor is
		 * contrast-gated at WRITE time against that def's own `surface` (assert-compliant-render.ts),
		 * and this level's background is not that surface: it is the base white, and the banner's memo
		 * rung carries no def surface at all. The read belongs in the themed-face block below, and ONLY
		 * there, because that block pins `background: var(--certrev-surface)` in the same breath — the
		 * exact pairing the write-time gate proved. (Caught in review on PR #6781, when this level was
		 * the chameleon and its background was the merchant theme's: a valid `#1a1a1a` ink on a
		 * `#111111` store landed at 1.09:1.) */
		--cr-ink: var(--cr-fg);
		--cr-ink-sub: color-mix(in srgb, var(--cr-ink) 55%, transparent);
		--cr-ink-soft: color-mix(in srgb, var(--cr-ink) 80%, transparent);
		--cr-ink-avbg: color-mix(in srgb, var(--cr-ink) 7%, transparent);
	}
	.certrev-memo {
		border-color: var(--cr-hair);
	}
	/* `inherit` takes the SECTION's font: DM Sans on an unthemed face, the def's fontSlot stack on a
	 * themed one (set by the themed-face block below). */
	.certrev-card .name,
	.certrev-memo__name {
		color: var(--cr-ink);
		font-family: inherit;
	}
	/* FREE content ink — the reviewer/author title + credential follow the brand ink. */
	.certrev-card .title,
	.certrev-card .credentials {
		color: var(--cr-ink-sub);
	}
	/* LOCKED trust text — the compensation cue, FTC scope, credential-verification line, section
	 * labels, and the certified date STAY on the navy trust ink (never the brand ink), so a themed
	 * inkColor can't push legally load-bearing text below its contrast floor (Owen boundary 2026-07-20). */
	.certrev-card .label.author,
	.certrev-card .footer-date,
	.certrev-card .compensated-cue,
	.certrev-memo__label,
	.certrev-memo__verified {
		color: var(--cr-sub);
	}
	.certrev-card .acc-bio {
		color: var(--cr-ink-soft);
	}
	/* `!important` to take the base rule's in-flow armor: equal specificity, later in the sheet. */
	.certrev-memo__body {
		color: var(--cr-ink-soft) !important;
	}
	.certrev-card .avatar--initials,
	.certrev-memo__avatar--initials {
		/* Keep the JetBrains Mono initials (a design-system font) — only the tint moves. The reviewer's
		 * initials are FREE content, so they follow the brand ink. */
		background: var(--cr-ink-avbg);
		color: var(--cr-ink-sub);
	}
	.certrev-card .card-footer,
	.certrev-memo__footer {
		border-top-color: var(--cr-hair);
	}
} /* end @supports(color-mix) ink layer */

/* ── Themed faces (WS5 design-guide theming) ─────────────────────────────────
 * A brand render-def is present → the face snippet stamps `data-certrev-def-version`
 * and emits inline `--certrev-*` token vars (accent / surface / radius / font), each
 * checked at write time (assertCompliantRender) and, at render, only type-checked (an opaque
 * colour, a length, a font-slot enum) and escaped. Consume them here, scoped to the stamped
 * attribute so UNTHEMED faces never match (they keep the base palette and the ink layer's navy).
 *
 * The def's OPAQUE surface paired with the LOCKED navy foreground is the one contrast pair
 * CertREV controls both sides of. The write gate checks it against the AA floor when a def is
 * saved; delivery paints a saved def as saved (the customizer is the only gate, owner decision
 * 2026-09-26), so a surface saved under an older floor may paint below today's.
 * `--cr-fg` is the literal navy in the ink layer above and nothing re-points it, so every
 * color-mix-derived LOCKED foreground (sub/hair) stays navy on a themed surface too.
 * `--certrev-accent` needs no rule — the inline custom property already wins wherever
 * `var(--certrev-accent)` is read.
 *
 * ONE SELECTOR LIST, EVERY CARD-SURFACE FACE (POR-11555). This block shipped covering only
 * `.certrev-card` (82a667c34, 2026-07-15); the sidebar rail was added four days later
 * (b6beadd0f) as a SECOND stamped face and never joined the list, so for 31 days a brand on
 * `layout: sidebar` had its fontSlot, surface and inkColor silently dropped — the section
 * matched the (since removed) chameleon layer instead and took the merchant theme's
 * font/background/foreground, with the locked navy trust ink lost too. Proven on the canary by
 * flipping each `--certrev-*` var with `element.style.setProperty` and re-reading
 * `getComputedStyle`: on the sidebar, font and surface did not move; on the banner control they did.
 *
 * The rail's selector is `.certrev-memo.certrev-sidebar[…]` (0-3-0), not the bare stamped
 * attribute: the section carries `.certrev-memo` (the rail is a memo face too), so it must
 * out-specify BOTH the memo base `.certrev-memo` (0-1-0) and the rail's own base rule
 * (0-2-0, below). A bare `[data-certrev-def-version]` list entry would ALSO catch the floating
 * pill — a LOCKED navy/white chrome surface that emits no surface/radius/font tokens at all
 * (certrev-pill.liquid emits only --certrev-bar-bg/-fg, and `.certrev-pill` already reads both)
 * — and would have repainted it white with a 12px radius. The pill is correctly absent here.
 *
 * ADDING A FACE: a new snippet that stamps `data-certrev-def-version` and emits any of these
 * tokens MUST be added to this selector list. That is not left to reviewer memory — it is the
 * exact omission that caused this bug, so it is now mechanically enforced by
 * `src/lib/design-guide/themed-face-css.test.ts`, which derives BOTH sides (the tokens each
 * snippet emits, and the tokens the CSS reads within that face's own class universe) from the
 * files themselves and fails on any token a face emits but no reachable rule reads. */
.certrev-card[data-certrev-def-version],
.certrev-memo.certrev-sidebar[data-certrev-def-version] {
	/* v2 brand-ink: the FREE-content ink follows the render-def's inkColor; navy when unset, so a
	 * themed-but-un-inkColor'd face is byte-identical. Only --cr-ink is overridden — the ink layer's
	 * --cr-ink-sub/-soft/-avbg derivations re-resolve off it lazily. The locked --cr-fg stays navy. */
	--cr-ink: var(--certrev-ink, #0a1b3f);
	background: var(--certrev-surface, #ffffff);
	/* FACE VALUE, deliberately (POR-11555 item 4): the unthemed base rules take the guide's memo
	 * geometry `calc(var(--certrev-radius, 14px) * 0.7)`, which on a THEMED face made the brand's
	 * chosen corner render 30% short — `soft` 14px → 9.8px, `rounded` 22px → 15.4px — a control that
	 * silently lies about its own value. The banner has taken it at face value here since day one;
	 * the rail now does too. Nothing on a live face moves: the delivery resolver (`resolveRenderDef`,
	 * and the plugin's `CertREV_Render_Def::resolve`) always resolves a `cornerRadius` (a valid
	 * override, else the preset default), so the 12px fallback is unreachable on a stamped face, and
	 * the only production sidebar brand authored `sharp` (0px), which is exact
	 * either way. The 0.7 multiplier is NOT removed from `.certrev-memo` — that rule is shared with
	 * the banner's memo rung, where the 0.7 is the guide's intended memo-card geometry. */
	border-radius: var(--certrev-radius, 12px);
	font-family: var(--certrev-font, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
}

/* ── Header trust bar ──
 * The locked design (Owen 2026-07-17) makes the navy header a MINIMAL, non-interactive trust bar
 * (mark + "Expert reviewed" only). The former interactive seal-bar affordances (cursor, light ring,
 * the "View certificate" CTA pill, and its narrow-column wrap) are removed — the certificate is now
 * reached from the memo card's controls, not this header. The bar's literal navy/white base rules
 * live in `.certrev-card .cert-header` above. */

/* ── Sidebar rail (layout 'sidebar') — Liquid twin of sidebarCard ──
 * The section is .certrev-memo (a memo face too) — these 2-class rules out-specify the memo base's
 * and the ink layer's single-class rules for the properties they set. background / color / font /
 * radius come from the memo base on an UNTHEMED rail; on a THEMED one they come from the render-def
 * via the themed-face selector list above (0-3-0, which out-specifies these 0-2-0 rules). */
.certrev-memo.certrev-sidebar {
	padding: 0;
	overflow: hidden;
	box-shadow: var(--certrev-shadow-rail);
}
.certrev-sidebar .certrev-sidebar__seal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	/* Brand-ink chrome (v2 Phase 1): the sidebar layout's seal bar is a twin of `.cert-header` —
	 * same barInk/barInkFg vars, same navy/white fallbacks (byte-identical when unthemed). */
	background: var(--certrev-bar-bg, #0a1b3f);
	color: var(--certrev-bar-fg, #ffffff);
}
.certrev-sidebar .certrev-sidebar__seal .cert-mark svg path {
	fill: var(--certrev-bar-fg, #ffffff);
}
.certrev-sidebar .certrev-sidebar__seal .cert-eyebrow {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.certrev-sidebar__body {
	padding: 20px;
}
.certrev-sidebar__person {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}
.certrev-sidebar__vblock {
	flex: 1;
	min-width: 0;
}
.certrev-sidebar__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
/* .rev-verified / .rev-verified-date reuse: re-scope the banner rules to the sidebar too. */
.certrev-sidebar .rev-verified,
.certrev-sidebar .rev-verified-date {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--certrev-navy-55);
}
.certrev-sidebar .rev-verified {
	margin-top: 3px;
}
/* `<p>` — same in-flow exposure as the quote below: a merchant `.rte p { color }` (0-1-1) beats
 * this class (0-1-0), so the colour is pinned. `.certrev-sidebar__name` and the `.rev-verified`
 * pair are NOT pinned and do not need to be: the former is a `<div>` (no plausible element rule
 * targets it inside an RTE) and the latter is matched at `.certrev-sidebar .rev-verified` (0-2-0),
 * which already out-specifies a theme's 0-1-1. */
.certrev-sidebar__bio {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--certrev-navy-75) !important;
}
/* The memo rule is a <blockquote>, and on the IN-FLOW placement the rail is inserted INSIDE the
 * theme's RTE container — so a merchant's `.rte blockquote` (0-1-1) out-specifies this class
 * (0-1-0) and takes the whole element. Measured on the canary (POR-11555): at 1440 the rail is
 * `position: fixed` outside the RTE and paints the def's 3px solid #000000 upright rule at 16px;
 * at 390 the SAME certified article renders the theme's 1px rgba(0,0,0,0.25) ITALIC rule at 12px.
 * Two materially different faces decided by viewport width, and on mobile — where most of the
 * traffic is — none of the brand's authored typography reaches paint.
 *
 * !important is the mechanism this file already uses for exactly this class of theme
 * interference — see the theme-bleed armor at the top, and `.certrev-sidebar__action`'s
 * `color: … !important` / `background-image: none !important` twenty lines below. `font-family:
 * inherit` is what re-establishes inheritance from the section, which on a themed face is the
 * render-def's fontSlot stack.
 *
 * `color` IS pinned, and an earlier revision of this fix left it out on the reasoning that pinning
 * would freeze a literal navy-75 against the brand-ink direction. That reasoning expired the moment
 * the rail joined the ink layer: the value here is a VARIABLE, so `!important` hardens the
 * cascade position, not the colour — the block below still re-points it at `--cr-ink-soft`, and
 * wins because an `!important` declaration of equal specificity later in the sheet takes it. Caught
 * in review on PR #6781; the geometry was pinned for this exact conflict and the colour was left
 * exposed to it, which meant a themed rail painted the brand ink on desktop and the merchant's
 * quote colour on mobile. RESIDUAL, still deliberate: `margin` is not pinned — it was not among the
 * properties measured as flipped, and it is layout, not brand intent. */
.certrev-sidebar__quote {
	margin: 16px 0 0;
	padding-left: 16px !important;
	border-left: 3px solid var(--certrev-accent, #0a1b3f) !important;
	font-family: inherit !important;
	font-style: normal !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--certrev-navy-75) !important;
	white-space: pre-line;
}
/* `<p>` again, and this one is the LEGALLY LOAD-BEARING line — a merchant `.rte p { color }`
 * silently repainting the FTC disclosure is the worst version of this cascade loss, not the
 * mildest, so it is pinned for the same reason as the bio and the quote. */
.certrev-sidebar__ftc {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--certrev-navy-55) !important;
}
.certrev-sidebar__cue {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.certrev-sidebar__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--certrev-navy-10);
}
.certrev-sidebar__actions--single {
	grid-template-columns: 1fr;
}
.certrev-sidebar__action {
	text-align: center;
	padding: 14px;
	font-size: 14px;
	font-weight: 700;
	color: #0a1b3f !important;
	text-decoration: none;
	background-image: none !important;
}
.certrev-sidebar__action + .certrev-sidebar__action {
	border-left: 1px solid var(--certrev-navy-10);
}
.certrev-sidebar__action:hover {
	text-decoration: underline;
}

/* ── The rail's half of the ink layer (POR-11555) ──
 * Same root cause as the themed-face rule above, one layer down: the ink layer (then the chameleon)
 * predates the rail (`b6beadd0f`, 2026-07-19) and maps the BANNER's elements only — `.acc-bio` and
 * `.certrev-memo__body` to `--cr-ink-soft`, the locked trust text to `--cr-sub`, hairlines to
 * `--cr-hair`. Every one of the rail's twins hardcodes a navy literal instead, so a render-def's
 * `inkColor` cannot reach the rail's prose (Codex, PR #6781) even though `--cr-ink` reads the
 * token. Extending the mapping to the rail fixes that, and is the same "a new face was added and
 * the earlier layer was never extended" failure this whole ticket is about.
 *
 * The FREE / LOCKED boundary is copied from the banner, not invented here: reviewer prose follows
 * the brand ink; the credential-verification line and the FTC disclosure stay on `--cr-sub` (a
 * derivation of the LOCKED `--cr-fg`, never of `--cr-ink`) so a brand ink can never drag legally
 * load-bearing text below its contrast floor (Owen boundary 2026-07-20).
 *
 * `--cr-fg` is the literal navy, so the deltas from the base literals are the banner's own: prose
 * 75% → 80%, locked text 55% → 55% (exact), hairlines 10% → 12%. `.certrev-sidebar__action` keeps
 * its base `#0a1b3f !important` — the locked navy it always resolved to. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	/* FREE content — the credentialed byline, the rail's twin of `.certrev-card .name` /
	 * `.certrev-memo__name`. It set NO colour, so it inherited the section's navy while the rail's
	 * own initials avatar — which reuses the shared `.certrev-memo__avatar--initials` class —
	 * already painted `--cr-ink-sub`. One component, two inks. (Caught in review on PR #6781.) The
	 * rail carries no separate credentials element: the abbreviations live inside this node, so this
	 * covers the whole byline. */
	.certrev-sidebar__name {
		color: var(--cr-ink);
	}
	/* FREE content — the reviewer bio + the memo quote, the rail's twins of `.acc-bio` /
	 * `.certrev-memo__body`. This is what makes a def's inkColor reach the rail at all.
	 * `!important` for two reasons at once: it carries the in-flow armor the `<p>`/`<blockquote>`
	 * base rules now have (a merchant `.rte p` / `.rte blockquote` at 0-1-1 beats 0-1-0), AND it is
	 * what lets this override take those same-specificity `!important` base declarations — equal
	 * weight, equal specificity, later in the sheet wins. */
	.certrev-sidebar__bio,
	.certrev-sidebar__quote {
		color: var(--cr-ink-soft) !important;
	}
	/* LOCKED trust text — credential verification, its date, and the FTC scope line. Only `__ftc`
	 * needs the armor (`<p>`, 0-1-0); the `.rev-verified` pair is matched at 0-2-0 and already
	 * out-specifies a theme's element rule, so it is left unpinned rather than blanket-!importanted. */
	.certrev-sidebar .rev-verified,
	.certrev-sidebar .rev-verified-date {
		color: var(--cr-sub);
	}
	.certrev-sidebar__ftc {
		color: var(--cr-sub) !important;
	}
	.certrev-sidebar__actions {
		border-top-color: var(--cr-hair);
	}
	.certrev-sidebar__action + .certrev-sidebar__action {
		border-left-color: var(--cr-hair);
	}
}

/* Rail mode — stamped by placement.js only when the article column leaves ≥384px of right gutter.
 * --certrev-rail-left is set inline by placeWrap. In-flow fallback: the wrap is placed like the
 * banner top card and inherits the normal card rhythm. */
.certrev-memo-wrap[data-certrev-placement="rail"] {
	position: fixed;
	top: 96px;
	left: var(--certrev-rail-left);
	width: 320px;
	max-height: calc(100vh - 128px);
	overflow: auto;
	z-index: 20;
	margin: 0;
}

/* ── Floating pill (layout 'floating') — Liquid twin of floatingPill ──
 * CSS-only fixed placement (no JS dependency); navy/white locked (accentFg = Phase B). */
.certrev-pill-wrap {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
}
.certrev-pill {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border-radius: 999px;
	/* Brand-ink chrome (v2 Phase 1): the minimal-tier pill is the same trust surface as the header
	 * bar — it follows barInk/barInkFg so a themed brand's compact format matches its card. Navy/white
	 * fallbacks ⇒ byte-identical when unthemed. */
	background: var(--certrev-bar-bg, #0a1b3f);
	color: var(--certrev-bar-fg, #ffffff);
	box-shadow: var(--certrev-shadow-pill);
	font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.certrev-pill .cert-mark svg path {
	fill: var(--certrev-bar-fg, #ffffff);
}
.certrev-pill__eyebrow {
	font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
	white-space: nowrap;
}
.certrev-pill__link {
	font-size: 14px;
	font-weight: 700;
	/* The pill's own bar foreground: a light barInk gets a dark fg, and the links must follow it.
	 * `!important` still beats a theme's link color; the white fallback is the unthemed pill. */
	color: var(--certrev-bar-fg, #ffffff) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	background-image: none !important;
}
.certrev-pill__dot {
	opacity: 0.5;
}
@media (max-width: 480px) {
	.certrev-pill-wrap {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.certrev-pill {
		gap: 10px;
		padding: 10px 16px;
	}
}