bearminion 1.0.1 → 1.2.0

package/dist/ui/mount.js

@@ -1,6 +1,6 @@
+import { a as sectionFieldKey, i as isPropShown, t as defaultTheme } from "../theme-q19C8cIc.js";
 import { A as withImageLayout, D as IMAGE_POSITIONS, E as IMAGE_FITS, O as isImageFit, T as DEFAULT_IMAGE_POSITION, i as isSystemPage, k as isImagePosition, w as DEFAULT_IMAGE_FIT } from "../page-C0l3CIuz.js";
 import { applyTextMark, fontMarks, marksFromEmphasis, reconcileMarks, renderMarkedHtml } from "../marks.js";
-import { t as defaultTheme } from "../theme-DZkec408.js";
 import { c as hasThemeColors, d as tokenToHex, i as contrastChecks, n as HEX_COLOR, o as derivePalette, r as OVERRIDE_TOKENS, s as hasOverrides, t as DEFAULT_BRAND, u as themeCss } from "../theme-colors-BneXpLYG.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";
@@ -788,7 +788,7 @@ function isMultilineField(path) {
 	return multiline.test(path);
 }
 function isRichField(path, kind) {
-	return kind === "rich" || /(?:^|\.)(?:body|intro|sub|description|quote|note|thanks|a)$/.test(path);
+	return kind === "rich" || /(?:^|\.)(?:body|intro|sub|description|quote|note|thanks|a)$/.test(path) || /(?:^|\.)points\.\d+$/.test(path);
 }
 function nextSectionId(sections, type) {
 	const stem = type.replace(/[^A-Za-z0-9_-]+/g, "") || "section";
@@ -7941,7 +7941,7 @@ for (var i = 65; i <= 90; i++) {
 	base[i] = String.fromCharCode(i + 32);
 	shift[i] = String.fromCharCode(i);
 }
-for (var code in base) if (!shift.hasOwnProperty(code)) shift[code] = base[code];
+for (var code$1 in base) if (!shift.hasOwnProperty(code$1)) shift[code$1] = base[code$1];
 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";
@@ -12827,7 +12827,7 @@ function checkStateComponent(plugin) {
 //#region src/ui/rich-editor.ts
 /**
 * The rich-text subset as a ProseMirror schema: paragraphs, line breaks, flat bulleted and numbered lists, bold,
-* italic and links. Nothing else can exist in the document, so nothing else can be pasted or typed into it.
+* 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({
@@ -12875,6 +12875,12 @@ const richSchema = new Schema({
 			parseDOM: [{ tag: "em" }, { tag: "i" }],
 			toDOM: () => ["em", 0]
 		},
+		code: {
+			excludes: "_",
+			inclusive: false,
+			parseDOM: [{ tag: "code" }],
+			toDOM: () => ["code", 0]
+		},
 		link: {
 			attrs: {
 				href: {},
@@ -12908,7 +12914,7 @@ const richSchema = new Schema({
 	}
 });
 const { paragraph, bullet_list, ordered_list, list_item, hard_break } = richSchema.nodes;
-const { strong, em, link } = richSchema.marks;
+const { strong, em, code, link } = richSchema.marks;
 const parser = DOMParser.fromSchema(richSchema);
 const serializer = DOMSerializer.fromSchema(richSchema);
 function container(html) {
@@ -13043,6 +13049,7 @@ 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 "link": return setLink(url);
@@ -13057,13 +13064,14 @@ function activeOf(state) {
 	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)
 	};
 }
 function sameActive(a, b) {
-	return a.bold === b.bold && a.italic === b.italic && 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;
 }
 const mounted = /* @__PURE__ */ new WeakMap();
 /** The editor mounted on `field`, if any. */
@@ -14524,6 +14532,29 @@ const SITE_PREVIEW_PATH = /^(name|nameMarks|brandLogo|header\.(variant|tone|stic
 function affectsSitePreview(path) {
 	return SITE_PREVIEW_PATH.test(path);
 }
+/** What identifies a script: its URL, or its text when it is inline. */
+function scriptKey(script) {
+	return script.src || `inline:${script.textContent ?? ""}`;
+}
+function scriptsOnPage() {
+	return new Set(Array.from(document.scripts, scriptKey));
+}
+/**
+* Scripts set through `innerHTML` never run. A section type that was not on the page until now (one just added, or
+* a field that now renders a component) brings scripts the page has not loaded, so those are added again as live
+* elements. Scripts the page already ran are left alone: their code listens for `bearminion:preview` instead.
+*/
+function runNewScripts(root, ran) {
+	for (const inert of root.querySelectorAll("script")) {
+		const key = scriptKey(inert);
+		if (ran.has(key)) continue;
+		ran.add(key);
+		const live = document.createElement("script");
+		for (const { name, value } of inert.attributes) live.setAttribute(name, value);
+		live.textContent = inert.textContent;
+		inert.replaceWith(live);
+	}
+}
 /**
 * Re-renders the page's sections, header and footer on the dev server from the draft, without saving.
 * `onRendered` runs after new markup is in, so the overlay can re-measure.
@@ -14542,7 +14573,9 @@ function createLivePreview(doc, onRendered) {
 		const main = document.querySelector("main#content");
 		if (!main) return;
 		destroyRichEditors();
+		const ran = scriptsOnPage();
 		main.innerHTML = result.value.html;
+		runNewScripts(main, ran);
 		announcePreview();
 		onRendered();
 	}
@@ -14589,6 +14622,13 @@ function createLivePreview(doc, onRendered) {
 }
 //#endregion
 //#region src/ui/state/edits.ts
+/**
+* Text with a `data-field` on the page is updated where it is, as it is typed. A value with no such element, such as a
+* video link, an `aria-label` or a section option, only reaches the page through a re-render.
+*/
+function shownInPlace(path) {
+	return document.querySelector(`[data-field="${CSS.escape(path)}"]`) !== null;
+}
 /** Every change to the drafts goes through here, so each one also gets the preview it needs. */
 function createEdits(doc, preview) {
 	/** Edits made before the drafts finished loading. `load` applies them to what it reads. */
@@ -14623,7 +14663,7 @@ function createEdits(doc, preview) {
 			return;
 		}
 		doc.setDoc(path, editField(current, path, value));
-		if (isPagePath(path) ? isImageField(path) : affectsSitePreview(path)) previewFor(path);
+		if (isPagePath(path) ? isImageField(path) || !shownInPlace(path) : affectsSitePreview(path)) previewFor(path);
 	}
 	function updatePage(next, withPreview = false) {
 		doc.page.value = next;
@@ -16973,7 +17013,7 @@ function formatRich({ ui, richTarget }, event, command) {
 	event.preventDefault();
 	richTarget.current?.run(command, command === "link" ? ui.linkUrl.peek().trim() : void 0);
 }
-/** Bold, italic, lists and links for the rich-text field being edited. */
+/** Bold, italic, code, lists and links for the rich-text field being edited. */
 function RichTextBar() {
 	const editor = useEditor();
 	const { ui } = editor;
@@ -17003,6 +17043,15 @@ function RichTextBar() {
 				onMouseDown: run("italic"),
 				children: "I"
 			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "bm-fmt-code",
+				"aria-label": "Code",
+				title: "Code",
+				"aria-pressed": active?.code === true,
+				onMouseDown: run("code"),
+				children: "</>"
+			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "Bulleted list",
@@ -18778,7 +18827,7 @@ function ImagePickerModal({ src, images, onPick, onUploaded, onDeleted, onClose
 }
 //#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) :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) 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) :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) :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-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 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-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) :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) 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) :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) :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 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-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) {
@@ -19403,6 +19452,15 @@ const LinksContext = createContext({
 const IssueContext = createContext([]);
 /** Which props of the section being edited can be dropped. ValueEditor reads it to offer Remove, Add and "empty hides it". */
 const OptionalContext = createContext({ content: void 0 });
+/**
+* What the schema of the section being edited says about its fields, by field key: fixed choices and their icons
+* (ValueEditor shows a picker) and image fields (MissingField shows an image slot).
+*/
+const FieldsContext = createContext({
+	choices: void 0,
+	icons: void 0,
+	images: void 0
+});
 //#endregion
 //#region src/ui/bear-mark.tsx
 /**
@@ -19997,6 +20055,108 @@ function BrandLogoForm({ site, images, onField, onUploaded, onDeleted }) {
 	});
 }
 //#endregion
+//#region src/ui/forms/field-errors.tsx
+/** Validation messages for one field, under its control. */
+function FieldErrors({ issues }) {
+	if (issues.length === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: issues.map((issue) => /* @__PURE__ */ jsx("span", {
+		class: "bm-error",
+		children: issue.message
+	}, `${issue.path}:${issue.message}`)) });
+}
+/** The issues reported for exactly this path. */
+function issuesFor(issues, path) {
+	if (!path) return [];
+	return issues.filter((issue) => issue.path === path);
+}
+/** `split` → "Split", `top-left` → "Top left". Values such as `16:9` stay as they are. */
+function choiceLabel(value) {
+	const words = value.replace(/[_-]+/g, " ").trim();
+	return words.charAt(0).toUpperCase() + words.slice(1);
+}
+/**
+* One of a fixed list of values. With icons it is a grid of icon buttons; with up to four choices a segmented
+* control; otherwise a select. A value outside the list (old content) is kept and shown until a choice is made.
+*/
+function ChoiceField({ label, value, choices, icons, path, segmented = true, onChange }) {
+	const issues = issuesFor(useContext(IssueContext), path);
+	if (icons) return /* @__PURE__ */ jsxs("div", {
+		class: "bm-field",
+		"data-editor-field": path,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				class: "bm-label-row bm-label",
+				children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+					class: "bm-meta-tag",
+					children: choices.includes(value) ? choiceLabel(value) : value || "none"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "bm-icon-picker",
+				role: "radiogroup",
+				"aria-label": label,
+				onKeyDown: (event) => stepRadio(event, choices, value, onChange),
+				children: choices.map((choice, index) => {
+					const checked = value === choice;
+					const focusable = checked || !choices.includes(value) && index === 0;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "radio",
+						"aria-checked": checked,
+						"aria-label": choiceLabel(choice),
+						title: choiceLabel(choice),
+						tabIndex: focusable ? 0 : -1,
+						onClick: () => onChange(choice),
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							"aria-hidden": "true",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "1.8",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							children: /* @__PURE__ */ jsx("path", { d: icons[choice] })
+						})
+					}, choice);
+				})
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, { issues })
+		]
+	});
+	if (segmented && choices.length <= 4 && choices.includes(value)) return /* @__PURE__ */ jsxs("div", {
+		class: "bm-stack bm-stack-tight",
+		"data-editor-field": path,
+		children: [/* @__PURE__ */ jsx(Segmented, {
+			label,
+			value,
+			options: choices.map((choice) => ({
+				value: choice,
+				label: choiceLabel(choice)
+			})),
+			onChange
+		}), /* @__PURE__ */ jsx(FieldErrors, { issues })]
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		class: "bm-label",
+		"data-editor-field": path,
+		children: [
+			label,
+			/* @__PURE__ */ jsxs("select", {
+				value,
+				onChange: (event) => onChange(event.currentTarget.value),
+				children: [!choices.includes(value) && /* @__PURE__ */ jsx("option", {
+					value,
+					children: value || "Choose…"
+				}), choices.map((choice) => /* @__PURE__ */ jsx("option", {
+					value: choice,
+					children: choiceLabel(choice)
+				}, choice))]
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, { issues })
+		]
+	});
+}
+//#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) {
@@ -20013,6 +20173,9 @@ const LINK_KEYS = /* @__PURE__ */ new Set([
 /** A prop that is not in the draft: an empty input for text, an Add button for a link, an empty slot for an image. */
 function MissingField({ name, path, sample, images, onField, onUploaded, onDeleted }) {
 	const label = humanize(name);
+	const fields = useContext(FieldsContext);
+	const key = sectionFieldKey(path);
+	const image = isImageField(name) || key !== null && (fields.images?.includes(key) ?? false);
 	if (LINK_KEYS.has(name)) {
 		const fallback = {
 			label: "Button",
@@ -20028,7 +20191,7 @@ function MissingField({ name, path, sample, images, onField, onUploaded, onDelet
 	}
 	return /* @__PURE__ */ jsx(ValueEditor, {
 		label: name,
-		value: isImageField(name) ? {
+		value: image ? {
 			src: "",
 			alt: ""
 		} : "",
@@ -20047,6 +20210,17 @@ function ValueEditor({ label: rawLabel, value, path, rule, variant, sample, imag
 	const optionalSpec = useContext(OptionalContext).content;
 	const optional = isOptionalPath(optionalSpec, path);
 	const label = humanize(rawLabel);
+	const fixed = useContext(FieldsContext);
+	const key = sectionFieldKey(path);
+	const choices = key === null ? void 0 : fixed.choices?.[key];
+	if (choices && (typeof value === "string" || value === void 0)) return /* @__PURE__ */ jsx(ChoiceField, {
+		label,
+		path,
+		value: value ?? "",
+		choices,
+		icons: key === null ? void 0 : fixed.icons?.[key],
+		onChange: (next) => onField(path, next)
+	});
 	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);
@@ -20289,7 +20463,7 @@ function itemSummary(item) {
 	}
 	return "";
 }
-function OptionControl({ option, value, onChange, path, meta, hint, multiline }) {
+function OptionControl({ option, value, onChange, path, meta, hint, multiline, segmented = false }) {
 	const issues = issuesFor(useContext(IssueContext), path);
 	if (option.type === "boolean") {
 		const checked = value === true || value === void 0 && option.default === true;
@@ -20312,6 +20486,13 @@ function OptionControl({ option, value, onChange, path, meta, hint, multiline })
 			})]
 		});
 	}
+	if (option.type === "enum" && segmented) return /* @__PURE__ */ jsx(ChoiceField, {
+		label: option.label,
+		path,
+		value: text(value || option.default),
+		choices: option.choices ?? [],
+		onChange: (next) => onChange(next)
+	});
 	if (option.type === "enum") return /* @__PURE__ */ jsxs("label", {
 		class: "bm-label",
 		children: [
@@ -20399,17 +20580,6 @@ function Field({ label, value, onChange, multiline = false, path, prefix, hint,
 		]
 	});
 }
-function FieldErrors({ issues }) {
-	if (issues.length === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: issues.map((issue) => /* @__PURE__ */ jsx("span", {
-		class: "bm-error",
-		children: issue.message
-	}, `${issue.path}:${issue.message}`)) });
-}
-function issuesFor(issues, path) {
-	if (!path) return [];
-	return issues.filter((issue) => issue.path === path);
-}
 /** An array item's keys, plus the optional ones it has dropped, in the order the sample item lists them. */
 function orderItemKeys(item, path, content) {
 	const parts = path.replace(/^sections\.\d+\.props\./, "").split(".");
@@ -21208,6 +21378,14 @@ function SectionForm({ section, index, sections, catalog, siteMotion, taken, ima
 		paintSection(section.id, name, name === "motion" && value === void 0 ? siteMotion : value);
 		if (name === "variant") onPreview();
 	};
+	/** The value an option has now, or its default: what `showWhen` compares against. */
+	const optionValue = (name) => {
+		const option = options.find((item) => item.name === name);
+		const current = getOptionValue(section, name);
+		if (name === "motion") return current ?? siteMotion;
+		return current ?? option?.default;
+	};
+	const shownProp = (key) => isPropShown(catalog.showWhen?.[section.type], key, optionValue);
 	const isUnknown = (item) => !Object.hasOwn(catalog.sectionLabels, item.type);
 	const labelOf = (item) => isUnknown(item) ? `Unknown (${item.type})` : catalog.sectionLabels[item.type] ?? item.type;
 	if (isUnknown(section)) return /* @__PURE__ */ jsxs("div", {
@@ -21345,24 +21523,19 @@ function SectionForm({ section, index, sections, catalog, siteMotion, taken, ima
 						class: "bm-group",
 						children: "Layout"
 					}),
-					(variantOption || toneOption) && /* @__PURE__ */ jsxs("div", {
-						class: "bm-row-split",
-						children: [variantOption && /* @__PURE__ */ jsx(OptionControl, {
-							option: variantOption,
-							path: pathFor("variant"),
-							value: getOptionValue(section, "variant"),
-							onChange: (value) => set("variant", value)
-						}), toneOption && /* @__PURE__ */ jsxs("label", {
-							class: "bm-label",
-							children: ["Tone", /* @__PURE__ */ jsx("select", {
-								value: section.tone ?? (text(toneOption.default) || "base"),
-								onChange: (event) => set("tone", event.currentTarget.value),
-								children: (toneOption.choices ?? []).map((choice) => /* @__PURE__ */ jsx("option", {
-									value: choice,
-									children: choice
-								}, choice))
-							})]
-						})]
+					variantOption && /* @__PURE__ */ jsx(OptionControl, {
+						option: variantOption,
+						path: pathFor("variant"),
+						value: getOptionValue(section, "variant"),
+						segmented: true,
+						onChange: (value) => set("variant", value)
+					}),
+					toneOption && /* @__PURE__ */ jsx(ChoiceField, {
+						label: "Tone",
+						path: pathFor("tone"),
+						value: section.tone ?? (text(toneOption.default) || "base"),
+						choices: toneOption.choices ?? [],
+						onChange: (value) => set("tone", value)
 					}),
 					motionOption && /* @__PURE__ */ jsx(Segmented, {
 						label: "Motion",
@@ -21393,35 +21566,43 @@ function SectionForm({ section, index, sections, catalog, siteMotion, taken, ima
 				option,
 				path: pathFor(option.name),
 				value: getOptionValue(section, option.name),
+				segmented: true,
 				onChange: (value) => set(option.name, value)
 			}, option.name)),
 			/* @__PURE__ */ jsx(OptionalContext.Provider, {
 				value: { content: catalog.optionalContent?.[section.type] },
-				children: orderContentKeys(Object.keys(section.props), catalog.optionalContent?.[section.type]?.props ?? [], Object.keys(catalog.sectionDefaults[section.type] ?? {})).map((key) => {
-					if (shown.has(key) || key === "marks") return null;
-					const path = `sections.${index}.props.${key}`;
-					const defaultValue = catalog.sectionDefaults[section.type]?.[key];
-					if (!(key in section.props)) return /* @__PURE__ */ jsx(MissingField, {
-						name: key,
-						path,
-						sample: defaultValue,
-						images,
-						onField,
-						onUploaded,
-						onDeleted
-					}, key);
-					return /* @__PURE__ */ jsx(ValueEditor, {
-						label: key,
-						value: section.props[key],
-						path,
-						rule: catalog.contentCounts[section.type]?.[key],
-						variant: section.variant,
-						sample: sampleItem(defaultValue),
-						onField,
-						images,
-						onUploaded,
-						onDeleted
-					}, key);
+				children: /* @__PURE__ */ jsx(FieldsContext.Provider, {
+					value: {
+						choices: catalog.fieldChoices?.[section.type],
+						icons: catalog.fieldIcons?.[section.type],
+						images: catalog.fieldImages?.[section.type]
+					},
+					children: orderContentKeys(Object.keys(section.props), catalog.optionalContent?.[section.type]?.props ?? [], Object.keys(catalog.sectionDefaults[section.type] ?? {})).map((key) => {
+						if (shown.has(key) || key === "marks" || !shownProp(key)) return null;
+						const path = `sections.${index}.props.${key}`;
+						const defaultValue = catalog.sectionDefaults[section.type]?.[key];
+						if (!(key in section.props)) return /* @__PURE__ */ jsx(MissingField, {
+							name: key,
+							path,
+							sample: defaultValue,
+							images,
+							onField,
+							onUploaded,
+							onDeleted
+						}, key);
+						return /* @__PURE__ */ jsx(ValueEditor, {
+							label: key,
+							value: section.props[key],
+							path,
+							rule: catalog.contentCounts[section.type]?.[key],
+							variant: section.variant,
+							sample: sampleItem(defaultValue),
+							onField,
+							images,
+							onUploaded,
+							onDeleted
+						}, key);
+					})
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {