bearminion 1.3.0 → 1.4.0

package/dist/ui/mount.js

@@ -1,7 +1,7 @@
 import { a as sectionFieldKey, i as isPropShown, t as defaultTheme } from "../theme-DMpt3hcT.js";
 import { A as isImagePosition, D as IMAGE_FITS, E as DEFAULT_IMAGE_POSITION, O as IMAGE_POSITIONS, T as DEFAULT_IMAGE_FIT, i as isSystemPage, j as withImageLayout, k as isImageFit } from "../page-ON4Jkcm-.js";
 import { applyTextMark, fontMarks, marksFromEmphasis, reconcileMarks, renderMarkedHtml } from "../marks.js";
-import { c as hasThemeColors, d as tokenToHex, f as formatJsonLd, i as contrastChecks, m as parseJsonLdInput, n as HEX_COLOR, o as derivePalette, p as jsonLdWarnings, r as OVERRIDE_TOKENS, s as hasOverrides, t as DEFAULT_BRAND, u as themeCss } from "../theme-colors-B2kAO2n6.js";
+import { _ as consentCopy, b as jsonLdWarnings, c as hasThemeColors, d as tokenToHex, f as CONSENT_COPY, h as CONSENT_LIMITS, i as contrastChecks, n as HEX_COLOR, o as derivePalette, r as OVERRIDE_TOKENS, s as hasOverrides, t as DEFAULT_BRAND, u as themeCss, v as consentTextIssues, x as parseJsonLdInput, y as formatJsonLd } from "../theme-colors-zICpze42.js";
 import { _ as writeSaveNotice, a as localDraftStorage, d as removeDraft, f as savedNoticeFor, g as writeDraftRecord, h as sweepExpiredDrafts, i as isForeignSave, l as readDraftRecord, m as siteSavedKey, n as draftBannerText, o as pageDraftKey, p as siteDraftKey, r as hashText, s as pageSavedKey, t as assessStoredDraft, u as reloadDecision, x as draftImageUsages } from "../draft-store-1Y4-sn45.js";
 import { isSafeHref, markdownFromHtml, renderRichText, richLinkAt, sanitizeRichHtml, stripPlainRich, updateRichLink } from "../rich-text.js";
 import { Component, Fragment, createContext, isValidElement, options, render } from "preact";
@@ -13832,6 +13832,41 @@ function imageSrcAt(doc, path) {
 	if (typeof value === "string") return value;
 	return isRecord$2(value) && typeof value.src === "string" ? value.src : "";
 }
+const CONSENT_KEYS = [
+	"title",
+	"body",
+	"accept",
+	"reject",
+	"settings",
+	"policyLabel",
+	"policyHref"
+];
+/** The banner texts stored in a site draft. Anything else in `consent`, such as `enabled`, is left out. */
+function consentTextOf(site) {
+	const stored = getAt(site, "consent");
+	const text = {};
+	if (!isRecord$2(stored)) return text;
+	for (const key of CONSENT_KEYS) {
+		const value = stored[key];
+		if (typeof value === "string") text[key] = value;
+	}
+	return text;
+}
+/** Whether the draft asks visitors before analytics runs. Only an explicit `false` turns it off. */
+function consentEnabled(site) {
+	return getAt(site, "consent.enabled") !== false;
+}
+/** Whether the draft holds an analytics snippet that the banner would guard. */
+function hasAnalyticsSnippet(site) {
+	return ["analytics.head", "analytics.bodyEnd"].some((path) => {
+		const value = getAt(site, path);
+		return typeof value === "string" && value.trim() !== "";
+	});
+}
+/** Where the draft reopens the banner. Anything but `icon` is the footer link. */
+function consentReopenOf(site) {
+	return getAt(site, "consent.reopen") === "icon" ? "icon" : "footer";
+}
 //#endregion
 //#region src/ui/controllers/reactions.ts
 /** Signal effects that keep the page, storage and history in step with the editor state. */
@@ -16365,31 +16400,25 @@ function CommitDialog({ info, unsaved, onDone, onClose }) {
 	});
 }
 //#endregion
-//#region src/ui/forms/segmented.tsx
-/** Segmented control for a short list of exclusive choices. */
-function Segmented({ label, value, options, onChange, hideLabel }) {
-	const values = options.map((option) => option.value);
-	return /* @__PURE__ */ jsxs("div", {
-		class: "bm-field",
-		children: [!hideLabel && /* @__PURE__ */ jsx("span", {
-			class: "bm-label",
-			children: label
-		}), /* @__PURE__ */ jsx("div", {
-			class: "bm-segmented",
-			role: "radiogroup",
-			"aria-label": label,
-			onKeyDown: (event) => stepRadio(event, values, value, onChange),
-			children: options.map((option) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				role: "radio",
-				"aria-checked": value === option.value,
-				tabIndex: value === option.value ? 0 : -1,
-				onClick: () => onChange(option.value),
-				children: option.label
-			}, option.value))
-		})]
-	});
-}
+//#region src/ui/context.ts
+const LinksContext = createContext({
+	pages: [],
+	currentSlug: "index",
+	anchors: [],
+	editLink: () => {}
+});
+const IssueContext = createContext([]);
+/** Which props of the section being edited can be dropped. ValueEditor reads it to offer Remove, Add and "empty hides it". */
+const OptionalContext = createContext({ content: void 0 });
+/**
+* What the schema of the section being edited says about its fields, by field key: fixed choices and their icons
+* (ValueEditor shows a picker) and image fields (MissingField shows an image slot).
+*/
+const FieldsContext = createContext({
+	choices: void 0,
+	icons: void 0,
+	images: void 0
+});
 //#endregion
 //#region src/ui/info.tsx
 const GAP = 6;
@@ -16487,438 +16516,118 @@ function Info({ text, label = "More info", id }) {
 	});
 }
 //#endregion
-//#region src/ui/dialogs/history-dialog.tsx
-function formatVersionTime(iso) {
-	const date = new Date(iso);
-	if (Number.isNaN(date.getTime())) return iso;
-	return date.toLocaleString(void 0, {
-		month: "short",
-		day: "numeric",
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-const VERSION_CAP = 50;
-function startOfDay(date) {
-	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+//#region src/ui/image-field.tsx
+const FIT_LABEL = {
+	cover: "Cover",
+	contain: "Contain",
+	auto: "Auto"
+};
+const FIT_HINT = {
+	cover: "Fills the frame and crops the overflow.",
+	contain: "Shows the whole image inside the frame.",
+	auto: "Keeps the image’s own size and aspect ratio."
+};
+const POSITION_LABEL = {
+	"top left": "Top left",
+	top: "Top",
+	"top right": "Top right",
+	left: "Left",
+	center: "Center",
+	right: "Right",
+	"bottom left": "Bottom left",
+	bottom: "Bottom",
+	"bottom right": "Bottom right"
+};
+/** Drop the keys that equal their default so saved JSON only holds real choices. */
+function compact(next) {
+	const { fit, position, hidden, ...rest } = next;
+	return {
+		...rest,
+		...hidden === true ? { hidden } : {},
+		...fit && fit !== "cover" ? { fit } : {},
+		...position && position !== "center" ? { position } : {}
+	};
 }
-/** Today / Yesterday / "12 Mar" (with the year when it is not this one). */
-function versionDay(iso, now = /* @__PURE__ */ new Date()) {
-	const date = new Date(iso);
-	if (Number.isNaN(date.getTime())) return iso;
-	const days = Math.round((startOfDay(now) - startOfDay(date)) / 864e5);
-	if (days === 0) return "Today";
-	if (days === 1) return "Yesterday";
-	return date.toLocaleDateString(void 0, {
-		day: "numeric",
-		month: "short",
-		...date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }
-	});
+/**
+* True when `src` is a local image whose file is gone. The dev route answers HEAD with 404 for those; remote URLs and
+* placeholders are never "missing". Rechecks whenever the path changes.
+*/
+function useMissingFile(src) {
+	const [missing, setMissing] = useState(false);
+	useEffect(() => {
+		const url = previewSrc(src);
+		if (!url.startsWith("/__bearminion/assets?")) {
+			setMissing(false);
+			return;
+		}
+		let current = true;
+		fetch(url, {
+			method: "HEAD",
+			cache: "no-store"
+		}).then((response) => {
+			if (current) setMissing(response.status === 404);
+		}).catch(() => {
+			if (current) setMissing(false);
+		});
+		return () => {
+			current = false;
+		};
+	}, [src]);
+	return missing;
 }
-function versionClock(iso) {
-	const date = new Date(iso);
-	return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString(void 0, {
-		hour: "2-digit",
-		minute: "2-digit",
-		hour12: false
-	});
+function previewSrc(src) {
+	if (src === "" || src === "placeholder") return "";
+	if (/^https?:\/\//i.test(src) || src.startsWith("/")) return src;
+	return `/__bearminion/assets?src=${encodeURIComponent(src.replace(/^\//, ""))}`;
 }
-/** "just now", "2 min ago", "3 h ago"; older than a day shows only the clock time. */
-function versionAgo(iso, now = Date.now()) {
-	const then = new Date(iso).getTime();
-	if (Number.isNaN(then)) return "";
-	const minutes = Math.max(0, Math.round((now - then) / 6e4));
-	if (minutes < 1) return "just now";
-	if (minutes < 60) return `${minutes} min ago`;
-	const hours = Math.round(minutes / 60);
-	return hours < 24 ? `${hours} h ago` : versionClock(iso);
+/** Only react to files. Dragging text or a link over a drop target is not an upload. */
+function hasFiles(event) {
+	return Array.from(event.dataTransfer?.types ?? []).includes("Files");
 }
-/** "title, hero › heading +2": the first changed fields of one save, for the collapsed row. */
-function versionSummary(list) {
-	if (!list || list.length === 0) return "";
-	const names = [...new Set(list.map((item) => item.field))];
-	return names.length <= 3 ? names.join(", ") : `${names.slice(0, 3).join(", ")} +${names.length - 3}`;
+function fileName(src) {
+	return src.split("/").pop() || src;
 }
+/** The tab last used in this page session, so a second pick starts where the first ended. */
+let lastTab = null;
+const ACCEPT = "image/png,image/jpeg,image/webp,image/gif,image/avif";
+const FOCUSABLE = "button:not(:disabled), input:not(:disabled), [tabindex=\"0\"]";
 /**
-* Saved versions of this page and of the site, newest first and grouped by day. A version shows what that save changed,
-* and Restore loads it into the draft. Nothing is written until the next save, and the restore can be undone from here.
+* One control for every image in the editor. Empty: a slot that opens the picker.
+* Filled: thumbnail, file name, alt text, Change and Remove. The picker is a modal
+* with an Upload tab (drop or browse) and a Library tab (pick or delete).
 */
-function HistoryDialog({ slug, labels, page, onRestore, onUndo, onClose }) {
+function ImageField({ label, path, value, images, withAlt = true, layout = true, hideable = false, onChange, onUploaded, onDeleted }) {
+	const [open, setOpen] = useState(false);
+	const [error, setError] = useState("");
+	const [over, setOver] = useState(false);
 	const root = useRef(null);
-	useDialogFocus(root);
-	const [scope, setScope] = useState("page");
-	const [entries, setEntries] = useState(null);
-	const [diffs, setDiffs] = useState({});
-	const [failed, setFailed] = useState(false);
-	const [openId, setOpenId] = useState(null);
-	const [restored, setRestored] = useState(null);
-	const base = `${scope}:${slug}`;
-	useEffect(() => {
-		let live = true;
-		setEntries(null);
-		setDiffs({});
-		setOpenId(null);
-		setRestored(null);
-		setFailed(false);
-		const load = async () => {
-			const listed = await listHistory(scope, slug);
-			if (!listed.ok) throw new Error(listed.message);
-			const body = listed.value;
-			if (!live) return;
-			setEntries(body.entries);
-			const data = await Promise.all(body.entries.map(async (entry) => {
-				const version = await getHistoryVersion(scope, slug, entry.id);
-				return version.ok ? version.value : null;
-			}));
-			if (!live) return;
-			const next = {};
-			body.entries.forEach((entry, index) => {
-				const after = data[index];
-				const before = data[index + 1];
-				if (after === null || before === null || before === void 0) return;
-				next[entry.id] = scope === "page" ? describePageChanges(before, after, labels) : describeSiteChanges(before, after);
-			});
-			setDiffs(next);
-		};
-		load().catch(() => live && setFailed(true));
-		return () => {
-			live = false;
-		};
-	}, [base]);
-	async function restore(entry) {
-		const version = await getHistoryVersion(scope, slug, entry.id);
-		if (!version.ok) {
-			setFailed(true);
-			return;
-		}
-		const when = formatVersionTime(entry.at);
-		onRestore(scope, version.value, when);
-		setRestored(when);
-	}
-	const days = [];
-	entries?.forEach((entry, index) => {
-		const day = versionDay(entry.at);
-		const last = days[days.length - 1];
-		if (last && last.day === day) last.items.push({
-			entry,
-			index
-		});
-		else days.push({
-			day,
-			items: [{
-				entry,
-				index
-			}]
-		});
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		class: "bm-dialog bm-changes",
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": "Version history",
-		ref: root,
-		style: "top:12%;left:50%;transform:translateX(-50%);",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				class: "bm-dialog-head",
-				children: [/* @__PURE__ */ jsxs("div", {
-					class: "bm-dialog-heading",
-					children: [/* @__PURE__ */ jsxs("h2", {
-						class: "bm-dialog-title",
-						children: ["Version history", /* @__PURE__ */ jsx(Info, {
-							label: "Where versions are kept",
-							text: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								"Versions are kept only on this computer, in ",
-								/* @__PURE__ */ jsx("code", { children: ".editor/history" }),
-								". They are not in git and not on the published site. The newest ",
-								VERSION_CAP,
-								" stay. To clear them, stop the dev server and delete the ",
-								/* @__PURE__ */ jsx("code", { children: ".editor" }),
-								" folder in your project root."
-							] })
-						})]
-					}), /* @__PURE__ */ jsx("p", {
-						class: "bm-dialog-sub",
-						children: "Every save is kept. Restore loads a version into the draft; nothing is written until you save."
-					})]
-				}), /* @__PURE__ */ jsx(DialogClose, { onClose })]
-			}),
-			/* @__PURE__ */ jsx(Segmented, {
-				hideLabel: true,
-				label: "Scope",
-				value: scope,
-				options: [{
-					value: "page",
-					label: `Page "${page.title}"`
-				}, {
-					value: "site",
-					label: "Site"
-				}],
-				onChange: (value) => setScope(value === "site" ? "site" : "page")
-			}),
-			restored !== null && /* @__PURE__ */ jsxs("div", {
-				class: "bm-restored",
-				role: "status",
-				children: [/* @__PURE__ */ jsxs("span", { children: [
-					"Restored the version from ",
-					restored,
-					" into the draft."
-				] }), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					class: "bm-tertiary",
-					onClick: () => {
-						onUndo();
-						setRestored(null);
-					},
-					children: "Undo"
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				class: "bm-changes-list",
-				children: [
-					failed && /* @__PURE__ */ jsx("p", {
-						class: "bm-error",
-						children: "Could not load the saved versions."
-					}),
-					!failed && entries === null && /* @__PURE__ */ jsx("p", {
-						class: "bm-note",
-						children: "Loading…"
-					}),
-					entries !== null && entries.length === 0 && /* @__PURE__ */ jsx("p", {
-						class: "bm-note",
-						children: "Nothing saved yet. Every save keeps a copy here, newest first."
-					}),
-					days.map((group) => /* @__PURE__ */ jsxs("section", {
-						class: "bm-day",
-						"aria-label": group.day,
-						children: [/* @__PURE__ */ jsx("h3", {
-							class: "bm-changes-area",
-							children: group.day
-						}), /* @__PURE__ */ jsx("ul", {
-							class: "bm-versions",
-							children: group.items.map(({ entry, index }) => {
-								const isOpen = openId === entry.id;
-								const list = diffs[entry.id];
-								const stamp = formatVersionTime(entry.at);
-								const earliest = index === (entries?.length ?? 0) - 1;
-								return /* @__PURE__ */ jsxs("li", {
-									class: "bm-version",
-									children: [/* @__PURE__ */ jsxs("div", {
-										class: "bm-version-row",
-										children: [
-											/* @__PURE__ */ jsx("button", {
-												type: "button",
-												class: "bm-icon-btn",
-												"aria-expanded": isOpen,
-												"aria-label": `${isOpen ? "Hide" : "Show"} what changed in the version from ${stamp}`,
-												onClick: () => setOpenId(isOpen ? null : entry.id),
-												children: /* @__PURE__ */ jsx(Icon, {
-													name: isOpen ? "chevron-up" : "chevron-down",
-													size: 16
-												})
-											}),
-											/* @__PURE__ */ jsxs("button", {
-												type: "button",
-												class: "bm-tertiary bm-version-when",
-												onClick: () => setOpenId(isOpen ? null : entry.id),
-												children: [/* @__PURE__ */ jsxs("span", {
-													class: "bm-version-line",
-													children: [/* @__PURE__ */ jsx("span", {
-														class: "bm-version-rel",
-														children: versionAgo(entry.at) || stamp
-													}), /* @__PURE__ */ jsx("span", {
-														class: "bm-version-abs",
-														children: versionClock(entry.at)
-													})]
-												}), versionSummary(list) && /* @__PURE__ */ jsx("span", {
-													class: "bm-version-sum",
-													children: versionSummary(list)
-												})]
-											}),
-											index === 0 ? /* @__PURE__ */ jsx("span", {
-												class: "bm-badge bm-badge-on",
-												children: "current"
-											}) : /* @__PURE__ */ jsxs("button", {
-												type: "button",
-												class: "bm-restore",
-												"aria-label": `Restore the version from ${stamp}`,
-												onClick: () => void restore(entry),
-												children: [/* @__PURE__ */ jsx(Icon, {
-													name: "rotate-ccw",
-													size: 14
-												}), "Restore"]
-											})
-										]
-									}), isOpen && /* @__PURE__ */ jsx("div", {
-										class: "bm-version-diff",
-										children: !list || list.length === 0 ? /* @__PURE__ */ jsx("p", {
-											class: "bm-note",
-											children: earliest ? "The earliest kept version, so there is nothing older to compare with." : list ? "No difference from the save before it." : "Loading…"
-										}) : groupChanges(list).map((area) => /* @__PURE__ */ jsxs("section", {
-											"aria-label": area.area,
-											children: [/* @__PURE__ */ jsx("h3", {
-												class: "bm-changes-area",
-												children: area.area
-											}), /* @__PURE__ */ jsx("ul", { children: area.entries.map((item) => /* @__PURE__ */ jsx(ChangeRow, {
-												item,
-												scope
-											}, `${item.field}:${item.kind}`)) })]
-										}, area.area))
-									})]
-								}, entry.id);
-							})
-						})]
-					}, group.day))
-				]
-			}),
-			entries !== null && entries.length > 0 && /* @__PURE__ */ jsx("div", {
-				class: "bm-dialog-foot",
-				children: /* @__PURE__ */ jsxs("p", {
-					class: "bm-hint",
-					children: [
-						entries.length,
-						" of ",
-						VERSION_CAP,
-						" kept on this computer. Older versions drop off."
-					]
-				})
-			})
-		]
-	});
-}
-//#endregion
-//#region src/ui/context.ts
-const LinksContext = createContext({
-	pages: [],
-	currentSlug: "index",
-	anchors: [],
-	editLink: () => {}
-});
-const IssueContext = createContext([]);
-/** Which props of the section being edited can be dropped. ValueEditor reads it to offer Remove, Add and "empty hides it". */
-const OptionalContext = createContext({ content: void 0 });
-/**
-* What the schema of the section being edited says about its fields, by field key: fixed choices and their icons
-* (ValueEditor shows a picker) and image fields (MissingField shows an image slot).
-*/
-const FieldsContext = createContext({
-	choices: void 0,
-	icons: void 0,
-	images: void 0
-});
-//#endregion
-//#region src/ui/image-field.tsx
-const FIT_LABEL = {
-	cover: "Cover",
-	contain: "Contain",
-	auto: "Auto"
-};
-const FIT_HINT = {
-	cover: "Fills the frame and crops the overflow.",
-	contain: "Shows the whole image inside the frame.",
-	auto: "Keeps the image’s own size and aspect ratio."
-};
-const POSITION_LABEL = {
-	"top left": "Top left",
-	top: "Top",
-	"top right": "Top right",
-	left: "Left",
-	center: "Center",
-	right: "Right",
-	"bottom left": "Bottom left",
-	bottom: "Bottom",
-	"bottom right": "Bottom right"
-};
-/** Drop the keys that equal their default so saved JSON only holds real choices. */
-function compact(next) {
-	const { fit, position, hidden, ...rest } = next;
-	return {
-		...rest,
-		...hidden === true ? { hidden } : {},
-		...fit && fit !== "cover" ? { fit } : {},
-		...position && position !== "center" ? { position } : {}
-	};
-}
-/**
-* True when `src` is a local image whose file is gone. The dev route answers HEAD with 404 for those; remote URLs and
-* placeholders are never "missing". Rechecks whenever the path changes.
-*/
-function useMissingFile(src) {
-	const [missing, setMissing] = useState(false);
-	useEffect(() => {
-		const url = previewSrc(src);
-		if (!url.startsWith("/__bearminion/assets?")) {
-			setMissing(false);
-			return;
-		}
-		let current = true;
-		fetch(url, {
-			method: "HEAD",
-			cache: "no-store"
-		}).then((response) => {
-			if (current) setMissing(response.status === 404);
-		}).catch(() => {
-			if (current) setMissing(false);
-		});
-		return () => {
-			current = false;
-		};
-	}, [src]);
-	return missing;
-}
-function previewSrc(src) {
-	if (src === "" || src === "placeholder") return "";
-	if (/^https?:\/\//i.test(src) || src.startsWith("/")) return src;
-	return `/__bearminion/assets?src=${encodeURIComponent(src.replace(/^\//, ""))}`;
-}
-/** Only react to files. Dragging text or a link over a drop target is not an upload. */
-function hasFiles(event) {
-	return Array.from(event.dataTransfer?.types ?? []).includes("Files");
-}
-function fileName(src) {
-	return src.split("/").pop() || src;
-}
-/** The tab last used in this page session, so a second pick starts where the first ended. */
-let lastTab = null;
-const ACCEPT = "image/png,image/jpeg,image/webp,image/gif,image/avif";
-const FOCUSABLE = "button:not(:disabled), input:not(:disabled), [tabindex=\"0\"]";
-/**
-* One control for every image in the editor. Empty: a slot that opens the picker.
-* Filled: thumbnail, file name, alt text, Change and Remove. The picker is a modal
-* with an Upload tab (drop or browse) and a Library tab (pick or delete).
-*/
-function ImageField({ label, path, value, images, withAlt = true, layout = true, hideable = false, onChange, onUploaded, onDeleted }) {
-	const [open, setOpen] = useState(false);
-	const [error, setError] = useState("");
-	const [over, setOver] = useState(false);
-	const root = useRef(null);
-	const opener = useRef(null);
-	const src = typeof value?.src === "string" ? value.src : "";
-	const alt = typeof value?.alt === "string" ? value.alt : "";
-	const fit = isImageFit(value?.fit) ? value.fit : DEFAULT_IMAGE_FIT;
-	const position = isImagePosition(value?.position) ? value.position : DEFAULT_IMAGE_POSITION;
-	const showLayout = layout && withAlt;
-	const hidden = hideable && value?.hidden === true;
-	const current = {
-		src,
-		alt,
-		fit,
-		position,
-		...hidden ? { hidden } : {}
-	};
-	/** Emit the whole image object. A new file or alt keeps the fit and position already chosen. */
-	const emit = (patch) => onChange(compact({
-		...current,
-		...patch
-	}));
-	const empty = src === "" || src === "placeholder";
-	const shown = previewSrc(src);
-	const missing = useMissingFile(empty ? "" : src);
-	const fallbackAlt = withAlt ? "Image" : "";
-	function openPicker(trigger) {
-		opener.current = trigger;
-		setError("");
-		setOpen(true);
+	const opener = useRef(null);
+	const src = typeof value?.src === "string" ? value.src : "";
+	const alt = typeof value?.alt === "string" ? value.alt : "";
+	const fit = isImageFit(value?.fit) ? value.fit : DEFAULT_IMAGE_FIT;
+	const position = isImagePosition(value?.position) ? value.position : DEFAULT_IMAGE_POSITION;
+	const showLayout = layout && withAlt;
+	const hidden = hideable && value?.hidden === true;
+	const current = {
+		src,
+		alt,
+		fit,
+		position,
+		...hidden ? { hidden } : {}
+	};
+	/** Emit the whole image object. A new file or alt keeps the fit and position already chosen. */
+	const emit = (patch) => onChange(compact({
+		...current,
+		...patch
+	}));
+	const empty = src === "" || src === "placeholder";
+	const shown = previewSrc(src);
+	const missing = useMissingFile(empty ? "" : src);
+	const fallbackAlt = withAlt ? "Image" : "";
+	function openPicker(trigger) {
+		opener.current = trigger;
+		setError("");
+		setOpen(true);
 	}
 	function closePicker() {
 		setOpen(false);
@@ -17423,21 +17132,47 @@ function ImagePickerModal({ src, images, onPick, onUploaded, onDeleted, onClose
 		})]
 	});
 }
-//#endregion
-//#region src/ui/forms/field-errors.tsx
-/** Validation messages for one field, under its control. */
-function FieldErrors({ issues }) {
-	if (issues.length === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: issues.map((issue) => /* @__PURE__ */ jsx("span", {
-		class: "bm-error",
-		children: issue.message
-	}, `${issue.path}:${issue.message}`)) });
-}
-/** The issues reported for exactly this path. */
-function issuesFor(issues, path) {
-	if (!path) return [];
-	return issues.filter((issue) => issue.path === path);
-}
+//#endregion
+//#region src/ui/forms/field-errors.tsx
+/** Validation messages for one field, under its control. */
+function FieldErrors({ issues }) {
+	if (issues.length === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: issues.map((issue) => /* @__PURE__ */ jsx("span", {
+		class: "bm-error",
+		children: issue.message
+	}, `${issue.path}:${issue.message}`)) });
+}
+/** The issues reported for exactly this path. */
+function issuesFor(issues, path) {
+	if (!path) return [];
+	return issues.filter((issue) => issue.path === path);
+}
+//#endregion
+//#region src/ui/forms/segmented.tsx
+/** Segmented control for a short list of exclusive choices. */
+function Segmented({ label, value, options, onChange, hideLabel }) {
+	const values = options.map((option) => option.value);
+	return /* @__PURE__ */ jsxs("div", {
+		class: "bm-field",
+		children: [!hideLabel && /* @__PURE__ */ jsx("span", {
+			class: "bm-label",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			class: "bm-segmented",
+			role: "radiogroup",
+			"aria-label": label,
+			onKeyDown: (event) => stepRadio(event, values, value, onChange),
+			children: options.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": value === option.value,
+				tabIndex: value === option.value ? 0 : -1,
+				onClick: () => onChange(option.value),
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
 /** `split` → "Split", `top-left` → "Top left". Values such as `16:9` stay as they are. */
 function choiceLabel(value) {
 	const words = value.replace(/[_-]+/g, " ").trim();
@@ -17920,41 +17655,544 @@ function Field({ label, value, onChange, multiline = false, path, prefix, hint,
 		onInput: (event) => onChange(event.currentTarget.value),
 		onSelect: onSelectRange ? (event) => onSelectRange(event.currentTarget.selectionStart ?? 0, event.currentTarget.selectionEnd ?? 0) : void 0
 	});
-	return /* @__PURE__ */ jsxs("label", {
-		class: "bm-label",
+	return /* @__PURE__ */ jsxs("label", {
+		class: "bm-label",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				class: "bm-label-row",
+				children: [/* @__PURE__ */ jsxs("span", {
+					class: "bm-label-text",
+					children: [label, hint && /* @__PURE__ */ jsx(Info, {
+						id: hintId,
+						text: hint,
+						label: `About ${label}`
+					})]
+				}), meta && /* @__PURE__ */ jsx("span", {
+					class: "bm-meta-tag",
+					children: meta
+				})]
+			}),
+			prefix ? /* @__PURE__ */ jsxs("span", {
+				class: "bm-prefix-wrap",
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "bm-prefix",
+					"aria-hidden": "true",
+					children: prefix
+				}), control]
+			}) : control,
+			/* @__PURE__ */ jsx(FieldErrors, { issues })
+		]
+	});
+}
+/** An array item's keys, plus the optional ones it has dropped, in the order the sample item lists them. */
+function orderItemKeys(item, path, content) {
+	const parts = path.replace(/^sections\.\d+\.props\./, "").split(".");
+	const dropped = parts.length === 2 && /^\d+$/.test(parts[1] ?? "") ? content?.items?.[parts[0] ?? ""] ?? [] : [];
+	return orderContentKeys(Object.keys(item), dropped, Object.keys(item));
+}
+//#endregion
+//#region src/ui/dialogs/consent-dialog.tsx
+const KEYS = [
+	"title",
+	"body",
+	"accept",
+	"reject",
+	"settings",
+	"policyLabel",
+	"policyHref"
+];
+function startDraft(consent) {
+	const copy = consentCopy(consent);
+	return {
+		title: copy.title,
+		body: copy.body,
+		accept: copy.accept,
+		reject: copy.reject,
+		settings: copy.settings,
+		policyLabel: copy.policyLabel,
+		policyHref: copy.policyHref ?? ""
+	};
+}
+/**
+* What the draft saves: only the texts that differ from the theme's own, so a site that never changed a
+* text keeps following the default. An emptied field goes back to the default too.
+*/
+function savedConsentText(draft) {
+	const saved = {};
+	for (const key of KEYS) {
+		const value = draft[key].trim();
+		const fallback = key === "policyHref" ? "" : CONSENT_COPY[key];
+		if (value !== "" && value !== fallback) saved[key] = value;
+	}
+	return saved;
+}
+/**
+* The words of the cookie banner. It edits a copy: Apply writes it to the site draft in one step, Cancel and
+* Escape drop it. On and off lives in the sidebar, so this dialog never changes it.
+*/
+function ConsentDialog({ consent, reopen: startReopen, onApply, onClose }) {
+	const root = useRef(null);
+	const [draft, setDraft] = useState(() => startDraft(consent));
+	const [reopen, setReopen] = useState(startReopen);
+	const saved = savedConsentText(draft);
+	const issues = consentTextIssues(saved);
+	const valid = Object.keys(issues).length === 0;
+	const preview = consentCopy(saved);
+	useEffect(() => {
+		root.current?.querySelector("input, textarea")?.focus();
+	}, []);
+	const set = (key) => (value) => setDraft((current) => ({
+		...current,
+		[key]: value
+	}));
+	const field = (key, label, extra = {}) => /* @__PURE__ */ jsx(Field, {
+		label,
+		value: draft[key],
+		onChange: set(key),
+		hint: issues[key] ? void 0 : extra.hint,
+		multiline: extra.multiline,
+		mono: extra.mono,
+		meta: extra.limit ? `${draft[key].length} / ${extra.limit}` : void 0
+	});
+	return /* @__PURE__ */ jsx("div", {
+		class: "bm-scrim",
+		children: /* @__PURE__ */ jsxs("div", {
+			class: "bm-dialog bm-consent",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Edit cookie banner",
+			ref: root,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "bm-dialog-head",
+					children: [/* @__PURE__ */ jsxs("div", {
+						class: "bm-dialog-heading",
+						children: [/* @__PURE__ */ jsx("h2", {
+							class: "bm-dialog-title",
+							children: "Cookie banner"
+						}), /* @__PURE__ */ jsx("p", {
+							class: "bm-dialog-sub",
+							children: "Applied to the site draft. Nothing is written until you save."
+						})]
+					}), /* @__PURE__ */ jsx(DialogClose, { onClose })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "bm-consent-body",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							class: "bm-consent-preview",
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									class: "bm-consent-preview-title",
+									children: preview.title
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									class: "bm-consent-preview-text",
+									children: [preview.body, preview.policyHref && /* @__PURE__ */ jsxs("span", {
+										class: "bm-consent-preview-link",
+										children: [" ", preview.policyLabel]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									class: "bm-consent-preview-buttons",
+									children: [/* @__PURE__ */ jsx("span", { children: preview.accept }), /* @__PURE__ */ jsx("span", { children: preview.reject })]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							class: "bm-stack",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									class: "bm-group",
+									children: "Text"
+								}),
+								field("title", "Title", { limit: CONSENT_LIMITS.title }),
+								field("body", "Message", {
+									multiline: true,
+									limit: CONSENT_LIMITS.body
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									class: "bm-row-split",
+									children: [field("accept", "Accept button"), field("reject", "Reject button")]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							class: "bm-stack",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									class: "bm-group",
+									children: "Privacy policy"
+								}),
+								field("policyHref", "Policy page", {
+									hint: "Optional. A page on this site, such as /privacy, or a full address. Leave empty for no link.",
+									mono: true
+								}),
+								field("policyLabel", "Policy link text")
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							class: "bm-stack",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									class: "bm-group",
+									children: "Changing the choice"
+								}),
+								/* @__PURE__ */ jsx(Segmented, {
+									label: "Visitors reopen it with",
+									value: reopen,
+									options: [{
+										value: "footer",
+										label: "Footer link"
+									}, {
+										value: "icon",
+										label: "Corner icon"
+									}],
+									onChange: (value) => setReopen(value === "icon" ? "icon" : "footer")
+								}),
+								field("settings", reopen === "icon" ? "Icon label" : "Footer link text", { hint: reopen === "icon" ? "A small cookie icon in the bottom-left corner, shown once the banner is closed. The label is read out by screen readers." : "The link stays in the footer after visitors choose, so they can change their mind." })
+							]
+						}),
+						Object.entries(issues).map(([key, message]) => /* @__PURE__ */ jsxs("span", {
+							class: "bm-error",
+							role: "alert",
+							children: [
+								KEY_LABEL[key],
+								": ",
+								message
+							]
+						}, key))
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "bm-actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						class: "bm-primary",
+						disabled: !valid,
+						onClick: () => onApply(saved, reopen),
+						children: "Apply"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						class: "bm-tertiary",
+						onClick: onClose,
+						children: "Cancel"
+					})]
+				})
+			]
+		})
+	});
+}
+const KEY_LABEL = {
+	title: "Title",
+	body: "Message",
+	accept: "Accept button",
+	reject: "Reject button",
+	settings: "Footer link text or icon label",
+	policyLabel: "Policy link text",
+	policyHref: "Policy page"
+};
+//#endregion
+//#region src/ui/dialogs/history-dialog.tsx
+function formatVersionTime(iso) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	return date.toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+const VERSION_CAP = 50;
+function startOfDay(date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+/** Today / Yesterday / "12 Mar" (with the year when it is not this one). */
+function versionDay(iso, now = /* @__PURE__ */ new Date()) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	const days = Math.round((startOfDay(now) - startOfDay(date)) / 864e5);
+	if (days === 0) return "Today";
+	if (days === 1) return "Yesterday";
+	return date.toLocaleDateString(void 0, {
+		day: "numeric",
+		month: "short",
+		...date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }
+	});
+}
+function versionClock(iso) {
+	const date = new Date(iso);
+	return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	});
+}
+/** "just now", "2 min ago", "3 h ago"; older than a day shows only the clock time. */
+function versionAgo(iso, now = Date.now()) {
+	const then = new Date(iso).getTime();
+	if (Number.isNaN(then)) return "";
+	const minutes = Math.max(0, Math.round((now - then) / 6e4));
+	if (minutes < 1) return "just now";
+	if (minutes < 60) return `${minutes} min ago`;
+	const hours = Math.round(minutes / 60);
+	return hours < 24 ? `${hours} h ago` : versionClock(iso);
+}
+/** "title, hero › heading +2": the first changed fields of one save, for the collapsed row. */
+function versionSummary(list) {
+	if (!list || list.length === 0) return "";
+	const names = [...new Set(list.map((item) => item.field))];
+	return names.length <= 3 ? names.join(", ") : `${names.slice(0, 3).join(", ")} +${names.length - 3}`;
+}
+/**
+* Saved versions of this page and of the site, newest first and grouped by day. A version shows what that save changed,
+* and Restore loads it into the draft. Nothing is written until the next save, and the restore can be undone from here.
+*/
+function HistoryDialog({ slug, labels, page, onRestore, onUndo, onClose }) {
+	const root = useRef(null);
+	useDialogFocus(root);
+	const [scope, setScope] = useState("page");
+	const [entries, setEntries] = useState(null);
+	const [diffs, setDiffs] = useState({});
+	const [failed, setFailed] = useState(false);
+	const [openId, setOpenId] = useState(null);
+	const [restored, setRestored] = useState(null);
+	const base = `${scope}:${slug}`;
+	useEffect(() => {
+		let live = true;
+		setEntries(null);
+		setDiffs({});
+		setOpenId(null);
+		setRestored(null);
+		setFailed(false);
+		const load = async () => {
+			const listed = await listHistory(scope, slug);
+			if (!listed.ok) throw new Error(listed.message);
+			const body = listed.value;
+			if (!live) return;
+			setEntries(body.entries);
+			const data = await Promise.all(body.entries.map(async (entry) => {
+				const version = await getHistoryVersion(scope, slug, entry.id);
+				return version.ok ? version.value : null;
+			}));
+			if (!live) return;
+			const next = {};
+			body.entries.forEach((entry, index) => {
+				const after = data[index];
+				const before = data[index + 1];
+				if (after === null || before === null || before === void 0) return;
+				next[entry.id] = scope === "page" ? describePageChanges(before, after, labels) : describeSiteChanges(before, after);
+			});
+			setDiffs(next);
+		};
+		load().catch(() => live && setFailed(true));
+		return () => {
+			live = false;
+		};
+	}, [base]);
+	async function restore(entry) {
+		const version = await getHistoryVersion(scope, slug, entry.id);
+		if (!version.ok) {
+			setFailed(true);
+			return;
+		}
+		const when = formatVersionTime(entry.at);
+		onRestore(scope, version.value, when);
+		setRestored(when);
+	}
+	const days = [];
+	entries?.forEach((entry, index) => {
+		const day = versionDay(entry.at);
+		const last = days[days.length - 1];
+		if (last && last.day === day) last.items.push({
+			entry,
+			index
+		});
+		else days.push({
+			day,
+			items: [{
+				entry,
+				index
+			}]
+		});
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		class: "bm-dialog bm-changes",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Version history",
+		ref: root,
+		style: "top:12%;left:50%;transform:translateX(-50%);",
 		children: [
-			/* @__PURE__ */ jsxs("span", {
-				class: "bm-label-row",
-				children: [/* @__PURE__ */ jsxs("span", {
-					class: "bm-label-text",
-					children: [label, hint && /* @__PURE__ */ jsx(Info, {
-						id: hintId,
-						text: hint,
-						label: `About ${label}`
+			/* @__PURE__ */ jsxs("div", {
+				class: "bm-dialog-head",
+				children: [/* @__PURE__ */ jsxs("div", {
+					class: "bm-dialog-heading",
+					children: [/* @__PURE__ */ jsxs("h2", {
+						class: "bm-dialog-title",
+						children: ["Version history", /* @__PURE__ */ jsx(Info, {
+							label: "Where versions are kept",
+							text: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								"Versions are kept only on this computer, in ",
+								/* @__PURE__ */ jsx("code", { children: ".editor/history" }),
+								". They are not in git and not on the published site. The newest ",
+								VERSION_CAP,
+								" stay. To clear them, stop the dev server and delete the ",
+								/* @__PURE__ */ jsx("code", { children: ".editor" }),
+								" folder in your project root."
+							] })
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						class: "bm-dialog-sub",
+						children: "Every save is kept. Restore loads a version into the draft; nothing is written until you save."
 					})]
-				}), meta && /* @__PURE__ */ jsx("span", {
-					class: "bm-meta-tag",
-					children: meta
+				}), /* @__PURE__ */ jsx(DialogClose, { onClose })]
+			}),
+			/* @__PURE__ */ jsx(Segmented, {
+				hideLabel: true,
+				label: "Scope",
+				value: scope,
+				options: [{
+					value: "page",
+					label: `Page "${page.title}"`
+				}, {
+					value: "site",
+					label: "Site"
+				}],
+				onChange: (value) => setScope(value === "site" ? "site" : "page")
+			}),
+			restored !== null && /* @__PURE__ */ jsxs("div", {
+				class: "bm-restored",
+				role: "status",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"Restored the version from ",
+					restored,
+					" into the draft."
+				] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "bm-tertiary",
+					onClick: () => {
+						onUndo();
+						setRestored(null);
+					},
+					children: "Undo"
 				})]
 			}),
-			prefix ? /* @__PURE__ */ jsxs("span", {
-				class: "bm-prefix-wrap",
-				children: [/* @__PURE__ */ jsx("span", {
-					class: "bm-prefix",
-					"aria-hidden": "true",
-					children: prefix
-				}), control]
-			}) : control,
-			/* @__PURE__ */ jsx(FieldErrors, { issues })
+			/* @__PURE__ */ jsxs("div", {
+				class: "bm-changes-list",
+				children: [
+					failed && /* @__PURE__ */ jsx("p", {
+						class: "bm-error",
+						children: "Could not load the saved versions."
+					}),
+					!failed && entries === null && /* @__PURE__ */ jsx("p", {
+						class: "bm-note",
+						children: "Loading…"
+					}),
+					entries !== null && entries.length === 0 && /* @__PURE__ */ jsx("p", {
+						class: "bm-note",
+						children: "Nothing saved yet. Every save keeps a copy here, newest first."
+					}),
+					days.map((group) => /* @__PURE__ */ jsxs("section", {
+						class: "bm-day",
+						"aria-label": group.day,
+						children: [/* @__PURE__ */ jsx("h3", {
+							class: "bm-changes-area",
+							children: group.day
+						}), /* @__PURE__ */ jsx("ul", {
+							class: "bm-versions",
+							children: group.items.map(({ entry, index }) => {
+								const isOpen = openId === entry.id;
+								const list = diffs[entry.id];
+								const stamp = formatVersionTime(entry.at);
+								const earliest = index === (entries?.length ?? 0) - 1;
+								return /* @__PURE__ */ jsxs("li", {
+									class: "bm-version",
+									children: [/* @__PURE__ */ jsxs("div", {
+										class: "bm-version-row",
+										children: [
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												class: "bm-icon-btn",
+												"aria-expanded": isOpen,
+												"aria-label": `${isOpen ? "Hide" : "Show"} what changed in the version from ${stamp}`,
+												onClick: () => setOpenId(isOpen ? null : entry.id),
+												children: /* @__PURE__ */ jsx(Icon, {
+													name: isOpen ? "chevron-up" : "chevron-down",
+													size: 16
+												})
+											}),
+											/* @__PURE__ */ jsxs("button", {
+												type: "button",
+												class: "bm-tertiary bm-version-when",
+												onClick: () => setOpenId(isOpen ? null : entry.id),
+												children: [/* @__PURE__ */ jsxs("span", {
+													class: "bm-version-line",
+													children: [/* @__PURE__ */ jsx("span", {
+														class: "bm-version-rel",
+														children: versionAgo(entry.at) || stamp
+													}), /* @__PURE__ */ jsx("span", {
+														class: "bm-version-abs",
+														children: versionClock(entry.at)
+													})]
+												}), versionSummary(list) && /* @__PURE__ */ jsx("span", {
+													class: "bm-version-sum",
+													children: versionSummary(list)
+												})]
+											}),
+											index === 0 ? /* @__PURE__ */ jsx("span", {
+												class: "bm-badge bm-badge-on",
+												children: "current"
+											}) : /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												class: "bm-restore",
+												"aria-label": `Restore the version from ${stamp}`,
+												onClick: () => void restore(entry),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													name: "rotate-ccw",
+													size: 14
+												}), "Restore"]
+											})
+										]
+									}), isOpen && /* @__PURE__ */ jsx("div", {
+										class: "bm-version-diff",
+										children: !list || list.length === 0 ? /* @__PURE__ */ jsx("p", {
+											class: "bm-note",
+											children: earliest ? "The earliest kept version, so there is nothing older to compare with." : list ? "No difference from the save before it." : "Loading…"
+										}) : groupChanges(list).map((area) => /* @__PURE__ */ jsxs("section", {
+											"aria-label": area.area,
+											children: [/* @__PURE__ */ jsx("h3", {
+												class: "bm-changes-area",
+												children: area.area
+											}), /* @__PURE__ */ jsx("ul", { children: area.entries.map((item) => /* @__PURE__ */ jsx(ChangeRow, {
+												item,
+												scope
+											}, `${item.field}:${item.kind}`)) })]
+										}, area.area))
+									})]
+								}, entry.id);
+							})
+						})]
+					}, group.day))
+				]
+			}),
+			entries !== null && entries.length > 0 && /* @__PURE__ */ jsx("div", {
+				class: "bm-dialog-foot",
+				children: /* @__PURE__ */ jsxs("p", {
+					class: "bm-hint",
+					children: [
+						entries.length,
+						" of ",
+						VERSION_CAP,
+						" kept on this computer. Older versions drop off."
+					]
+				})
+			})
 		]
 	});
 }
-/** An array item's keys, plus the optional ones it has dropped, in the order the sample item lists them. */
-function orderItemKeys(item, path, content) {
-	const parts = path.replace(/^sections\.\d+\.props\./, "").split(".");
-	const dropped = parts.length === 2 && /^\d+$/.test(parts[1] ?? "") ? content?.items?.[parts[0] ?? ""] ?? [] : [];
-	return orderContentKeys(Object.keys(item), dropped, Object.keys(item));
-}
 //#endregion
 //#region src/ui/forms/serp-preview.tsx
 /** Address as a search result shows it: no scheme, no `www.`, no trailing slash. Without a site URL, the path alone. */
@@ -18341,6 +18579,25 @@ function SessionDialog({ editor, dialog }) {
 				onClose: close
 			});
 		}
+		case "consent": {
+			const site = doc.site.value;
+			if (!site) return null;
+			return /* @__PURE__ */ jsx(ConsentDialog, {
+				consent: consentTextOf(site),
+				reopen: consentReopenOf(site),
+				onApply: (consent, reopen) => {
+					const enabled = getAt(site, "consent.enabled");
+					const next = {
+						...enabled === void 0 ? {} : { enabled },
+						...reopen === "icon" ? { reopen } : {},
+						...consent
+					};
+					edits.writeField("consent", Object.keys(next).length > 0 ? next : void 0);
+					close();
+				},
+				onClose: close
+			});
+		}
 		case "discard": return /* @__PURE__ */ jsx(ConfirmDialog, {
 			label: "Discard changes",
 			body: "Throw away every unsaved change to this page and the site, and reload both from the saved files?",
@@ -19708,7 +19965,7 @@ function AdvancedLink({ edit }) {
 }
 //#endregion
 //#region src/ui/editor.css?raw
-var editor_default = "/*\n * Editor styles. They live in a shadow root, so they never meet the site's Tailwind layer.\n * The editor is always light. Tokens and values follow the v4 editor design handoff.\n * The short names (--ink, --line, --accent ...) alias the --bm-* tokens so older rules read the same.\n */\n:host {\n  all: initial;\n\n  /* ---------- v4 tokens (editor-tokens.css) ---------- */\n  --bm-font-ui: \"Bricolage Grotesque Variable\", \"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif;\n  --bm-font-mono: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n  --bm-font-serif: \"Instrument Serif\", Georgia, serif;\n\n  --bm-ink: oklch(0.21 0.012 255);\n  --bm-label: oklch(0.3 0.01 255);\n  --bm-section: oklch(0.42 0.01 255);\n  --bm-help: oklch(0.47 0.01 255);\n  --bm-muted: oklch(0.5 0.01 255);\n  --bm-icon: oklch(0.55 0.01 255);\n  --bm-info: oklch(0.6 0.01 255);\n\n  --bm-fill: oklch(0.955 0.003 250);\n  --bm-fill-hover: oklch(0.93 0.004 250);\n  --bm-fill-soft: oklch(0.965 0.003 250);\n  --bm-fill-nested: oklch(0.97 0.003 250);\n  --bm-border: oklch(0.88 0.005 250);\n  --bm-divider: oklch(0.93 0.004 250);\n  --bm-tab-rule: oklch(0.92 0.004 250);\n\n  --bm-primary: oklch(0.46 0.13 145);\n  --bm-primary-hover: oklch(0.4 0.12 145);\n  --bm-primary-ring: oklch(0.46 0.13 145 / 0.15);\n  --bm-link: oklch(0.4 0.12 145);\n\n  --bm-saved-bg: oklch(0.94 0.045 145);\n  --bm-saved-fg: oklch(0.36 0.1 145);\n  --bm-unsaved-bg: oklch(0.95 0.05 80);\n  --bm-unsaved-fg: oklch(0.48 0.1 60);\n  --bm-unsaved-dot: oklch(0.75 0.15 70);\n  --bm-badge-green-bg: oklch(0.93 0.06 145);\n  --bm-badge-green-fg: oklch(0.38 0.1 145);\n  --bm-badge-amber-bg: oklch(0.95 0.04 75);\n  --bm-badge-amber-fg: oklch(0.45 0.09 60);\n\n  --bm-danger: oklch(0.55 0.19 25);\n  --bm-danger-text: oklch(0.52 0.17 25);\n  --bm-danger-icon: oklch(0.58 0.18 25);\n  --bm-danger-soft: oklch(0.96 0.025 20);\n\n  --bm-diff-del-bg: oklch(0.97 0.02 20);\n  --bm-diff-del-fg: oklch(0.45 0.13 25);\n  --bm-diff-add-bg: oklch(0.96 0.04 145);\n  --bm-diff-add-fg: oklch(0.34 0.1 145);\n\n  --bm-switch-off: oklch(0.82 0.005 250);\n\n  --bm-shadow-pop: 0 0 0 1px oklch(0.9 0.005 250), 0 16px 36px -16px oklch(0.2 0.02 255 / 0.35);\n  --bm-shadow-dialog: 0 0 0 1px oklch(0.9 0.005 250), 0 24px 48px -24px oklch(0.2 0.02 255 / 0.35);\n  --bm-shadow-segment-on: 0 1px 2px oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0.9 0.005 250);\n\n  /* ---------- aliases used by the rules below ---------- */\n  --ink: var(--bm-ink);\n  --ink-2: var(--bm-label);\n  --muted: var(--bm-muted);\n  --line: var(--bm-border);\n  --line-soft: var(--bm-divider);\n  --fill: var(--bm-fill);\n  --fill-hover: var(--bm-fill-hover);\n  --fill-soft: var(--bm-fill-soft);\n  --accent: var(--bm-primary);\n  --accent-hover: var(--bm-primary-hover);\n  --accent-tint: oklch(0.96 0.03 145);\n  --accent-ring: var(--bm-primary-ring);\n  --warn-tint: var(--bm-unsaved-bg);\n  --warn-ink: var(--bm-unsaved-fg);\n  --warn-dot: var(--bm-unsaved-dot);\n  --danger-hover: oklch(0.48 0.18 25);\n  --danger-tint: var(--bm-danger-soft);\n  --danger-ink: var(--bm-danger-text);\n  --info-dot: oklch(0.6 0.15 255);\n  --sans: var(--bm-font-ui);\n  --mono: var(--bm-font-mono);\n  --serif: var(--bm-font-serif);\n  --shadow-pop: var(--bm-shadow-pop);\n}\n* {\n  box-sizing: border-box;\n}\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n  color: inherit;\n}\nbutton {\n  cursor: pointer;\n}\n:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n/* On-page outlines */\n.bm-outline {\n  position: fixed;\n  pointer-events: none;\n  border-radius: 6px;\n  z-index: 1;\n}\n.bm-outline-section {\n  border: 2px solid var(--accent);\n}\n.bm-outline-field {\n  border: 2px solid var(--accent);\n  background: oklch(0.46 0.13 145 / 0.08);\n}\n.bm-image-bar {\n  flex-wrap: nowrap;\n  left: auto;\n  white-space: nowrap;\n}\n.bm-image-bar-group {\n  display: flex;\n  gap: 2px;\n}\n.bm-image-bar button[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  color: var(--bm-saved-fg);\n}\n.bm-image-bar-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 9px);\n  grid-template-rows: repeat(3, 9px);\n  gap: 2px;\n  align-self: center;\n  padding: 0 4px;\n}\n.bm-image-bar .bm-pos-cell {\n  width: 9px;\n  height: 9px;\n  /* `.bm-rich button` sets a 32px minimum for the bar's text buttons; the cells stay 9px. */\n  min-width: 0;\n  min-height: 0;\n  padding: 0;\n  border-radius: 2px;\n  background: var(--line);\n}\n.bm-image-bar .bm-pos-cell:hover:not(:disabled) {\n  background: var(--muted);\n}\n.bm-image-bar .bm-pos-cell[aria-pressed=\"true\"] {\n  background: var(--accent);\n}\n.bm-image-bar .bm-pos-cell:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n.bm-outline-image {\n  background: oklch(0.46 0.13 145 / 0.12);\n}\n.bm-outline-image::after {\n  content: \"Change image\";\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  padding: 4px 9px;\n  border-radius: 6px;\n  background: var(--accent);\n  color: #fff;\n  font: 500 11px / 1.3 var(--sans, system-ui, sans-serif);\n}\n\n.bm-toolbar,\n.bm-dock,\n.bm-exit-preview,\n.bm-sidebar,\n.bm-popover,\n.bm-dialog,\n.bm-rich,\n.bm-banner,\n.bm-scrim {\n  pointer-events: auto;\n  font-family: var(--sans);\n  font-size: 13px;\n  color: var(--ink);\n  -webkit-font-smoothing: antialiased;\n}\n\n/*\n * Insert between sections. Three states:\n *   idle / hover   a solid line and a 28px circle; hover changes nothing.\n *   open           the picker is open: the line stays and a \"between A and B\" chip replaces the circle.\n */\n.bm-gap {\n  position: fixed;\n  z-index: 2;\n  height: 0;\n  pointer-events: none;\n}\n.bm-gap::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  height: 0;\n  border-top: 2px solid var(--bm-primary);\n  transform: translateY(-50%);\n}\n.bm-gap-add {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  pointer-events: auto;\n  cursor: pointer;\n  white-space: nowrap;\n  background: var(--bm-primary);\n  color: #fff;\n  box-shadow: 0 0 0 2px #fff;\n}\n.bm-gap-add .bm-icon {\n  width: 14px;\n  height: 14px;\n  stroke-width: 2.4;\n}\n.bm-gap-add:focus-visible {\n  outline: 2px solid var(--ink);\n  outline-offset: 3px;\n}\n.bm-gap-chip {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: #fff;\n  color: var(--bm-ink);\n  box-shadow: 0 0 0 1.5px var(--bm-primary);\n  white-space: nowrap;\n  pointer-events: none;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* Light floating bars: section toolbar, rich text bar, heading format bar */\n.bm-toolbar,\n.bm-rich {\n  position: fixed;\n  z-index: 3;\n  display: flex;\n  gap: 2px;\n  padding: 4px;\n  border-radius: 12px;\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-toolbar button,\n.bm-rich button {\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: inherit;\n  min-height: 32px;\n  padding: 0 10px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.bm-toolbar button:hover:not(:disabled),\n.bm-rich button:hover {\n  background: var(--fill);\n}\n.bm-rich button[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  box-shadow: inset 0 0 0 1px oklch(0.46 0.13 145 / 0.4);\n}\n.bm-toolbar :focus-visible,\n.bm-rich :focus-visible {\n  outline-color: var(--accent);\n}\n.bm-toolbar {\n  align-items: center;\n  max-width: calc(100vw - 16px);\n  padding: 5px;\n}\n.bm-toolbar button {\n  width: 34px;\n  min-height: 34px;\n  height: 34px;\n  padding: 0;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: oklch(0.4 0.01 255);\n}\n.bm-toolbar button:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-toolbar button:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.bm-toolbar .bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-toolbar .bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-toolbar-active {\n  box-shadow:\n    0 0 0 2px var(--bm-primary),\n    0 10px 24px -12px oklch(0.2 0.02 255 / 0.35);\n}\n.bm-toolbar-name {\n  display: block;\n  max-width: 16rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0 12px 0 10px;\n}\n.bm-toolbar-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--bm-ink);\n}\n.bm-toolbar-anchor {\n  font-family: var(--mono);\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--bm-muted);\n}\n.bm-sep {\n  width: 1px;\n  align-self: stretch;\n  margin: 4px 2px;\n  background: var(--line);\n}\n.bm-toolbar .bm-sep {\n  align-self: center;\n  height: 20px;\n  margin: 0 4px;\n  background: oklch(0.9 0.005 250);\n}\n.bm-icon {\n  width: 16px;\n  height: 16px;\n  display: block;\n}\n.bm-rich {\n  align-items: center;\n  flex-wrap: wrap;\n  max-width: calc(100vw - 16px);\n}\n.bm-rich button {\n  min-height: 32px;\n  min-width: 32px;\n}\n.bm-rich input {\n  width: 168px;\n  min-height: 30px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 7px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 12px;\n}\n.bm-rich input:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n/* Heading format bar: each button shows \"Aa\" in its own weight or font over a mono caption. */\n.bm-rich.bm-format-bar {\n  flex-wrap: nowrap;\n}\n.bm-rich.bm-format-bar button.bm-fmt {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 42px;\n  height: 48px;\n  min-height: 48px;\n  padding: 0 8px;\n  border-radius: 8px;\n}\n.bm-fmt-sample {\n  font-size: 15px;\n  line-height: 1;\n  color: var(--bm-ink);\n}\n.bm-fmt-caption {\n  font-family: var(--mono);\n  font-size: 9px;\n  letter-spacing: 0.02em;\n  color: var(--bm-muted);\n}\n.bm-rich.bm-format-bar button.bm-fmt[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  box-shadow: inset 0 0 0 1px oklch(0.46 0.13 145 / 0.4);\n}\n.bm-format-bar .bm-sep {\n  align-self: stretch;\n  margin: 6px 4px;\n}\n\n/* Light popovers: add menu, section picker, edit link */\n.bm-popover {\n  position: fixed;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 180px;\n  max-height: min(420px, calc(100vh - 16px));\n  overflow: auto;\n  padding: 6px;\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-popover > button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 34px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-popover > button:hover {\n  background: var(--fill);\n}\n\n/* Add section picker: wireframe cards */\n.bm-popover[aria-label=\"Add section\"][role=\"listbox\"] {\n  gap: 14px;\n  width: 640px;\n  max-width: calc(100vw - 16px);\n  max-height: calc(100vh - 16px);\n  padding: 16px;\n  border-radius: 14px;\n  overflow: visible;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-picker-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bm-picker-title {\n  font-size: 17px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n.bm-picker-where {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  color: var(--bm-muted);\n}\n.bm-picker-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n  max-height: 26rem;\n  overflow-y: auto;\n  padding: 2px 6px 2px 2px;\n  margin-right: -6px;\n  scrollbar-gutter: stable;\n}\n.bm-popover .bm-picker-grid > button {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: 6px;\n  min-height: 0;\n  padding: 8px 8px 10px;\n  border: 1px solid oklch(0.9 0.005 250);\n  border-radius: 10px;\n  background: #fff;\n  text-align: left;\n  font-weight: 400;\n}\n.bm-popover .bm-picker-grid > button:hover {\n  background: #fff;\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px oklch(0.46 0.13 145 / 0.12);\n}\n.bm-wire {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 76px;\n  border-radius: 7px;\n  background: oklch(0.97 0 0);\n  overflow: hidden;\n}\n.bm-wire > span {\n  position: absolute;\n  display: block;\n}\n.bm-type-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 2px;\n}\n.bm-type-name {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.25;\n  color: var(--bm-ink);\n}\n.bm-type-variants {\n  font-family: var(--mono);\n  font-size: 10px;\n  font-weight: 400;\n  line-height: 1.35;\n  white-space: nowrap;\n  color: var(--muted);\n}\n.bm-type-desc {\n  padding: 0 2px;\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--bm-help);\n}\n.bm-picker-note {\n  margin: 0;\n  font-size: 12px;\n  color: var(--bm-muted);\n}\n\n.bm-popover[aria-label=\"Edit link\"] {\n  gap: 14px;\n  padding: 16px;\n  max-height: calc(100vh - 16px);\n}\n\n/* Dialogs and banners */\n.bm-dialog {\n  position: fixed;\n  z-index: 6;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: min(400px, calc(100vw - 32px));\n  padding: 20px;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-dialog-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.bm-dialog-heading {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.bm-dialog-sub {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.4;\n  color: var(--bm-help);\n}\n.bm-dialog .bm-dialog-x,\n.bm-popover .bm-dialog-x,\n.bm-modal .bm-dialog-x {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  margin: -6px -8px -6px 0;\n  background: transparent;\n  color: var(--bm-icon);\n}\n.bm-dialog-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--bm-ink);\n}\n.bm-popover .bm-dialog-title {\n  font-size: 16px;\n}\n.bm-dialog .bm-note {\n  color: var(--bm-label);\n  font-size: 14px;\n  line-height: 1.5;\n}\n.bm-dialog button,\n.bm-popover .bm-actions button,\n.bm-banner button {\n  min-height: 38px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  font-size: 14px;\n  font-weight: 400;\n}\n.bm-dialog button:hover:not(:disabled),\n.bm-popover .bm-actions button:hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n/* The primary action comes first in the DOM (focus lands on it); row-reverse shows it last, on the right. */\n.bm-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n}\n.bm-dialog > .bm-actions,\n.bm-popover[aria-label=\"Edit link\"] > .bm-actions {\n  padding-top: 12px;\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-dialog-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-top: 12px;\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-dialog-foot > .bm-hint {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n}\n.bm-dialog-foot .bm-actions {\n  flex: none;\n}\n\n/* Alert dialogs: [icon tile] [title / body / note] [x] */\n.bm-alert-main {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n.bm-alert-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-alert-body {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--bm-label);\n  overflow-wrap: anywhere;\n}\n.bm-alert-body strong {\n  font-weight: 600;\n  color: var(--bm-ink);\n}\n.bm-alert-note {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.45;\n  color: var(--bm-muted);\n}\n.bm-tile {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 9px;\n}\n.bm-tile .bm-icon {\n  width: 18px;\n  height: 18px;\n}\n.bm-tile-warn {\n  background: var(--bm-unsaved-bg);\n  color: var(--bm-unsaved-fg);\n}\n.bm-tile-danger {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-tile-neutral {\n  background: var(--bm-fill);\n  color: var(--bm-label);\n}\n\n.bm-banner {\n  position: fixed;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: min(440px, calc(100vw - 32px));\n  padding: 12px 14px;\n  border-radius: 12px;\n  box-shadow: 0 14px 34px -10px oklch(0.2 0.02 255 / 0.4);\n}\n.bm-banner button {\n  min-height: 34px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-banner-ink {\n  background: var(--ink);\n  color: #fff;\n}\n.bm-banner-light {\n  background: #fff;\n  box-shadow: var(--shadow-pop);\n}\n.bm-banner-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.bm-banner-title {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.35;\n}\n.bm-banner-sub {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.4;\n  opacity: 0.7;\n}\n.bm-banner .bm-actions {\n  flex: none;\n  gap: 6px;\n}\n.bm-banner-ink button {\n  min-height: 30px;\n  padding: 0 12px;\n  font-size: 12px;\n  background: oklch(1 0 0 / 0.12);\n  color: #fff;\n}\n.bm-banner-ink button:hover {\n  background: oklch(1 0 0 / 0.2);\n}\n.bm-banner-ink .bm-primary {\n  background: #fff;\n  color: var(--ink);\n}\n.bm-banner-ink .bm-primary:hover {\n  background: oklch(0.94 0.003 250);\n}\n.bm-banner-ink :focus-visible {\n  outline-color: oklch(0.82 0.14 145);\n}\n.bm-dot-stale {\n  background: oklch(0.7 0.18 25) !important;\n}\n.bm-dot-info {\n  background: var(--info-dot) !important;\n}\n\n/* Closed editor. The dock sits where the sidebar header's controls sit: header padding (top 14, right 14) minus the dock's 7px padding. */\n.bm-dock {\n  position: fixed;\n  z-index: 5;\n  top: 7px;\n  right: 7px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 7px 7px 10px;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-dot {\n  flex: none;\n  width: 8px;\n  height: 8px;\n  border-radius: 99px;\n  background: oklch(0.72 0.17 145);\n}\n.bm-dot-dirty {\n  background: var(--warn-dot);\n}\n\n/* Sidebar shell */\n.bm-sidebar {\n  position: fixed;\n  z-index: 4;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: min(440px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: #fff;\n  box-shadow:\n    0 0 0 1px var(--line),\n    -24px 0 48px -24px oklch(0.2 0.02 255 / 0.25);\n}\n.bm-resize {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize;\n  touch-action: none;\n  z-index: 2;\n}\n.bm-resize:hover,\n.bm-resize:focus-visible {\n  background: oklch(0.46 0.13 145 / 0.25);\n}\n.bm-resize:focus-visible {\n  outline-offset: -2px;\n}\n\n.bm-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 14px 14px 16px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.bm-mark {\n  flex: none;\n  display: block;\n  width: 28px;\n  height: auto;\n  aspect-ratio: 21 / 19;\n  image-rendering: pixelated;\n  user-select: none;\n}\n/* Bear, name and slogan. Takes the space the controls leave; the text fades out when it no longer fits. */\n.bm-brand {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.bm-head-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  transition: opacity 160ms ease;\n}\n.bm-brand-compact .bm-head-text {\n  opacity: 0;\n}\n/* The same two lines, in a card left of the sidebar (over the page), level with the header, while the pointer is on\n   the brand. 16px is the header's left padding: the card clears the sidebar edge by 10px. */\n.bm-brand-tip {\n  position: absolute;\n  z-index: 5;\n  top: 50%;\n  right: calc(100% + 16px + 10px);\n  display: flex;\n  flex-direction: column;\n  padding: 8px 12px;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n  white-space: nowrap;\n  opacity: 0;\n  transform: translate(4px, -50%);\n  pointer-events: none;\n  transition:\n    opacity 120ms ease,\n    transform 120ms ease;\n}\n.bm-brand-compact:hover .bm-brand-tip {\n  opacity: 1;\n  transform: translate(0, -50%);\n  transition-delay: 120ms;\n}\n@media (prefers-reduced-motion: reduce) {\n  .bm-head-text,\n  .bm-brand-tip {\n    transition: none;\n  }\n}\n/* A ring with one open quarter that turns while a save is written and the page reloads. */\n.bm-spin {\n  flex: none;\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: bm-spin 0.8s linear infinite;\n}\n@keyframes bm-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .bm-spin {\n    animation: none;\n  }\n}\n.bm-faces {\n  display: grid;\n}\n.bm-face {\n  grid-area: 1 / 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.bm-face[hidden-face] {\n  visibility: hidden;\n}\n.bm-save:disabled {\n  opacity: 0.85;\n  cursor: progress;\n}\n.bm-head-title {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.015em;\n  /* The controls beside it never shrink, so a narrow sidebar cuts the name, not the buttons. */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-head-sub {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-pill {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 24px;\n  padding: 0 10px;\n  border-radius: 999px;\n  background: var(--bm-saved-bg);\n  color: var(--bm-saved-fg);\n  font-size: 12px;\n  font-weight: 500;\n}\n.bm-pill .bm-dot {\n  width: 6px;\n  height: 6px;\n  background: var(--accent);\n}\n.bm-pill-dirty {\n  background: var(--warn-tint);\n  color: var(--warn-ink);\n}\n.bm-pill-dirty .bm-dot {\n  background: var(--warn-dot);\n}\nbutton.bm-pill-btn {\n  min-height: 0;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--warn-tint);\n  color: var(--warn-ink);\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n}\n:is(.bm-sidebar, .bm-dock) button.bm-pill-btn:hover:not(:disabled) {\n  background: oklch(0.93 0.06 75);\n  color: var(--warn-ink);\n}\nbutton.bm-pill-btn:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-dialog-wide {\n  width: min(400px, calc(100vw - 32px));\n}\n.bm-dialog .bm-actions {\n  flex-wrap: nowrap;\n}\n.bm-dialog .bm-actions button {\n  flex: none;\n  white-space: nowrap;\n}\n.bm-changes {\n  width: min(540px, calc(100vw - 32px));\n}\n.bm-commit-files {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: min(34vh, 280px);\n  overflow-y: auto;\n}\n.bm-commit-files label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.bm-commit-mark {\n  font:\n    600 11px / 1 ui-monospace,\n    monospace;\n  width: 18px;\n  text-align: center;\n  opacity: 0.7;\n}\n.bm-commit-msg {\n  width: 100%;\n  box-sizing: border-box;\n  resize: vertical;\n  font: inherit;\n  font-size: 14px;\n  padding: 8px 12px;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n}\n\n/* Unsaved changes review and version history: groups, rows, diff lines */\n.bm-changes-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-height: 22rem;\n  overflow-y: auto;\n  margin: 0 -4px;\n  padding: 0 4px;\n}\n.bm-changes-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-changes-area {\n  margin: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--bm-section);\n}\n.bm-changes-file {\n  font-weight: 400;\n  letter-spacing: 0;\n  text-transform: none;\n  color: oklch(0.55 0.01 255);\n}\n.bm-changes-count {\n  margin-left: auto;\n  font-weight: 400;\n  letter-spacing: 0;\n  color: var(--bm-muted);\n}\n.bm-changes ul {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  overflow: hidden;\n}\n.bm-change {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px;\n  font-size: 14px;\n  line-height: 1.4;\n}\n.bm-change + .bm-change {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-change-mark {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  font-family: var(--mono);\n  font-size: 13px;\n  font-weight: 600;\n  background: var(--bm-unsaved-bg);\n  color: var(--bm-unsaved-fg);\n}\n.bm-change-added .bm-change-mark {\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-change-removed .bm-change-mark {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n.bm-change-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-change-field {\n  font-weight: 500;\n  color: var(--bm-ink);\n  overflow-wrap: anywhere;\n}\n.bm-change-values {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n.bm-change-values del,\n.bm-change-values ins {\n  display: flex;\n  gap: 6px;\n  min-width: 0;\n  padding: 3px 7px;\n  border-radius: 5px;\n  text-decoration: none;\n  font-size: 13px;\n}\n.bm-change-values del {\n  background: var(--bm-diff-del-bg);\n  color: var(--bm-diff-del-fg);\n}\n.bm-change-values ins {\n  background: var(--bm-diff-add-bg);\n  color: var(--bm-diff-add-fg);\n}\n.bm-change-values del::before {\n  content: \"\\2212\";\n  flex: none;\n  font-family: var(--mono);\n}\n.bm-change-values ins::before {\n  content: \"+\";\n  flex: none;\n  font-family: var(--mono);\n}\n.bm-change-values del > span,\n.bm-change-values ins > span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-change-values del > span {\n  text-decoration: line-through;\n  text-decoration-color: oklch(0.45 0.13 25 / 0.5);\n}\n.bm-changes-empty {\n  margin: 0;\n  padding: 24px 0;\n  text-align: center;\n  font-size: 14px;\n  color: var(--bm-muted);\n}\n\n.bm-changes ul.bm-versions {\n  gap: 0;\n}\n.bm-version {\n  padding: 0;\n}\n.bm-version + .bm-version {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-version-when strong {\n  font-weight: 600;\n}\n.bm-tipped {\n  position: relative;\n}\n.bm-tipped::after {\n  content: attr(data-tip);\n  position: absolute;\n  right: calc(100% + 6px);\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 4px 8px;\n  border-radius: 6px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  pointer-events: none;\n  visibility: hidden;\n  z-index: 5;\n}\n.bm-version-row > .bm-tipped:first-child::after {\n  right: auto;\n  left: calc(100% + 6px);\n}\n.bm-tipped:hover::after,\n.bm-tipped:focus-visible::after {\n  visibility: visible;\n}\n.bm-version-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 8px 8px 10px;\n}\n.bm-version-when {\n  flex: 1;\n  min-width: 0;\n  margin-right: auto;\n  padding: 0 !important;\n  min-height: 32px !important;\n  font-weight: 500;\n  display: flex !important;\n  flex-direction: column;\n  align-items: flex-start !important;\n  justify-content: center;\n  gap: 2px;\n  text-align: left;\n}\n.bm-version-line {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.bm-version-sum {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--bm-help);\n}\n.bm-version-row .bm-restore {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: none;\n  min-height: 32px;\n  padding: 0 10px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-version-rel {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-ink);\n}\n.bm-version-abs {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--bm-muted);\n}\n.bm-version-diff {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 4px 10px 12px 10px;\n  border-top: 1px solid var(--bm-divider);\n  margin-top: 0;\n}\n.bm-version-diff ul {\n  margin: 0;\n}\n.bm-day {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-restored {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 8px 8px 12px;\n  border-radius: 9px;\n  background: var(--bm-diff-add-bg);\n  color: var(--bm-saved-fg);\n  font-size: 13px;\n}\n.bm-restored > span {\n  flex: 1;\n  min-width: 0;\n}\n\n.bm-tabs {\n  display: flex;\n  gap: 0;\n  padding: 0 12px;\n  overflow-x: auto;\n  border-bottom: 1px solid var(--bm-tab-rule);\n}\n.bm-tabs button {\n  flex: 1 1 auto;\n  height: 46px;\n  padding: 0 6px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: oklch(0.48 0.01 255);\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-tabs button:hover {\n  color: var(--ink);\n  background: var(--fill-soft);\n}\n.bm-tabs button[aria-selected=\"true\"] {\n  color: var(--ink);\n  background: transparent;\n  font-weight: 600;\n  box-shadow: inset 0 -2px 0 var(--accent);\n}\n.bm-tabs button:focus-visible {\n  outline-offset: -2px;\n}\n\n.bm-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 24px 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.bm-foot {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  border-top: 1px solid var(--line-soft);\n  font-family: var(--mono);\n  font-size: 10px;\n  color: var(--muted);\n}\n.bm-foot span:first-child {\n  flex: none;\n  white-space: nowrap;\n}\n.bm-foot span:last-child {\n  text-align: right;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n/* Group header: mono 11/500, then a 1px rule. With a right-hand item the rule sits on the flex wrapper. */\n.bm-group {\n  margin: 18px 0 0;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--bm-divider);\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--bm-section);\n}\n.bm-group:first-child {\n  margin-top: 0;\n}\n.bm-stack-tight > .bm-group {\n  margin-bottom: 10px;\n}\n.bm-meta {\n  margin: 0;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n\n/* Fields */\n.bm-label {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n.bm-field {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-hint {\n  font-size: 12px;\n  line-height: 1.45;\n  font-weight: 400;\n  color: var(--muted);\n}\n.bm-label-text {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n.bm-info {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n.bm-info-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin: -3px 0;\n  border-radius: 999px;\n  color: var(--bm-info);\n  cursor: help;\n  text-transform: none;\n  letter-spacing: 0;\n}\n.bm-info-btn:hover,\n.bm-info-btn[aria-expanded=\"true\"] {\n  color: var(--ink);\n}\n.bm-info-btn:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.bm-tip {\n  position: fixed;\n  z-index: 2147483647;\n  visibility: hidden;\n  pointer-events: none;\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-sizing: border-box;\n  background: var(--ink);\n  color: oklch(0.98 0.003 250);\n  font-family: var(--sans, inherit);\n  font-size: 12px;\n  line-height: 1.45;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  text-align: left;\n  white-space: normal;\n  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);\n}\n.bm-tip-open {\n  visibility: visible;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo) :where(input:not([type=\"checkbox\"]):not([type=\"file\"]), select, textarea) {\n  width: 100%;\n  min-height: 40px;\n  padding: 0 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 400;\n  outline: none;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo) textarea {\n  padding: 8px 12px;\n  min-height: 72px;\n  line-height: 1.5;\n  resize: vertical;\n}\n:is(.bm-sidebar, .bm-popover) select:not([size]) {\n  appearance: none;\n  padding-right: 32px;\n  /* A caret made of gradients, not a `data:` image: a site's Content-Security-Policy can block those. */\n  background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%);\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  background-position:\n    right 17px center,\n    right 12px center;\n}\n.bm-sidebar select[size],\n.bm-popover select[size] {\n  padding: 4px;\n  font-size: 12px;\n}\n.bm-sidebar select[size] option,\n.bm-sidebar select[size] optgroup,\n.bm-popover select[size] option,\n.bm-popover select[size] optgroup {\n  padding: 3px 6px;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo) :where(input:not([type=\"checkbox\"]):not([type=\"file\"]), select, textarea):focus {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo) :where(input[aria-label=\"Link URL\"], .bm-mono) {\n  font-family: var(--mono);\n  font-size: 13px;\n}\n.bm-prefix-wrap {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-prefix-wrap:focus-within {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n.bm-prefix {\n  padding: 0 2px 0 12px;\n  font-family: var(--mono);\n  font-size: 13px;\n  color: var(--muted);\n}\n.bm-prefix-wrap input {\n  border: 0;\n  box-shadow: none !important;\n  min-height: 38px;\n  padding-left: 2px;\n  font-family: var(--mono);\n  font-size: 13px;\n}\n.bm-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.bm-stack-tight {\n  gap: 8px;\n}\n.bm-groups {\n  gap: 36px;\n}\n.bm-list {\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  box-shadow: 0 0 0 1px var(--bm-border);\n  overflow: hidden;\n}\n.bm-list-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px 8px 12px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.bm-list-row:last-child {\n  border-bottom: 0;\n}\n.bm-list-row-on {\n  background: var(--accent-tint);\n}\n.bm-list-row a {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: var(--ink);\n  text-decoration: none;\n}\n.bm-list-row a:hover .bm-list-title {\n  text-decoration: underline;\n}\n.bm-list-title {\n  font-size: 14px;\n  font-weight: 500;\n}\n.bm-list-path {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-badge-home {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-badge {\n  font-family: var(--mono);\n  font-size: 11px;\n  padding: 3px 7px;\n  border-radius: 5px;\n  background: var(--bm-badge-amber-bg);\n  color: var(--bm-badge-amber-fg);\n}\n.bm-badge-system {\n  background: var(--fill);\n  color: var(--ink-2);\n}\n.bm-badge-on {\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-row {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n.bm-row-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n.bm-error {\n  color: var(--danger-ink);\n  font-size: 12px;\n  font-weight: 400;\n  margin: 0;\n}\n.bm-warn {\n  color: var(--warn-ink);\n  font-size: 12px;\n  margin: 0;\n}\n.bm-note {\n  margin: 0;\n  color: var(--bm-help);\n  font-size: 13px;\n  line-height: 1.55;\n  font-weight: 400;\n}\n.bm-group + .bm-note,\n.bm-group-split + .bm-note {\n  margin-top: -4px;\n}\n\n/* Switch: 36 x 20, knob 16 inset 2 */\n.bm-check {\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  font-weight: 500;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"] {\n  appearance: none;\n  position: relative;\n  flex: none;\n  width: 36px;\n  height: 20px;\n  margin: 0;\n  border-radius: 999px;\n  background: var(--bm-switch-off);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);\n  transition: transform 0.15s;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]:checked {\n  background: var(--bm-primary);\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]:checked::before {\n  transform: translateX(16px);\n}\n.bm-popover .bm-check {\n  color: var(--bm-label);\n  font-size: 14px;\n}\n\n/* Buttons inside the sidebar */\n.bm-sidebar :where(button:not([role=\"tab\"]):not([role=\"radio\"]):not(.bm-resize)) {\n  min-height: 32px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-sidebar :where(button:not([role=\"tab\"]):not([role=\"radio\"]):not(.bm-resize)):hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n.bm-sidebar button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n/* Dashed \"Add ...\" buttons: Add link, Add button, Add column, Add item */\n.bm-sidebar .bm-add {\n  min-height: 44px;\n  background: oklch(0.985 0.002 250);\n  color: var(--bm-link);\n  border: 1px dashed oklch(0.85 0.005 250);\n  border-radius: 8px;\n}\n.bm-sidebar .bm-add:hover:not(:disabled) {\n  background: var(--accent-tint);\n}\n\n/* Cards, lists, images */\n.bm-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n}\n.bm-card .bm-card {\n  background: var(--bm-fill-nested);\n  border-color: var(--line-soft);\n}\n.bm-card > .bm-label:first-child:not(:only-child) {\n  font-family: var(--mono);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  font-weight: 500;\n  color: var(--muted);\n}\n.bm-card[draggable=\"true\"] {\n  cursor: grab;\n}\n/* Drag and drop: the target shows what a drop would do. */\n.bm-dragging {\n  opacity: 0.4;\n}\n.bm-drop-before,\n.bm-drop-after,\n.bm-drop-child {\n  --drop: var(--accent);\n}\n.bm-drop-before::before,\n.bm-drop-after::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 3px;\n  border-radius: 3px;\n  background: var(--drop);\n  box-shadow: 0 0 0 2px var(--accent-ring);\n  pointer-events: none;\n  z-index: 2;\n}\n.bm-drop-before::before {\n  top: -6px;\n}\n.bm-drop-after::before {\n  bottom: -6px;\n}\n.bm-drop-child {\n  box-shadow: inset 0 0 0 2px var(--drop);\n  background: var(--accent-tint);\n}\n.bm-drop-before::after,\n.bm-drop-after::after,\n.bm-drop-child::after,\n.bm-drop-files::after {\n  content: attr(data-drop-hint);\n  position: absolute;\n  right: 8px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 3;\n}\n.bm-drop-before::after {\n  top: -22px;\n}\n.bm-drop-after::after {\n  bottom: -22px;\n}\n.bm-drop-child::after {\n  top: -11px;\n  right: 12px;\n}\n.bm-drop-files {\n  box-shadow: inset 0 0 0 2px var(--accent);\n  background: var(--accent-tint);\n}\n.bm-drop-files::after {\n  top: -11px;\n  right: 12px;\n}\n.bm-thumb {\n  width: 100%;\n  height: 96px;\n  object-fit: cover;\n  border-radius: 7px;\n  background: var(--fill);\n}\n.bm-drop {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border: 1px dashed var(--line);\n  border-radius: 10px;\n  padding: 10px;\n  background: var(--fill-soft);\n}\n.bm-drop input[type=\"file\"] {\n  width: 100%;\n  font-size: 12px;\n  color: var(--muted);\n}\n.bm-drop input[type=\"file\"]::file-selector-button {\n  height: 32px;\n  margin-right: 10px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 7px;\n  background: var(--ink);\n  color: #fff;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.bm-alert {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px;\n  border-radius: 12px;\n  background: var(--danger-tint);\n  box-shadow: 0 0 0 1px oklch(0.55 0.18 25 / 0.35);\n}\n.bm-alert-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--danger-ink);\n}\n.bm-alert .bm-error {\n  font-family: var(--mono);\n  font-size: 11px;\n}\n.bm-alert-notice {\n  background: var(--warn-tint);\n  box-shadow: 0 0 0 1px oklch(0.45 0.09 65 / 0.2);\n}\n.bm-alert-notice .bm-note {\n  color: var(--warn-ink);\n  font-size: 12px;\n}\n\n/* Header actions */\n.bm-save {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--accent);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 600;\n}\n.bm-dialog .bm-primary kbd {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  margin-left: 8px;\n  opacity: 0.8;\n}\n.bm-save kbd {\n  font-family: var(--mono);\n  font-size: 10px;\n  font-weight: 400;\n  opacity: 0.75;\n}\n/* Icon buttons: 32 x 32, transparent, grey icon, grey fill on hover. */\n.bm-icon-btn {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  min-height: 0 !important;\n  padding: 0 !important;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: var(--bm-icon);\n}\n.bm-icon-btn:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-icon-btn:disabled {\n  opacity: 0.35;\n}\n.bm-close {\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  color: var(--bm-icon);\n  border-radius: 7px;\n}\n.bm-close:hover:not(:disabled) {\n  background: var(--fill) !important;\n  color: var(--ink);\n}\n.bm-dock .bm-save {\n  font-family: var(--sans);\n}\n.bm-split {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n}\n.bm-split .bm-split-main {\n  border-radius: 8px 0 0 8px;\n}\n.bm-split .bm-split-toggle {\n  width: 28px;\n  padding: 0;\n  justify-content: center;\n  border-radius: 0 8px 8px 0;\n  box-shadow: inset 1px 0 0 oklch(1 0 0 / 0.35);\n}\n.bm-split .bm-split-toggle:focus-visible,\n.bm-split .bm-split-main:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-split-menu {\n  position: absolute;\n  z-index: 8;\n  top: calc(100% + 6px);\n  right: 0;\n  min-width: 200px;\n  display: flex;\n  flex-direction: column;\n  padding: 4px;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-split-menu button.bm-split-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 34px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--sans);\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n}\n.bm-split-menu button.bm-split-item:hover:not(:disabled),\n.bm-split-menu button.bm-split-item:focus-visible {\n  background: var(--fill);\n  outline: none;\n}\n.bm-split-menu button.bm-split-danger {\n  color: var(--danger-ink);\n}\n.bm-split-menu button.bm-split-item {\n  justify-content: space-between;\n  gap: 16px;\n}\n.bm-split-menu button.bm-split-item kbd {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--muted);\n}\n.bm-split-menu button.bm-split-sep {\n  margin-top: 5px;\n  position: relative;\n}\n.bm-split-menu button.bm-split-sep::before {\n  content: \"\";\n  position: absolute;\n  left: 6px;\n  right: 6px;\n  top: -3px;\n  height: 1px;\n  background: var(--line);\n}\n.bm-split-menu button.bm-split-danger:hover:not(:disabled),\n.bm-split-menu button.bm-split-danger:focus-visible {\n  background: var(--danger-tint);\n}\n.bm-split-menu button.bm-split-item:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.bm-sidebar .bm-icon-btn.bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-icon-btn.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-small {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 28px !important;\n  padding: 0 10px !important;\n  font-family: var(--sans);\n  font-size: 12px !important;\n  letter-spacing: 0;\n  text-transform: none;\n  align-self: flex-start;\n}\n.bm-group-split {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 18px;\n  margin-bottom: 0;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--bm-divider);\n}\n.bm-group-split:first-child {\n  margin-top: 0;\n}\n.bm-group-split > .bm-group {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.bm-group-split .bm-small {\n  text-transform: none;\n  letter-spacing: 0;\n}\n.bm-group-split span.bm-small {\n  font-family: var(--mono);\n  font-size: 11px !important;\n  font-weight: 400;\n  color: var(--bm-muted);\n  padding: 0 !important;\n  min-height: 0 !important;\n}\n.bm-stack-tight > .bm-group-split {\n  margin-bottom: 10px;\n}\n\n/* Labels with a right-hand tag */\n.bm-label.bm-label-row,\n.bm-label-row {\n  flex-direction: row;\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n.bm-meta-tag {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  letter-spacing: 0;\n  color: var(--bm-muted);\n}\n\n/* Switch rows */\n.bm-switch-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  cursor: pointer;\n}\n.bm-switch-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.bm-switch-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n\n/* Tone cards and segmented controls */\n.bm-tones {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 6px;\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 6px;\n  min-height: 0;\n  padding: 5px 5px 6px;\n  border-radius: 9px;\n  background: #fff;\n  border: 0;\n  box-shadow: inset 0 0 0 1px var(--bm-border);\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone:hover {\n  background: var(--fill-soft);\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone[aria-checked=\"true\"] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n  background: #fff;\n}\n.bm-tones-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n.bm-tones-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n/* A miniature of each button look, drawn with the editor's colours so it does not depend on the site theme. */\n.bm-btnsample {\n  display: grid;\n  place-items: center;\n  height: 26px;\n  border-radius: 6px;\n  background: var(--fill-soft);\n}\n.bm-btnsample > span {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n}\n.bm-btnsample-default > span {\n  color: var(--ink-2);\n}\n.bm-btnsample-primary > span {\n  padding: 5px 12px;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #fff;\n}\n.bm-btnsample-secondary > span {\n  padding: 5px 12px;\n  border-radius: 999px;\n  color: var(--ink);\n  box-shadow: inset 0 0 0 1px var(--ink-2);\n}\n.bm-btnsample-tertiary > span {\n  color: var(--accent);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.bm-swatch {\n  display: inline-block;\n  flex: none;\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px oklch(0.2 0.02 255 / 0.15);\n}\n.bm-swatch-lg {\n  display: block;\n  width: auto;\n  height: 22px;\n  border-radius: 6px;\n}\n.bm-swatch-base {\n  background: #fff;\n}\n.bm-swatch-subtle {\n  background: oklch(0.96 0.005 250);\n}\n.bm-swatch-inverse {\n  background: var(--ink);\n}\n.bm-swatch-brand {\n  background: var(--accent);\n}\n.bm-segmented {\n  display: flex;\n  padding: 3px;\n  border-radius: 9px;\n  background: var(--bm-fill);\n}\n.bm-sidebar .bm-segmented button,\n.bm-dialog .bm-segmented button {\n  flex: 1;\n  min-height: 36px;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: oklch(0.45 0.01 255);\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-sidebar .bm-segmented button:hover:not(:disabled),\n.bm-dialog .bm-segmented button:hover:not(:disabled) {\n  background: oklch(1 0 0 / 0.5);\n}\n.bm-sidebar .bm-segmented button[aria-checked=\"true\"],\n.bm-dialog .bm-segmented button[aria-checked=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-icon-picker {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));\n  gap: 4px;\n  padding: 3px;\n  border-radius: 9px;\n  background: var(--bm-fill);\n}\n.bm-sidebar .bm-icon-picker button {\n  display: grid;\n  place-items: center;\n  min-height: 40px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: oklch(0.45 0.01 255);\n}\n.bm-sidebar .bm-icon-picker button:hover {\n  background: oklch(1 0 0 / 0.5);\n  color: var(--ink);\n}\n.bm-sidebar .bm-icon-picker button[aria-checked=\"true\"] {\n  background: #fff;\n  color: var(--accent);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-icon-picker svg {\n  width: 20px;\n  height: 20px;\n}\n.bm-actions-split {\n  display: flex;\n  gap: 8px;\n  padding-top: 4px;\n}\n.bm-actions-split button {\n  flex: 1;\n  min-height: 40px !important;\n  font-size: 14px !important;\n}\n.bm-sidebar .bm-actions-split .bm-danger {\n  background: var(--bm-danger-soft);\n}\n\n/* Arrays, links, images */\n.bm-array {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-array-item {\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-array-item summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 0 8px 0 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ink);\n  cursor: pointer;\n  list-style: none;\n}\n.bm-array-item summary::-webkit-details-marker {\n  display: none;\n}\n.bm-array-item summary:hover {\n  background: var(--fill-soft);\n}\n.bm-array-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-grip,\n.bm-chevron {\n  display: inline-grid;\n  place-items: center;\n  color: oklch(0.65 0.01 255);\n}\n.bm-chevron {\n  transition: transform 0.12s;\n}\ndetails[open] > summary .bm-chevron {\n  transform: rotate(90deg);\n}\n.bm-array-body {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 12px;\n  background: var(--bm-fill-nested);\n  border-top: 1px solid var(--line-soft);\n}\n.bm-row-end {\n  justify-content: flex-end;\n}\n.bm-sidebar .bm-add-row {\n  width: 100%;\n}\n.bm-link-btn {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 40px;\n  padding: 0 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  text-align: left;\n  color: var(--ink-2);\n}\n.bm-sidebar .bm-link-btn {\n  background: #fff;\n  border: 1px solid var(--bm-border);\n  font-size: 14px;\n  padding: 0 12px;\n}\n.bm-sidebar .bm-link-btn:hover:not(:disabled) {\n  background: #fff;\n  border-color: oklch(0.8 0.005 250);\n}\n.bm-link-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--ink);\n  font-weight: 500;\n}\n.bm-link-href {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n  max-width: 45%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-stripes {\n  background: repeating-linear-gradient(135deg, oklch(0.93 0.004 250) 0 6px, oklch(0.965 0.003 250) 6px 12px);\n}\n\n/* Image field: label above, compact 56px row, alt text under it */\n.bm-imagefield {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-image-row {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n.bm-image-row .bm-thumb {\n  flex: none;\n  width: 56px;\n  height: 56px;\n  border-radius: 6px;\n}\n.bm-image-meta {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  justify-content: center;\n}\n.bm-image-path {\n  font-family: var(--mono);\n  font-size: 12px;\n  color: var(--bm-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-sidebar .bm-alt {\n  min-height: 40px;\n  font-size: 14px;\n}\n.bm-image-actions {\n  flex-wrap: nowrap;\n  gap: 6px;\n}\n.bm-image-actions > button:not(.bm-icon-btn) {\n  flex: 1;\n  min-height: 36px;\n  font-size: 13px;\n}\n.bm-layout {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 2px;\n}\n.bm-layout-row {\n  display: grid;\n  grid-template-columns: 56px 1fr;\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.bm-layout-row .bm-label {\n  margin: 0;\n}\n.bm-layout-row .bm-layout-hint {\n  grid-column: 2;\n}\n.bm-position {\n  display: grid;\n  grid-template-columns: repeat(3, 20px);\n  grid-template-rows: repeat(3, 20px);\n  gap: 3px;\n  padding: 4px;\n  width: max-content;\n  border-radius: 8px;\n  background: var(--fill);\n}\n.bm-sidebar .bm-position-cell {\n  width: 20px;\n  height: 20px;\n  min-height: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #fff;\n  box-shadow: inset 0 0 0 1px var(--line);\n}\n.bm-sidebar .bm-position-cell:hover:not(:disabled) {\n  background: var(--accent-tint);\n}\n.bm-sidebar .bm-position-cell[aria-checked=\"true\"],\n.bm-sidebar .bm-position-cell[aria-checked=\"true\"]:hover:not(:disabled) {\n  background: var(--accent);\n  box-shadow: none;\n}\n.bm-sidebar .bm-position-cell:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bm-slot,\n.bm-dropzone {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 96px;\n  padding: 14px;\n  border: 1.5px dashed oklch(0.82 0.006 250);\n  border-radius: 10px;\n  background: var(--fill-soft);\n  color: var(--ink-2);\n  text-align: center;\n  cursor: pointer;\n}\n.bm-sidebar .bm-slot:hover:not(:disabled),\n.bm-dropzone:hover {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.bm-dropzone {\n  min-height: 180px;\n  position: relative;\n}\n.bm-dropzone:focus-within {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-dropzone-over {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.bm-slot-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--ink);\n}\n.bm-slot-hint {\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 7;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 10vh 16px 16px;\n  background: oklch(0.2 0.01 255 / 0.4);\n}\n.bm-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(480px, 100%);\n  max-height: min(560px, 80vh);\n  overflow: hidden;\n  padding: 20px 0 0;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-modal-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 0 20px 12px;\n}\n.bm-modal-head .bm-dialog-title {\n  flex: none;\n}\n.bm-modal-head .bm-meta-tag {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-modal-head .bm-icon-btn {\n  margin: -6px -8px -6px 0;\n}\n.bm-modal .bm-tabs {\n  margin: 0 20px;\n  padding: 3px;\n  gap: 0;\n  border: 0;\n  border-radius: 9px;\n  background: var(--bm-fill);\n  overflow: visible;\n}\n.bm-modal .bm-tabs button {\n  flex: 1;\n  height: 36px;\n  min-height: 36px;\n  padding: 0 8px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-modal .bm-tabs button:hover {\n  background: oklch(1 0 0 / 0.5);\n}\n.bm-modal .bm-tabs button[aria-selected=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  font-weight: 500;\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-modal-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 16px 20px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bm-library {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 10px;\n}\n.bm-library-item {\n  position: relative;\n}\n.bm-library-pick {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n  min-height: 0;\n  padding: 4px;\n  border: 0;\n  border-radius: 9px;\n  background: var(--fill-soft);\n  text-align: left;\n  font-family: var(--mono);\n  font-size: 9px;\n  font-weight: 400;\n  color: var(--muted);\n  word-break: break-all;\n  cursor: pointer;\n}\n.bm-library-pick:hover {\n  background: var(--fill-hover);\n}\n.bm-library-pick img {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: 6px;\n  background: var(--fill);\n}\n.bm-library-pick[aria-pressed=\"true\"] {\n  box-shadow: 0 0 0 2px var(--accent);\n  background: var(--accent-tint);\n}\n.bm-library-delete {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 24px;\n  height: 24px;\n  min-height: 0;\n  background: #fff;\n  box-shadow: 0 1px 3px oklch(0.2 0.01 255 / 0.25);\n  opacity: 0;\n}\n.bm-library-item:hover .bm-library-delete,\n.bm-library-delete:focus-visible {\n  opacity: 1;\n}\n.bm-library-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n.bm-modal-confirm {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px 20px 16px;\n  border-top: 1px solid var(--line-soft);\n  background: var(--danger-tint);\n}\n.bm-modal-confirm .bm-note {\n  color: var(--danger-ink);\n  font-size: 13px;\n  line-height: 1.5;\n}\n.bm-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n  white-space: nowrap;\n}\n.bm-popover-title {\n  grid-column: 1 / -1;\n  padding: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--bm-ink);\n}\n.bm-popover-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n}\n.bm-popover-head-wide {\n  grid-column: 1 / -1;\n}\n.bm-popover[aria-label=\"Edit link\"],\n.bm-popover[aria-label=\"Add section\"][role=\"listbox\"] {\n  z-index: 5;\n}\n.bm-popover :is(.bm-fmt-bold) {\n  font-weight: 700;\n}\n.bm-fmt-bold {\n  font-weight: 700;\n  font-size: 13px;\n}\n.bm-fmt-italic {\n  font-family: var(--serif);\n  font-style: italic;\n  font-size: 15px;\n}\n\n/* Edit link: Advanced row */\n.bm-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bm-popover button.bm-advanced-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 32px;\n  padding: 0 2px;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--bm-label);\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n}\n.bm-popover button.bm-advanced-toggle:hover {\n  background: transparent;\n  color: var(--bm-ink);\n}\n.bm-advanced-toggle .bm-chevron {\n  transition: transform 0.12s;\n}\n.bm-advanced-toggle[aria-expanded=\"true\"] .bm-chevron {\n  transform: rotate(90deg);\n}\n.bm-advanced-summary {\n  margin-left: auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--bm-muted);\n}\n\n/* SEO card and dialog */\n.bm-seo-card {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bm-seo-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.bm-seo-badge {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--fill-soft);\n  color: var(--bm-label);\n  font-family: var(--mono);\n  font-size: 11px;\n}\n.bm-seo-edit {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.bm-dialog.bm-seo {\n  position: relative;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 10vh - 32px);\n  min-height: 0;\n}\n.bm-seo-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 2px 4px 2px 2px;\n}\n.bm-seo-json {\n  min-height: 220px;\n  white-space: pre;\n  overflow: auto;\n  tab-size: 2;\n}\n.bm-seo-json[aria-invalid=\"true\"] {\n  border-color: var(--bm-danger);\n}\n.bm-seo-format {\n  align-self: flex-start;\n}\n\n/* SEO preview, OG row, outline */\n.bm-serp {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  padding: 12px 14px;\n  border-radius: 10px;\n  background: var(--fill-soft);\n}\n.bm-serp-image {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 12px;\n}\n.bm-serp-text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n.bm-serp-thumb {\n  flex: none;\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  object-fit: cover;\n  background: var(--fill);\n}\n.bm-serp-title {\n  font-size: 15px;\n  font-weight: 500;\n  color: oklch(0.42 0.12 260);\n}\n.bm-serp-url {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: oklch(0.45 0.08 145);\n}\n.bm-serp-desc {\n  font-size: 12px;\n  line-height: 1.45;\n  color: oklch(0.45 0.01 255);\n}\n.bm-outline-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.bm-sidebar .bm-outline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 40px;\n  padding: 0 10px;\n  border-radius: 8px;\n  background: transparent;\n  text-align: left;\n  font-size: 14px;\n}\n.bm-sidebar .bm-outline-row:hover:not(:disabled) {\n  background: var(--fill-soft);\n}\n\n/* Section rows (Pages tab): grip, tone swatch, name over #anchor and variant, then actions. */\n.bm-srow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 52px;\n  padding: 6px 6px 6px 8px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n}\n.bm-srow:hover {\n  border-color: oklch(0.8 0.008 250);\n}\n.bm-srow-grip {\n  flex: none;\n  width: 16px;\n  height: 32px;\n  display: inline-grid;\n  place-items: center;\n  cursor: grab;\n  touch-action: none;\n}\n.bm-srow-grip:active {\n  cursor: grabbing;\n}\n.bm-srow .bm-outline-row {\n  flex: 1;\n  min-width: 0;\n  width: auto;\n  padding: 0 8px 0 4px;\n  gap: 10px;\n}\n.bm-srow .bm-swatch {\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n}\n.bm-srow-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.bm-srow-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-ink);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow-meta {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--bm-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow .bm-outline-meta {\n  flex: none;\n  max-width: 40%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow-btn {\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  color: var(--bm-icon);\n  border-radius: 7px;\n}\n.bm-srow-btn:disabled {\n  opacity: 0.35;\n}\n.bm-sidebar .bm-srow-btn:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-sidebar .bm-srow-btn.bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-srow-btn.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n}\n.bm-srow-sep {\n  flex: none;\n  width: 1px;\n  height: 20px;\n  margin: 0 2px;\n  background: var(--bm-divider);\n}\n.bm-outline-n {\n  width: 18px;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: oklch(0.55 0.01 255);\n}\n.bm-outline-label {\n  flex: 1;\n  min-width: 0;\n  font-weight: 500;\n}\n.bm-outline-meta {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--muted);\n}\n\n/* Navigation and footer link cards */\n.bm-nav-card {\n  padding: 12px 12px 14px;\n  gap: 10px;\n}\n.bm-nested {\n  margin: 6px 0 0 16px;\n}\n.bm-nav-children {\n  margin-top: -4px;\n}\n.bm-nav-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.bm-nav-head .bm-icon-btn,\n.bm-column-head .bm-icon-btn {\n  background: var(--bm-fill);\n  color: oklch(0.45 0.01 255);\n}\n.bm-nav-head .bm-icon-btn:hover:not(:disabled),\n.bm-column-head .bm-icon-btn:hover:not(:disabled) {\n  background: var(--bm-fill-hover);\n  color: var(--bm-ink);\n}\n.bm-sidebar .bm-nav-head .bm-icon-btn.bm-danger,\n.bm-sidebar .bm-column-head .bm-icon-btn.bm-danger {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-nav-label {\n  flex: 1;\n  min-width: 0;\n  min-height: 32px;\n  padding: 0 8px;\n  border-color: transparent;\n  font-weight: 500;\n}\n.bm-sidebar .bm-nav-label:hover {\n  border-color: var(--line);\n}\n.bm-column {\n  padding: 0;\n  gap: 0;\n}\n.bm-column-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  cursor: grab;\n}\n.bm-column-links > summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 40px;\n  padding: 0 12px;\n  border-top: 1px solid var(--line-soft);\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n  cursor: pointer;\n  list-style: none;\n}\n.bm-column-links > summary::-webkit-details-marker {\n  display: none;\n}\n.bm-column-links > :not(summary) {\n  margin: 10px 12px 0;\n}\n.bm-column-links > :last-child {\n  margin-bottom: 12px;\n}\n\n/* Wordmark preview */\n.bm-card-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.bm-card-head .bm-label {\n  flex: none;\n}\n.bm-combo {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  width: auto;\n  max-width: 140px;\n  min-height: 38px;\n  padding: 0 10px 0 12px;\n  border: 0;\n  border-left: 1px solid var(--bm-border);\n  border-radius: 0;\n  background: var(--fill-soft);\n  color: var(--ink-2);\n  font-family: var(--mono);\n  font-size: 12px;\n  font-weight: 400;\n  text-align: left;\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger:hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger[aria-expanded=\"true\"] {\n  background: var(--accent-tint);\n  color: var(--accent-hover);\n}\n/* One URL field: the text input and the page picker share a single border. */\n.bm-linkfield {\n  display: flex;\n  align-items: stretch;\n  min-height: 40px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-linkfield:focus-within {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n.bm-linkfield > input {\n  flex: 1;\n  min-width: 0;\n  border: 0 !important;\n  box-shadow: none !important;\n  border-radius: 0;\n  min-height: 38px;\n  background: transparent;\n}\n.bm-linkfield .bm-combo {\n  flex: none;\n  max-width: 45%;\n}\n.bm-linkfield .bm-combo-trigger {\n  height: 100%;\n}\n.bm-linkfield .bm-combo-trigger:focus-visible {\n  outline-offset: -2px;\n}\n.bm-combo-trigger > span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-combo-trigger .bm-combo-custom {\n  color: var(--muted);\n}\n.bm-combo-panel {\n  position: fixed;\n  z-index: 6;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 6px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 6px 18px oklch(0.2 0.02 255 / 0.1);\n}\n.bm-combo-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n.bm-combo-group {\n  margin: 6px 6px 2px;\n  font-family: var(--mono);\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.bm-combo-option {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--ink);\n  cursor: pointer;\n}\n.bm-combo-option[aria-selected=\"true\"] {\n  font-weight: 600;\n  color: var(--accent-hover);\n}\n.bm-combo-active {\n  background: var(--fill);\n}\n.bm-combo-value {\n  flex: none;\n  max-width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-combo-empty {\n  margin: 0;\n  padding: 8px;\n  font-size: 12px;\n  color: var(--muted);\n}\n.bm-format {\n  margin-top: -4px;\n}\n.bm-sidebar .bm-format button[aria-pressed=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-wordmark {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 14px;\n  border-radius: 10px;\n  background: var(--bm-fill-soft);\n}\n.bm-wordmark-name {\n  font-size: 24px;\n  font-weight: 600;\n  letter-spacing: -0.03em;\n}\n.bm-alert-notice {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 8px;\n  color: var(--warn-ink);\n}\n.bm-alert-notice .bm-icon {\n  margin-top: 2px;\n  flex: none;\n}\n\n/*\n * Button system. Three variants, one danger modifier, one rule set.\n *   secondary (default): neutral fill, ink text.\n *   .bm-primary:  the one main action of a surface. Solid accent, white text (AA).\n *   .bm-tertiary: low emphasis text button (Cancel, Reset). No fill, no underline, grey fill on hover.\n *   .bm-danger:   modifier. primary = solid red, secondary = red text, tertiary = red text.\n * The scope list gives every rule enough specificity to beat the per-surface defaults above,\n * so the hover state of one variant can never fall back to the secondary fill.\n */\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button:where(.bm-primary, .bm-tertiary, .bm-danger):not(.bm-icon-btn, .bm-save) {\n  transition:\n    background-color 0.12s,\n    color 0.12s;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary {\n  background: var(--bm-primary);\n  color: #fff;\n  box-shadow: none;\n  font-weight: 600;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary:hover:not(:disabled) {\n  background: var(--bm-primary-hover);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary.bm-danger {\n  background: var(--bm-danger);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary.bm-danger:hover:not(:disabled) {\n  background: var(--danger-hover);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-danger:not(.bm-primary, .bm-tertiary, .bm-icon-btn) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-danger:not(.bm-primary, .bm-tertiary, .bm-icon-btn):hover:not(:disabled) {\n  background: oklch(0.93 0.04 25);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary {\n  min-height: 32px;\n  padding: 0 10px;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--bm-label);\n  font-weight: 400;\n  box-shadow: none;\n  text-decoration: none;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal) button.bm-tertiary {\n  min-height: 38px;\n  font-size: 14px;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary.bm-danger {\n  background: transparent;\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.bm-save:hover:not(:disabled) {\n  background: var(--accent-hover);\n  color: #fff;\n}\n.bm-sidebar .bm-save:hover:not(:disabled) {\n  background: var(--accent-hover);\n  color: #fff;\n}\n.bm-popover .bm-actions-remove,\n.bm-dialog .bm-actions-remove {\n  margin-right: auto;\n}\n.bm-modal :where(button:not([role=\"tab\"], .bm-library-pick, .bm-icon-btn, .bm-tertiary)) {\n  min-height: 38px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 400;\n}\n.bm-modal :where(button:not([role=\"tab\"], .bm-library-pick, .bm-icon-btn, .bm-tertiary)):hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n.bm-modal .bm-dropzone {\n  font-family: var(--sans);\n}\n\n/* Design tab */\n.bm-colorrow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bm-colorpick {\n  flex: none;\n  width: 40px !important;\n  height: 40px;\n  min-height: 40px !important;\n  padding: 2px !important;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n}\n.bm-colorhex {\n  flex: 1;\n  min-width: 0;\n  font-family: var(--mono);\n  font-size: 13px;\n  text-transform: lowercase;\n}\n.bm-colorhex[aria-invalid=\"true\"] {\n  border-color: var(--bm-danger);\n}\n.bm-overrides {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  overflow: hidden;\n}\n.bm-override-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px 8px 12px;\n}\n.bm-override-row + .bm-override-row {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-override-label {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n.bm-override-label .bm-meta-tag {\n  font-size: 10px;\n}\n.bm-override-row .bm-colorpick {\n  width: 32px !important;\n  height: 32px;\n  min-height: 32px !important;\n  padding: 1px !important;\n  border-radius: 7px;\n}\n.bm-override-row .bm-colorhex {\n  flex: none;\n  width: 104px;\n  min-height: 36px;\n  padding: 0 10px;\n}\n.bm-tone-matrix {\n  display: grid;\n  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr);\n  gap: 8px;\n  align-items: stretch;\n}\n.bm-tone-pick {\n  border: 0;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n}\n.bm-tone-cell[aria-pressed=\"true\"] {\n  outline: 2px solid var(--bm-primary);\n  outline-offset: 0;\n}\n.bm-tone-head {\n  font-family: var(--mono);\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.bm-tone-name {\n  align-self: center;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--ink-2);\n}\n.bm-tone-cell {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  min-width: 0;\n  min-height: 46px;\n  padding: 0 10px;\n  border-radius: 8px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.bm-tone-aa {\n  flex: none;\n  font-size: 16px;\n  font-weight: 600;\n}\n.bm-tone-muted {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n}\n.bm-tone-chip {\n  flex: none;\n  padding: 2px 6px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n}\n.bm-tone-link {\n  flex: none;\n  font-size: 11px;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.bm-contrast-list {\n  margin: 6px 0 0;\n  padding-left: 16px;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--warn-ink);\n}\n.bm-range {\n  flex: 1;\n  min-width: 0;\n  min-height: 28px;\n  accent-color: var(--accent);\n  cursor: pointer;\n}\n/* Preview: the only editor UI left on screen. */\n.bm-exit-preview {\n  position: fixed;\n  z-index: 7;\n  right: 16px;\n  bottom: 16px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 40px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n  box-shadow: 0 10px 30px oklch(0.2 0.02 255 / 0.3);\n}\n.bm-exit-preview:hover {\n  background: oklch(0.28 0.012 255);\n}\n.bm-exit-preview:focus-visible {\n  outline-color: oklch(0.82 0.14 145);\n  outline-offset: 3px;\n}\n.bm-srow-add {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 6px;\n}\n.bm-sidebar .bm-add-section {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--bm-primary);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-sidebar .bm-add-section:hover {\n  background: var(--bm-primary-hover);\n}\n";
+var editor_default = "/*\n * Editor styles. They live in a shadow root, so they never meet the site's Tailwind layer.\n * The editor is always light. Tokens and values follow the v4 editor design handoff.\n * The short names (--ink, --line, --accent ...) alias the --bm-* tokens so older rules read the same.\n */\n:host {\n  all: initial;\n\n  /* ---------- v4 tokens (editor-tokens.css) ---------- */\n  --bm-font-ui: \"Bricolage Grotesque Variable\", \"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif;\n  --bm-font-mono: \"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n  --bm-font-serif: \"Instrument Serif\", Georgia, serif;\n\n  --bm-ink: oklch(0.21 0.012 255);\n  --bm-label: oklch(0.3 0.01 255);\n  --bm-section: oklch(0.42 0.01 255);\n  --bm-help: oklch(0.47 0.01 255);\n  --bm-muted: oklch(0.5 0.01 255);\n  --bm-icon: oklch(0.55 0.01 255);\n  --bm-info: oklch(0.6 0.01 255);\n\n  --bm-fill: oklch(0.955 0.003 250);\n  --bm-fill-hover: oklch(0.93 0.004 250);\n  --bm-fill-soft: oklch(0.965 0.003 250);\n  --bm-fill-nested: oklch(0.97 0.003 250);\n  --bm-border: oklch(0.88 0.005 250);\n  --bm-divider: oklch(0.93 0.004 250);\n  --bm-tab-rule: oklch(0.92 0.004 250);\n\n  --bm-primary: oklch(0.46 0.13 145);\n  --bm-primary-hover: oklch(0.4 0.12 145);\n  --bm-primary-ring: oklch(0.46 0.13 145 / 0.15);\n  --bm-link: oklch(0.4 0.12 145);\n\n  --bm-saved-bg: oklch(0.94 0.045 145);\n  --bm-saved-fg: oklch(0.36 0.1 145);\n  --bm-unsaved-bg: oklch(0.95 0.05 80);\n  --bm-unsaved-fg: oklch(0.48 0.1 60);\n  --bm-unsaved-dot: oklch(0.75 0.15 70);\n  --bm-badge-green-bg: oklch(0.93 0.06 145);\n  --bm-badge-green-fg: oklch(0.38 0.1 145);\n  --bm-badge-amber-bg: oklch(0.95 0.04 75);\n  --bm-badge-amber-fg: oklch(0.45 0.09 60);\n\n  --bm-danger: oklch(0.55 0.19 25);\n  --bm-danger-text: oklch(0.52 0.17 25);\n  --bm-danger-icon: oklch(0.58 0.18 25);\n  --bm-danger-soft: oklch(0.96 0.025 20);\n\n  --bm-diff-del-bg: oklch(0.97 0.02 20);\n  --bm-diff-del-fg: oklch(0.45 0.13 25);\n  --bm-diff-add-bg: oklch(0.96 0.04 145);\n  --bm-diff-add-fg: oklch(0.34 0.1 145);\n\n  --bm-switch-off: oklch(0.82 0.005 250);\n\n  --bm-shadow-pop: 0 0 0 1px oklch(0.9 0.005 250), 0 16px 36px -16px oklch(0.2 0.02 255 / 0.35);\n  --bm-shadow-dialog: 0 0 0 1px oklch(0.9 0.005 250), 0 24px 48px -24px oklch(0.2 0.02 255 / 0.35);\n  --bm-shadow-segment-on: 0 1px 2px oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0.9 0.005 250);\n\n  /* ---------- aliases used by the rules below ---------- */\n  --ink: var(--bm-ink);\n  --ink-2: var(--bm-label);\n  --muted: var(--bm-muted);\n  --line: var(--bm-border);\n  --line-soft: var(--bm-divider);\n  --fill: var(--bm-fill);\n  --fill-hover: var(--bm-fill-hover);\n  --fill-soft: var(--bm-fill-soft);\n  --accent: var(--bm-primary);\n  --accent-hover: var(--bm-primary-hover);\n  --accent-tint: oklch(0.96 0.03 145);\n  --accent-ring: var(--bm-primary-ring);\n  --warn-tint: var(--bm-unsaved-bg);\n  --warn-ink: var(--bm-unsaved-fg);\n  --warn-dot: var(--bm-unsaved-dot);\n  --danger-hover: oklch(0.48 0.18 25);\n  --danger-tint: var(--bm-danger-soft);\n  --danger-ink: var(--bm-danger-text);\n  --info-dot: oklch(0.6 0.15 255);\n  --sans: var(--bm-font-ui);\n  --mono: var(--bm-font-mono);\n  --serif: var(--bm-font-serif);\n  --shadow-pop: var(--bm-shadow-pop);\n}\n* {\n  box-sizing: border-box;\n}\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n  color: inherit;\n}\nbutton {\n  cursor: pointer;\n}\n:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n/* On-page outlines */\n.bm-outline {\n  position: fixed;\n  pointer-events: none;\n  border-radius: 6px;\n  z-index: 1;\n}\n.bm-outline-section {\n  border: 2px solid var(--accent);\n}\n.bm-outline-field {\n  border: 2px solid var(--accent);\n  background: oklch(0.46 0.13 145 / 0.08);\n}\n.bm-image-bar {\n  flex-wrap: nowrap;\n  left: auto;\n  white-space: nowrap;\n}\n.bm-image-bar-group {\n  display: flex;\n  gap: 2px;\n}\n.bm-image-bar button[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  color: var(--bm-saved-fg);\n}\n.bm-image-bar-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 9px);\n  grid-template-rows: repeat(3, 9px);\n  gap: 2px;\n  align-self: center;\n  padding: 0 4px;\n}\n.bm-image-bar .bm-pos-cell {\n  width: 9px;\n  height: 9px;\n  /* `.bm-rich button` sets a 32px minimum for the bar's text buttons; the cells stay 9px. */\n  min-width: 0;\n  min-height: 0;\n  padding: 0;\n  border-radius: 2px;\n  background: var(--line);\n}\n.bm-image-bar .bm-pos-cell:hover:not(:disabled) {\n  background: var(--muted);\n}\n.bm-image-bar .bm-pos-cell[aria-pressed=\"true\"] {\n  background: var(--accent);\n}\n.bm-image-bar .bm-pos-cell:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n.bm-outline-image {\n  background: oklch(0.46 0.13 145 / 0.12);\n}\n.bm-outline-image::after {\n  content: \"Change image\";\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  padding: 4px 9px;\n  border-radius: 6px;\n  background: var(--accent);\n  color: #fff;\n  font: 500 11px / 1.3 var(--sans, system-ui, sans-serif);\n}\n\n.bm-toolbar,\n.bm-dock,\n.bm-exit-preview,\n.bm-sidebar,\n.bm-popover,\n.bm-dialog,\n.bm-rich,\n.bm-banner,\n.bm-scrim {\n  pointer-events: auto;\n  font-family: var(--sans);\n  font-size: 13px;\n  color: var(--ink);\n  -webkit-font-smoothing: antialiased;\n}\n\n/*\n * Insert between sections. Three states:\n *   idle / hover   a solid line and a 28px circle; hover changes nothing.\n *   open           the picker is open: the line stays and a \"between A and B\" chip replaces the circle.\n */\n.bm-gap {\n  position: fixed;\n  z-index: 2;\n  height: 0;\n  pointer-events: none;\n}\n.bm-gap::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  height: 0;\n  border-top: 2px solid var(--bm-primary);\n  transform: translateY(-50%);\n}\n.bm-gap-add {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  pointer-events: auto;\n  cursor: pointer;\n  white-space: nowrap;\n  background: var(--bm-primary);\n  color: #fff;\n  box-shadow: 0 0 0 2px #fff;\n}\n.bm-gap-add .bm-icon {\n  width: 14px;\n  height: 14px;\n  stroke-width: 2.4;\n}\n.bm-gap-add:focus-visible {\n  outline: 2px solid var(--ink);\n  outline-offset: 3px;\n}\n.bm-gap-chip {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  padding: 4px 10px;\n  border-radius: 999px;\n  background: #fff;\n  color: var(--bm-ink);\n  box-shadow: 0 0 0 1.5px var(--bm-primary);\n  white-space: nowrap;\n  pointer-events: none;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* Light floating bars: section toolbar, rich text bar, heading format bar */\n.bm-toolbar,\n.bm-rich {\n  position: fixed;\n  z-index: 3;\n  display: flex;\n  gap: 2px;\n  padding: 4px;\n  border-radius: 12px;\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-toolbar button,\n.bm-rich button {\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: inherit;\n  min-height: 32px;\n  padding: 0 10px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.bm-toolbar button:hover:not(:disabled),\n.bm-rich button:hover {\n  background: var(--fill);\n}\n.bm-rich button[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  box-shadow: inset 0 0 0 1px oklch(0.46 0.13 145 / 0.4);\n}\n.bm-toolbar :focus-visible,\n.bm-rich :focus-visible {\n  outline-color: var(--accent);\n}\n.bm-toolbar {\n  align-items: center;\n  max-width: calc(100vw - 16px);\n  padding: 5px;\n}\n.bm-toolbar button {\n  width: 34px;\n  min-height: 34px;\n  height: 34px;\n  padding: 0;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: oklch(0.4 0.01 255);\n}\n.bm-toolbar button:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-toolbar button:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.bm-toolbar .bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-toolbar .bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-toolbar-active {\n  box-shadow:\n    0 0 0 2px var(--bm-primary),\n    0 10px 24px -12px oklch(0.2 0.02 255 / 0.35);\n}\n.bm-toolbar-name {\n  display: block;\n  max-width: 16rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0 12px 0 10px;\n}\n.bm-toolbar-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--bm-ink);\n}\n.bm-toolbar-anchor {\n  font-family: var(--mono);\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--bm-muted);\n}\n.bm-sep {\n  width: 1px;\n  align-self: stretch;\n  margin: 4px 2px;\n  background: var(--line);\n}\n.bm-toolbar .bm-sep {\n  align-self: center;\n  height: 20px;\n  margin: 0 4px;\n  background: oklch(0.9 0.005 250);\n}\n.bm-icon {\n  width: 16px;\n  height: 16px;\n  display: block;\n}\n.bm-rich {\n  align-items: center;\n  flex-wrap: wrap;\n  max-width: calc(100vw - 16px);\n}\n.bm-rich button {\n  min-height: 32px;\n  min-width: 32px;\n}\n.bm-rich input {\n  width: 168px;\n  min-height: 30px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 7px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 12px;\n}\n.bm-rich input:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--accent);\n}\n\n/* Heading format bar: each button shows \"Aa\" in its own weight or font over a mono caption. */\n.bm-rich.bm-format-bar {\n  flex-wrap: nowrap;\n}\n.bm-rich.bm-format-bar button.bm-fmt {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 42px;\n  height: 48px;\n  min-height: 48px;\n  padding: 0 8px;\n  border-radius: 8px;\n}\n.bm-fmt-sample {\n  font-size: 15px;\n  line-height: 1;\n  color: var(--bm-ink);\n}\n.bm-fmt-caption {\n  font-family: var(--mono);\n  font-size: 9px;\n  letter-spacing: 0.02em;\n  color: var(--bm-muted);\n}\n.bm-rich.bm-format-bar button.bm-fmt[aria-pressed=\"true\"] {\n  background: var(--bm-saved-bg);\n  box-shadow: inset 0 0 0 1px oklch(0.46 0.13 145 / 0.4);\n}\n.bm-format-bar .bm-sep {\n  align-self: stretch;\n  margin: 6px 4px;\n}\n\n/* Light popovers: add menu, section picker, edit link */\n.bm-popover {\n  position: fixed;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 180px;\n  max-height: min(420px, calc(100vh - 16px));\n  overflow: auto;\n  padding: 6px;\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-popover > button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 34px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-popover > button:hover {\n  background: var(--fill);\n}\n\n/* Add section picker: wireframe cards */\n.bm-popover[aria-label=\"Add section\"][role=\"listbox\"] {\n  gap: 14px;\n  width: 640px;\n  max-width: calc(100vw - 16px);\n  max-height: calc(100vh - 16px);\n  padding: 16px;\n  border-radius: 14px;\n  overflow: visible;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-picker-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bm-picker-title {\n  font-size: 17px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n.bm-picker-where {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  color: var(--bm-muted);\n}\n.bm-picker-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n  max-height: 26rem;\n  overflow-y: auto;\n  padding: 2px 6px 2px 2px;\n  margin-right: -6px;\n  scrollbar-gutter: stable;\n}\n.bm-popover .bm-picker-grid > button {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: 6px;\n  min-height: 0;\n  padding: 8px 8px 10px;\n  border: 1px solid oklch(0.9 0.005 250);\n  border-radius: 10px;\n  background: #fff;\n  text-align: left;\n  font-weight: 400;\n}\n.bm-popover .bm-picker-grid > button:hover {\n  background: #fff;\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px oklch(0.46 0.13 145 / 0.12);\n}\n.bm-wire {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 76px;\n  border-radius: 7px;\n  background: oklch(0.97 0 0);\n  overflow: hidden;\n}\n.bm-wire > span {\n  position: absolute;\n  display: block;\n}\n.bm-type-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 2px;\n}\n.bm-type-name {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.25;\n  color: var(--bm-ink);\n}\n.bm-type-variants {\n  font-family: var(--mono);\n  font-size: 10px;\n  font-weight: 400;\n  line-height: 1.35;\n  white-space: nowrap;\n  color: var(--muted);\n}\n.bm-type-desc {\n  padding: 0 2px;\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--bm-help);\n}\n.bm-picker-note {\n  margin: 0;\n  font-size: 12px;\n  color: var(--bm-muted);\n}\n\n.bm-popover[aria-label=\"Edit link\"] {\n  gap: 14px;\n  padding: 16px;\n  max-height: calc(100vh - 16px);\n}\n\n/* Dialogs and banners */\n.bm-dialog {\n  position: fixed;\n  z-index: 6;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: min(400px, calc(100vw - 32px));\n  padding: 20px;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-dialog-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.bm-dialog-heading {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.bm-dialog-sub {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.4;\n  color: var(--bm-help);\n}\n.bm-dialog .bm-dialog-x,\n.bm-popover .bm-dialog-x,\n.bm-modal .bm-dialog-x {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  margin: -6px -8px -6px 0;\n  background: transparent;\n  color: var(--bm-icon);\n}\n.bm-dialog-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--bm-ink);\n}\n.bm-popover .bm-dialog-title {\n  font-size: 16px;\n}\n.bm-dialog .bm-note {\n  color: var(--bm-label);\n  font-size: 14px;\n  line-height: 1.5;\n}\n.bm-dialog button,\n.bm-popover .bm-actions button,\n.bm-banner button {\n  min-height: 38px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  font-size: 14px;\n  font-weight: 400;\n}\n.bm-dialog button:hover:not(:disabled),\n.bm-popover .bm-actions button:hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n/* The primary action comes first in the DOM (focus lands on it); row-reverse shows it last, on the right. */\n.bm-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n}\n.bm-dialog > .bm-actions,\n.bm-popover[aria-label=\"Edit link\"] > .bm-actions {\n  padding-top: 12px;\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-dialog-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-top: 12px;\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-dialog-foot > .bm-hint {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n}\n.bm-dialog-foot .bm-actions {\n  flex: none;\n}\n\n/* Alert dialogs: [icon tile] [title / body / note] [x] */\n.bm-alert-main {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n.bm-alert-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-alert-body {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--bm-label);\n  overflow-wrap: anywhere;\n}\n.bm-alert-body strong {\n  font-weight: 600;\n  color: var(--bm-ink);\n}\n.bm-alert-note {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.45;\n  color: var(--bm-muted);\n}\n.bm-tile {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 9px;\n}\n.bm-tile .bm-icon {\n  width: 18px;\n  height: 18px;\n}\n.bm-tile-warn {\n  background: var(--bm-unsaved-bg);\n  color: var(--bm-unsaved-fg);\n}\n.bm-tile-danger {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-tile-neutral {\n  background: var(--bm-fill);\n  color: var(--bm-label);\n}\n\n.bm-banner {\n  position: fixed;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: min(440px, calc(100vw - 32px));\n  padding: 12px 14px;\n  border-radius: 12px;\n  box-shadow: 0 14px 34px -10px oklch(0.2 0.02 255 / 0.4);\n}\n.bm-banner button {\n  min-height: 34px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-banner-ink {\n  background: var(--ink);\n  color: #fff;\n}\n.bm-banner-light {\n  background: #fff;\n  box-shadow: var(--shadow-pop);\n}\n.bm-banner-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.bm-banner-title {\n  margin: 0;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.35;\n}\n.bm-banner-sub {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.4;\n  opacity: 0.7;\n}\n.bm-banner .bm-actions {\n  flex: none;\n  gap: 6px;\n}\n.bm-banner-ink button {\n  min-height: 30px;\n  padding: 0 12px;\n  font-size: 12px;\n  background: oklch(1 0 0 / 0.12);\n  color: #fff;\n}\n.bm-banner-ink button:hover {\n  background: oklch(1 0 0 / 0.2);\n}\n.bm-banner-ink .bm-primary {\n  background: #fff;\n  color: var(--ink);\n}\n.bm-banner-ink .bm-primary:hover {\n  background: oklch(0.94 0.003 250);\n}\n.bm-banner-ink :focus-visible {\n  outline-color: oklch(0.82 0.14 145);\n}\n.bm-dot-stale {\n  background: oklch(0.7 0.18 25) !important;\n}\n.bm-dot-info {\n  background: var(--info-dot) !important;\n}\n\n/* Closed editor. The dock sits where the sidebar header's controls sit: header padding (top 14, right 14) minus the dock's 7px padding. */\n.bm-dock {\n  position: fixed;\n  z-index: 5;\n  top: 7px;\n  right: 7px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 7px 7px 10px;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-dot {\n  flex: none;\n  width: 8px;\n  height: 8px;\n  border-radius: 99px;\n  background: oklch(0.72 0.17 145);\n}\n.bm-dot-dirty {\n  background: var(--warn-dot);\n}\n\n/* Sidebar shell */\n.bm-sidebar {\n  position: fixed;\n  z-index: 4;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: min(440px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: #fff;\n  box-shadow:\n    0 0 0 1px var(--line),\n    -24px 0 48px -24px oklch(0.2 0.02 255 / 0.25);\n}\n.bm-resize {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize;\n  touch-action: none;\n  z-index: 2;\n}\n.bm-resize:hover,\n.bm-resize:focus-visible {\n  background: oklch(0.46 0.13 145 / 0.25);\n}\n.bm-resize:focus-visible {\n  outline-offset: -2px;\n}\n\n.bm-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 14px 14px 16px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.bm-mark {\n  flex: none;\n  display: block;\n  width: 28px;\n  height: auto;\n  aspect-ratio: 21 / 19;\n  image-rendering: pixelated;\n  user-select: none;\n}\n/* Bear, name and slogan. Takes the space the controls leave; the text fades out when it no longer fits. */\n.bm-brand {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.bm-head-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  transition: opacity 160ms ease;\n}\n.bm-brand-compact .bm-head-text {\n  opacity: 0;\n}\n/* The same two lines, in a card left of the sidebar (over the page), level with the header, while the pointer is on\n   the brand. 16px is the header's left padding: the card clears the sidebar edge by 10px. */\n.bm-brand-tip {\n  position: absolute;\n  z-index: 5;\n  top: 50%;\n  right: calc(100% + 16px + 10px);\n  display: flex;\n  flex-direction: column;\n  padding: 8px 12px;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n  white-space: nowrap;\n  opacity: 0;\n  transform: translate(4px, -50%);\n  pointer-events: none;\n  transition:\n    opacity 120ms ease,\n    transform 120ms ease;\n}\n.bm-brand-compact:hover .bm-brand-tip {\n  opacity: 1;\n  transform: translate(0, -50%);\n  transition-delay: 120ms;\n}\n@media (prefers-reduced-motion: reduce) {\n  .bm-head-text,\n  .bm-brand-tip {\n    transition: none;\n  }\n}\n/* A ring with one open quarter that turns while a save is written and the page reloads. */\n.bm-spin {\n  flex: none;\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: bm-spin 0.8s linear infinite;\n}\n@keyframes bm-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .bm-spin {\n    animation: none;\n  }\n}\n.bm-faces {\n  display: grid;\n}\n.bm-face {\n  grid-area: 1 / 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.bm-face[hidden-face] {\n  visibility: hidden;\n}\n.bm-save:disabled {\n  opacity: 0.85;\n  cursor: progress;\n}\n.bm-head-title {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.015em;\n  /* The controls beside it never shrink, so a narrow sidebar cuts the name, not the buttons. */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-head-sub {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-pill {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 24px;\n  padding: 0 10px;\n  border-radius: 999px;\n  background: var(--bm-saved-bg);\n  color: var(--bm-saved-fg);\n  font-size: 12px;\n  font-weight: 500;\n}\n.bm-pill .bm-dot {\n  width: 6px;\n  height: 6px;\n  background: var(--accent);\n}\n.bm-pill-dirty {\n  background: var(--warn-tint);\n  color: var(--warn-ink);\n}\n.bm-pill-dirty .bm-dot {\n  background: var(--warn-dot);\n}\nbutton.bm-pill-btn {\n  min-height: 0;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--warn-tint);\n  color: var(--warn-ink);\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n}\n:is(.bm-sidebar, .bm-dock) button.bm-pill-btn:hover:not(:disabled) {\n  background: oklch(0.93 0.06 75);\n  color: var(--warn-ink);\n}\nbutton.bm-pill-btn:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-dialog-wide {\n  width: min(400px, calc(100vw - 32px));\n}\n.bm-dialog .bm-actions {\n  flex-wrap: nowrap;\n}\n.bm-dialog .bm-actions button {\n  flex: none;\n  white-space: nowrap;\n}\n.bm-changes {\n  width: min(540px, calc(100vw - 32px));\n}\n.bm-commit-files {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: min(34vh, 280px);\n  overflow-y: auto;\n}\n.bm-commit-files label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.bm-commit-mark {\n  font:\n    600 11px / 1 ui-monospace,\n    monospace;\n  width: 18px;\n  text-align: center;\n  opacity: 0.7;\n}\n.bm-commit-msg {\n  width: 100%;\n  box-sizing: border-box;\n  resize: vertical;\n  font: inherit;\n  font-size: 14px;\n  padding: 8px 12px;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n}\n\n/* Unsaved changes review and version history: groups, rows, diff lines */\n.bm-changes-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-height: 22rem;\n  overflow-y: auto;\n  margin: 0 -4px;\n  padding: 0 4px;\n}\n.bm-changes-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-changes-area {\n  margin: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--bm-section);\n}\n.bm-changes-file {\n  font-weight: 400;\n  letter-spacing: 0;\n  text-transform: none;\n  color: oklch(0.55 0.01 255);\n}\n.bm-changes-count {\n  margin-left: auto;\n  font-weight: 400;\n  letter-spacing: 0;\n  color: var(--bm-muted);\n}\n.bm-changes ul {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  overflow: hidden;\n}\n.bm-change {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px;\n  font-size: 14px;\n  line-height: 1.4;\n}\n.bm-change + .bm-change {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-change-mark {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  font-family: var(--mono);\n  font-size: 13px;\n  font-weight: 600;\n  background: var(--bm-unsaved-bg);\n  color: var(--bm-unsaved-fg);\n}\n.bm-change-added .bm-change-mark {\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-change-removed .bm-change-mark {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n.bm-change-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-change-field {\n  font-weight: 500;\n  color: var(--bm-ink);\n  overflow-wrap: anywhere;\n}\n.bm-change-values {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n.bm-change-values del,\n.bm-change-values ins {\n  display: flex;\n  gap: 6px;\n  min-width: 0;\n  padding: 3px 7px;\n  border-radius: 5px;\n  text-decoration: none;\n  font-size: 13px;\n}\n.bm-change-values del {\n  background: var(--bm-diff-del-bg);\n  color: var(--bm-diff-del-fg);\n}\n.bm-change-values ins {\n  background: var(--bm-diff-add-bg);\n  color: var(--bm-diff-add-fg);\n}\n.bm-change-values del::before {\n  content: \"\\2212\";\n  flex: none;\n  font-family: var(--mono);\n}\n.bm-change-values ins::before {\n  content: \"+\";\n  flex: none;\n  font-family: var(--mono);\n}\n.bm-change-values del > span,\n.bm-change-values ins > span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-change-values del > span {\n  text-decoration: line-through;\n  text-decoration-color: oklch(0.45 0.13 25 / 0.5);\n}\n.bm-changes-empty {\n  margin: 0;\n  padding: 24px 0;\n  text-align: center;\n  font-size: 14px;\n  color: var(--bm-muted);\n}\n\n.bm-changes ul.bm-versions {\n  gap: 0;\n}\n.bm-version {\n  padding: 0;\n}\n.bm-version + .bm-version {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-version-when strong {\n  font-weight: 600;\n}\n.bm-tipped {\n  position: relative;\n}\n.bm-tipped::after {\n  content: attr(data-tip);\n  position: absolute;\n  right: calc(100% + 6px);\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 4px 8px;\n  border-radius: 6px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  pointer-events: none;\n  visibility: hidden;\n  z-index: 5;\n}\n.bm-version-row > .bm-tipped:first-child::after {\n  right: auto;\n  left: calc(100% + 6px);\n}\n.bm-tipped:hover::after,\n.bm-tipped:focus-visible::after {\n  visibility: visible;\n}\n.bm-version-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 8px 8px 10px;\n}\n.bm-version-when {\n  flex: 1;\n  min-width: 0;\n  margin-right: auto;\n  padding: 0 !important;\n  min-height: 32px !important;\n  font-weight: 500;\n  display: flex !important;\n  flex-direction: column;\n  align-items: flex-start !important;\n  justify-content: center;\n  gap: 2px;\n  text-align: left;\n}\n.bm-version-line {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.bm-version-sum {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--bm-help);\n}\n.bm-version-row .bm-restore {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: none;\n  min-height: 32px;\n  padding: 0 10px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-version-rel {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-ink);\n}\n.bm-version-abs {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--bm-muted);\n}\n.bm-version-diff {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 4px 10px 12px 10px;\n  border-top: 1px solid var(--bm-divider);\n  margin-top: 0;\n}\n.bm-version-diff ul {\n  margin: 0;\n}\n.bm-day {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.bm-restored {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 8px 8px 12px;\n  border-radius: 9px;\n  background: var(--bm-diff-add-bg);\n  color: var(--bm-saved-fg);\n  font-size: 13px;\n}\n.bm-restored > span {\n  flex: 1;\n  min-width: 0;\n}\n\n.bm-tabs {\n  display: flex;\n  gap: 0;\n  padding: 0 12px;\n  overflow-x: auto;\n  border-bottom: 1px solid var(--bm-tab-rule);\n}\n.bm-tabs button {\n  flex: 1 1 auto;\n  height: 46px;\n  padding: 0 6px;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: oklch(0.48 0.01 255);\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-tabs button:hover {\n  color: var(--ink);\n  background: var(--fill-soft);\n}\n.bm-tabs button[aria-selected=\"true\"] {\n  color: var(--ink);\n  background: transparent;\n  font-weight: 600;\n  box-shadow: inset 0 -2px 0 var(--accent);\n}\n.bm-tabs button:focus-visible {\n  outline-offset: -2px;\n}\n\n.bm-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 24px 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.bm-foot {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  border-top: 1px solid var(--line-soft);\n  font-family: var(--mono);\n  font-size: 10px;\n  color: var(--muted);\n}\n.bm-foot span:first-child {\n  flex: none;\n  white-space: nowrap;\n}\n.bm-foot span:last-child {\n  text-align: right;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n/* Group header: mono 11/500, then a 1px rule. With a right-hand item the rule sits on the flex wrapper. */\n.bm-group {\n  margin: 18px 0 0;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--bm-divider);\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--bm-section);\n}\n.bm-group:first-child {\n  margin-top: 0;\n}\n.bm-stack-tight > .bm-group {\n  margin-bottom: 10px;\n}\n.bm-meta {\n  margin: 0;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n\n/* Fields */\n.bm-label {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n.bm-field {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-hint {\n  font-size: 12px;\n  line-height: 1.45;\n  font-weight: 400;\n  color: var(--muted);\n}\n.bm-label-text {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n.bm-info {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n.bm-info-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin: -3px 0;\n  border-radius: 999px;\n  color: var(--bm-info);\n  cursor: help;\n  text-transform: none;\n  letter-spacing: 0;\n}\n.bm-info-btn:hover,\n.bm-info-btn[aria-expanded=\"true\"] {\n  color: var(--ink);\n}\n.bm-info-btn:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.bm-tip {\n  position: fixed;\n  z-index: 2147483647;\n  visibility: hidden;\n  pointer-events: none;\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-sizing: border-box;\n  background: var(--ink);\n  color: oklch(0.98 0.003 250);\n  font-family: var(--sans, inherit);\n  font-size: 12px;\n  line-height: 1.45;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: 0;\n  text-align: left;\n  white-space: normal;\n  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);\n}\n.bm-tip-open {\n  visibility: visible;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo, .bm-consent) :where(input:not([type=\"checkbox\"]):not([type=\"file\"]), select, textarea) {\n  width: 100%;\n  min-height: 40px;\n  padding: 0 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 400;\n  outline: none;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo, .bm-consent) textarea {\n  padding: 8px 12px;\n  min-height: 72px;\n  line-height: 1.5;\n  resize: vertical;\n}\n:is(.bm-sidebar, .bm-popover) select:not([size]) {\n  appearance: none;\n  padding-right: 32px;\n  /* A caret made of gradients, not a `data:` image: a site's Content-Security-Policy can block those. */\n  background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%);\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  background-position:\n    right 17px center,\n    right 12px center;\n}\n.bm-sidebar select[size],\n.bm-popover select[size] {\n  padding: 4px;\n  font-size: 12px;\n}\n.bm-sidebar select[size] option,\n.bm-sidebar select[size] optgroup,\n.bm-popover select[size] option,\n.bm-popover select[size] optgroup {\n  padding: 3px 6px;\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo, .bm-consent) :where(input:not([type=\"checkbox\"]):not([type=\"file\"]), select, textarea):focus {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n:is(.bm-sidebar, .bm-popover, .bm-seo, .bm-consent) :where(input[aria-label=\"Link URL\"], .bm-mono) {\n  font-family: var(--mono);\n  font-size: 13px;\n}\n.bm-prefix-wrap {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-prefix-wrap:focus-within {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n.bm-prefix {\n  padding: 0 2px 0 12px;\n  font-family: var(--mono);\n  font-size: 13px;\n  color: var(--muted);\n}\n.bm-prefix-wrap input {\n  border: 0;\n  box-shadow: none !important;\n  min-height: 38px;\n  padding-left: 2px;\n  font-family: var(--mono);\n  font-size: 13px;\n}\n.bm-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.bm-stack-tight {\n  gap: 8px;\n}\n.bm-groups {\n  gap: 36px;\n}\n.bm-list {\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  box-shadow: 0 0 0 1px var(--bm-border);\n  overflow: hidden;\n}\n.bm-list-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px 8px 12px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.bm-list-row:last-child {\n  border-bottom: 0;\n}\n.bm-list-row-on {\n  background: var(--accent-tint);\n}\n.bm-list-row a {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: var(--ink);\n  text-decoration: none;\n}\n.bm-list-row a:hover .bm-list-title {\n  text-decoration: underline;\n}\n.bm-list-title {\n  font-size: 14px;\n  font-weight: 500;\n}\n.bm-list-path {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-badge-home {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-badge {\n  font-family: var(--mono);\n  font-size: 11px;\n  padding: 3px 7px;\n  border-radius: 5px;\n  background: var(--bm-badge-amber-bg);\n  color: var(--bm-badge-amber-fg);\n}\n.bm-badge-system {\n  background: var(--fill);\n  color: var(--ink-2);\n}\n.bm-badge-on {\n  background: var(--bm-badge-green-bg);\n  color: var(--bm-badge-green-fg);\n}\n.bm-row {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n.bm-row-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n.bm-error {\n  color: var(--danger-ink);\n  font-size: 12px;\n  font-weight: 400;\n  margin: 0;\n}\n.bm-warn {\n  color: var(--warn-ink);\n  font-size: 12px;\n  margin: 0;\n}\n.bm-note {\n  margin: 0;\n  color: var(--bm-help);\n  font-size: 13px;\n  line-height: 1.55;\n  font-weight: 400;\n}\n.bm-group + .bm-note,\n.bm-group-split + .bm-note {\n  margin-top: -4px;\n}\n\n/* Switch: 36 x 20, knob 16 inset 2 */\n.bm-check {\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  font-weight: 500;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"] {\n  appearance: none;\n  position: relative;\n  flex: none;\n  width: 36px;\n  height: 20px;\n  margin: 0;\n  border-radius: 999px;\n  background: var(--bm-switch-off);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px oklch(0 0 0 / 0.2);\n  transition: transform 0.15s;\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]:checked {\n  background: var(--bm-primary);\n}\n:is(.bm-check, .bm-switch-row) input[type=\"checkbox\"]:checked::before {\n  transform: translateX(16px);\n}\n.bm-popover .bm-check {\n  color: var(--bm-label);\n  font-size: 14px;\n}\n\n/* Buttons inside the sidebar */\n.bm-sidebar :where(button:not([role=\"tab\"]):not([role=\"radio\"]):not(.bm-resize)) {\n  min-height: 32px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-sidebar :where(button:not([role=\"tab\"]):not([role=\"radio\"]):not(.bm-resize)):hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n.bm-sidebar button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n/* Dashed \"Add ...\" buttons: Add link, Add button, Add column, Add item */\n.bm-sidebar .bm-add {\n  min-height: 44px;\n  background: oklch(0.985 0.002 250);\n  color: var(--bm-link);\n  border: 1px dashed oklch(0.85 0.005 250);\n  border-radius: 8px;\n}\n.bm-sidebar .bm-add:hover:not(:disabled) {\n  background: var(--accent-tint);\n}\n\n/* Cards, lists, images */\n.bm-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n}\n.bm-card .bm-card {\n  background: var(--bm-fill-nested);\n  border-color: var(--line-soft);\n}\n.bm-card > .bm-label:first-child:not(:only-child) {\n  font-family: var(--mono);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  font-weight: 500;\n  color: var(--muted);\n}\n.bm-card[draggable=\"true\"] {\n  cursor: grab;\n}\n/* Drag and drop: the target shows what a drop would do. */\n.bm-dragging {\n  opacity: 0.4;\n}\n.bm-drop-before,\n.bm-drop-after,\n.bm-drop-child {\n  --drop: var(--accent);\n}\n.bm-drop-before::before,\n.bm-drop-after::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 3px;\n  border-radius: 3px;\n  background: var(--drop);\n  box-shadow: 0 0 0 2px var(--accent-ring);\n  pointer-events: none;\n  z-index: 2;\n}\n.bm-drop-before::before {\n  top: -6px;\n}\n.bm-drop-after::before {\n  bottom: -6px;\n}\n.bm-drop-child {\n  box-shadow: inset 0 0 0 2px var(--drop);\n  background: var(--accent-tint);\n}\n.bm-drop-before::after,\n.bm-drop-after::after,\n.bm-drop-child::after,\n.bm-drop-files::after {\n  content: attr(data-drop-hint);\n  position: absolute;\n  right: 8px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 3;\n}\n.bm-drop-before::after {\n  top: -22px;\n}\n.bm-drop-after::after {\n  bottom: -22px;\n}\n.bm-drop-child::after {\n  top: -11px;\n  right: 12px;\n}\n.bm-drop-files {\n  box-shadow: inset 0 0 0 2px var(--accent);\n  background: var(--accent-tint);\n}\n.bm-drop-files::after {\n  top: -11px;\n  right: 12px;\n}\n.bm-thumb {\n  width: 100%;\n  height: 96px;\n  object-fit: cover;\n  border-radius: 7px;\n  background: var(--fill);\n}\n.bm-drop {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border: 1px dashed var(--line);\n  border-radius: 10px;\n  padding: 10px;\n  background: var(--fill-soft);\n}\n.bm-drop input[type=\"file\"] {\n  width: 100%;\n  font-size: 12px;\n  color: var(--muted);\n}\n.bm-drop input[type=\"file\"]::file-selector-button {\n  height: 32px;\n  margin-right: 10px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 7px;\n  background: var(--ink);\n  color: #fff;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.bm-alert {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px;\n  border-radius: 12px;\n  background: var(--danger-tint);\n  box-shadow: 0 0 0 1px oklch(0.55 0.18 25 / 0.35);\n}\n.bm-alert-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--danger-ink);\n}\n.bm-alert .bm-error {\n  font-family: var(--mono);\n  font-size: 11px;\n}\n.bm-alert-notice {\n  background: var(--warn-tint);\n  box-shadow: 0 0 0 1px oklch(0.45 0.09 65 / 0.2);\n}\n.bm-alert-notice .bm-note {\n  color: var(--warn-ink);\n  font-size: 12px;\n}\n\n/* Header actions */\n.bm-save {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--accent);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 600;\n}\n.bm-dialog .bm-primary kbd {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  margin-left: 8px;\n  opacity: 0.8;\n}\n.bm-save kbd {\n  font-family: var(--mono);\n  font-size: 10px;\n  font-weight: 400;\n  opacity: 0.75;\n}\n/* Icon buttons: 32 x 32, transparent, grey icon, grey fill on hover. */\n.bm-icon-btn {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  min-height: 0 !important;\n  padding: 0 !important;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: var(--bm-icon);\n}\n.bm-icon-btn:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-icon-btn:disabled {\n  opacity: 0.35;\n}\n.bm-close {\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  color: var(--bm-icon);\n  border-radius: 7px;\n}\n.bm-close:hover:not(:disabled) {\n  background: var(--fill) !important;\n  color: var(--ink);\n}\n.bm-dock .bm-save {\n  font-family: var(--sans);\n}\n.bm-split {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n}\n.bm-split .bm-split-main {\n  border-radius: 8px 0 0 8px;\n}\n.bm-split .bm-split-toggle {\n  width: 28px;\n  padding: 0;\n  justify-content: center;\n  border-radius: 0 8px 8px 0;\n  box-shadow: inset 1px 0 0 oklch(1 0 0 / 0.35);\n}\n.bm-split .bm-split-toggle:focus-visible,\n.bm-split .bm-split-main:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-split-menu {\n  position: absolute;\n  z-index: 8;\n  top: calc(100% + 6px);\n  right: 0;\n  min-width: 200px;\n  display: flex;\n  flex-direction: column;\n  padding: 4px;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-pop);\n}\n.bm-split-menu button.bm-split-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 34px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: var(--ink);\n  font-family: var(--sans);\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n}\n.bm-split-menu button.bm-split-item:hover:not(:disabled),\n.bm-split-menu button.bm-split-item:focus-visible {\n  background: var(--fill);\n  outline: none;\n}\n.bm-split-menu button.bm-split-danger {\n  color: var(--danger-ink);\n}\n.bm-split-menu button.bm-split-item {\n  justify-content: space-between;\n  gap: 16px;\n}\n.bm-split-menu button.bm-split-item kbd {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--muted);\n}\n.bm-split-menu button.bm-split-sep {\n  margin-top: 5px;\n  position: relative;\n}\n.bm-split-menu button.bm-split-sep::before {\n  content: \"\";\n  position: absolute;\n  left: 6px;\n  right: 6px;\n  top: -3px;\n  height: 1px;\n  background: var(--line);\n}\n.bm-split-menu button.bm-split-danger:hover:not(:disabled),\n.bm-split-menu button.bm-split-danger:focus-visible {\n  background: var(--danger-tint);\n}\n.bm-split-menu button.bm-split-item:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.bm-sidebar .bm-icon-btn.bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-icon-btn.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-small {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 28px !important;\n  padding: 0 10px !important;\n  font-family: var(--sans);\n  font-size: 12px !important;\n  letter-spacing: 0;\n  text-transform: none;\n  align-self: flex-start;\n}\n.bm-group-split {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 18px;\n  margin-bottom: 0;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--bm-divider);\n}\n.bm-group-split:first-child {\n  margin-top: 0;\n}\n.bm-group-split > .bm-group {\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.bm-group-split .bm-small {\n  text-transform: none;\n  letter-spacing: 0;\n}\n.bm-group-split span.bm-small {\n  font-family: var(--mono);\n  font-size: 11px !important;\n  font-weight: 400;\n  color: var(--bm-muted);\n  padding: 0 !important;\n  min-height: 0 !important;\n}\n.bm-stack-tight > .bm-group-split {\n  margin-bottom: 10px;\n}\n\n/* Labels with a right-hand tag */\n.bm-label.bm-label-row,\n.bm-label-row {\n  flex-direction: row;\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n.bm-meta-tag {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  letter-spacing: 0;\n  color: var(--bm-muted);\n}\n\n/* Switch rows */\n.bm-switch-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  cursor: pointer;\n}\n.bm-switch-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.bm-switch-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n\n/* Tone cards and segmented controls */\n.bm-tones {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 6px;\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 6px;\n  min-height: 0;\n  padding: 5px 5px 6px;\n  border-radius: 9px;\n  background: #fff;\n  border: 0;\n  box-shadow: inset 0 0 0 1px var(--bm-border);\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone:hover {\n  background: var(--fill-soft);\n}\n:is(.bm-sidebar, .bm-popover) .bm-tone[aria-checked=\"true\"] {\n  box-shadow: inset 0 0 0 2px var(--accent);\n  background: #fff;\n}\n.bm-tones-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n.bm-tones-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n/* A miniature of each button look, drawn with the editor's colours so it does not depend on the site theme. */\n.bm-btnsample {\n  display: grid;\n  place-items: center;\n  height: 26px;\n  border-radius: 6px;\n  background: var(--fill-soft);\n}\n.bm-btnsample > span {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n}\n.bm-btnsample-default > span {\n  color: var(--ink-2);\n}\n.bm-btnsample-primary > span {\n  padding: 5px 12px;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #fff;\n}\n.bm-btnsample-secondary > span {\n  padding: 5px 12px;\n  border-radius: 999px;\n  color: var(--ink);\n  box-shadow: inset 0 0 0 1px var(--ink-2);\n}\n.bm-btnsample-tertiary > span {\n  color: var(--accent);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.bm-swatch {\n  display: inline-block;\n  flex: none;\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px oklch(0.2 0.02 255 / 0.15);\n}\n.bm-swatch-lg {\n  display: block;\n  width: auto;\n  height: 22px;\n  border-radius: 6px;\n}\n.bm-swatch-base {\n  background: #fff;\n}\n.bm-swatch-subtle {\n  background: oklch(0.96 0.005 250);\n}\n.bm-swatch-inverse {\n  background: var(--ink);\n}\n.bm-swatch-brand {\n  background: var(--accent);\n}\n.bm-segmented {\n  display: flex;\n  padding: 3px;\n  border-radius: 9px;\n  background: var(--bm-fill);\n}\n.bm-sidebar .bm-segmented button,\n.bm-dialog .bm-segmented button {\n  flex: 1;\n  min-height: 36px;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: oklch(0.45 0.01 255);\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-sidebar .bm-segmented button:hover:not(:disabled),\n.bm-dialog .bm-segmented button:hover:not(:disabled) {\n  background: oklch(1 0 0 / 0.5);\n}\n.bm-sidebar .bm-segmented button[aria-checked=\"true\"],\n.bm-dialog .bm-segmented button[aria-checked=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-icon-picker {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));\n  gap: 4px;\n  padding: 3px;\n  border-radius: 9px;\n  background: var(--bm-fill);\n}\n.bm-sidebar .bm-icon-picker button {\n  display: grid;\n  place-items: center;\n  min-height: 40px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  border-radius: 7px;\n  background: transparent;\n  color: oklch(0.45 0.01 255);\n}\n.bm-sidebar .bm-icon-picker button:hover {\n  background: oklch(1 0 0 / 0.5);\n  color: var(--ink);\n}\n.bm-sidebar .bm-icon-picker button[aria-checked=\"true\"] {\n  background: #fff;\n  color: var(--accent);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-icon-picker svg {\n  width: 20px;\n  height: 20px;\n}\n.bm-actions-split {\n  display: flex;\n  gap: 8px;\n  padding-top: 4px;\n}\n.bm-actions-split button {\n  flex: 1;\n  min-height: 40px !important;\n  font-size: 14px !important;\n}\n.bm-sidebar .bm-actions-split .bm-danger {\n  background: var(--bm-danger-soft);\n}\n\n/* Arrays, links, images */\n.bm-array {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-array-item {\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-array-item summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 0 8px 0 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ink);\n  cursor: pointer;\n  list-style: none;\n}\n.bm-array-item summary::-webkit-details-marker {\n  display: none;\n}\n.bm-array-item summary:hover {\n  background: var(--fill-soft);\n}\n.bm-array-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-grip,\n.bm-chevron {\n  display: inline-grid;\n  place-items: center;\n  color: oklch(0.65 0.01 255);\n}\n.bm-chevron {\n  transition: transform 0.12s;\n}\ndetails[open] > summary .bm-chevron {\n  transform: rotate(90deg);\n}\n.bm-array-body {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 12px;\n  background: var(--bm-fill-nested);\n  border-top: 1px solid var(--line-soft);\n}\n.bm-row-end {\n  justify-content: flex-end;\n}\n.bm-sidebar .bm-add-row {\n  width: 100%;\n}\n.bm-link-btn {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 40px;\n  padding: 0 12px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  text-align: left;\n  color: var(--ink-2);\n}\n.bm-sidebar .bm-link-btn {\n  background: #fff;\n  border: 1px solid var(--bm-border);\n  font-size: 14px;\n  padding: 0 12px;\n}\n.bm-sidebar .bm-link-btn:hover:not(:disabled) {\n  background: #fff;\n  border-color: oklch(0.8 0.005 250);\n}\n.bm-link-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--ink);\n  font-weight: 500;\n}\n.bm-link-href {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n  max-width: 45%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-stripes {\n  background: repeating-linear-gradient(135deg, oklch(0.93 0.004 250) 0 6px, oklch(0.965 0.003 250) 6px 12px);\n}\n\n/* Image field: label above, compact 56px row, alt text under it */\n.bm-imagefield {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.bm-image-row {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n.bm-image-row .bm-thumb {\n  flex: none;\n  width: 56px;\n  height: 56px;\n  border-radius: 6px;\n}\n.bm-image-meta {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  justify-content: center;\n}\n.bm-image-path {\n  font-family: var(--mono);\n  font-size: 12px;\n  color: var(--bm-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-sidebar .bm-alt {\n  min-height: 40px;\n  font-size: 14px;\n}\n.bm-image-actions {\n  flex-wrap: nowrap;\n  gap: 6px;\n}\n.bm-image-actions > button:not(.bm-icon-btn) {\n  flex: 1;\n  min-height: 36px;\n  font-size: 13px;\n}\n.bm-layout {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 2px;\n}\n.bm-layout-row {\n  display: grid;\n  grid-template-columns: 56px 1fr;\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.bm-layout-row .bm-label {\n  margin: 0;\n}\n.bm-layout-row .bm-layout-hint {\n  grid-column: 2;\n}\n.bm-position {\n  display: grid;\n  grid-template-columns: repeat(3, 20px);\n  grid-template-rows: repeat(3, 20px);\n  gap: 3px;\n  padding: 4px;\n  width: max-content;\n  border-radius: 8px;\n  background: var(--fill);\n}\n.bm-sidebar .bm-position-cell {\n  width: 20px;\n  height: 20px;\n  min-height: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #fff;\n  box-shadow: inset 0 0 0 1px var(--line);\n}\n.bm-sidebar .bm-position-cell:hover:not(:disabled) {\n  background: var(--accent-tint);\n}\n.bm-sidebar .bm-position-cell[aria-checked=\"true\"],\n.bm-sidebar .bm-position-cell[aria-checked=\"true\"]:hover:not(:disabled) {\n  background: var(--accent);\n  box-shadow: none;\n}\n.bm-sidebar .bm-position-cell:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.bm-slot,\n.bm-dropzone {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 96px;\n  padding: 14px;\n  border: 1.5px dashed oklch(0.82 0.006 250);\n  border-radius: 10px;\n  background: var(--fill-soft);\n  color: var(--ink-2);\n  text-align: center;\n  cursor: pointer;\n}\n.bm-sidebar .bm-slot:hover:not(:disabled),\n.bm-dropzone:hover {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.bm-dropzone {\n  min-height: 180px;\n  position: relative;\n}\n.bm-dropzone:focus-within {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.bm-dropzone-over {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.bm-slot-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--ink);\n}\n.bm-slot-hint {\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 7;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 10vh 16px 16px;\n  background: oklch(0.2 0.01 255 / 0.4);\n}\n.bm-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(480px, 100%);\n  max-height: min(560px, 80vh);\n  overflow: hidden;\n  padding: 20px 0 0;\n  border-radius: 14px;\n  background: #fff;\n  box-shadow: var(--bm-shadow-dialog);\n}\n.bm-modal-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 0 20px 12px;\n}\n.bm-modal-head .bm-dialog-title {\n  flex: none;\n}\n.bm-modal-head .bm-meta-tag {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-modal-head .bm-icon-btn {\n  margin: -6px -8px -6px 0;\n}\n.bm-modal .bm-tabs {\n  margin: 0 20px;\n  padding: 3px;\n  gap: 0;\n  border: 0;\n  border-radius: 9px;\n  background: var(--bm-fill);\n  overflow: visible;\n}\n.bm-modal .bm-tabs button {\n  flex: 1;\n  height: 36px;\n  min-height: 36px;\n  padding: 0 8px;\n  border-radius: 7px;\n  font-size: 13px;\n  font-weight: 400;\n}\n.bm-modal .bm-tabs button:hover {\n  background: oklch(1 0 0 / 0.5);\n}\n.bm-modal .bm-tabs button[aria-selected=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  font-weight: 500;\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-modal-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 16px 20px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bm-library {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 10px;\n}\n.bm-library-item {\n  position: relative;\n}\n.bm-library-pick {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n  min-height: 0;\n  padding: 4px;\n  border: 0;\n  border-radius: 9px;\n  background: var(--fill-soft);\n  text-align: left;\n  font-family: var(--mono);\n  font-size: 9px;\n  font-weight: 400;\n  color: var(--muted);\n  word-break: break-all;\n  cursor: pointer;\n}\n.bm-library-pick:hover {\n  background: var(--fill-hover);\n}\n.bm-library-pick img {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  object-fit: cover;\n  border-radius: 6px;\n  background: var(--fill);\n}\n.bm-library-pick[aria-pressed=\"true\"] {\n  box-shadow: 0 0 0 2px var(--accent);\n  background: var(--accent-tint);\n}\n.bm-library-delete {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 24px;\n  height: 24px;\n  min-height: 0;\n  background: #fff;\n  box-shadow: 0 1px 3px oklch(0.2 0.01 255 / 0.25);\n  opacity: 0;\n}\n.bm-library-item:hover .bm-library-delete,\n.bm-library-delete:focus-visible {\n  opacity: 1;\n}\n.bm-library-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n.bm-modal-confirm {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px 20px 16px;\n  border-top: 1px solid var(--line-soft);\n  background: var(--danger-tint);\n}\n.bm-modal-confirm .bm-note {\n  color: var(--danger-ink);\n  font-size: 13px;\n  line-height: 1.5;\n}\n.bm-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n  white-space: nowrap;\n}\n.bm-popover-title {\n  grid-column: 1 / -1;\n  padding: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--bm-ink);\n}\n.bm-popover-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n}\n.bm-popover-head-wide {\n  grid-column: 1 / -1;\n}\n.bm-popover[aria-label=\"Edit link\"],\n.bm-popover[aria-label=\"Add section\"][role=\"listbox\"] {\n  z-index: 5;\n}\n.bm-popover :is(.bm-fmt-bold) {\n  font-weight: 700;\n}\n.bm-fmt-bold {\n  font-weight: 700;\n  font-size: 13px;\n}\n.bm-fmt-italic {\n  font-family: var(--serif);\n  font-style: italic;\n  font-size: 15px;\n}\n\n/* Edit link: Advanced row */\n.bm-advanced {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bm-popover button.bm-advanced-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 32px;\n  padding: 0 2px;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--bm-label);\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n}\n.bm-popover button.bm-advanced-toggle:hover {\n  background: transparent;\n  color: var(--bm-ink);\n}\n.bm-advanced-toggle .bm-chevron {\n  transition: transform 0.12s;\n}\n.bm-advanced-toggle[aria-expanded=\"true\"] .bm-chevron {\n  transform: rotate(90deg);\n}\n.bm-advanced-summary {\n  margin-left: auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--bm-muted);\n}\n\n/* SEO card and dialog */\n.bm-seo-card {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.bm-seo-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.bm-seo-badge {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--fill-soft);\n  color: var(--bm-label);\n  font-family: var(--mono);\n  font-size: 11px;\n}\n.bm-seo-edit,\n.bm-consent-edit {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.bm-dialog.bm-seo {\n  position: relative;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 10vh - 32px);\n  min-height: 0;\n}\n.bm-seo-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 2px 4px 2px 2px;\n}\n.bm-seo-json {\n  min-height: 220px;\n  white-space: pre;\n  overflow: auto;\n  tab-size: 2;\n}\n.bm-seo-json[aria-invalid=\"true\"] {\n  border-color: var(--bm-danger);\n}\n.bm-seo-format {\n  align-self: flex-start;\n}\n\n/* Cookie banner dialog */\n.bm-dialog.bm-consent {\n  position: relative;\n  width: min(520px, 100%);\n  max-height: calc(100vh - 10vh - 32px);\n  min-height: 0;\n}\n.bm-consent-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 2px 4px 2px 2px;\n}\n.bm-consent-preview {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 14px 16px;\n  border-radius: 12px;\n  background: var(--fill-soft);\n}\n.bm-consent-preview-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--bm-label);\n}\n.bm-consent-preview-text {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.45;\n  color: var(--bm-muted);\n  overflow-wrap: anywhere;\n}\n.bm-consent-preview-link {\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.bm-consent-preview-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.bm-consent-preview-buttons > span {\n  padding: 5px 14px;\n  border-radius: 999px;\n  box-shadow: inset 0 0 0 1px var(--bm-border);\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n\n/* SEO preview, OG row, outline */\n.bm-serp {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  padding: 12px 14px;\n  border-radius: 10px;\n  background: var(--fill-soft);\n}\n.bm-serp-image {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 12px;\n}\n.bm-serp-text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n.bm-serp-thumb {\n  flex: none;\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  object-fit: cover;\n  background: var(--fill);\n}\n.bm-serp-title {\n  font-size: 15px;\n  font-weight: 500;\n  color: oklch(0.42 0.12 260);\n}\n.bm-serp-url {\n  font-family: var(--mono);\n  font-size: 11px;\n  color: oklch(0.45 0.08 145);\n}\n.bm-serp-desc {\n  font-size: 12px;\n  line-height: 1.45;\n  color: oklch(0.45 0.01 255);\n}\n.bm-outline-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.bm-sidebar .bm-outline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 40px;\n  padding: 0 10px;\n  border-radius: 8px;\n  background: transparent;\n  text-align: left;\n  font-size: 14px;\n}\n.bm-sidebar .bm-outline-row:hover:not(:disabled) {\n  background: var(--fill-soft);\n}\n\n/* Section rows (Pages tab): grip, tone swatch, name over #anchor and variant, then actions. */\n.bm-srow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 52px;\n  padding: 6px 6px 6px 8px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n}\n.bm-srow:hover {\n  border-color: oklch(0.8 0.008 250);\n}\n.bm-srow-grip {\n  flex: none;\n  width: 16px;\n  height: 32px;\n  display: inline-grid;\n  place-items: center;\n  cursor: grab;\n  touch-action: none;\n}\n.bm-srow-grip:active {\n  cursor: grabbing;\n}\n.bm-srow .bm-outline-row {\n  flex: 1;\n  min-width: 0;\n  width: auto;\n  padding: 0 8px 0 4px;\n  gap: 10px;\n}\n.bm-srow .bm-swatch {\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n}\n.bm-srow-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.bm-srow-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--bm-ink);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow-meta {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--bm-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow .bm-outline-meta {\n  flex: none;\n  max-width: 40%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-srow-btn {\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  color: var(--bm-icon);\n  border-radius: 7px;\n}\n.bm-srow-btn:disabled {\n  opacity: 0.35;\n}\n.bm-sidebar .bm-srow-btn:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n.bm-sidebar .bm-srow-btn.bm-danger {\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-srow-btn.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n}\n.bm-srow-sep {\n  flex: none;\n  width: 1px;\n  height: 20px;\n  margin: 0 2px;\n  background: var(--bm-divider);\n}\n.bm-outline-n {\n  width: 18px;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: oklch(0.55 0.01 255);\n}\n.bm-outline-label {\n  flex: 1;\n  min-width: 0;\n  font-weight: 500;\n}\n.bm-outline-meta {\n  font-family: var(--mono);\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--muted);\n}\n\n/* Navigation and footer link cards */\n.bm-nav-card {\n  padding: 12px 12px 14px;\n  gap: 10px;\n}\n.bm-nested {\n  margin: 6px 0 0 16px;\n}\n.bm-nav-children {\n  margin-top: -4px;\n}\n.bm-nav-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.bm-nav-head .bm-icon-btn,\n.bm-column-head .bm-icon-btn {\n  background: var(--bm-fill);\n  color: oklch(0.45 0.01 255);\n}\n.bm-nav-head .bm-icon-btn:hover:not(:disabled),\n.bm-column-head .bm-icon-btn:hover:not(:disabled) {\n  background: var(--bm-fill-hover);\n  color: var(--bm-ink);\n}\n.bm-sidebar .bm-nav-head .bm-icon-btn.bm-danger,\n.bm-sidebar .bm-column-head .bm-icon-btn.bm-danger {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-icon);\n}\n.bm-sidebar .bm-nav-label {\n  flex: 1;\n  min-width: 0;\n  min-height: 32px;\n  padding: 0 8px;\n  border-color: transparent;\n  font-weight: 500;\n}\n.bm-sidebar .bm-nav-label:hover {\n  border-color: var(--line);\n}\n.bm-column {\n  padding: 0;\n  gap: 0;\n}\n.bm-column-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 10px;\n  cursor: grab;\n}\n.bm-column-links > summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 40px;\n  padding: 0 12px;\n  border-top: 1px solid var(--line-soft);\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n  cursor: pointer;\n  list-style: none;\n}\n.bm-column-links > summary::-webkit-details-marker {\n  display: none;\n}\n.bm-column-links > :not(summary) {\n  margin: 10px 12px 0;\n}\n.bm-column-links > :last-child {\n  margin-bottom: 12px;\n}\n\n/* Wordmark preview */\n.bm-card-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.bm-card-head .bm-label {\n  flex: none;\n}\n.bm-combo {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  width: auto;\n  max-width: 140px;\n  min-height: 38px;\n  padding: 0 10px 0 12px;\n  border: 0;\n  border-left: 1px solid var(--bm-border);\n  border-radius: 0;\n  background: var(--fill-soft);\n  color: var(--ink-2);\n  font-family: var(--mono);\n  font-size: 12px;\n  font-weight: 400;\n  text-align: left;\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger:hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n:is(.bm-sidebar, .bm-popover) .bm-combo-trigger[aria-expanded=\"true\"] {\n  background: var(--accent-tint);\n  color: var(--accent-hover);\n}\n/* One URL field: the text input and the page picker share a single border. */\n.bm-linkfield {\n  display: flex;\n  align-items: stretch;\n  min-height: 40px;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  overflow: hidden;\n}\n.bm-linkfield:focus-within {\n  border-color: var(--bm-primary);\n  box-shadow: 0 0 0 3px var(--bm-primary-ring);\n}\n.bm-linkfield > input {\n  flex: 1;\n  min-width: 0;\n  border: 0 !important;\n  box-shadow: none !important;\n  border-radius: 0;\n  min-height: 38px;\n  background: transparent;\n}\n.bm-linkfield .bm-combo {\n  flex: none;\n  max-width: 45%;\n}\n.bm-linkfield .bm-combo-trigger {\n  height: 100%;\n}\n.bm-linkfield .bm-combo-trigger:focus-visible {\n  outline-offset: -2px;\n}\n.bm-combo-trigger > span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bm-combo-trigger .bm-combo-custom {\n  color: var(--muted);\n}\n.bm-combo-panel {\n  position: fixed;\n  z-index: 6;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 6px;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 6px 18px oklch(0.2 0.02 255 / 0.1);\n}\n.bm-combo-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n.bm-combo-group {\n  margin: 6px 6px 2px;\n  font-family: var(--mono);\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.bm-combo-option {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--ink);\n  cursor: pointer;\n}\n.bm-combo-option[aria-selected=\"true\"] {\n  font-weight: 600;\n  color: var(--accent-hover);\n}\n.bm-combo-active {\n  background: var(--fill);\n}\n.bm-combo-value {\n  flex: none;\n  max-width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--muted);\n}\n.bm-combo-empty {\n  margin: 0;\n  padding: 8px;\n  font-size: 12px;\n  color: var(--muted);\n}\n.bm-format {\n  margin-top: -4px;\n}\n.bm-sidebar .bm-format button[aria-pressed=\"true\"] {\n  background: #fff;\n  color: var(--ink);\n  box-shadow: var(--bm-shadow-segment-on);\n}\n.bm-wordmark {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 14px;\n  border-radius: 10px;\n  background: var(--bm-fill-soft);\n}\n.bm-wordmark-name {\n  font-size: 24px;\n  font-weight: 600;\n  letter-spacing: -0.03em;\n}\n.bm-alert-notice {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 8px;\n  color: var(--warn-ink);\n}\n.bm-alert-notice .bm-icon {\n  margin-top: 2px;\n  flex: none;\n}\n\n/*\n * Button system. Three variants, one danger modifier, one rule set.\n *   secondary (default): neutral fill, ink text.\n *   .bm-primary:  the one main action of a surface. Solid accent, white text (AA).\n *   .bm-tertiary: low emphasis text button (Cancel, Reset). No fill, no underline, grey fill on hover.\n *   .bm-danger:   modifier. primary = solid red, secondary = red text, tertiary = red text.\n * The scope list gives every rule enough specificity to beat the per-surface defaults above,\n * so the hover state of one variant can never fall back to the secondary fill.\n */\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button:where(.bm-primary, .bm-tertiary, .bm-danger):not(.bm-icon-btn, .bm-save) {\n  transition:\n    background-color 0.12s,\n    color 0.12s;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary {\n  background: var(--bm-primary);\n  color: #fff;\n  box-shadow: none;\n  font-weight: 600;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary:hover:not(:disabled) {\n  background: var(--bm-primary-hover);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary.bm-danger {\n  background: var(--bm-danger);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-primary.bm-danger:hover:not(:disabled) {\n  background: var(--danger-hover);\n  color: #fff;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-danger:not(.bm-primary, .bm-tertiary, .bm-icon-btn) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-danger:not(.bm-primary, .bm-tertiary, .bm-icon-btn):hover:not(:disabled) {\n  background: oklch(0.93 0.04 25);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary {\n  min-height: 32px;\n  padding: 0 10px;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--bm-label);\n  font-weight: 400;\n  box-shadow: none;\n  text-decoration: none;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal) button.bm-tertiary {\n  min-height: 38px;\n  font-size: 14px;\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary:hover:not(:disabled) {\n  background: var(--bm-fill);\n  color: var(--bm-ink);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary.bm-danger {\n  background: transparent;\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button.bm-tertiary.bm-danger:hover:not(:disabled) {\n  background: var(--bm-danger-soft);\n  color: var(--bm-danger-text);\n}\n:is(.bm-dialog, .bm-popover, .bm-modal, .bm-sidebar) button:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.bm-save:hover:not(:disabled) {\n  background: var(--accent-hover);\n  color: #fff;\n}\n.bm-sidebar .bm-save:hover:not(:disabled) {\n  background: var(--accent-hover);\n  color: #fff;\n}\n.bm-popover .bm-actions-remove,\n.bm-dialog .bm-actions-remove {\n  margin-right: auto;\n}\n.bm-modal :where(button:not([role=\"tab\"], .bm-library-pick, .bm-icon-btn, .bm-tertiary)) {\n  min-height: 38px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fill);\n  color: var(--ink);\n  font-size: 14px;\n  font-weight: 400;\n}\n.bm-modal :where(button:not([role=\"tab\"], .bm-library-pick, .bm-icon-btn, .bm-tertiary)):hover:not(:disabled) {\n  background: var(--fill-hover);\n}\n.bm-modal .bm-dropzone {\n  font-family: var(--sans);\n}\n\n/* Design tab */\n.bm-colorrow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bm-colorpick {\n  flex: none;\n  width: 40px !important;\n  height: 40px;\n  min-height: 40px !important;\n  padding: 2px !important;\n  border: 1px solid var(--bm-border);\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n}\n.bm-colorhex {\n  flex: 1;\n  min-width: 0;\n  font-family: var(--mono);\n  font-size: 13px;\n  text-transform: lowercase;\n}\n.bm-colorhex[aria-invalid=\"true\"] {\n  border-color: var(--bm-danger);\n}\n.bm-overrides {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--bm-border);\n  border-radius: 10px;\n  overflow: hidden;\n}\n.bm-override-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px 8px 12px;\n}\n.bm-override-row + .bm-override-row {\n  border-top: 1px solid var(--bm-divider);\n}\n.bm-override-label {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bm-label);\n}\n.bm-override-label .bm-meta-tag {\n  font-size: 10px;\n}\n.bm-override-row .bm-colorpick {\n  width: 32px !important;\n  height: 32px;\n  min-height: 32px !important;\n  padding: 1px !important;\n  border-radius: 7px;\n}\n.bm-override-row .bm-colorhex {\n  flex: none;\n  width: 104px;\n  min-height: 36px;\n  padding: 0 10px;\n}\n.bm-tone-matrix {\n  display: grid;\n  grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr);\n  gap: 8px;\n  align-items: stretch;\n}\n.bm-tone-pick {\n  border: 0;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n}\n.bm-tone-cell[aria-pressed=\"true\"] {\n  outline: 2px solid var(--bm-primary);\n  outline-offset: 0;\n}\n.bm-tone-head {\n  font-family: var(--mono);\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.bm-tone-name {\n  align-self: center;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--ink-2);\n}\n.bm-tone-cell {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  min-width: 0;\n  min-height: 46px;\n  padding: 0 10px;\n  border-radius: 8px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.bm-tone-aa {\n  flex: none;\n  font-size: 16px;\n  font-weight: 600;\n}\n.bm-tone-muted {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 11px;\n}\n.bm-tone-chip {\n  flex: none;\n  padding: 2px 6px;\n  border-radius: 5px;\n  font-size: 10px;\n  font-weight: 600;\n}\n.bm-tone-link {\n  flex: none;\n  font-size: 11px;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.bm-contrast-list {\n  margin: 6px 0 0;\n  padding-left: 16px;\n  font-family: var(--mono);\n  font-size: 11px;\n  color: var(--warn-ink);\n}\n.bm-range {\n  flex: 1;\n  min-width: 0;\n  min-height: 28px;\n  accent-color: var(--accent);\n  cursor: pointer;\n}\n/* Preview: the only editor UI left on screen. */\n.bm-exit-preview {\n  position: fixed;\n  z-index: 7;\n  right: 16px;\n  bottom: 16px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 40px;\n  padding: 0 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--ink);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n  box-shadow: 0 10px 30px oklch(0.2 0.02 255 / 0.3);\n}\n.bm-exit-preview:hover {\n  background: oklch(0.28 0.012 255);\n}\n.bm-exit-preview:focus-visible {\n  outline-color: oklch(0.82 0.14 145);\n  outline-offset: 3px;\n}\n.bm-srow-add {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 6px;\n}\n.bm-sidebar .bm-add-section {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--bm-primary);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n}\n.bm-sidebar .bm-add-section:hover {\n  background: var(--bm-primary-hover);\n}\n";
 //#endregion
 //#region src/ui/styles.ts
 function boxStyle(rect, offset = 0) {
@@ -21055,7 +21312,7 @@ function siteOptionControl(site, option, onField) {
 		onChange: (value) => onField(option.name, value)
 	}, option.name);
 }
-function SiteForm({ site, options, images, onField, onOptional, onMarks, onUploaded, onDeleted }) {
+function SiteForm({ site, options, images, onField, onOptional, onConsentEnabled, onEditConsent, onMarks, onUploaded, onDeleted }) {
 	const logo = getAt(site, "favicon") ?? getAt(site, "logo");
 	const groupOf = (option) => SITE_GROUPS.find((group) => option.name.startsWith(group.prefix));
 	const shown = options.filter((option) => !option.name.startsWith("footer.") && !option.name.startsWith("header.") && option.name !== "theme.mode");
@@ -21162,10 +21419,16 @@ function SiteForm({ site, options, images, onField, onOptional, onMarks, onUploa
 					}),
 					/* @__PURE__ */ jsx("p", {
 						class: "bm-hint",
-						children: "Runs on your live site only: not while you edit, and not on Vercel or Netlify previews. Most analytics tools need a consent banner for visitors in the EU."
+						children: "Runs on your live site only: not while you edit, and not on Vercel or Netlify previews."
 					})
 				]
 			}),
+			/* @__PURE__ */ jsx(ConsentGroup, {
+				enabled: consentEnabled(site),
+				snippets: hasAnalyticsSnippet(site),
+				onEnabled: onConsentEnabled,
+				onEdit: onEditConsent
+			}),
 			SITE_GROUPS.map((group) => {
 				const items = shown.filter((option) => groupOf(option) === group);
 				if (items.length === 0) return null;
@@ -21206,6 +21469,49 @@ function SiteGroup({ title, items, control, extra }) {
 		]
 	});
 }
+/** The cookie banner: a switch here, its text in a dialog. */
+function ConsentGroup({ enabled, snippets, onEnabled, onEdit }) {
+	return /* @__PURE__ */ jsxs("div", {
+		class: "bm-stack",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				class: "bm-group",
+				children: "Cookie banner"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				class: "bm-switch-row",
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "bm-switch-text",
+					children: /* @__PURE__ */ jsxs("span", {
+						class: "bm-switch-title",
+						children: ["Ask before analytics runs", /* @__PURE__ */ jsx(Info, {
+							label: "About the cookie banner",
+							text: "Visitors in the EU and UK must agree before analytics cookies are set. With the banner on, nothing from the snippets loads until they accept. Google tags also get Consent Mode v2 signals."
+						})]
+					})
+				}), /* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					role: "switch",
+					checked: enabled,
+					onChange: (event) => onEnabled(event.currentTarget.checked)
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				class: "bm-hint",
+				children: !enabled ? "Off. Your snippets run for every visitor from the first page, EU visitors included." : snippets ? "On. Your snippets wait until the visitor accepts. The banner also shows while you edit, with analytics off." : "On. It appears once you add an analytics snippet above."
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				class: "bm-tertiary bm-consent-edit",
+				onClick: onEdit,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "settings",
+					size: 14
+				}), "Edit banner"]
+			})
+		]
+	});
+}
 //#endregion
 //#region src/ui/forms/footer-form.tsx
 /** Footer tab: layout, text, and the columns with their links. */
@@ -22104,7 +22410,7 @@ function DesignPanel({ site }) {
 	});
 }
 function SitePanel({ site, catalog }) {
-	const { doc, edits } = useEditor();
+	const { doc, edits, ui } = useEditor();
 	return /* @__PURE__ */ jsx(SiteForm, {
 		site,
 		options: catalog.siteOptions,
@@ -22116,6 +22422,14 @@ function SitePanel({ site, catalog }) {
 			const node = getAt(doc.site.peek(), "analytics");
 			if (typeof node === "object" && node !== null && Object.keys(node).length === 0) edits.writeOrClear("analytics", "");
 		},
+		onConsentEnabled: (enabled) => {
+			edits.writeField("consent.enabled", enabled ? void 0 : false);
+			const node = getAt(doc.site.peek(), "consent");
+			if (typeof node === "object" && node !== null && Object.keys(node).length === 0) edits.writeOrClear("consent", "");
+		},
+		onEditConsent: () => {
+			ui.dialog.value = { kind: "consent" };
+		},
 		onMarks: edits.applyMarksAt,
 		onUploaded: doc.addImage,
 		onDeleted: doc.dropImage