@samva/markup 0.13.0 → 0.14.0

package/dist/compiler.js

@@ -1,13 +1,15 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { n as TEMPLATE_NAME_PATTERN } from "./template-zLUjcwfF.js";
 import { D as samvaBrandPlugin, T as parseBrandSpecifier, _ as renderIr, w as brandSpecifierPattern } from "./html-eOZfDwVf.js";
-import { c as parseBrandCss, d as formatColor, f as parseColor, i as brandTailwindCss, u as downlevelColors } from "./theme-css-CEUrDpqq.js";
-import { a as downlevelMediaQuery, c as renderHeadCss, i as matchesSelector, l as resolveVariables, n as applyStylesheet, o as finalizeValue, r as classListOf, s as foldCalc, u as unquote } from "./ir-C-ubz6N3.js";
-import { i as buildLineMap, s as lineColumn } from "./diagnostic-codes-DdZ4tka5.js";
-import { a as lowerProject, d as resolveFromDirectory, f as resolveThemeImports, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile, u as projectDirectory } from "./profile-CXnkfEMi.js";
-import { c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-C45QBKX9.js";
+import { m as PRIMITIVE_CSS } from "./components-CwWSoG5N.js";
+import { c as foregroundDefaults, d as downlevelColors, f as formatColor, l as parseBrandCss, n as DEFAULT_THEME_CSS, p as parseColor, u as printBrandCss } from "./theme-css-s9QwD5Ko.js";
+import { n as isDarkSchemeCondition, r as isDarkSchemeQuery, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
+import { a as downlevelMediaQuery, c as renderHeadCss, d as matchesSelector, f as unquote, i as renderDarkRules, l as resolveVariables, o as finalizeValue, r as applyStylesheet, s as foldCalc, u as classListOf } from "./ir-D-gTGquU.js";
+import { i as buildLineMap, s as lineColumn } from "./diagnostic-codes-UXwOO3A-.js";
+import { a as lowerProject, d as resolveFromDirectory, f as resolveThemeImports, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile, u as projectDirectory } from "./profile-Cc8VxOKA.js";
+import { c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-B-t62NJB.js";
 import { t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
-import { n as compileEmail, r as renderEmailContent } from "./render-Cja448i0.js";
+import { n as compileEmail, r as renderEmailContent } from "./render-6gLei61p.js";
 import { caniemail, parseHtml, rawData } from "caniemail";
 import { generate, ident, parse, walk } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";
@@ -224,173 +226,6 @@ const compatibilityContext = (html, css) => {
 	};
 };
 //#endregion
-//#region src/email/compatibility.ts
-/**
-* The pinned matrix. Every finding is reported per client, and a client absent
-* from this list is a client Samva makes no claim about.
-*/
-const EMAIL_CLIENT_MATRIX = [
-	{
-		id: "gmail.desktop-webmail",
-		label: "Gmail web"
-	},
-	{
-		id: "gmail.ios",
-		label: "Gmail iOS"
-	},
-	{
-		id: "gmail.android",
-		label: "Gmail Android"
-	},
-	{
-		id: "apple-mail.macos",
-		label: "Apple Mail macOS"
-	},
-	{
-		id: "apple-mail.ios",
-		label: "Apple Mail iOS"
-	},
-	{
-		id: "yahoo.desktop-webmail",
-		label: "Yahoo web"
-	},
-	{
-		id: "outlook.outlook-com",
-		label: "Outlook web and new Windows"
-	},
-	{
-		id: "outlook.windows",
-		label: "Outlook classic Windows"
-	}
-];
-const LABELS = new Map(EMAIL_CLIENT_MATRIX.map((target) => [target.id, target.label]));
-const COMPATIBILITY_PROVENANCE = {
-	rules: "caniemail@2.0.2",
-	apiVersion: rawData.api_version,
-	lastUpdate: rawData.last_update_date
-};
-/**
-* The constructs whose loss actually breaks a message: the recipient reads
-* something different, in a different order, follows a link that does not work,
-* or sees a layout that has collapsed. A target client dropping one of these
-* blocks publication.
-*
-* The list is deliberately short and enumerated, because the contract is to
-* block *known* failures. Nonessential differences require an assessment of
-* emitted values: a concrete risk warns, expected differences and unverified
-* behavior remain compatibility observations.
-*/
-const ESSENTIAL_CONSTRUCTS = /* @__PURE__ */ new Set([
-	"<table> element",
-	"<div> element",
-	"<p> element",
-	"<span> element",
-	"<ul>, <ol> and <dl>",
-	"<h1> to <h6> elements",
-	"HTML5 doctype",
-	"width attribute",
-	"height attribute",
-	"align attribute",
-	"valign attribute",
-	"<img> element",
-	"display",
-	"mailto: links",
-	"Local anchors"
-]);
-const KNOWN_TITLES = new Set(rawData.data.map((feature) => feature.title));
-/** The innermost recorded node containing an offset, so a finding names its element. */
-const originsAt = (positions, offset) => {
-	let best;
-	for (const position of positions) {
-		if (offset < position.start || offset >= position.end) continue;
-		if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
-	}
-	return best?.origins ?? [];
-};
-const slug = (title) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-/**
-* Check the emitted document against the pinned matrix.
-*
-* Findings are grouped by construct rather than repeated per client, so one
-* unsupported property is one diagnostic naming every client that drops it.
-*/
-const checkEmailCompatibility = (input) => {
-	const targets = input.clients ?? EMAIL_CLIENT_MATRIX;
-	const context = compatibilityContext(input.html, input.css);
-	const targetClients = targets.map((target) => target.id);
-	const reports = [caniemail({
-		clients: targetClients,
-		html: input.html
-	}), ...input.css === void 0 ? [] : [caniemail({
-		clients: targetClients,
-		css: input.css
-	})]];
-	const grouped = /* @__PURE__ */ new Map();
-	for (const bucket of reports.flatMap((report) => [report.issues.errors, report.issues.warnings])) for (const [client, issues] of bucket) {
-		const label = LABELS.get(client) ?? client;
-		for (const raw of issues) {
-			const hiddenContentFailure = client === "outlook.windows" && raw.support === "partial" && (raw.title === "display" || raw.title === "display:none") && context.hiddenContentOffsets.length > 0;
-			const blocking = hiddenContentFailure || raw.support !== "partial" && ESSENTIAL_CONSTRUCTS.has(raw.title);
-			const { explanation, ...compatibility } = assessCompatibility(raw.title, client, raw.support, context, blocking);
-			const key = JSON.stringify([
-				raw.title,
-				raw.support,
-				compatibility,
-				explanation
-			]);
-			const offsets = hiddenContentFailure ? context.hiddenContentOffsets : context.offsets(raw.title);
-			const entry = grouped.get(key);
-			if (entry === void 0) grouped.set(key, {
-				title: raw.title,
-				support: raw.support,
-				clients: /* @__PURE__ */ new Set([label]),
-				notes: new Set(raw.notes),
-				explanation,
-				compatibility,
-				blocking,
-				offsets
-			});
-			else {
-				entry.clients.add(label);
-				for (const note of raw.notes) entry.notes.add(note);
-			}
-		}
-	}
-	const findings = [];
-	for (const entry of grouped.values()) {
-		const severity = entry.blocking ? "error" : entry.compatibility.assessment === "risk" ? "warning" : "info";
-		const occurrences = entry.offsets.map((offset) => originsAt(input.positions ?? [], offset)).filter((origins) => origins.length > 0);
-		const clients = [...entry.clients].sort();
-		const dropped = entry.support === "partial" ? clients.length === 1 ? "partially supports" : "partially support" : clients.length === 1 ? "does not support" : "do not support";
-		findings.push({
-			code: `caniemail/${slug(entry.title)}`,
-			severity,
-			message: `${clients.join(", ")} ${dropped} ${entry.title}. ${entry.explanation}`,
-			compatibility: entry.compatibility,
-			origins: occurrences[0] ?? [],
-			...occurrences.length === 0 ? {} : { occurrences },
-			...input.fixture === void 0 ? {} : { fixtures: [input.fixture] },
-			clients,
-			...entry.notes.size === 0 ? {} : { notes: [...entry.notes].join(" ") },
-			provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
-		});
-	}
-	return findings.sort((left, right) => left.code.localeCompare(right.code));
-};
-/**
-* Constructs the pinned data says nothing about for a target client. These are
-* reported so "we did not check that" is never mistaken for "that works".
-*/
-const unknownCoverage = (titles) => [...titles].filter((title) => !KNOWN_TITLES.has(title)).sort().map((title) => ({
-	code: "caniemail/unknown-coverage",
-	severity: "info",
-	message: `The pinned rules say nothing about ${title}, so no client claim is made about it. Verify it in a real client before relying on it.`,
-	origins: [],
-	provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
-}));
-/** A publication carrying one of these is refused; the message would arrive broken. */
-const hasBlockingCompatibility = (findings) => findings.some((finding) => finding.severity === "error");
-//#endregion
 //#region src/email/fonts.ts
 const FONT_FILE = /\.woff2$/i;
 const WOFF2_FORMAT = /^woff2(?:-variations)?$/i;
@@ -611,6 +446,7 @@ const parseStylesheet = (source, options = {}) => {
 	const headAtRules = [];
 	const fontFaces = [];
 	const variables = {};
+	const darkVariables = {};
 	const conditionalVariables = /* @__PURE__ */ new Set();
 	const diagnostics = [];
 	const layers = /* @__PURE__ */ new Map();
@@ -667,6 +503,7 @@ const parseStylesheet = (source, options = {}) => {
 			headAtRules: [],
 			fontFaces: [],
 			variables: {},
+			darkVariables: {},
 			diagnostics: [{
 				code: "css-parse-error",
 				severity: "error",
@@ -694,6 +531,7 @@ const parseStylesheet = (source, options = {}) => {
 		if (ROOT_SELECTORS.has(selector.trim())) for (const declaration of declarations) {
 			if (!declaration.property.startsWith("--")) continue;
 			if (context.conditions.length === 0) variables[declaration.property] = declaration.value;
+			else if (isDarkSchemeCondition(context.conditions)) darkVariables[declaration.property] = declaration.value;
 			else conditionalVariables.add(declaration.property);
 		}
 		rules.push({
@@ -750,7 +588,11 @@ const parseStylesheet = (source, options = {}) => {
 			return;
 		}
 		if (name === "theme" || name === "scope") {
-			for (const declaration of declarationsOf(node.block)) if (declaration.property.startsWith("--")) variables[declaration.property] = declaration.value;
+			const into = context.conditions.length === 0 ? variables : isDarkSchemeCondition(context.conditions) ? darkVariables : void 0;
+			for (const declaration of declarationsOf(node.block)) if (declaration.property.startsWith("--")) {
+				if (into === void 0) conditionalVariables.add(declaration.property);
+				else into[declaration.property] = declaration.value;
+			}
 			for (const child of node.block?.children ?? []) if (child.type !== "Declaration") visitNode(child, context);
 			return;
 		}
@@ -810,10 +652,561 @@ const parseStylesheet = (source, options = {}) => {
 		headAtRules,
 		fontFaces,
 		variables,
+		darkVariables,
 		diagnostics
 	};
 };
 //#endregion
+//#region src/email/contrast.ts
+const CANVAS = {
+	light: {
+		r: 1,
+		g: 1,
+		b: 1,
+		a: 1
+	},
+	dark: {
+		r: 18 / 255,
+		g: 18 / 255,
+		b: 18 / 255,
+		a: 1
+	}
+};
+/** The ratios `email-contrast` holds a message to, and what counts as large text. */
+const CONTRAST_THRESHOLDS = {
+	/** Text below this is an error at any size. */
+	textError: 3,
+	/** Normal-size text below this is a warning (WCAG AA). */
+	textWarning: 4.5,
+	/** Text at least this many pixels is large, as is bold text at `largeBoldPx`. */
+	largePx: 24,
+	largeBoldPx: 18.5,
+	/** A filled button below this against its surroundings is an error. */
+	shapeError: 1.5,
+	/** A filled button below this is a warning (WCAG 1.4.11). */
+	shapeWarning: 3,
+	/** A button border at least this against the surroundings keeps the shape. */
+	border: 3
+};
+const TEXT_ERROR = CONTRAST_THRESHOLDS.textError;
+const TEXT_WARNING = CONTRAST_THRESHOLDS.textWarning;
+const LARGE_PX = CONTRAST_THRESHOLDS.largePx;
+const LARGE_BOLD_PX = CONTRAST_THRESHOLDS.largeBoldPx;
+const SHAPE_ERROR = CONTRAST_THRESHOLDS.shapeError;
+const SHAPE_WARNING = CONTRAST_THRESHOLDS.shapeWarning;
+const INSET_BORDER = CONTRAST_THRESHOLDS.border;
+const SKIPPED_TAGS = /* @__PURE__ */ new Set([
+	"head",
+	"style",
+	"title",
+	"script"
+]);
+const INVISIBLE = /[\s\u200b-\u200f\ufeff\u00a0\u00ad]|\u034f/g;
+const DARK_QUERY = /^@media\b[^{]*\(\s*prefers-color-scheme\s*:\s*dark\s*\)/i;
+const clamp = (value) => value < 0 ? 0 : value > 1 ? 1 : value;
+const channel = (value) => {
+	const v = clamp(value);
+	return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+};
+const luminance = (color) => .2126 * channel(color.r) + .7152 * channel(color.g) + .0722 * channel(color.b);
+const ratioOf = (left, right) => {
+	const a = luminance(left);
+	const b = luminance(right);
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+};
+const hex = (color) => `#${[
+	color.r,
+	color.g,
+	color.b
+].map((value) => Math.round(clamp(value) * 255).toString(16).padStart(2, "0")).join("")}`;
+const over = (top, below) => ({
+	r: top.r * top.a + below.r * (1 - top.a),
+	g: top.g * top.a + below.g * (1 - top.a),
+	b: top.b * top.a + below.b * (1 - top.a),
+	a: 1
+});
+const declarationsOf = (source) => {
+	const found = [];
+	try {
+		walk(parse(source, {
+			context: "declarationList",
+			positions: false
+		}), (node) => {
+			if (node.type === "Declaration") found.push({
+				property: node.property.toLowerCase(),
+				value: generate(node.value).trim()
+			});
+		});
+	} catch {
+		return [];
+	}
+	return found;
+};
+/** Split on whitespace that is not inside parentheses. */
+const tokens = (value) => {
+	const found = [];
+	let depth = 0;
+	let current = "";
+	for (const char of value) {
+		if (char === "(") depth += 1;
+		if (char === ")") depth -= 1;
+		if (/\s/.test(char) && depth === 0) {
+			if (current !== "") found.push(current);
+			current = "";
+		} else current += char;
+	}
+	if (current !== "") found.push(current);
+	return found;
+};
+const declaredColor = (value) => {
+	const color = parseColor(value);
+	return color === void 0 ? "unknown" : color;
+};
+const pixels = (value) => {
+	const trimmed = value.trim();
+	if (/^[+-]?0+(?:\.0+)?$/.test(trimmed)) return 0;
+	const match = /^(\d+(?:\.\d+)?|\.\d+)px$/i.exec(trimmed);
+	return match === null ? void 0 : Number(match[1]);
+};
+const BORDER_STYLES = /^(?:solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/i;
+const WIDTH_KEYWORDS = {
+	thin: 1,
+	medium: 3,
+	thick: 5
+};
+const resolve = (declarations) => {
+	let background;
+	let image = false;
+	let color;
+	let display;
+	let fontSize;
+	let bold;
+	const border = {
+		width: void 0,
+		visible: void 0,
+		color: void 0
+	};
+	for (const { property, value } of declarations) {
+		const lower = value.toLowerCase();
+		switch (property) {
+			case "background":
+				image = /url\(|gradient\(/.test(lower);
+				background = tokens(value).filter((part) => !/^(?:url|[\w-]*gradient)\(/i.test(part)).map(parseColor).find((entry) => entry !== void 0) ?? (/var\(|currentcolor|inherit|initial|unset/.test(lower) ? "unknown" : void 0);
+				break;
+			case "background-color":
+				background = declaredColor(value);
+				break;
+			case "background-image":
+				image = lower !== "none";
+				break;
+			case "color":
+				color = declaredColor(value);
+				break;
+			case "display":
+				display = lower.replace(/\s*!important$/, "");
+				break;
+			case "font-size":
+				fontSize = pixels(value);
+				break;
+			case "font-weight": {
+				const weight = Number(lower);
+				if (lower === "bold" || lower === "bolder") bold = true;
+				else if (lower === "normal" || lower === "lighter") bold = false;
+				else if (!Number.isNaN(weight)) bold = weight >= 700;
+				break;
+			}
+			case "border":
+			case "border-width":
+			case "border-color":
+			case "border-style": {
+				const parts = tokens(value);
+				if (property === "border") {
+					border.width = WIDTH_KEYWORDS.medium;
+					border.visible = false;
+					border.color = "unknown";
+				}
+				const styles = parts.filter((part) => BORDER_STYLES.test(part));
+				if (styles.length > 0) border.visible = styles.every((part) => !/^(?:none|hidden)$/i.test(part));
+				const sizes = parts.map((part) => pixels(part) ?? WIDTH_KEYWORDS[part.toLowerCase()]).filter((entry) => entry !== void 0);
+				if (sizes.length > 0) border.width = Math.min(...sizes);
+				else if (property === "border-width") border.width = void 0;
+				const named = parts.filter((part) => pixels(part) === void 0 && WIDTH_KEYWORDS[part.toLowerCase()] === void 0 && !BORDER_STYLES.test(part));
+				if (property !== "border-width" && property !== "border-style" && named.length > 0) {
+					const colors = named.map(parseColor);
+					border.color = colors.every((entry) => entry !== void 0) ? colors[0] : "unknown";
+				}
+				break;
+			}
+		}
+	}
+	return {
+		background,
+		image,
+		color,
+		display,
+		fontSize,
+		bold,
+		border
+	};
+};
+/** Properties a declaration list sets, for deciding whether an unimportant dark rule can apply. */
+const has = (declarations, property) => declarations.some((entry) => entry.property === property);
+const advance = (parent, style, tag) => {
+	let background = parent.background;
+	let ownBackground;
+	if (style.image || style.background === "unknown") background = "unknown";
+	else if (style.background !== void 0 && style.background.a > 0) {
+		if (style.background.a >= 1) background = style.background;
+		else if (parent.background !== "unknown") background = over(style.background, parent.background);
+		else background = "unknown";
+		if (background !== "unknown") ownBackground = background;
+	}
+	let color = tag === "a" ? void 0 : parent.color;
+	if (style.color === "unknown") color = "unknown";
+	else if (style.color !== void 0) color = style.color;
+	return {
+		ownBackground,
+		state: {
+			background,
+			color,
+			fontSize: style.fontSize ?? parent.fontSize,
+			bold: style.bold ?? parent.bold,
+			hidden: parent.hidden || style.display === "none"
+		}
+	};
+};
+const originsAt$1 = (positions, offset) => {
+	if (offset === void 0) return [];
+	let best;
+	for (const position of positions) {
+		if (offset < position.start || offset >= position.end) continue;
+		if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
+	}
+	return best?.origins ?? [];
+};
+const compareRules = (left, right) => {
+	const important = (rule) => rule.declarations.some((d) => d.important) ? 1 : 0;
+	return important(left) - important(right) || left.specificity[0] - right.specificity[0] || left.specificity[1] - right.specificity[1] || left.specificity[2] - right.specificity[2] || left.order - right.order;
+};
+const textOf = (node) => node.children.map((child) => "data" in child ? String(child.data) : "").join("");
+const MODE_LABEL = {
+	light: "Light mode",
+	dark: "Dark mode"
+};
+const FIX = "Pair background and text tokens (bg-primary with text-primary-foreground) and give the theme's dark-mode @theme a value for the token, or choose colors that reach";
+/**
+* Check text and filled-control contrast in the emitted document, in light and
+* dark presentation.
+*/
+const checkEmailContrast = (input) => {
+	const { document } = parseHtml(input.html);
+	const sheets = input.css === void 0 ? [] : [input.css];
+	const collect = (nodes) => {
+		for (const node of nodes) {
+			if (!("attribs" in node)) continue;
+			if (node.name === "style") sheets.push(textOf(node));
+			else collect(node.children);
+		}
+	};
+	collect(document.children);
+	const darkRules = sheets.flatMap((sheet) => parseStylesheet(sheet).rules).filter((rule) => rule.conditions.length === 1 && DARK_QUERY.test(rule.conditions[0])).toSorted(compareRules);
+	const findings = /* @__PURE__ */ new Map();
+	const report = (mode, kind, foreground, background, ratio, required, severity, offset) => {
+		const origins = originsAt$1(input.positions ?? [], offset);
+		const measured = ratio.toFixed(2);
+		const colors = `${hex(foreground)} on ${hex(background)}`;
+		const message = kind === "text" ? `${MODE_LABEL[mode]}: text ${colors} has a contrast ratio of ${measured}:1; ${required}:1 is required. ${FIX} ${required}:1.` : `${MODE_LABEL[mode]}: the button background ${hex(foreground)} against its surroundings ${hex(background)} has a contrast ratio of ${measured}:1; ${SHAPE_WARNING}:1 is required for the shape to stay visible (below ${SHAPE_ERROR}:1 it disappears). ${FIX} ${SHAPE_WARNING}:1, or give the button a border that does.`;
+		const key = JSON.stringify([
+			mode,
+			kind,
+			hex(foreground),
+			hex(background),
+			measured,
+			origins
+		]);
+		const existing = findings.get(key);
+		if (existing !== void 0) {
+			if (origins.length > 0) existing.occurrences.push(origins);
+			return;
+		}
+		findings.set(key, {
+			key,
+			occurrences: origins.length > 0 ? [origins] : [],
+			diagnostic: {
+				code: "email-contrast",
+				severity,
+				message,
+				origins,
+				...input.fixture === void 0 ? {} : { fixtures: [input.fixture] }
+			}
+		});
+	};
+	const visit = (node, parents, parentAncestry, previous) => {
+		const inline = declarationsOf(node.attribs.style ?? "");
+		const attribute = node.attribs.bgcolor === void 0 ? [] : [{
+			property: "background-color",
+			value: node.attribs.bgcolor
+		}];
+		const shape = {
+			type: "Element",
+			tag: node.name,
+			props: node.attribs,
+			children: [],
+			origins: [],
+			authored: false
+		};
+		const ancestry = {
+			element: shape,
+			parent: parentAncestry,
+			previous
+		};
+		const base = [...attribute, ...inline];
+		const dark = [...base];
+		for (const rule of darkRules) {
+			if (!matchesSelector(rule.matcher, ancestry)) continue;
+			for (const declaration of rule.declarations) {
+				const property = declaration.property.toLowerCase();
+				if (declaration.important || !has(inline, property)) dark.push({
+					property,
+					value: declaration.value.replace(/\s*!important$/i, "")
+				});
+			}
+		}
+		const styles = {
+			light: resolve(base),
+			dark: resolve(dark)
+		};
+		const direct = node.children.some((child) => child.type === "text" && String(child.data).replace(INVISIBLE, "") !== "");
+		const states = {
+			light: parents.light,
+			dark: parents.dark
+		};
+		for (const mode of ["light", "dark"]) {
+			const parent = parents[mode];
+			const style = styles[mode];
+			const { state, ownBackground } = advance(parent, style, node.name);
+			states[mode] = state;
+			if (state.hidden) continue;
+			if (node.name === "a" && ownBackground !== void 0 && parent.background !== "unknown" && !style.image) {
+				const ratio = ratioOf(ownBackground, parent.background);
+				if (ratio < SHAPE_WARNING) {
+					const { width, visible, color } = style.border;
+					const bordered = visible === true && width !== void 0 && width > 0 && color !== void 0;
+					if (!(bordered && color !== "unknown" && ratioOf(over(color, parent.background), parent.background) >= INSET_BORDER) && !(bordered && color === "unknown")) report(mode, "button", ownBackground, parent.background, ratio, SHAPE_WARNING, ratio < SHAPE_ERROR ? "error" : "warning", node.startIndex ?? void 0);
+				}
+			}
+			if (direct && state.color !== void 0 && state.color !== "unknown" && state.background !== "unknown") {
+				const ink = over(state.color, state.background);
+				const ratio = ratioOf(ink, state.background);
+				const required = state.fontSize !== void 0 && (state.fontSize >= LARGE_PX || state.bold && state.fontSize >= LARGE_BOLD_PX) ? TEXT_ERROR : TEXT_WARNING;
+				if (ratio < required) report(mode, "text", ink, state.background, ratio, required, ratio < TEXT_ERROR ? "error" : "warning", node.startIndex ?? void 0);
+			}
+		}
+		if (!SKIPPED_TAGS.has(node.name) && (!states.light.hidden || !states.dark.hidden)) {
+			let siblings = [];
+			for (const child of node.children) {
+				if (!("attribs" in child) || SKIPPED_TAGS.has(child.name)) continue;
+				const done = visit(child, states, ancestry, siblings);
+				siblings = [...siblings, done];
+			}
+		}
+		return shape;
+	};
+	const root = {
+		light: {
+			background: CANVAS.light,
+			color: void 0,
+			fontSize: void 0,
+			bold: false,
+			hidden: false
+		},
+		dark: {
+			background: CANVAS.dark,
+			color: void 0,
+			fontSize: void 0,
+			bold: false,
+			hidden: false
+		}
+	};
+	let siblings = [];
+	for (const node of document.children) {
+		if (!("attribs" in node) || SKIPPED_TAGS.has(node.name)) continue;
+		siblings = [...siblings, visit(node, root, void 0, siblings)];
+	}
+	return [...findings.values()].map(({ diagnostic, occurrences }) => ({
+		...diagnostic,
+		...occurrences.length > 1 ? { occurrences } : {}
+	}));
+};
+//#endregion
+//#region src/email/compatibility.ts
+/**
+* The pinned matrix. Every finding is reported per client, and a client absent
+* from this list is a client Samva makes no claim about.
+*/
+const EMAIL_CLIENT_MATRIX = [
+	{
+		id: "gmail.desktop-webmail",
+		label: "Gmail web"
+	},
+	{
+		id: "gmail.ios",
+		label: "Gmail iOS"
+	},
+	{
+		id: "gmail.android",
+		label: "Gmail Android"
+	},
+	{
+		id: "apple-mail.macos",
+		label: "Apple Mail macOS"
+	},
+	{
+		id: "apple-mail.ios",
+		label: "Apple Mail iOS"
+	},
+	{
+		id: "yahoo.desktop-webmail",
+		label: "Yahoo web"
+	},
+	{
+		id: "outlook.outlook-com",
+		label: "Outlook web and new Windows"
+	},
+	{
+		id: "outlook.windows",
+		label: "Outlook classic Windows"
+	}
+];
+const LABELS = new Map(EMAIL_CLIENT_MATRIX.map((target) => [target.id, target.label]));
+const COMPATIBILITY_PROVENANCE = {
+	rules: "caniemail@2.0.2",
+	apiVersion: rawData.api_version,
+	lastUpdate: rawData.last_update_date
+};
+/**
+* The constructs whose loss actually breaks a message: the recipient reads
+* something different, in a different order, follows a link that does not work,
+* or sees a layout that has collapsed. A target client dropping one of these
+* blocks publication.
+*
+* The list is deliberately short and enumerated, because the contract is to
+* block *known* failures. Nonessential differences require an assessment of
+* emitted values: a concrete risk warns, expected differences and unverified
+* behavior remain compatibility observations.
+*/
+const ESSENTIAL_CONSTRUCTS = /* @__PURE__ */ new Set([
+	"<table> element",
+	"<div> element",
+	"<p> element",
+	"<span> element",
+	"<ul>, <ol> and <dl>",
+	"<h1> to <h6> elements",
+	"HTML5 doctype",
+	"width attribute",
+	"height attribute",
+	"align attribute",
+	"valign attribute",
+	"<img> element",
+	"display",
+	"mailto: links",
+	"Local anchors"
+]);
+const KNOWN_TITLES = new Set(rawData.data.map((feature) => feature.title));
+/** The innermost recorded node containing an offset, so a finding names its element. */
+const originsAt = (positions, offset) => {
+	let best;
+	for (const position of positions) {
+		if (offset < position.start || offset >= position.end) continue;
+		if (best === void 0 || position.end - position.start < best.end - best.start) best = position;
+	}
+	return best?.origins ?? [];
+};
+const slug = (title) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+/**
+* Check the emitted document against the pinned matrix.
+*
+* Findings are grouped by construct rather than repeated per client, so one
+* unsupported property is one diagnostic naming every client that drops it.
+*/
+const checkEmailCompatibility = (input) => {
+	const targets = input.clients ?? EMAIL_CLIENT_MATRIX;
+	const context = compatibilityContext(input.html, input.css);
+	const targetClients = targets.map((target) => target.id);
+	const reports = [caniemail({
+		clients: targetClients,
+		html: input.html
+	}), ...input.css === void 0 ? [] : [caniemail({
+		clients: targetClients,
+		css: input.css
+	})]];
+	const grouped = /* @__PURE__ */ new Map();
+	for (const bucket of reports.flatMap((report) => [report.issues.errors, report.issues.warnings])) for (const [client, issues] of bucket) {
+		const label = LABELS.get(client) ?? client;
+		for (const raw of issues) {
+			const hiddenContentFailure = client === "outlook.windows" && raw.support === "partial" && (raw.title === "display" || raw.title === "display:none") && context.hiddenContentOffsets.length > 0;
+			const blocking = hiddenContentFailure || raw.support !== "partial" && ESSENTIAL_CONSTRUCTS.has(raw.title);
+			const { explanation, ...compatibility } = assessCompatibility(raw.title, client, raw.support, context, blocking);
+			const key = JSON.stringify([
+				raw.title,
+				raw.support,
+				compatibility,
+				explanation
+			]);
+			const offsets = hiddenContentFailure ? context.hiddenContentOffsets : context.offsets(raw.title);
+			const entry = grouped.get(key);
+			if (entry === void 0) grouped.set(key, {
+				title: raw.title,
+				support: raw.support,
+				clients: /* @__PURE__ */ new Set([label]),
+				notes: new Set(raw.notes),
+				explanation,
+				compatibility,
+				blocking,
+				offsets
+			});
+			else {
+				entry.clients.add(label);
+				for (const note of raw.notes) entry.notes.add(note);
+			}
+		}
+	}
+	const findings = [];
+	for (const entry of grouped.values()) {
+		const severity = entry.blocking ? "error" : entry.compatibility.assessment === "risk" ? "warning" : "info";
+		const occurrences = entry.offsets.map((offset) => originsAt(input.positions ?? [], offset)).filter((origins) => origins.length > 0);
+		const clients = [...entry.clients].sort();
+		const dropped = entry.support === "partial" ? clients.length === 1 ? "partially supports" : "partially support" : clients.length === 1 ? "does not support" : "do not support";
+		findings.push({
+			code: `caniemail/${slug(entry.title)}`,
+			severity,
+			message: `${clients.join(", ")} ${dropped} ${entry.title}. ${entry.explanation}`,
+			compatibility: entry.compatibility,
+			origins: occurrences[0] ?? [],
+			...occurrences.length === 0 ? {} : { occurrences },
+			...input.fixture === void 0 ? {} : { fixtures: [input.fixture] },
+			clients,
+			...entry.notes.size === 0 ? {} : { notes: [...entry.notes].join(" ") },
+			provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
+		});
+	}
+	findings.push(...checkEmailContrast(input));
+	return findings.sort((left, right) => left.code.localeCompare(right.code));
+};
+/**
+* Constructs the pinned data says nothing about for a target client. These are
+* reported so "we did not check that" is never mistaken for "that works".
+*/
+const unknownCoverage = (titles) => [...titles].filter((title) => !KNOWN_TITLES.has(title)).sort().map((title) => ({
+	code: "caniemail/unknown-coverage",
+	severity: "info",
+	message: `The pinned rules say nothing about ${title}, so no client claim is made about it. Verify it in a real client before relying on it.`,
+	origins: [],
+	provenance: `${COMPATIBILITY_PROVENANCE.rules} (caniemail data ${COMPATIBILITY_PROVENANCE.apiVersion}, updated ${COMPATIBILITY_PROVENANCE.lastUpdate})`
+}));
+/** A publication carrying one of these is refused; the message would arrive broken. */
+const hasBlockingCompatibility = (findings) => findings.some((finding) => finding.severity === "error");
+//#endregion
 //#region src/email/tailwind-stylesheets.gen.ts
 /** The exact Tailwind release the compiler runs, recorded in every build manifest. */
 const TAILWIND_VERSION = "4.3.3";
@@ -826,31 +1219,91 @@ const STYLESHEETS = {
 	"tailwindcss/preflight.css": "/*\n  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n  2. Remove default margins and padding\n  3. Reset all borders.\n*/\n\n*,\n::after,\n::before,\n::backdrop,\n::file-selector-button {\n  box-sizing: border-box; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 2 */\n  border: 0 solid; /* 3 */\n}\n\n/*\n  1. Use a consistent sensible line-height in all browsers.\n  2. Prevent adjustments of font size after orientation changes in iOS.\n  3. Use a more readable tab size.\n  4. Use the user's configured `sans` font-family by default.\n  5. Use the user's configured `sans` font-feature-settings by default.\n  6. Use the user's configured `sans` font-variation-settings by default.\n  7. Disable tap highlights on iOS.\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  tab-size: 4; /* 3 */\n  font-family: --theme(\n    --default-font-family,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    'Helvetica Neue',\n    'Noto Sans',\n    Arial,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol',\n    'Noto Color Emoji'\n  ); /* 4 */\n  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */\n  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n  1. Add the correct height in Firefox.\n  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n  3. Reset the default border style to a 1px solid border.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\n  Add the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\n\n/*\n  Remove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\n  Reset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  -webkit-text-decoration: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  Add the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n  1. Use the user's configured `mono` font-family by default.\n  2. Use the user's configured `mono` font-feature-settings by default.\n  3. Use the user's configured `mono` font-variation-settings by default.\n  4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: --theme(\n    --default-mono-font-family,\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    'Liberation Mono',\n    'Courier New',\n    monospace\n  ); /* 1 */\n  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */\n  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\n  Add the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\n  Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n  3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n  Use the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring:where(:not(iframe)) {\n  outline: auto;\n}\n\n/*\n  Add the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\n  Add the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\n  Make lists unstyled by default.\n*/\n\nol,\nul,\nmenu {\n  list-style: none;\n}\n\n/*\n  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n      This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\n  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\n  1. Inherit font styles in all browsers.\n  2. Remove border radius in all browsers.\n  3. Remove background color in all browsers.\n  4. Ensure consistent opacity for disabled states in all browsers.\n*/\n\nbutton,\ninput,\nselect,\noptgroup,\ntextarea,\n::file-selector-button {\n  font: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  border-radius: 0; /* 2 */\n  background-color: transparent; /* 3 */\n  opacity: 1; /* 4 */\n}\n\n/*\n  Restore default font weight.\n*/\n\n:where(select:is([multiple], [size])) optgroup {\n  font-weight: bolder;\n}\n\n/*\n  Restore indentation.\n*/\n\n:where(select:is([multiple], [size])) optgroup option {\n  padding-inline-start: 20px;\n}\n\n/*\n  Restore space after button.\n*/\n\n::file-selector-button {\n  margin-inline-end: 4px;\n}\n\n/*\n  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n*/\n\n::placeholder {\n  opacity: 1;\n}\n\n/*\n  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not\n  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)\n*/\n\n@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or\n  (contain-intrinsic-size: 1px) /* Safari 17+ */ {\n  ::placeholder {\n    color: color-mix(in oklab, currentcolor 50%, transparent);\n  }\n}\n\n/*\n  Prevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n  Remove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n  1. Ensure date/time inputs have the same height when empty in iOS Safari.\n  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.\n*/\n\n::-webkit-date-and-time-value {\n  min-height: 1lh; /* 1 */\n  text-align: inherit; /* 2 */\n}\n\n/*\n  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.\n*/\n\n::-webkit-datetime-edit {\n  display: inline-flex;\n}\n\n/*\n  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.\n*/\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-datetime-edit,\n::-webkit-datetime-edit-year-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-minute-field,\n::-webkit-datetime-edit-second-field,\n::-webkit-datetime-edit-millisecond-field,\n::-webkit-datetime-edit-meridiem-field {\n  padding-block: 0;\n}\n\n/*\n  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)\n*/\n\n::-webkit-calendar-picker-indicator {\n  line-height: 1;\n}\n\n/*\n  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\n  Correct the inability to style the border radius in iOS Safari.\n*/\n\nbutton,\ninput:where([type='button'], [type='reset'], [type='submit']),\n::file-selector-button {\n  appearance: button;\n}\n\n/*\n  Correct the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n  Make elements with the HTML hidden attribute stay hidden by default.\n*/\n\n[hidden]:where(:not([hidden='until-found'])) {\n  display: none !important;\n}\n"
 };
 /**
-* Mark every `@theme` in project and brand CSS `static`. Tailwind emits a
-* theme variable only when a utility it generated reads it, but a project's
-* own stylesheets read theme variables too (`color: var(--color-brand)`), and
-* Tailwind never sees those rules. A later layer that redefines a variable
-* replaces its options, so every layer has to carry `static` for the value
-* the cascade settles on to reach the inliner.
+* Lower one theme stylesheet for Tailwind and the email cascade.
+*
+* Every `@theme` becomes `static`. Tailwind emits a theme variable only when a
+* utility it generated reads it, but a project's own stylesheets read theme
+* variables too (`color: var(--color-primary)`), and Tailwind never sees those
+* rules. A later layer that redefines a variable replaces its options, so every
+* layer has to carry `static` for the value the cascade settles on to reach the
+* inliner.
+*
+* A dark-mode block, `@media (prefers-color-scheme: dark) { @theme { … } }`,
+* becomes a `:root` rule in that query, which the cascade reads as the dark
+* values of those variables (Tailwind would hoist a nested `@theme` into the
+* light theme). A stylesheet owns each color it sets in both modes: a color its
+* light `@theme` sets and its dark-mode block does not keeps that value in dark
+* mode too, rather than a dark value from a layer beneath it. A fill it sets
+* without a text color gets `foregroundDefaults`.
 */
-const staticTheme = (css) => {
+const lowerThemeCss = (css) => {
 	const ast = parse(css, {
 		positions: true,
 		parseValue: false,
 		parseRulePrelude: false,
 		parseCustomProperty: false
 	});
-	const insertions = [];
-	walk(ast, (node) => {
-		if (node.type !== "Atrule" || node.name.toLowerCase() !== "theme" || node.loc == null) return;
-		const prelude = node.prelude === null ? "" : css.slice(node.prelude.loc?.start.offset ?? 0, node.prelude.loc?.end.offset ?? 0);
-		if (/(?:^|\s)static(?:\s|$)/i.test(prelude)) return;
-		insertions.push(node.loc.start.offset + 6);
-	});
+	const edits = [];
+	const light = {};
+	const dark = {};
+	const declarations = (node, visit) => {
+		if (node.type !== "Atrule" || node.block === null) return;
+		for (const child of node.block.children) if (child.type === "Declaration" && child.loc != null && child.value.loc != null) visit(child.property, css.slice(child.value.loc.start.offset, child.value.loc.end.offset));
+	};
+	const preludeOf = (node) => node.type !== "Atrule" || node.prelude === null || node.prelude.loc == null ? "" : css.slice(node.prelude.loc.start.offset, node.prelude.loc.end.offset);
+	const isTheme = (node) => node.type === "Atrule" && node.name.toLowerCase() === "theme" && node.loc != null;
+	if (ast.type === "StyleSheet") for (const node of ast.children) {
+		if (isTheme(node)) {
+			if (!/(?:^|\s)static(?:\s|$)/i.test(preludeOf(node))) edits.push({
+				start: node.loc.start.offset + 6,
+				end: node.loc.start.offset + 6,
+				text: " static"
+			});
+			declarations(node, (property, value) => {
+				if (property.startsWith("--color-")) light[property] = value.trim();
+			});
+			continue;
+		}
+		if (node.type !== "Atrule" || node.name.toLowerCase() !== "media" || node.block === null || !isDarkSchemeQuery(preludeOf(node))) continue;
+		for (const child of node.block.children) {
+			if (!isTheme(child) || child.type !== "Atrule" || child.block?.loc == null) continue;
+			edits.push({
+				start: child.loc.start.offset,
+				end: child.block.loc.start.offset,
+				text: ":root"
+			});
+			declarations(child, (property, value) => {
+				dark[property] = value.trim();
+			});
+		}
+	}
+	const defaults = foregroundDefaults(light, dark);
+	const lightAdded = Object.entries(defaults.light);
+	const owned = {
+		...light,
+		...defaults.light
+	};
+	const darkAdded = [...Object.entries(defaults.dark), ...Object.entries(owned).filter(([property]) => !(property in dark) && !(property in defaults.dark))];
 	let output = css;
-	for (const offset of insertions.reverse()) output = `${output.slice(0, offset)} static${output.slice(offset)}`;
-	return output;
+	for (const edit of edits.sort((left, right) => right.start - left.start)) output = `${output.slice(0, edit.start)}${edit.text}${output.slice(edit.end)}`;
+	const block = (entries) => entries.map(([property, value]) => `    ${property}: ${value};`).join("\n");
+	return [
+		output,
+		...lightAdded.length === 0 ? [] : [`@theme static {\n${block(lightAdded)}\n}`],
+		...darkAdded.length === 0 ? [] : [`${DARK_SCHEME_MEDIA} {\n  :root {\n${block(darkAdded)}\n  }\n}`]
+	].join("\n");
 };
+/** The default theme, lowered once: the first layer of every project's theme. */
+const DEFAULT_THEME_TAILWIND_CSS = lowerThemeCss(DEFAULT_THEME_CSS);
+/**
+* What every project compiles beneath its own CSS, for a build that compiles no
+* Tailwind: the default theme and the primitives' rules, in Tailwind's layers.
+*/
+const BASE_STYLESHEET_CSS = [
+	"@layer theme, base, components, utilities;",
+	DEFAULT_THEME_TAILWIND_CSS,
+	PRIMITIVE_CSS
+].join("\n");
 /** Compile the discovered class set into CSS with the pinned Tailwind release. */
 const compileTailwind = async (candidates, options = {}, imports = { stylesheets: /* @__PURE__ */ new Map() }) => {
 	const entry = [
@@ -858,7 +1311,9 @@ const compileTailwind = async (candidates, options = {}, imports = { stylesheets
 		"@import \"tailwindcss/theme.css\" layer(theme);",
 		...options.preflight === true ? ["@import \"tailwindcss/preflight.css\" layer(base);"] : [],
 		"@import \"tailwindcss/utilities.css\" layer(utilities);",
-		staticTheme(options.css ?? "")
+		DEFAULT_THEME_TAILWIND_CSS,
+		PRIMITIVE_CSS,
+		lowerThemeCss(options.css ?? "")
 	].join("\n");
 	const compiler = await compile(entry, {
 		base: projectDirectory(options.cssPath ?? "theme.css"),
@@ -874,7 +1329,7 @@ const compileTailwind = async (candidates, options = {}, imports = { stylesheets
 				return Promise.resolve({
 					path: id,
 					base,
-					content: staticTheme(imports.brandCss)
+					content: lowerThemeCss(imports.brandCss)
 				});
 			}
 			const path = resolveFromDirectory(base, id.replace(/[?#].*$/, ""));
@@ -883,7 +1338,7 @@ const compileTailwind = async (candidates, options = {}, imports = { stylesheets
 			return Promise.resolve({
 				path,
 				base: projectDirectory(path),
-				content: staticTheme(content)
+				content: lowerThemeCss(content)
 			});
 		}
 	});
@@ -1018,6 +1473,7 @@ const readStylesheet = (id, source, options, assets = /* @__PURE__ */ new Map(),
 			headAtRules: sheet.headAtRules,
 			fontFaces: sheet.fontFaces,
 			variables: sheet.variables,
+			darkVariables: sheet.darkVariables,
 			diagnostics: []
 		},
 		diagnostics: sheet.diagnostics
@@ -1127,7 +1583,7 @@ const resolveTheme = (files, tailwind, brand, brandPlugin) => {
 	let brandCss;
 	if (refusals.length === 0 && brand !== void 0 && cssRequests.length > 0) {
 		const parsed = parseBrandCss(brand.css);
-		if (parsed.isOk()) brandCss = brandTailwindCss(parsed.value);
+		if (parsed.isOk()) brandCss = printBrandCss(parsed.value);
 		else {
 			const lines = buildLineMap(brand.css);
 			const specifier = cssRequests[0].specifier;
@@ -1174,9 +1630,9 @@ const transformProject = async (files, options) => {
 		for (const name of reading.classes ?? []) classes.add(name);
 		diagnostics.push(...reading.diagnostics);
 	}
-	if (wanted === void 0 || classes.size === 0 && (wanted.safelist?.length ?? 0) === 0 && wanted.css === void 0) return {
+	if (wanted === void 0) return {
 		assets,
-		tailwindSheet: void 0,
+		tailwindSheet: readStylesheet(TAILWIND_ORIGIN, BASE_STYLESHEET_CSS, options).sheet,
 		stylesheets,
 		diagnostics
 	};
@@ -1203,7 +1659,7 @@ const brandTheme = (brand, plugin) => {
 		message: `${plugin.specifier}: ${finding.message}`,
 		origins: []
 	})) });
-	return brandTailwindCss(parsed.value);
+	return printBrandCss(parsed.value);
 };
 /**
 * Render `BrandFooter` against a brand on its own, for the send path to
@@ -1218,7 +1674,8 @@ const renderBrandFooter = async (brand, options) => {
 	const node = brandComponents(brand, plugin).BrandFooter({});
 	if (node === null) return {
 		html: "",
-		text: ""
+		text: "",
+		headCss: ""
 	};
 	const styled = applyStylesheet(node, parseStylesheet(tailwind.css, { origin: plugin.specifier }));
 	const compiled = compileEmail(styled.tree, { brandPlugin: plugin });
@@ -1229,7 +1686,8 @@ const renderBrandFooter = async (brand, options) => {
 	const text = (rendered.text ?? "").trim();
 	return {
 		html: rendered.html ?? "",
-		text: text === "" ? "" : `\n\n---\n${text}`
+		text: text === "" ? "" : `\n\n---\n${text}`,
+		headCss: `${renderDarkRules(styled.darkRules)}${styled.headCss}`
 	};
 };
 /**