bearminion 1.5.0 → 1.6.0

package/dist/ui/mount.js

@@ -1,12 +1,13 @@
 import { a as sectionFieldKey, i as isPropShown, t as defaultTheme } from "../theme-DFjHjgFO.js";
 import { B as withImageLayout, F as DEFAULT_IMAGE_POSITION, I as IMAGE_FITS, L as IMAGE_POSITIONS, P as DEFAULT_IMAGE_FIT, R as isImageFit, S as upsertJsonLd, b as parseJsonLdInput, g as isPlaceholderSiteUrl, i as isSystemPage, m as generateSiteJsonLd, p as formatJsonLd, v as jsonLdWarnings, z as isImagePosition } from "../page-NOFVEqn1.js";
 import { applyTextMark, fontMarks, marksFromEmphasis, reconcileMarks, renderMarkedHtml } from "../marks.js";
-import { _ as consentCopy, 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 } from "../theme-colors-CbCyVANH.js";
+import { _ as consentCopy, b as parseMediaSource, 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 } from "../theme-colors-CHROGZkI.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";
 import { useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
+//#endregion
 //#region ../../node_modules/.pnpm/@preact+signals-core@1.14.4/node_modules/@preact/signals-core/dist/signals-core.mjs
 const i$1 = Symbol.for("preact-signals");
 function t() {
@@ -5051,7 +5052,7 @@ function wrap(tr, range, wrappers) {
 	let start = range.start, end = range.end;
 	tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
 }
-function setBlockType(tr, from, to, type, attrs) {
+function setBlockType$1(tr, from, to, type, attrs) {
 	if (!type.isTextblock) throw new RangeError("Type given to setBlockType should be a textblock");
 	let mapFrom = tr.steps.length;
 	tr.doc.nodesBetween(from, to, (node, pos) => {
@@ -5861,7 +5862,7 @@ var Transform = class {
 	the given node type with the given attributes.
 	*/
 	setBlockType(from, to = from, type, attrs = null) {
-		setBlockType(this, from, to, type, attrs);
+		setBlockType$1(this, from, to, type, attrs);
 		return this;
 	}
 	/**
@@ -7269,6 +7270,37 @@ const selectTextblockStart = selectTextblockSide(-1);
 Moves the cursor to the end of current text block.
 */
 const selectTextblockEnd = selectTextblockSide(1);
+/**
+Returns a command that tries to set the selected textblocks to the
+given node type with the given attributes.
+*/
+function setBlockType(nodeType, attrs = null) {
+	return function(state, dispatch) {
+		let applicable = false;
+		for (let i = 0; i < state.selection.ranges.length && !applicable; i++) {
+			let { $from: { pos: from }, $to: { pos: to } } = state.selection.ranges[i];
+			state.doc.nodesBetween(from, to, (node, pos) => {
+				if (applicable) return false;
+				if (!node.isTextblock || node.hasMarkup(nodeType, attrs)) return;
+				if (node.type == nodeType) applicable = true;
+				else {
+					let $pos = state.doc.resolve(pos), index = $pos.index();
+					applicable = $pos.parent.canReplaceWith(index, index + 1, nodeType);
+				}
+			});
+		}
+		if (!applicable) return false;
+		if (dispatch) {
+			let tr = state.tr;
+			for (let i = 0; i < state.selection.ranges.length; i++) {
+				let { $from: { pos: from }, $to: { pos: to } } = state.selection.ranges[i];
+				tr.setBlockType(from, to, nodeType, attrs);
+			}
+			dispatch(tr.scrollIntoView());
+		}
+		return true;
+	};
+}
 function markApplies(doc, ranges, type, enterAtoms) {
 	for (let i = 0; i < ranges.length; i++) {
 		let { $from, $to } = ranges[i];
@@ -7941,7 +7973,7 @@ for (var i = 65; i <= 90; i++) {
 	base[i] = String.fromCharCode(i + 32);
 	shift[i] = String.fromCharCode(i);
 }
-for (var code$1 in base) if (!shift.hasOwnProperty(code$1)) shift[code$1] = base[code$1];
+for (var code in base) if (!shift.hasOwnProperty(code)) shift[code] = base[code];
 function keyName(event) {
 	var name = !(mac$2 && event.metaKey && event.shiftKey && !event.ctrlKey && !event.altKey || ie$1 && event.shiftKey && event.key && event.key.length == 1 || event.key == "Unidentified") && event.key || (event.shiftKey ? shift : base)[event.keyCode] || event.key || "Unidentified";
 	if (name == "Esc") name = "Escape";
@@ -12825,115 +12857,173 @@ function checkStateComponent(plugin) {
 }
 //#endregion
 //#region src/ui/rich-editor.ts
-/**
-* The rich-text subset as a ProseMirror schema: paragraphs, line breaks, flat bulleted and numbered lists, bold,
-* italic, inline code and links. Nothing else can exist in the document, so nothing else can be pasted or typed into it.
-* Storage stays the markdown subset of `rich-text.ts`; this module only converts at the edges.
-*/
-const richSchema = new Schema({
-	nodes: {
-		doc: { content: "(paragraph | bullet_list | ordered_list)+" },
-		paragraph: {
-			content: "inline*",
-			group: "block",
-			parseDOM: [{ tag: "p" }],
-			toDOM: () => ["p", 0]
-		},
-		bullet_list: {
-			content: "list_item+",
-			group: "block",
-			parseDOM: [{ tag: "ul" }],
-			toDOM: () => ["ul", 0]
-		},
-		ordered_list: {
-			content: "list_item+",
-			group: "block",
-			parseDOM: [{ tag: "ol" }],
-			toDOM: () => ["ol", 0]
+/** A schema type that every rich schema defines, narrowed from `| undefined`. */
+function need(value) {
+	if (value === void 0) throw new Error("Missing rich-text schema type");
+	return value;
+}
+/** A heading the field allows: h2 or h3. The page title is the h1, and the markdown subset stops at three. */
+const headingNode = {
+	attrs: { level: { default: 2 } },
+	content: "inline*",
+	group: "block",
+	defining: true,
+	parseDOM: [
+		{
+			tag: "h1",
+			attrs: { level: 2 }
 		},
-		list_item: {
-			content: "paragraph",
-			defining: true,
-			parseDOM: [{ tag: "li" }],
-			toDOM: () => ["li", 0]
+		{
+			tag: "h2",
+			attrs: { level: 2 }
 		},
-		hard_break: {
-			inline: true,
-			group: "inline",
-			selectable: false,
-			parseDOM: [{ tag: "br" }],
-			toDOM: () => ["br"]
+		{
+			tag: "h3",
+			attrs: { level: 3 }
 		},
-		text: { group: "inline" }
-	},
-	marks: {
-		strong: {
-			parseDOM: [{ tag: "strong" }, { tag: "b" }],
-			toDOM: () => ["strong", 0]
+		{
+			tag: "h4",
+			attrs: { level: 3 }
 		},
-		em: {
-			parseDOM: [{ tag: "em" }, { tag: "i" }],
-			toDOM: () => ["em", 0]
+		{
+			tag: "h5",
+			attrs: { level: 3 }
 		},
-		code: {
-			excludes: "_",
-			inclusive: false,
-			parseDOM: [{ tag: "code" }],
-			toDOM: () => ["code", 0]
+		{
+			tag: "h6",
+			attrs: { level: 3 }
+		}
+	],
+	toDOM: (node) => [`h${node.attrs.level}`, 0]
+};
+function createSchema(headings) {
+	return new Schema({
+		nodes: {
+			doc: { content: headings ? "(paragraph | heading | bullet_list | ordered_list)+" : "(paragraph | bullet_list | ordered_list)+" },
+			paragraph: {
+				content: "inline*",
+				group: "block",
+				parseDOM: [{ tag: "p" }],
+				toDOM: () => ["p", 0]
+			},
+			...headings ? { heading: headingNode } : {},
+			bullet_list: {
+				content: "list_item+",
+				group: "block",
+				parseDOM: [{ tag: "ul" }],
+				toDOM: () => ["ul", 0]
+			},
+			ordered_list: {
+				content: "list_item+",
+				group: "block",
+				parseDOM: [{ tag: "ol" }],
+				toDOM: () => ["ol", 0]
+			},
+			list_item: {
+				content: "paragraph",
+				defining: true,
+				parseDOM: [{ tag: "li" }],
+				toDOM: () => ["li", 0]
+			},
+			hard_break: {
+				inline: true,
+				group: "inline",
+				selectable: false,
+				parseDOM: [{ tag: "br" }],
+				toDOM: () => ["br"]
+			},
+			text: { group: "inline" }
 		},
-		link: {
-			attrs: {
-				href: {},
-				newTab: { default: null }
+		marks: {
+			strong: {
+				parseDOM: [{ tag: "strong" }, { tag: "b" }],
+				toDOM: () => ["strong", 0]
 			},
-			inclusive: false,
-			parseDOM: [{
-				tag: "a[href]",
-				getAttrs: (dom) => {
-					const href = dom.getAttribute("href") ?? "";
-					if (!isSafeHref(href)) return false;
-					const tab = dom.getAttribute("data-new-tab");
-					return {
-						href,
-						newTab: tab === "true" ? "new" : tab === "false" ? "same" : null
-					};
+			em: {
+				parseDOM: [{ tag: "em" }, { tag: "i" }],
+				toDOM: () => ["em", 0]
+			},
+			code: {
+				excludes: "_",
+				inclusive: false,
+				parseDOM: [{ tag: "code" }],
+				toDOM: () => ["code", 0]
+			},
+			link: {
+				attrs: {
+					href: {},
+					newTab: { default: null }
+				},
+				inclusive: false,
+				parseDOM: [{
+					tag: "a[href]",
+					getAttrs: (dom) => {
+						const href = dom.getAttribute("href") ?? "";
+						if (!isSafeHref(href)) return false;
+						const tab = dom.getAttribute("data-new-tab");
+						return {
+							href,
+							newTab: tab === "true" ? "new" : tab === "false" ? "same" : null
+						};
+					}
+				}],
+				toDOM: (mark) => {
+					const tab = mark.attrs.newTab;
+					const attrs = { href: String(mark.attrs.href) };
+					if (tab === "new") attrs["data-new-tab"] = "true";
+					else if (tab === "same") attrs["data-new-tab"] = "false";
+					return [
+						"a",
+						attrs,
+						0
+					];
 				}
-			}],
-			toDOM: (mark) => {
-				const tab = mark.attrs.newTab;
-				const attrs = { href: String(mark.attrs.href) };
-				if (tab === "new") attrs["data-new-tab"] = "true";
-				else if (tab === "same") attrs["data-new-tab"] = "false";
-				return [
-					"a",
-					attrs,
-					0
-				];
 			}
 		}
-	}
-});
-const { paragraph, bullet_list, ordered_list, list_item, hard_break } = richSchema.nodes;
-const { strong, em, code, link } = richSchema.marks;
-const parser = DOMParser.fromSchema(richSchema);
-const serializer = DOMSerializer.fromSchema(richSchema);
+	});
+}
+/**
+* The rich-text subset as a ProseMirror schema: paragraphs, line breaks, flat bulleted and numbered lists, bold,
+* italic, inline code and links. Nothing else can exist in the document, so nothing else can be pasted or typed into it.
+* Storage stays the markdown subset of `rich-text.ts`; this module only converts at the edges.
+*/
+const richSchema = createSchema(false);
+/** The same, plus h2 and h3, for the fields that ask for headings (`data-rich-headings` on the field). */
+const headingRichSchema = createSchema(true);
+function kitOf(headings) {
+	const schema = headings ? headingRichSchema : richSchema;
+	return {
+		schema,
+		parser: DOMParser.fromSchema(schema),
+		serializer: DOMSerializer.fromSchema(schema),
+		options: { headings }
+	};
+}
+const plainKit = kitOf(false);
+const headingKit = kitOf(true);
+/** The kit a document or a state belongs to. */
+function kitFor(schema) {
+	return schema === headingRichSchema ? headingKit : plainKit;
+}
 function container(html) {
 	const node = document.createElement("div");
 	node.innerHTML = html;
 	return node;
 }
 /** Markdown → document, through the same renderer the page uses, so what you edit is what the page shows. */
-function docFromMarkdown(markdown) {
-	return parser.parse(container(renderRichText(markdown)));
+function docFromMarkdown(markdown, headings = false) {
+	const kit = headings ? headingKit : plainKit;
+	return kit.parser.parse(container(renderRichText(markdown, kit.options)));
 }
 /** Document → markdown, through the same serializer the draft has always used. */
 function markdownFromDoc(doc) {
+	const kit = kitFor(doc.type.schema);
 	const holder = document.createElement("div");
-	holder.append(serializer.serializeFragment(doc.content));
-	return markdownFromHtml(holder.innerHTML);
+	holder.append(kit.serializer.serializeFragment(doc.content));
+	return markdownFromHtml(holder.innerHTML, kit.options);
 }
-function sliceFromMarkdown(markdown) {
-	return parser.parseSlice(container(renderRichText(markdown)));
+function sliceFromMarkdown(markdown, kit) {
+	return kit.parser.parseSlice(container(renderRichText(markdown, kit.options)));
 }
 /** Document position of the `offset`-th character of the text; breaks and block edges count for nothing. */
 function posAtTextOffset(doc, offset) {
@@ -12954,8 +13044,10 @@ function posAtTextOffset(doc, offset) {
 	});
 	return found >= 0 ? found : end;
 }
+/** A line break. A heading is one line of markdown, so Shift-Enter does nothing there. */
 const insertLineBreak = (state, dispatch) => {
-	dispatch?.(state.tr.replaceSelectionWith(hard_break.create()).scrollIntoView());
+	if (state.selection.$from.parent.type.name === "heading") return true;
+	dispatch?.(state.tr.replaceSelectionWith(need(state.schema.nodes.hard_break).create()).scrollIntoView());
 	return true;
 };
 /**
@@ -12964,6 +13056,8 @@ const insertLineBreak = (state, dispatch) => {
 */
 function wrapEachInList(kind) {
 	return (state, dispatch) => {
+		const { paragraph, list_item } = state.schema.nodes;
+		if (!paragraph || !list_item) return false;
 		const range = state.selection.$from.blockRange(state.selection.$to);
 		if (!range) return false;
 		const paragraphs = [];
@@ -12977,6 +13071,7 @@ function wrapEachInList(kind) {
 }
 /** The lists the selection touches (lists never nest). Works for a caret, a range and select-all alike. */
 function listsIn(state) {
+	const { bullet_list, ordered_list } = state.schema.nodes;
 	const { from, to } = state.selection;
 	const found = [];
 	state.doc.nodesBetween(from, to, (node, pos) => {
@@ -13022,8 +13117,10 @@ function unwrapSelected(lists, from, to) {
 	};
 }
 /** Toggle a list: unwrap the same kind, convert the other kind, otherwise wrap. */
-function toggleList(kind) {
+function toggleList(name) {
 	return (state, dispatch) => {
+		const kind = state.schema.nodes[name];
+		if (!kind) return false;
 		const lists = listsIn(state);
 		if (lists.length === 0) return wrapInList(kind)(state, dispatch) || wrapEachInList(kind)(state, dispatch);
 		if (lists.every((list) => list.node.type === kind)) return unwrapSelected(lists, state.selection.from, state.selection.to)(state, dispatch);
@@ -13039,39 +13136,62 @@ function toggleList(kind) {
 function setLink(href) {
 	return (state, dispatch) => {
 		const { from, to, empty } = state.selection;
-		if (empty || !isSafeHref(href)) return false;
+		const link = state.schema.marks.link;
+		if (empty || !link || !isSafeHref(href)) return false;
 		dispatch?.(state.tr.addMark(from, to, link.create({ href })));
 		return true;
 	};
 }
-/** The editing command behind a toolbar button. `url` is for `link`. */
+/** Make the selected block a heading of this level, or a paragraph again when it already is one. */
+function toggleHeading(level) {
+	return (state, dispatch) => {
+		const { heading, paragraph } = state.schema.nodes;
+		if (!heading || !paragraph) return false;
+		const parent = state.selection.$from.parent;
+		return (parent.type === heading && parent.attrs.level === level ? setBlockType(paragraph) : setBlockType(heading, { level }))(state, dispatch);
+	};
+}
+/** The editing command behind a toolbar button. `url` is for `link`. It reads the node and mark types from the state it runs on. */
 function commandFor(command, url = "") {
 	switch (command) {
-		case "bold": return toggleMark(strong);
-		case "italic": return toggleMark(em);
-		case "code": return toggleMark(code);
-		case "bulletList": return toggleList(bullet_list);
-		case "orderedList": return toggleList(ordered_list);
+		case "bold": return (state, dispatch) => toggleMark(need(state.schema.marks.strong))(state, dispatch);
+		case "italic": return (state, dispatch) => toggleMark(need(state.schema.marks.em))(state, dispatch);
+		case "code": return (state, dispatch) => toggleMark(need(state.schema.marks.code))(state, dispatch);
+		case "bulletList": return toggleList("bullet_list");
+		case "orderedList": return toggleList("ordered_list");
 		case "link": return setLink(url);
+		case "heading2": return toggleHeading(2);
+		case "heading3": return toggleHeading(3);
 	}
 }
+/** Enter at the end of a heading starts a paragraph, not another heading. In the middle it splits the heading. */
+const enterInHeading = (state, dispatch) => {
+	const { heading, paragraph } = state.schema.nodes;
+	if (!heading || !paragraph || state.selection.$from.parent.type !== heading) return false;
+	return splitBlockAs((_node, atEnd) => atEnd ? { type: paragraph } : null)(state, dispatch);
+};
 /** Enter is a line break, a new item inside a list, and leaves the list from an empty item. */
-const enterCommand = chainCommands(splitListItem(list_item), liftEmptyBlock, insertLineBreak);
+const enterCommand = (state, dispatch) => chainCommands(enterInHeading, splitListItem(need(state.schema.nodes.list_item)), liftEmptyBlock, insertLineBreak)(state, dispatch);
 function activeOf(state) {
 	const { $from, from, to, empty } = state.selection;
-	const marked = (type) => empty ? type.isInSet(state.storedMarks ?? $from.marks()) !== void 0 : state.doc.rangeHasMark(from, to, type);
+	const { strong, em, code, link } = state.schema.marks;
+	const { bullet_list, ordered_list, heading } = state.schema.nodes;
+	const marked = (type) => type === void 0 ? false : empty ? type.isInSet(state.storedMarks ?? $from.marks()) !== void 0 : state.doc.rangeHasMark(from, to, type);
 	const lists = listsIn(state);
+	const level = heading !== void 0 && $from.parent.type === heading ? $from.parent.attrs.level : 0;
 	return {
 		bold: marked(strong),
 		italic: marked(em),
 		code: marked(code),
 		link: marked(link),
 		bulletList: lists.length > 0 && lists.every((item) => item.node.type === bullet_list),
-		orderedList: lists.length > 0 && lists.every((item) => item.node.type === ordered_list)
+		orderedList: lists.length > 0 && lists.every((item) => item.node.type === ordered_list),
+		heading: level === 2 || level === 3 ? level : 0,
+		headings: heading !== void 0
 	};
 }
 function sameActive(a, b) {
-	return a.bold === b.bold && a.italic === b.italic && a.code === b.code && a.link === b.link && a.bulletList === b.bulletList && a.orderedList === b.orderedList;
+	return a.bold === b.bold && a.italic === b.italic && a.code === b.code && a.link === b.link && a.bulletList === b.bulletList && a.orderedList === b.orderedList && a.heading === b.heading && a.headings === b.headings;
 }
 const mounted = /* @__PURE__ */ new WeakMap();
 /** The editor mounted on `field`, if any. */
@@ -13082,16 +13202,18 @@ function richEditorOf(field) {
 * Make `field` a ProseMirror editor over `markdown`. The field element itself becomes the editable surface, so the
 * page's own typography applies. Focus leaving the field (to anywhere but the editor's panels) ends the edit.
 */
-function mountRichEditor(field, { markdown, selection, onChange, onActive, keepsEdit, onDestroy }) {
+function mountRichEditor(field, { markdown, headings = false, selection, onChange, onActive, keepsEdit, onDestroy }) {
 	const existing = mounted.get(field);
 	if (existing) return existing;
+	const kit = headings ? headingKit : plainKit;
+	const { strong, em } = kit.schema.marks;
 	const stateFor = (source) => EditorState.create({
-		doc: docFromMarkdown(source),
+		doc: docFromMarkdown(source, headings),
 		plugins: [
 			history(),
 			keymap({
-				"Mod-b": toggleMark(strong),
-				"Mod-i": toggleMark(em),
+				"Mod-b": toggleMark(need(strong)),
+				"Mod-i": toggleMark(need(em)),
 				"Mod-z": undo,
 				"Mod-y": redo,
 				"Shift-Mod-z": redo,
@@ -13120,8 +13242,8 @@ function mountRichEditor(field, { markdown, selection, onChange, onActive, keeps
 			lastMarkdown = markdownFromDoc(next.doc);
 			onChange(lastMarkdown);
 		},
-		transformPastedHTML: (html) => sanitizeRichHtml(html),
-		clipboardTextParser: (text) => sliceFromMarkdown(stripPlainRich(text))
+		transformPastedHTML: (html) => sanitizeRichHtml(html, kit.options),
+		clipboardTextParser: (text) => sliceFromMarkdown(stripPlainRich(text, kit.options), kit)
 	});
 	if (selection) {
 		const { doc } = view.state;
@@ -13156,7 +13278,7 @@ function mountRichEditor(field, { markdown, selection, onChange, onActive, keeps
 			field.removeAttribute("contenteditable");
 			field.removeAttribute("translate");
 			if (!field.getAttribute("class")) field.removeAttribute("class");
-			field.innerHTML = renderRichText(lastMarkdown);
+			field.innerHTML = renderRichText(lastMarkdown, kit.options);
 			onDestroy?.();
 		}
 	};
@@ -13321,7 +13443,7 @@ function paintPage(draft) {
 		if (isRichField(raw, node.getAttribute("data-field-kind"))) {
 			const editing = richEditorOf(node);
 			if (editing) editing.setMarkdown(value);
-			else node.innerHTML = renderRichText(value);
+			else node.innerHTML = renderRichText(value, { headings: node.getAttribute("data-rich-headings") === "true" });
 		} else if (isHeadingField(path)) node.innerHTML = renderMarkedHtml(value, marksAt(draft, path));
 		else node.textContent = value;
 	}
@@ -13447,10 +13569,18 @@ function isOptionalPath(content, path) {
 	if (parts.length === 3 && arrayKey !== void 0 && key !== void 0 && /^\d+$/.test(index ?? "")) return content.items?.[arrayKey]?.includes(key) ?? false;
 	return false;
 }
-/** Section content keys in the order the form lists them: defaults first, then any other optional prop. */
+/**
+* Section content keys in the order the form lists them: defaults first. An optional prop the defaults leave out sits
+* right after the optional prop listed before it (`body` after `heading`), or at the end when none of those exist.
+*/
 function orderContentKeys(present, optional, defaultKeys) {
 	const keys = [.../* @__PURE__ */ new Set([...present, ...optional])];
-	const rank = [...defaultKeys, ...optional];
+	const rank = [...defaultKeys];
+	optional.forEach((key, position) => {
+		if (rank.includes(key)) return;
+		const before = optional.slice(0, position).reverse().find((name) => rank.includes(name));
+		rank.splice(before === void 0 ? rank.length : rank.indexOf(before) + 1, 0, key);
+	});
 	const at = (key) => {
 		const found = rank.indexOf(key);
 		return found === -1 ? Number.MAX_SAFE_INTEGER : found;
@@ -13593,6 +13723,7 @@ function attachPageEditing(editor) {
 		let stop = () => {};
 		const handle = mountRichEditor(field, {
 			markdown: read(),
+			headings: field.getAttribute("data-rich-headings") === "true",
 			selection,
 			onChange: (markdown) => edits.writeField(pathOf(field), markdown),
 			keepsEdit: isInEditor,
@@ -14186,7 +14317,7 @@ function attachShortcuts(editor) {
 			return;
 		}
 		if (ui.previewing.peek()) {
-			if (event.key === "Escape") {
+			if (event.key === "Escape" && !document.querySelector("dialog[open]")) {
 				event.preventDefault();
 				chrome.exitPreview();
 			}
@@ -14450,8 +14581,10 @@ function createChrome(ui) {
 		for (const node of document.querySelectorAll("[data-field][contenteditable]")) node.removeAttribute("contenteditable");
 		if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
 		document.documentElement.style.cursor = "";
+		document.documentElement.setAttribute("data-bearminion-preview", "");
 	}
 	function exitPreview() {
+		document.documentElement.removeAttribute("data-bearminion-preview");
 		writeStorage(session, PREVIEW_KEY, null);
 		n(() => {
 			ui.previewing.value = false;
@@ -14568,6 +14701,15 @@ function uploadImage(file) {
 		body
 	});
 }
+const getVideos = () => request("/videos");
+function uploadVideo(file) {
+	const body = new FormData();
+	body.set("file", file);
+	return request("/videos", {
+		method: "POST",
+		body
+	});
+}
 const getGit = () => request("/git");
 const commit = (body) => request("/git/commit", sendJson("POST", body));
 /** Saved versions of the site (`scope` site) or of one page. */
@@ -16614,7 +16756,7 @@ const FOCUSABLE = "button:not(:disabled), input:not(:disabled), [tabindex=\"0\"]
 * 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 }) {
+function ImageField({ label, path, value, images, withAlt = true, layout = true, hideable = false, captionable = false, onChange, onUploaded, onDeleted }) {
 	const [open, setOpen] = useState(false);
 	const [error, setError] = useState("");
 	const [over, setOver] = useState(false);
@@ -16626,18 +16768,24 @@ function ImageField({ label, path, value, images, withAlt = true, layout = true,
 	const position = isImagePosition(value?.position) ? value.position : DEFAULT_IMAGE_POSITION;
 	const showLayout = layout && withAlt;
 	const hidden = hideable && value?.hidden === true;
+	const caption = typeof value?.caption === "string" ? value.caption : "";
 	const current = {
 		src,
 		alt,
+		...caption ? { caption } : {},
 		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 emit = (patch) => {
+		const next = {
+			...current,
+			...patch
+		};
+		if (next.caption === "") delete next.caption;
+		onChange(compact(next));
+	};
 	const empty = src === "" || src === "placeholder";
 	const shown = previewSrc(src);
 	const missing = useMissingFile(empty ? "" : src);
@@ -16704,15 +16852,9 @@ function ImageField({ label, path, value, images, withAlt = true, layout = true,
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				class: "bm-label",
-				children: /* @__PURE__ */ jsxs("span", {
-					class: "bm-label-row",
-					children: [/* @__PURE__ */ jsx("span", {
-						class: "bm-label-text",
-						children: label
-					}), withAlt && !empty && /* @__PURE__ */ jsx("span", {
-						class: "bm-meta-tag",
-						children: "alt required"
-					})]
+				children: /* @__PURE__ */ jsx("span", {
+					class: "bm-label-text",
+					children: label
 				})
 			}),
 			hideable && /* @__PURE__ */ jsxs("label", {
@@ -16840,12 +16982,46 @@ function ImageField({ label, path, value, images, withAlt = true, layout = true,
 						})]
 					})]
 				})]
-			}), withAlt && /* @__PURE__ */ jsx("input", {
-				class: "bm-alt",
-				"aria-label": "Alt",
-				placeholder: "Alt text: describe the image",
-				value: alt,
-				onInput: (event) => emit({ alt: event.currentTarget.value })
+			}), withAlt && /* @__PURE__ */ jsxs("div", {
+				class: "bm-stack bm-stack-tight",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						class: "bm-label bm-label-row",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("span", {
+							class: "bm-label-text",
+							children: "Alt text"
+						}), /* @__PURE__ */ jsx("span", {
+							class: "bm-meta-tag",
+							children: "required"
+						})]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						class: "bm-alt",
+						"aria-label": "Alt",
+						placeholder: "Describe the image",
+						value: alt,
+						onInput: (event) => emit({ alt: event.currentTarget.value })
+					}),
+					captionable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+						class: "bm-label bm-label-row",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ jsx("span", {
+							class: "bm-label-text",
+							children: "Caption"
+						}), /* @__PURE__ */ jsx("span", {
+							class: "bm-meta-tag",
+							children: "optional, shown when opened large"
+						})]
+					}), /* @__PURE__ */ jsx("textarea", {
+						class: "bm-alt",
+						rows: 2,
+						"aria-label": "Caption",
+						placeholder: "Shown under the picture. Empty uses the alt text.",
+						value: caption,
+						onInput: (event) => emit({ caption: event.currentTarget.value })
+					})] })
+				]
 			})] }),
 			missing && /* @__PURE__ */ jsxs("p", {
 				class: "bm-error",
@@ -17279,6 +17455,126 @@ function ChoiceField({ label, value, choices, icons, path, segmented = true, onC
 	});
 }
 //#endregion
+//#region src/ui/forms/video-source.tsx
+/** What a pasted video link is, or why it will not play. Empty for no link. */
+function describeVideoLink(value) {
+	const link = value.trim();
+	if (link === "") return null;
+	const source = parseMediaSource(link);
+	if (source?.kind === "youtube") return {
+		ok: true,
+		text: "YouTube video. It loads nothing until the visitor presses play."
+	};
+	if (source?.kind === "vimeo") return {
+		ok: true,
+		text: "Vimeo video. It loads nothing until the visitor presses play."
+	};
+	if (source?.kind === "file") return {
+		ok: true,
+		text: "Video file."
+	};
+	if (/^https?:\/\//i.test(link)) return {
+		ok: false,
+		text: "That is a page link, not a video. Use a YouTube or Vimeo link, or a link to a file ending in .mp4 or .webm."
+	};
+	return {
+		ok: false,
+		text: "Use a YouTube or Vimeo link, a link to a video file ending in .mp4 or .webm, or a path in public/ such as /videos/demo.webm."
+	};
+}
+const megabytes = (bytes) => `${(bytes / 1048576).toFixed(bytes < 10485760 ? 1 : 0)} MB`;
+/** Under a video link field: says what the link is, uploads a video file, and picks one already uploaded. */
+function VideoSourceTools({ value, onPick }) {
+	const input = useRef(null);
+	const [library, setLibrary] = useState([]);
+	const [busy, setBusy] = useState(false);
+	const [note, setNote] = useState("");
+	const [error, setError] = useState("");
+	useEffect(() => {
+		let live = true;
+		getVideos().then((result) => {
+			if (live && result.ok) setLibrary(result.value.videos);
+		});
+		return () => {
+			live = false;
+		};
+	}, []);
+	async function upload(file) {
+		if (!file) return;
+		setBusy(true);
+		setError("");
+		setNote("");
+		const result = await uploadVideo(file);
+		setBusy(false);
+		if (!result.ok) {
+			setError(result.status === 0 ? "Upload failed." : result.message);
+			return;
+		}
+		setLibrary((current) => [...current.filter((item) => item.url !== result.value.url), result.value]);
+		onPick(result.value.url);
+		if ((result.value.bytes ?? 0) > 10485760) setNote(`${megabytes(result.value.bytes ?? 0)}: it is slow to load on every visit. YouTube or Vimeo is kinder to visitors.`);
+	}
+	const detected = describeVideoLink(value);
+	return /* @__PURE__ */ jsxs("div", {
+		class: "bm-stack bm-stack-tight",
+		children: [
+			detected ? /* @__PURE__ */ jsx("span", {
+				class: detected.ok ? "bm-hint" : "bm-error",
+				role: detected.ok ? void 0 : "alert",
+				children: detected.text
+			}) : /* @__PURE__ */ jsx("span", {
+				class: "bm-hint",
+				children: "Paste a YouTube or Vimeo link as it is, or upload a video file."
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: input,
+				type: "file",
+				accept: "video/mp4,video/webm,video/quicktime,video/ogg",
+				hidden: true,
+				onChange: (event) => {
+					const file = event.currentTarget.files?.[0];
+					event.currentTarget.value = "";
+					upload(file);
+				}
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "bm-add bm-add-row",
+				disabled: busy,
+				onClick: () => input.current?.click(),
+				children: busy ? "Uploading…" : "Upload a video file"
+			}),
+			library.length > 0 && /* @__PURE__ */ jsxs("label", {
+				class: "bm-field",
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "bm-label",
+					children: "Uploaded videos"
+				}), /* @__PURE__ */ jsxs("select", {
+					value: "",
+					"aria-label": "Uploaded videos",
+					onChange: (event) => event.currentTarget.value && onPick(event.currentTarget.value),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "Choose one…"
+					}), library.map((video) => /* @__PURE__ */ jsxs("option", {
+						value: video.url,
+						children: [video.filename, video.bytes ? ` (${megabytes(video.bytes)})` : ""]
+					}, video.url))]
+				})]
+			}),
+			note && /* @__PURE__ */ jsx("span", {
+				class: "bm-hint",
+				children: note
+			}),
+			error && /* @__PURE__ */ jsx("span", {
+				class: "bm-error",
+				role: "alert",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
 //#region src/ui/forms/fields.tsx
 /** `yearlyDiscount` and `cta_label` read as "Yearly discount" and "Cta label". Array item numbers stay numbers. */
 function humanize(key) {
@@ -17346,7 +17642,7 @@ function ValueEditor({ label: rawLabel, value, path, rule, variant, sample, imag
 	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
 		const rich = typeof value === "string" && isRichField(path, null);
 		const heading = isHeadingField(path);
-		return /* @__PURE__ */ jsx(OptionControl, {
+		const control = /* @__PURE__ */ jsx(OptionControl, {
 			option: {
 				name: path,
 				label,
@@ -17360,122 +17656,39 @@ function ValueEditor({ label: rawLabel, value, path, rule, variant, sample, imag
 			value,
 			onChange: (next) => onField(path, next)
 		});
+		if (!/(^|\.)props\.video$/.test(path)) return control;
+		return /* @__PURE__ */ jsxs("div", {
+			class: "bm-stack bm-stack-tight",
+			children: [control, /* @__PURE__ */ jsx(VideoSourceTools, {
+				value: typeof value === "string" ? value : "",
+				onPick: (url) => onField(path, url)
+			})]
+		});
 	}
 	if (isImageRecord(value)) return /* @__PURE__ */ jsx(ImageField, {
 		label,
 		path,
 		layout: !/(^|\.)logos\./.test(path),
 		hideable: path.startsWith("sections.") && !/(^|\.)logos\./.test(path),
+		captionable: isOptionalPath(optionalSpec, `${path}.caption`),
 		value,
 		images,
 		onChange: (next) => onField(path, next),
 		onUploaded,
 		onDeleted
 	});
-	if (Array.isArray(value)) {
-		const allowAdd = canAddItems(value.length, rule, variant);
-		const allowRemove = canRemoveItems(value.length, rule, variant);
-		return /* @__PURE__ */ jsxs("div", {
-			class: "bm-stack bm-stack-tight",
-			children: [/* @__PURE__ */ jsxs("span", {
-				class: "bm-label-row bm-label",
-				children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsxs("span", {
-					class: "bm-meta-tag",
-					children: [value.length, rule?.recommended !== void 0 ? `, recommended ${rule.recommended}` : ""]
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				class: "bm-array",
-				children: [value.map((item, index) => /* @__PURE__ */ jsxs("details", {
-					class: "bm-array-item",
-					children: [/* @__PURE__ */ jsxs("summary", { children: [
-						/* @__PURE__ */ jsx("span", {
-							class: "bm-grip",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ jsx(Icon, {
-								name: "grip",
-								size: 12
-							})
-						}),
-						/* @__PURE__ */ jsx("span", {
-							class: "bm-array-summary",
-							children: itemSummary(item) || `${label} ${index + 1}`
-						}),
-						/* @__PURE__ */ jsx("span", {
-							class: "bm-chevron",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ jsx(Icon, {
-								name: "chevron-right",
-								size: 14
-							})
-						})
-					] }), /* @__PURE__ */ jsxs("div", {
-						class: "bm-array-body",
-						children: [/* @__PURE__ */ jsx(ValueEditor, {
-							label: `${index + 1}`,
-							value: item,
-							path: `${path}.${index}`,
-							rule: void 0,
-							variant,
-							sample,
-							images,
-							onField,
-							onUploaded,
-							onDeleted
-						}), /* @__PURE__ */ jsxs("div", {
-							class: "bm-row bm-row-end",
-							children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									class: "bm-icon-btn",
-									"aria-label": "Move item up",
-									title: "Move up",
-									disabled: index === 0,
-									onClick: () => onField(path, reorderList(value, index, index - 1)),
-									children: /* @__PURE__ */ jsx(Icon, {
-										name: "arrow-up",
-										size: 14
-									})
-								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									class: "bm-icon-btn",
-									"aria-label": "Move item down",
-									title: "Move down",
-									disabled: index === value.length - 1,
-									onClick: () => onField(path, reorderList(value, index, index + 1)),
-									children: /* @__PURE__ */ jsx(Icon, {
-										name: "arrow-down",
-										size: 14
-									})
-								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									class: "bm-icon-btn bm-danger",
-									"aria-label": "Remove item",
-									title: "Remove",
-									disabled: !allowRemove,
-									onClick: () => onField(path, value.filter((_, itemIndex) => itemIndex !== index)),
-									children: /* @__PURE__ */ jsx(Icon, {
-										name: "trash",
-										size: 14
-									})
-								})
-							]
-						})]
-					})]
-				}, `${path}.${index}`)), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					class: "bm-add bm-add-row",
-					disabled: !allowAdd,
-					onClick: () => {
-						const next = sample === void 0 ? "New" : structuredClone(sample);
-						onField(path, [...value, next]);
-					},
-					children: "+ Add item"
-				})]
-			})]
-		});
-	}
+	if (Array.isArray(value)) return /* @__PURE__ */ jsx(ArrayEditor, {
+		label,
+		value,
+		path,
+		rule,
+		variant,
+		sample,
+		images,
+		onField,
+		onUploaded,
+		onDeleted
+	});
 	if (isLinkRecord(value)) {
 		const record = value;
 		return /* @__PURE__ */ jsxs("div", {
@@ -17708,6 +17921,216 @@ function orderItemKeys(item, path, content) {
 	const dropped = parts.length === 2 && /^\d+$/.test(parts[1] ?? "") ? content?.items?.[parts[0] ?? ""] ?? [] : [];
 	return orderContentKeys(Object.keys(item), dropped, Object.keys(item));
 }
+let itemSeed = 0;
+/** Ids that follow each list item when it moves, so its open card, focus and inputs move with it. */
+function useItemIds(length) {
+	const ids = useRef([]);
+	while (ids.current.length < length) ids.current.push(`item-${++itemSeed}`);
+	if (ids.current.length > length) ids.current.length = length;
+	return ids;
+}
+/** Where a drop lands: the index the dragged item ends up at, or null when it would not move. */
+function dropTarget(drag) {
+	const slot = drag.mode === "before" ? drag.over : drag.over + 1;
+	const to = slot > drag.from ? slot - 1 : slot;
+	return to === drag.from ? null : to;
+}
+/** A list of items. Each card keeps its identity when it moves, so a card you moved stays open and you can move it again. */
+function ArrayEditor({ label, value, path, rule, variant, sample, images, onField, onUploaded, onDeleted }) {
+	const allowAdd = canAddItems(value.length, rule, variant);
+	const allowRemove = canRemoveItems(value.length, rule, variant);
+	const ids = useItemIds(value.length);
+	const list = useRef(null);
+	const [drag, setDrag] = useState(null);
+	function move(from, to, refocus) {
+		if (from === to || to < 0 || to >= value.length) return;
+		const [id] = ids.current.splice(from, 1);
+		if (id === void 0) return;
+		ids.current.splice(to, 0, id);
+		onField(path, reorderList(value, from, to));
+		if (!refocus) return;
+		const wanted = id;
+		requestAnimationFrame(() => requestAnimationFrame(() => {
+			const card = list.current?.querySelector(`[data-item-id="${wanted}"]`);
+			const first = card?.querySelector(`[data-move="${refocus}"]`);
+			const other = card?.querySelector(`[data-move="${refocus === "up" ? "down" : "up"}"]`);
+			(first && !first.disabled ? first : other)?.focus();
+		}));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		class: "bm-stack bm-stack-tight",
+		children: [/* @__PURE__ */ jsxs("span", {
+			class: "bm-label-row bm-label",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsxs("span", {
+				class: "bm-meta-tag",
+				children: [value.length, rule?.recommended !== void 0 ? `, recommended ${rule.recommended}` : ""]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "bm-array",
+			ref: list,
+			children: [value.map((item, index) => {
+				const id = ids.current[index] ?? `${path}.${index}`;
+				const mode = (drag !== null && drag.over === index ? dropTarget(drag) : null) === null || drag === null ? null : drag.mode;
+				const rowClass = [
+					"bm-array-row",
+					drag?.from === index ? "bm-dragging" : "",
+					mode === "before" ? "bm-drop-before" : "",
+					mode === "after" ? "bm-drop-after" : ""
+				].filter(Boolean).join(" ");
+				return /* @__PURE__ */ jsx("div", {
+					class: rowClass,
+					"data-item-id": id,
+					"data-drop-hint": mode ? "Move here" : void 0,
+					onDragOver: (event) => {
+						if (!drag) return;
+						event.preventDefault();
+						event.stopPropagation();
+						if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+						const box = event.currentTarget.getBoundingClientRect();
+						const next = event.clientY < box.top + box.height / 2 ? "before" : "after";
+						if (drag.over !== index || drag.mode !== next) setDrag({
+							...drag,
+							over: index,
+							mode: next
+						});
+					},
+					onDragLeave: (event) => {
+						const next = event.relatedTarget;
+						if (!drag || next instanceof Node && event.currentTarget.contains(next)) return;
+						if (drag.over === index) setDrag({
+							...drag,
+							over: drag.from
+						});
+					},
+					onDrop: (event) => {
+						if (!drag) return;
+						event.preventDefault();
+						event.stopPropagation();
+						const to = dropTarget({
+							...drag,
+							over: index,
+							mode: drag.over === index ? drag.mode : "before"
+						});
+						const from = drag.from;
+						setDrag(null);
+						if (to !== null) move(from, to);
+					},
+					children: /* @__PURE__ */ jsxs("details", {
+						class: "bm-array-item",
+						children: [/* @__PURE__ */ jsxs("summary", { children: [
+							/* @__PURE__ */ jsx("span", {
+								class: "bm-grip bm-array-grip",
+								draggable: true,
+								title: "Drag to reorder",
+								"aria-hidden": "true",
+								onClick: (event) => event.preventDefault(),
+								onDragStart: (event) => {
+									event.stopPropagation();
+									const row = event.currentTarget.closest(".bm-array-row");
+									if (event.dataTransfer) {
+										event.dataTransfer.effectAllowed = "move";
+										event.dataTransfer.setData("text/plain", id);
+										if (row) event.dataTransfer.setDragImage(row, 16, 16);
+									}
+									setDrag({
+										from: index,
+										over: index,
+										mode: "before"
+									});
+								},
+								onDragEnd: () => setDrag(null),
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "grip",
+									size: 12
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								class: "bm-array-summary",
+								children: itemSummary(item) || `${label} ${index + 1}`
+							}),
+							/* @__PURE__ */ jsx("span", {
+								class: "bm-chevron",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "chevron-right",
+									size: 14
+								})
+							})
+						] }), /* @__PURE__ */ jsxs("div", {
+							class: "bm-array-body",
+							children: [/* @__PURE__ */ jsx(ValueEditor, {
+								label: `${index + 1}`,
+								value: item,
+								path: `${path}.${index}`,
+								rule: void 0,
+								variant,
+								sample,
+								images,
+								onField,
+								onUploaded,
+								onDeleted
+							}), /* @__PURE__ */ jsxs("div", {
+								class: "bm-row bm-row-end",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										class: "bm-icon-btn",
+										"aria-label": "Move item up",
+										title: "Move up",
+										"data-move": "up",
+										disabled: index === 0,
+										onClick: () => move(index, index - 1, "up"),
+										children: /* @__PURE__ */ jsx(Icon, {
+											name: "arrow-up",
+											size: 14
+										})
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										class: "bm-icon-btn",
+										"aria-label": "Move item down",
+										title: "Move down",
+										"data-move": "down",
+										disabled: index === value.length - 1,
+										onClick: () => move(index, index + 1, "down"),
+										children: /* @__PURE__ */ jsx(Icon, {
+											name: "arrow-down",
+											size: 14
+										})
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										class: "bm-icon-btn bm-danger",
+										"aria-label": "Remove item",
+										title: "Remove",
+										disabled: !allowRemove,
+										onClick: () => {
+											ids.current.splice(index, 1);
+											onField(path, value.filter((_, itemIndex) => itemIndex !== index));
+										},
+										children: /* @__PURE__ */ jsx(Icon, {
+											name: "trash",
+											size: 14
+										})
+									})
+								]
+							})]
+						})]
+					})
+				}, id);
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "bm-add bm-add-row",
+				disabled: !allowAdd,
+				onClick: () => {
+					const next = sample === void 0 ? "New" : structuredClone(sample);
+					onField(path, [...value, next]);
+				},
+				children: "+ Add item"
+			})]
+		})]
+	});
+}
 //#endregion
 //#region src/ui/dialogs/consent-dialog.tsx
 const KEYS = [
@@ -18956,6 +19379,30 @@ function RichTextBar() {
 		class: "bm-rich",
 		style: `top:${position.top}px;left:${position.left}px;`,
 		children: [
+			active?.headings && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "bm-fmt-heading",
+					"aria-label": "Heading",
+					title: "Heading",
+					"aria-pressed": active.heading === 2,
+					onMouseDown: run("heading2"),
+					children: "H2"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "bm-fmt-heading",
+					"aria-label": "Subheading",
+					title: "Subheading",
+					"aria-pressed": active.heading === 3,
+					onMouseDown: run("heading3"),
+					children: "H3"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "bm-sep",
+					"aria-hidden": "true"
+				})
+			] }),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				class: "bm-fmt-bold",
@@ -20141,7 +20588,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, .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";
+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-row {\n  position: relative;\n}\n.bm-array-grip {\n  cursor: grab;\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-heading {\n  font-weight: 700;\n  font-size: 12px;\n  letter-spacing: -0.02em;\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) {