@next-buildr/editor 0.0.0-stage → 2.0.1

package/dist/styles.css

@@ -0,0 +1,2885 @@
+/*
+ * The editor's stylesheet entry: ordered partials (tokens, base, shell, primitives, panels).
+ * Everything is scoped under `.buildr-editor` (plus the floating-layer classes), so importing
+ * it never touches the host page. The published `dist/styles.css` is these partials
+ * flattened in this order (see tooling/scripts/bundle-css.mjs).
+ * Dark mode follows `prefers-color-scheme`, or is forced with `data-theme="light" | "dark"`.
+ */
+/*
+ * Design tokens (PB-119, values from docs/design/identity.md). This is the ONLY file where
+ * literal colours, spacing and font sizes may appear (stylelint enforces it).
+ *
+ * Theme: dark follows `prefers-color-scheme` unless the host sets `data-theme="light"`;
+ * `data-theme="dark"` forces dark; `data-theme="system"` (or no attribute) follows the system.
+ * Radix renders menus, popovers, dialogs and tooltips into the editor root (the portal container
+ * of `ui/portal.tsx`), so they inherit its tokens and its `data-theme`. Rendered outside a root
+ * (on <body>, e.g. a bare primitive), they receive the tokens through their own selectors.
+ */
+
+.buildr-editor,
+.bd-portal:not(.buildr-editor *),
+.bd-popover:not(.buildr-editor *),
+.bd-select-content:not(.buildr-editor *),
+.bd-tooltip:not(.buildr-editor *),
+.bd-dialog:not(.buildr-editor *),
+.bd-dialog-overlay:not(.buildr-editor *),
+.bd-menu:not(.buildr-editor *) {
+  /* Colour roles: light */
+  color-scheme: light;
+  --bd-bg: #e9ebf0;
+  --bd-surface: #ffffff;
+  --bd-surface-2: #f4f5f8;
+  --bd-surface-hover: #eceef2;
+  --bd-surface-selected: #e2e8fc;
+  --bd-border: #dfe1e7;
+  --bd-border-strong: #7d8391;
+  --bd-text: #1c1d22;
+  --bd-text-muted: #4b5060;
+  --bd-text-subtle: #5c6373;
+  --bd-accent: #3f5ae0;
+  --bd-accent-hover: #3049bd;
+  --bd-accent-soft: #e2e8fc;
+  --bd-accent-text: #ffffff;
+  --bd-focus: #3f5ae0;
+  --bd-danger: #c0282d;
+  --bd-danger-soft: #fdecec;
+  --bd-danger-text: #ffffff;
+  --bd-warning: #8a5300;
+  --bd-warning-soft: #fff3d9;
+  --bd-success: #1b7a3d;
+  --bd-success-soft: #e4f5ea;
+  --bd-info: #0b6b80;
+  --bd-info-soft: #e0f3f7;
+  --bd-toolbar: #1c1d22;
+  --bd-toolbar-hover: #33363f;
+  --bd-toolbar-border: #33363f;
+  --bd-toolbar-text: #f0f1f4;
+  --bd-toolbar-muted: #b4b9c6;
+  --bd-toolbar-focus: #a3b3f4;
+  --bd-shadow: rgb(18 19 23 / 14%);
+  --bd-overlay: rgb(18 19 23 / 50%);
+  --bd-primary: #3f5ae0;
+  --bd-primary-text: #ffffff;
+  --bd-primary-hover: #3049bd;
+  --bd-canvas-page: #ffffff;
+
+  /* Type */
+  --bd-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --bd-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+  --bd-text-xs: 11px;
+  --bd-leading-xs: 16px;
+  --bd-text-sm: 12px;
+  --bd-leading-sm: 16px;
+  --bd-text-md: 13px;
+  --bd-leading-md: 20px;
+  --bd-text-lg: 15px;
+  --bd-leading-lg: 24px;
+  --bd-weight-regular: 400;
+  --bd-weight-medium: 500;
+  --bd-weight-semibold: 600;
+  --bd-tracking-tight: -0.005em;
+
+  /* Spacing: 2 4 6 8 12 16 20 24 32 */
+  --bd-space-0: 2px;
+  --bd-space-1: 4px;
+  --bd-space-2: 6px;
+  --bd-space-3: 8px;
+  --bd-space-4: 12px;
+  --bd-space-5: 16px;
+  --bd-space-6: 20px;
+  --bd-space-7: 24px;
+  --bd-space-8: 32px;
+
+  /* Shape and sizes */
+  --bd-radius-sm: 4px;
+  --bd-radius-md: 6px;
+  --bd-radius-lg: 8px;
+  --bd-radius-pill: 999px;
+  --bd-radius: var(--bd-radius-md);
+  --bd-control-sm: 24px;
+  --bd-control-md: 28px;
+  --bd-control-lg: 32px;
+  --bd-panel-header: 40px;
+  --bd-statusbar-height: 28px;
+  --bd-toolbar-height: 44px;
+  --bd-issues-height: 160px;
+  --bd-border-width: 1px;
+  --bd-splitter-size: 1px;
+  --bd-splitter-hit: 8px;
+  --bd-left: 280px;
+  --bd-right: 320px;
+
+  /* Elevation: floating layers only */
+  --bd-elevation-1: 0 1px 2px var(--bd-shadow);
+  --bd-elevation-2: 0 4px 12px var(--bd-shadow), 0 0 0 1px var(--bd-border);
+  --bd-elevation-3: 0 12px 32px var(--bd-shadow), 0 0 0 1px var(--bd-border);
+
+  /* Motion */
+  --bd-duration-fast: 100ms;
+  --bd-duration-base: 160ms;
+  --bd-ease: cubic-bezier(0.2, 0, 0, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  .buildr-editor:not([data-theme="light"]),
+  .bd-portal:not(.buildr-editor *),
+  .bd-popover:not(.buildr-editor *),
+  .bd-select-content:not(.buildr-editor *),
+  .bd-tooltip:not(.buildr-editor *),
+  .bd-dialog:not(.buildr-editor *),
+  .bd-dialog-overlay:not(.buildr-editor *),
+  .bd-menu:not(.buildr-editor *) {
+    color-scheme: dark;
+    --bd-bg: #121317;
+    --bd-surface: #1c1d22;
+    --bd-surface-2: #23252b;
+    --bd-surface-hover: #2b2d35;
+    --bd-surface-selected: #243268;
+    --bd-border: #33363f;
+    --bd-border-strong: #7d8391;
+    --bd-text: #ecedf1;
+    --bd-text-muted: #b0b5c2;
+    --bd-text-subtle: #9fa5b4;
+    --bd-accent: #8ea2f5;
+    --bd-accent-hover: #a3b3f4;
+    --bd-accent-soft: #25325f;
+    --bd-accent-text: #0f1636;
+    --bd-focus: #a3b3f4;
+    --bd-danger: #ff8a8a;
+    --bd-danger-soft: #3d2226;
+    --bd-danger-text: #2a0b0e;
+    --bd-warning: #f2b552;
+    --bd-warning-soft: #3a2e15;
+    --bd-success: #5fce85;
+    --bd-success-soft: #173325;
+    --bd-info: #5fc9dc;
+    --bd-info-soft: #143038;
+    --bd-toolbar: #0c0d10;
+    --bd-toolbar-hover: #26282f;
+    --bd-toolbar-border: #26282f;
+    --bd-toolbar-text: #ecedf1;
+    --bd-toolbar-muted: #a9aebb;
+    --bd-toolbar-focus: #a3b3f4;
+    --bd-shadow: rgb(0 0 0 / 55%);
+    --bd-overlay: rgb(0 0 0 / 60%);
+    --bd-primary: #3f5ae0;
+    --bd-primary-text: #ffffff;
+    --bd-primary-hover: #3049bd;
+  }
+}
+
+.buildr-editor[data-theme="dark"] {
+  color-scheme: dark;
+  --bd-bg: #121317;
+  --bd-surface: #1c1d22;
+  --bd-surface-2: #23252b;
+  --bd-surface-hover: #2b2d35;
+  --bd-surface-selected: #243268;
+  --bd-border: #33363f;
+  --bd-border-strong: #7d8391;
+  --bd-text: #ecedf1;
+  --bd-text-muted: #b0b5c2;
+  --bd-text-subtle: #9fa5b4;
+  --bd-accent: #8ea2f5;
+  --bd-accent-hover: #a3b3f4;
+  --bd-accent-soft: #25325f;
+  --bd-accent-text: #0f1636;
+  --bd-focus: #a3b3f4;
+  --bd-danger: #ff8a8a;
+  --bd-danger-soft: #3d2226;
+  --bd-danger-text: #2a0b0e;
+  --bd-warning: #f2b552;
+  --bd-warning-soft: #3a2e15;
+  --bd-success: #5fce85;
+  --bd-success-soft: #173325;
+  --bd-info: #5fc9dc;
+  --bd-info-soft: #143038;
+  --bd-toolbar: #0c0d10;
+  --bd-toolbar-hover: #26282f;
+  --bd-toolbar-border: #26282f;
+  --bd-toolbar-text: #ecedf1;
+  --bd-toolbar-muted: #a9aebb;
+  --bd-toolbar-focus: #a3b3f4;
+  --bd-shadow: rgb(0 0 0 / 55%);
+  --bd-overlay: rgb(0 0 0 / 60%);
+  --bd-primary: #3f5ae0;
+  --bd-primary-text: #ffffff;
+  --bd-primary-hover: #3049bd;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buildr-editor,
+  .bd-portal:not(.buildr-editor *),
+  .bd-popover:not(.buildr-editor *),
+  .bd-select-content:not(.buildr-editor *),
+  .bd-tooltip:not(.buildr-editor *),
+  .bd-dialog:not(.buildr-editor *),
+  .bd-dialog-overlay:not(.buildr-editor *),
+  .bd-menu:not(.buildr-editor *) {
+    --bd-duration-fast: 0ms;
+    --bd-duration-base: 0ms;
+  }
+}
+
+/*
+ * Base styles: self-hosted Inter (latin + latin-ext, weights 400/500/600; OFL, see
+ * fonts/LICENSE-inter.txt), the box model reset, the root text style, focus ring, themed
+ * scrollbars. The font URLs are relative to this file; the published build flattens the
+ * partials into dist/styles.css and rewrites them to ./fonts/.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/inter-latin-ext-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/inter-latin-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/inter-latin-ext-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/inter-latin-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./fonts/inter-latin-ext-600-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./fonts/inter-latin-600-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* The floating layers share the editor's root text style. */
+.buildr-editor,
+.bd-portal,
+.bd-popover,
+.bd-select-content,
+.bd-tooltip,
+.bd-dialog,
+.bd-menu {
+  font-family: var(--bd-font);
+  font-size: var(--bd-text-md);
+  font-weight: var(--bd-weight-regular);
+  line-height: var(--bd-leading-md);
+  scrollbar-width: thin;
+  scrollbar-color: var(--bd-border-strong) transparent;
+}
+
+.buildr-editor,
+.buildr-editor *,
+.buildr-editor *::before,
+.buildr-editor *::after {
+  box-sizing: border-box;
+}
+
+.buildr-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--bd-bg);
+  color: var(--bd-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+.buildr-editor :focus-visible {
+  outline: 2px solid var(--bd-focus);
+  outline-offset: 1px;
+}
+
+.buildr-editor .bd-toolbar :focus-visible {
+  outline-color: var(--bd-toolbar-focus);
+}
+
+/* Tabular numerals for numeric inputs (inspector) and anything opting in. */
+.bd-tabular,
+.buildr-editor input[type="number"] {
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * Shell: toolbar, the three-column body, panels, splitters, the issues region, the canvas
+ * host and the composed application frame. Panel anatomy and splitters are refined in PB-122.
+ */
+
+.bd-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  flex: none;
+  height: var(--bd-toolbar-height);
+  padding: 0 var(--bd-space-4);
+  background: var(--bd-toolbar);
+  border-bottom: var(--bd-border-width) solid var(--bd-toolbar-border);
+  color: var(--bd-toolbar-text);
+}
+
+/* Controls on the dark toolbar use the toolbar tokens in both themes. */
+.buildr-editor .bd-toolbar .bd-button,
+.buildr-editor .bd-toolbar .bd-toggle,
+.buildr-editor .bd-toolbar .bd-select-trigger {
+  border-color: var(--bd-toolbar-border);
+  background: transparent;
+  color: var(--bd-toolbar-text);
+}
+
+.buildr-editor .bd-toolbar .bd-button[data-variant="ghost"] {
+  border-color: transparent;
+}
+
+.buildr-editor .bd-toolbar .bd-button:hover:not(:disabled),
+.buildr-editor .bd-toolbar .bd-toggle:hover,
+.buildr-editor .bd-toolbar .bd-select-trigger:hover {
+  background: var(--bd-toolbar-hover);
+}
+
+.buildr-editor .bd-toolbar .bd-button[data-variant="primary"],
+.buildr-editor .bd-toolbar .bd-toggle[data-state="on"] {
+  border-color: var(--bd-primary);
+  background: var(--bd-primary);
+  color: var(--bd-primary-text);
+}
+
+.buildr-editor .bd-toolbar .bd-button[data-variant="primary"]:hover:not(:disabled) {
+  border-color: var(--bd-primary-hover);
+  background: var(--bd-primary-hover);
+}
+
+.buildr-editor .bd-toolbar .bd-save-status {
+  color: var(--bd-toolbar-muted);
+}
+
+.buildr-editor .bd-toolbar .bd-save-status[data-status="error"],
+.buildr-editor .bd-toolbar .bd-save-status[data-status="conflict"] {
+  color: var(--bd-toolbar-text);
+}
+
+.bd-body {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: var(--bd-left) var(--bd-splitter-size) minmax(0, 1fr) var(
+      --bd-splitter-size
+    ) var(--bd-right);
+}
+
+/* Panel anatomy (PB-122): one column that scrolls as a whole; header and footer stick to its edges. */
+.bd-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bd-surface);
+}
+
+.bd-panel[hidden] {
+  display: none;
+}
+
+.bd-panel-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--bd-space-3);
+  height: var(--bd-panel-header);
+  padding: 0 var(--bd-space-4);
+  background: var(--bd-surface);
+  border-bottom: var(--bd-border-width) solid var(--bd-border);
+}
+
+.bd-panel-body {
+  flex: 1 0 auto;
+  padding: var(--bd-space-4);
+}
+
+.bd-panel-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  flex: none;
+  padding: var(--bd-space-3) var(--bd-space-4);
+  background: var(--bd-surface);
+  border-top: var(--bd-border-width) solid var(--bd-border);
+}
+
+.bd-canvas {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bd-bg);
+}
+
+/* A 1px line with a wider invisible hit area; the accent line shows on hover, focus and drag. */
+.bd-splitter {
+  position: relative;
+  z-index: 2;
+  cursor: col-resize;
+  background: var(--bd-border);
+  touch-action: none;
+}
+
+.bd-splitter::before {
+  content: "";
+  position: absolute;
+  inset: 0 calc((var(--bd-splitter-hit) - var(--bd-splitter-size)) / -2);
+}
+
+.bd-splitter:hover,
+.bd-splitter:focus-visible,
+.bd-splitter[data-dragging="true"] {
+  background: var(--bd-accent);
+  box-shadow: 0 0 0 var(--bd-border-width) var(--bd-accent);
+}
+
+/* Narrow editor (below 1100px, measured): the side panels are overlays the toolbar toggles. */
+.bd-body {
+  position: relative;
+}
+
+.bd-body[data-narrow="true"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.bd-body[data-narrow="true"] > .bd-splitter {
+  display: none;
+}
+
+.bd-body[data-narrow="true"] > .bd-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+  width: var(--bd-left);
+  max-width: 90%;
+  box-shadow: var(--bd-elevation-3);
+}
+
+.bd-body[data-narrow="true"] > .bd-panel[data-side="left"] {
+  left: 0;
+}
+
+.bd-body[data-narrow="true"] > .bd-panel[data-side="right"] {
+  right: 0;
+  width: var(--bd-right);
+}
+
+/* Status bar (PB-122): 28px, holding the issues toggle with the counts, and read-only facts. */
+.bd-issues {
+  flex: none;
+  border-top: var(--bd-border-width) solid var(--bd-border);
+  background: var(--bd-surface);
+}
+
+.bd-issues[data-open="true"] {
+  display: flex;
+  flex-direction: column;
+  height: var(--bd-issues-height);
+  overflow: auto;
+}
+
+.bd-issues-bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--bd-space-4);
+  height: var(--bd-statusbar-height);
+  padding: 0 var(--bd-space-4);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  color: var(--bd-text-muted);
+}
+
+.bd-issues-bar .bd-toolbar-spacer {
+  flex: 1;
+}
+
+.buildr-editor .bd-issues-bar .bd-status-toggle {
+  height: var(--bd-control-sm);
+  gap: var(--bd-space-3);
+  color: inherit;
+}
+
+.bd-status-count {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bd-space-1);
+  font-variant-numeric: tabular-nums;
+}
+
+.bd-status-count[data-severity="error"] {
+  color: var(--bd-danger);
+}
+
+.bd-status-count[data-severity="warning"] {
+  color: var(--bd-warning);
+}
+
+.bd-status-item {
+  white-space: nowrap;
+}
+
+.bd-status-item[data-status="error"],
+.bd-status-item[data-status="conflict"] {
+  color: var(--bd-danger);
+}
+
+.bd-heading {
+  margin: 0;
+  padding: var(--bd-space-3) var(--bd-space-4);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-semibold);
+  color: var(--bd-text-muted);
+}
+
+.buildr-editor .bd-breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bd-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.buildr-editor .bd-breadcrumbs li + li::before {
+  content: "›";
+  margin-right: var(--bd-space-1);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-breadcrumb {
+  border: 0;
+  background: none;
+  padding: var(--bd-space-0) var(--bd-space-1);
+  border-radius: var(--bd-radius-sm);
+  color: var(--bd-text-muted);
+  font: inherit;
+  cursor: pointer;
+}
+.buildr-editor .bd-breadcrumb:hover {
+  background: var(--bd-surface-hover);
+}
+.buildr-editor .bd-breadcrumb[aria-current="location"] {
+  color: var(--bd-text);
+  font-weight: var(--bd-weight-semibold);
+}
+
+/* Canvas stage (PB-124) */
+.buildr-editor .bd-canvas-host {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-3);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--bd-space-6);
+  overflow: auto;
+  background: var(--bd-bg);
+}
+.buildr-editor .bd-canvas-width {
+  flex: none;
+  margin: 0 auto;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  color: var(--bd-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.buildr-editor .bd-canvas-stage-area {
+  flex: 1;
+  min-height: 0;
+}
+.buildr-editor .bd-canvas-stage {
+  margin: 0 auto;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--bd-radius-sm);
+  background: var(--bd-canvas-page);
+  box-shadow: var(--bd-elevation-2);
+  transition: width var(--bd-duration-base);
+}
+.buildr-editor .bd-canvas-frame {
+  display: block;
+  height: 100%;
+  border: 0;
+  background: var(--bd-canvas-page);
+  transform-origin: top left;
+  transition: transform var(--bd-duration-base);
+}
+.buildr-editor .bd-canvas-frame[data-status="connecting"] {
+  visibility: hidden;
+}
+.buildr-editor .bd-canvas-status,
+.buildr-editor .bd-canvas-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bd-space-4);
+  margin: 0;
+  padding: var(--bd-space-5);
+  text-align: center;
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-canvas-error {
+  background: var(--bd-bg);
+  color: var(--bd-text);
+}
+.buildr-editor .bd-canvas-card > * {
+  max-width: 48ch;
+  margin-block: 0;
+}
+.buildr-editor .bd-canvas-title {
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-canvas-error dl.bd-canvas-detail {
+  padding: var(--bd-space-4);
+  border: 1px solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+  text-align: left;
+}
+.buildr-editor .bd-canvas-detail {
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  color: var(--bd-text-muted);
+}
+
+/* Toolbar (PB-083, redesigned in PB-123) */
+.buildr-editor .bd-toolbar-title {
+  flex: none;
+  max-width: 40ch;
+  margin: 0;
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+  letter-spacing: var(--bd-tracking-tight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.buildr-editor .bd-toolbar-spacer {
+  flex: 1;
+}
+
+.buildr-editor .bd-breakpoints,
+.buildr-editor .bd-toolbar-group {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  display: inline-flex;
+  gap: var(--bd-space-0);
+}
+
+.buildr-editor .bd-toolbar-link {
+  text-decoration: none;
+}
+
+.buildr-editor .bd-toolbar .bd-select-trigger {
+  width: auto;
+  min-width: 88px;
+}
+
+.buildr-editor .bd-save-status,
+.bd-save-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+
+.bd-save-status[data-status="error"],
+.bd-save-status[data-status="conflict"] {
+  color: var(--bd-danger);
+}
+
+/* Toolbar zones and collapsing (PB-123). The row is measured by a ResizeObserver, not a media query. */
+.buildr-editor .bd-toolbar-row {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-4);
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.buildr-editor .bd-toolbar-zone {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  flex: none;
+  white-space: nowrap;
+}
+
+/* Last step of collapsing: only now may the title give way. */
+.buildr-editor .bd-toolbar-row[data-level="4"] .bd-toolbar-title {
+  flex: 0 1 auto;
+  min-width: 6ch;
+}
+
+.buildr-editor .bd-status-pill {
+  padding: var(--bd-space-0) var(--bd-space-3);
+  border: var(--bd-border-width) solid var(--bd-toolbar-border);
+  border-radius: var(--bd-radius-pill);
+  color: var(--bd-toolbar-muted);
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  font-weight: var(--bd-weight-medium);
+}
+
+.buildr-editor .bd-toolbar .bd-icon-button {
+  min-width: var(--bd-control-md);
+}
+
+.buildr-editor .bd-toolbar .bd-toolbar-link {
+  color: var(--bd-toolbar-text);
+}
+
+.buildr-editor .bd-toolbar .bd-save-status {
+  gap: var(--bd-space-2);
+  white-space: nowrap;
+}
+
+/* Segmented control: breakpoints in the toolbar, the theme switch in the more menu. */
+.bd-segmented {
+  display: inline-flex;
+  gap: var(--bd-space-0);
+  padding: var(--bd-space-0);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+}
+
+.bd-segmented .bd-segment {
+  min-height: var(--bd-control-sm);
+  padding: 0 var(--bd-space-3);
+  border-radius: var(--bd-radius-sm);
+}
+
+.bd-breakpoints .bd-segment {
+  width: var(--bd-control-md);
+  padding: 0;
+}
+
+.bd-segmented .bd-button.bd-segment[aria-pressed="true"],
+.bd-segmented .bd-button.bd-segment[aria-pressed="true"]:hover:not(:disabled) {
+  background: var(--bd-surface-selected);
+  color: var(--bd-text);
+}
+
+.buildr-editor .bd-toolbar .bd-segmented {
+  border-color: var(--bd-toolbar-border);
+}
+
+/* PB-131: inactive segments must be readable on the dark toolbar in both themes. */
+.buildr-editor .bd-toolbar .bd-segmented .bd-segment {
+  color: var(--bd-toolbar-muted);
+}
+
+.buildr-editor .bd-toolbar .bd-segmented .bd-segment:hover:not(:disabled) {
+  background: var(--bd-toolbar-hover);
+  color: var(--bd-toolbar-text);
+}
+
+/* On the dark toolbar the active segment is the inverse of the bar. */
+.buildr-editor .bd-toolbar .bd-segmented .bd-button.bd-segment[aria-pressed="true"],
+.buildr-editor
+  .bd-toolbar
+  .bd-segmented
+  .bd-button.bd-segment[aria-pressed="true"]:hover:not(:disabled) {
+  background: var(--bd-toolbar-text);
+  color: var(--bd-toolbar);
+}
+
+.buildr-editor .bd-zoom-trigger {
+  gap: var(--bd-space-1);
+  min-width: 64px;
+  justify-content: space-between;
+}
+
+/* Menu-like popovers (zoom, more): a plain list of items. */
+.bd-popover.bd-menu-popover {
+  min-width: 160px;
+  padding: var(--bd-space-1);
+}
+
+.bd-menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-0);
+}
+
+.bd-menu-list .bd-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+}
+
+.bd-menu-list .bd-menu-item:hover,
+.bd-menu-list .bd-menu-item:focus-visible {
+  background: var(--bd-surface-hover);
+}
+
+.bd-menu-list .bd-menu-item[aria-pressed="true"] {
+  background: var(--bd-surface-selected);
+  font-weight: var(--bd-weight-semibold);
+}
+
+.bd-menu-group {
+  margin: 0;
+  padding: var(--bd-space-2) var(--bd-space-1) var(--bd-space-1);
+  border: 0;
+  border-top: var(--bd-border-width) solid var(--bd-border);
+}
+
+.bd-menu-label {
+  padding: 0 var(--bd-space-1) var(--bd-space-1);
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+}
+
+/* Preview (PB-091) */
+.bd-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background: var(--bd-bg);
+}
+.bd-preview-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bd-space-3) var(--bd-space-4);
+  border-bottom: var(--bd-border-width) solid var(--bd-border);
+}
+.bd-preview-frame {
+  flex: 1;
+  width: 100%;
+  border: 0;
+}
+
+/* The composed editor (EditorApp) */
+.buildr-editor .bd-app-canvas {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.buildr-editor .bd-app-canvas > .bd-canvas-host {
+  flex: 1;
+  min-height: 0;
+}
+.buildr-editor .bd-app-status {
+  margin: 0;
+  padding: var(--bd-space-7);
+  color: var(--bd-text-muted);
+}
+/* Content language (PB-115) */
+.buildr-editor .bd-translation-banner {
+  margin: 0;
+  padding: var(--bd-space-3) var(--bd-space-4);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  border-bottom: var(--bd-border-width) solid var(--bd-border);
+  background: var(--bd-surface-2);
+  color: var(--bd-text-muted);
+}
+
+/* Shell frame (PB-122): the editor never makes its page scroll; what does not fit is clipped inside it. */
+.buildr-editor {
+  overflow: hidden;
+}
+
+/* Product identity (top left of the toolbar) */
+.buildr-editor .bd-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  flex: none;
+  padding-right: var(--bd-space-4);
+  border-right: var(--bd-border-width) solid var(--bd-toolbar-border);
+  color: var(--bd-toolbar-text);
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+  letter-spacing: var(--bd-tracking-tight);
+  user-select: none;
+}
+
+.buildr-editor .bd-brand-tile {
+  fill: var(--bd-primary);
+}
+
+.buildr-editor .bd-brand-block {
+  fill: var(--bd-primary-text);
+}
+
+/* The name is the first thing to go when the row runs short. */
+.buildr-editor .bd-toolbar-row[data-level="4"] .bd-brand-name {
+  display: none;
+}
+
+.buildr-editor .bd-toolbar-row[data-level="4"] .bd-brand {
+  padding-right: 0;
+  border-right: 0;
+}
+
+/* The page name is a field that reads as a heading until it is hovered or focused. */
+.buildr-editor .bd-title-input {
+  min-width: 0;
+  height: var(--bd-control-md);
+  padding: 0 var(--bd-space-2);
+  border: var(--bd-border-width) solid transparent;
+  border-radius: var(--bd-radius-sm);
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  text-overflow: ellipsis;
+}
+
+.buildr-editor .bd-title-input:hover:not(:disabled) {
+  border-color: var(--bd-toolbar-border);
+}
+
+.buildr-editor .bd-title-input:focus-visible {
+  border-color: var(--bd-primary);
+  background: var(--bd-toolbar-hover);
+  outline: none;
+}
+
+.buildr-editor .bd-title-input:disabled {
+  opacity: 1;
+}
+
+.buildr-editor .bd-toolbar-heading {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+}
+
+/* Too small a window: the editor does not open (docs/editor.md#small-screens) */
+.buildr-editor .bd-small-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: var(--bd-space-7);
+  box-sizing: border-box;
+  background: var(--bd-surface-2);
+  color: var(--bd-text);
+}
+.buildr-editor .bd-small-screen-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bd-space-4);
+  max-width: 28rem;
+  padding: var(--bd-space-8) var(--bd-space-7);
+  text-align: center;
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-lg);
+  background: var(--bd-surface);
+}
+.buildr-editor .bd-small-screen-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--bd-space-8) * 2);
+  height: calc(var(--bd-space-8) * 2);
+  border-radius: var(--bd-radius-pill);
+  background: var(--bd-surface-selected);
+  color: var(--bd-accent);
+}
+.buildr-editor .bd-small-screen-title {
+  margin: 0;
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-small-screen-body,
+.buildr-editor .bd-small-screen-hint {
+  margin: 0;
+  font-size: var(--bd-text-md);
+  line-height: var(--bd-leading-md);
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-small-screen-hint {
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+
+/*
+ * UI primitives: buttons, inputs, selects, popovers, tooltips, tabs, toggles, dialogs, menus,
+ * transient notices and the drag ghost. States follow docs/design/identity.md section 6.
+ */
+
+.bd-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bd-space-1);
+  min-height: var(--bd-control-md);
+  padding: 0 var(--bd-space-4);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--bd-duration-fast) var(--bd-ease);
+}
+
+.bd-button:hover:not(:disabled) {
+  background: var(--bd-surface-hover);
+}
+
+.bd-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.bd-button[data-variant="primary"] {
+  background: var(--bd-primary);
+  border-color: var(--bd-primary);
+  color: var(--bd-primary-text);
+  font-weight: var(--bd-weight-semibold);
+}
+
+.bd-button[data-variant="primary"]:hover:not(:disabled) {
+  background: var(--bd-primary-hover);
+  border-color: var(--bd-primary-hover);
+}
+
+.bd-button[data-variant="ghost"] {
+  border-color: transparent;
+  background: transparent;
+}
+
+.bd-button[data-variant="ghost"]:hover:not(:disabled) {
+  background: var(--bd-surface-hover);
+}
+
+.bd-button[data-variant="danger"] {
+  color: var(--bd-danger);
+}
+
+.bd-icon {
+  display: block;
+  flex: none;
+}
+
+.bd-icon-button {
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  width: var(--bd-control-md);
+}
+
+.bd-input,
+.bd-select-trigger {
+  min-height: var(--bd-control-md);
+  width: 100%;
+  padding: 0 var(--bd-space-3);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  font: inherit;
+}
+
+.bd-input::placeholder {
+  color: var(--bd-text-subtle);
+}
+
+.bd-input:disabled {
+  background: var(--bd-surface-2);
+  color: var(--bd-text-subtle);
+}
+
+.bd-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bd-space-3);
+  cursor: pointer;
+}
+
+.bd-popover,
+.bd-select-content,
+.bd-tooltip {
+  z-index: 1000;
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  box-shadow: var(--bd-elevation-2);
+}
+
+.bd-popover {
+  padding: var(--bd-space-4);
+  border-radius: var(--bd-radius-lg);
+}
+
+.bd-tooltip {
+  padding: var(--bd-space-1) var(--bd-space-3);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+
+.bd-select-item {
+  padding: var(--bd-space-1) var(--bd-space-4);
+  cursor: pointer;
+  outline: none;
+}
+
+.bd-select-item[data-highlighted] {
+  background: var(--bd-surface-hover);
+}
+
+.bd-tabs-list {
+  display: flex;
+  gap: var(--bd-space-1);
+  border-bottom: var(--bd-border-width) solid var(--bd-border);
+  padding: 0 var(--bd-space-3);
+}
+
+.bd-tab {
+  padding: var(--bd-space-3) var(--bd-space-4);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--bd-text-muted);
+  font: inherit;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-medium);
+  cursor: pointer;
+}
+
+.bd-tab[data-state="active"] {
+  color: var(--bd-text);
+  border-bottom-color: var(--bd-accent);
+}
+
+.bd-toggle {
+  min-height: var(--bd-control-md);
+  min-width: var(--bd-control-md);
+  padding: 0 var(--bd-space-3);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.bd-toggle:hover {
+  background: var(--bd-surface-hover);
+}
+
+.bd-toggle[data-state="on"] {
+  background: var(--bd-primary);
+  border-color: var(--bd-primary);
+  color: var(--bd-primary-text);
+}
+
+.bd-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: var(--bd-overlay);
+}
+
+.bd-dialog {
+  position: fixed;
+  z-index: 1000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(480px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--bd-radius-lg);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  box-shadow: var(--bd-elevation-3);
+}
+
+.bd-dialog-header {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--bd-space-4);
+  padding: var(--bd-space-5) var(--bd-space-5) var(--bd-space-3);
+}
+
+.bd-dialog-heading {
+  min-width: 0;
+}
+
+.bd-dialog-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--bd-space-3) var(--bd-space-5);
+}
+
+.bd-dialog-footer {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  gap: var(--bd-space-3);
+  padding: var(--bd-space-4) var(--bd-space-5);
+  border-top: var(--bd-border-width) solid var(--bd-border);
+}
+
+.bd-dialog-title {
+  margin: 0;
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+  letter-spacing: var(--bd-tracking-tight);
+}
+
+.bd-dialog-description {
+  margin: var(--bd-space-1) 0 0;
+  color: var(--bd-text-muted);
+}
+
+.bd-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 1px clip hack */
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.bd-menu {
+  z-index: 1000;
+  min-width: 160px;
+  padding: var(--bd-space-1);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  box-shadow: var(--bd-elevation-2);
+}
+.bd-menu-item {
+  padding: var(--bd-space-1) var(--bd-space-4);
+  border-radius: var(--bd-radius-sm);
+  cursor: pointer;
+  outline: none;
+}
+.bd-menu-item[data-highlighted] {
+  background: var(--bd-surface-hover);
+}
+.bd-menu-item[data-disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+.bd-menu-item[data-danger]:not([data-highlighted]) {
+  color: var(--bd-danger);
+}
+
+/* Keyboard shortcuts help (PB-084) */
+.buildr-editor .bd-shortcut-row,
+.bd-shortcut-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--bd-space-5);
+  padding: var(--bd-space-0) 0;
+}
+.bd-shortcut-help dt,
+.bd-shortcut-help dd {
+  margin: 0;
+}
+.bd-shortcut-help kbd {
+  font-family: inherit;
+  padding: 0 var(--bd-space-1);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-sm);
+}
+
+/* Toasts (PB-129): the one place a transient message is positioned with position: fixed. */
+.bd-toast-region {
+  position: fixed;
+  z-index: 1100;
+  bottom: var(--bd-space-5);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-3);
+  width: min(480px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.bd-toast-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-3);
+}
+
+.bd-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  padding: var(--bd-space-3) var(--bd-space-3) var(--bd-space-3) var(--bd-space-4);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  box-shadow: var(--bd-elevation-3);
+  font-size: var(--bd-text-md);
+  line-height: var(--bd-leading-md);
+  pointer-events: auto;
+}
+
+.bd-toast-icon {
+  flex: none;
+}
+
+.bd-toast-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.bd-toast-detail {
+  color: var(--bd-text-muted);
+}
+
+.bd-toast-action,
+.bd-toast-close {
+  flex: none;
+}
+
+.bd-toast[data-variant="success"] .bd-toast-icon {
+  color: var(--bd-success);
+}
+.bd-toast[data-variant="info"] .bd-toast-icon {
+  color: var(--bd-info);
+}
+.bd-toast[data-variant="warning"] .bd-toast-icon {
+  color: var(--bd-warning);
+}
+.bd-toast[data-variant="error"] {
+  border-color: var(--bd-danger);
+}
+.bd-toast[data-variant="error"] .bd-toast-icon {
+  color: var(--bd-danger);
+}
+
+/* Drag and drop (PB-086) */
+.bd-drag-shield {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  cursor: grabbing;
+}
+.bd-drag-shield[data-over="canvas"] {
+  cursor: copy;
+}
+.bd-drag-ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  pointer-events: none;
+  padding: var(--bd-space-1) var(--bd-space-4);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-accent);
+  color: var(--bd-accent-text);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  box-shadow: var(--bd-elevation-2);
+  will-change: transform;
+}
+.bd-drag-ghost[data-allowed="false"] {
+  background: var(--bd-danger);
+  color: var(--bd-danger-text);
+}
+.bd-drag-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.bd-dnd-destinations {
+  list-style: none;
+  margin: var(--bd-space-3) 0;
+  padding: 0;
+  max-height: 50vh;
+  overflow: auto;
+}
+.bd-dnd-destinations .bd-button {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+/* --- Segmented control, number with unit, colour swatch (PB-128) ------------------------------ */
+.bd-segmented {
+  display: inline-flex;
+  min-width: 0;
+  margin: 0;
+  gap: var(--bd-space-0);
+  padding: var(--bd-space-0);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+  border: var(--bd-border-width) solid var(--bd-border);
+}
+.bd-segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bd-space-1);
+  min-height: var(--bd-control-sm);
+  min-width: var(--bd-control-sm);
+  padding: 0 var(--bd-space-2);
+  border: 0;
+  border-radius: var(--bd-radius-sm);
+  background: transparent;
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  cursor: pointer;
+}
+.bd-segment:hover:not(:disabled) {
+  background: var(--bd-surface-hover);
+  color: var(--bd-text);
+}
+.bd-segment[aria-pressed="true"] {
+  background: var(--bd-surface);
+  color: var(--bd-accent);
+  font-weight: var(--bd-weight-semibold);
+  box-shadow: var(--bd-elevation-1);
+}
+.bd-segment:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.bd-number-unit {
+  display: flex;
+  align-items: stretch;
+  gap: var(--bd-space-1);
+  min-width: 0;
+}
+.bd-number-unit > .bd-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+}
+.bd-number-unit > .bd-select-trigger {
+  flex: 0 0 auto;
+  width: auto;
+  padding: 0 var(--bd-space-2);
+  font-size: var(--bd-text-xs);
+}
+.bd-number-unit[data-invalid] > .bd-input {
+  border-color: var(--bd-danger);
+}
+
+.bd-swatch {
+  flex: 0 0 auto;
+  width: var(--bd-control-md);
+  height: var(--bd-control-md);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-sm);
+  background: var(--bd-surface-2);
+}
+
+/* The token list is in a popover, which is outside the editor root. */
+.bd-token-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-0);
+  max-height: 240px;
+  min-width: 160px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+.bd-token {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+  width: 100%;
+  padding: var(--bd-space-1) var(--bd-space-2);
+  border: 0;
+  border-radius: var(--bd-radius-sm);
+  background: transparent;
+  color: var(--bd-text);
+  font: inherit;
+  font-size: var(--bd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.bd-token:hover {
+  background: var(--bd-surface-hover);
+}
+.bd-token[aria-pressed="true"] {
+  background: var(--bd-accent-soft);
+  font-weight: var(--bd-weight-semibold);
+}
+.bd-token .bd-swatch {
+  width: var(--bd-control-sm);
+  height: var(--bd-control-sm);
+}
+.bd-token-name {
+  flex: 1 1 auto;
+}
+.bd-token-value {
+  color: var(--bd-text-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * Panels: layers, insert palette, inspector (fields, values, styles), issues and publish,
+ * media picker. Panel anatomy and spacing are refined per panel in phase 13.
+ */
+
+/* --- Layers ------------------------------------------------------------------------------- */
+.buildr-editor .bd-layers {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.buildr-editor .bd-layers-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.buildr-editor .bd-layers-list {
+  position: relative;
+}
+.buildr-editor .bd-layer {
+  position: absolute;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-1);
+  padding-right: var(--bd-space-1);
+  cursor: default;
+  white-space: nowrap;
+  /* Indent guides: one hairline per ancestor level, centred under that level's chevron. */
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--bd-border) 0 var(--bd-border-width),
+    transparent var(--bd-border-width) var(--layer-indent)
+  );
+  background-repeat: no-repeat;
+  background-position: calc(var(--layer-pad) + var(--bd-control-sm) / 2) 0;
+  background-size: calc(var(--layer-level) * var(--layer-indent)) 100%;
+}
+.buildr-editor .bd-layer[data-hovered="true"] {
+  background-color: var(--bd-surface-hover);
+}
+.buildr-editor .bd-layer[data-selected="true"] {
+  background-color: var(--bd-surface-selected);
+  color: var(--bd-text);
+  font-weight: var(--bd-weight-medium);
+}
+.buildr-editor .bd-layer[data-selected="true"]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--bd-space-0);
+  background: var(--bd-accent);
+}
+.buildr-editor .bd-layers-scroll:focus-visible .bd-layer[data-selected="true"] {
+  outline: 2px solid var(--bd-focus);
+  outline-offset: -2px;
+}
+.buildr-editor .bd-layer-toggle {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: var(--bd-control-sm);
+  height: var(--bd-control-sm);
+  color: var(--bd-text-muted);
+  cursor: pointer;
+}
+.buildr-editor .bd-layer-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-layer[data-selected="true"] .bd-layer-icon {
+  color: var(--bd-accent);
+}
+.buildr-editor .bd-layer-label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* The slot name is a muted suffix right after the label; the badges and actions sit at the end. */
+.buildr-editor .bd-layer-slot {
+  flex: none;
+  margin-right: auto;
+  padding-left: var(--bd-space-1);
+  font-size: var(--bd-text-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-layer-label:not(:has(+ .bd-layer-slot)) {
+  flex: 1 1 auto;
+}
+.buildr-editor .bd-layer-badge {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-layer-badge[aria-label] {
+  cursor: default;
+}
+.buildr-editor .bd-layer-more {
+  display: none;
+  flex: none;
+}
+.buildr-editor .bd-layer[data-hovered="true"] .bd-layer-more,
+.buildr-editor .bd-layer[data-selected="true"] .bd-layer-more {
+  display: grid;
+}
+.buildr-editor .bd-layer-more .bd-icon-button {
+  width: var(--bd-control-sm);
+  height: var(--bd-control-sm);
+  border-color: transparent;
+  background: transparent;
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-layer-more .bd-icon-button:hover {
+  background: var(--bd-surface-hover);
+  color: var(--bd-text);
+}
+.buildr-editor .bd-layer[data-hovered] .bd-layer-rename ~ .bd-layer-more,
+.buildr-editor .bd-layer[data-selected] .bd-layer-rename ~ .bd-layer-more {
+  display: none;
+}
+/* The rename field fits inside the row (row height minus a hairline of air above and below). */
+.buildr-editor .bd-layer-rename {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--layer-row) - 2 * var(--bd-space-1));
+  padding-block: 0;
+}
+.buildr-editor .bd-layers-notice {
+  margin: 0;
+  padding: var(--bd-space-1) var(--bd-space-3);
+  color: var(--bd-danger);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+.buildr-editor .bd-layers-notice:empty {
+  display: none;
+}
+/* Drop indicators (PB-086): a line before/after, a box inside, a red box where it is refused. */
+.buildr-editor .bd-layer[data-drop="inside"] {
+  outline: 2px solid var(--bd-accent);
+  outline-offset: -2px;
+  background-color: var(--bd-accent-soft);
+}
+.buildr-editor .bd-layer[data-drop="before"] {
+  box-shadow: inset 0 var(--bd-space-0) 0 var(--bd-accent);
+}
+.buildr-editor .bd-layer[data-drop="after"] {
+  box-shadow: inset 0 calc(-1 * var(--bd-space-0)) 0 var(--bd-accent);
+}
+.buildr-editor .bd-layer[data-drop="denied"] {
+  outline: 2px solid var(--bd-danger);
+  outline-offset: -2px;
+}
+
+/* --- Insert palette (PB-125) -------------------------------------------------------------- */
+.buildr-editor .bd-insert {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: var(--bd-space-3);
+  padding: var(--bd-space-4);
+  box-sizing: border-box;
+}
+.buildr-editor .bd-insert-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+}
+.buildr-editor .bd-insert-searchbox {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.buildr-editor .bd-insert-search {
+  padding-inline: var(--bd-space-8);
+}
+.buildr-editor .bd-insert-search::-webkit-search-cancel-button {
+  display: none;
+}
+.buildr-editor .bd-insert-search-icon {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--bd-space-3);
+  margin-block: auto;
+  color: var(--bd-text-subtle);
+  pointer-events: none;
+}
+.buildr-editor .bd-insert-clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: var(--bd-control-md);
+  border: 0;
+  background: transparent;
+}
+.buildr-editor .bd-insert-views {
+  display: flex;
+  gap: var(--bd-space-0);
+}
+.buildr-editor .bd-insert-views .bd-icon-button[aria-pressed="true"] {
+  background: var(--bd-accent-soft);
+  color: var(--bd-accent);
+}
+.buildr-editor .bd-insert-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.buildr-editor .bd-insert-heading {
+  margin: var(--bd-space-4) 0 var(--bd-space-1);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-insert-section:first-child .bd-insert-heading {
+  margin-top: 0;
+}
+.buildr-editor .bd-insert-category {
+  margin: var(--bd-space-2) 0 var(--bd-space-1);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-semibold);
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-insert-category-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-1);
+  width: 100%;
+  min-height: var(--bd-control-sm);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.buildr-editor .bd-insert-category-toggle:hover {
+  color: var(--bd-text);
+}
+.buildr-editor .bd-insert-category-name {
+  flex: 1;
+  min-width: 0;
+}
+.buildr-editor .bd-insert-count {
+  padding-inline: var(--bd-space-2);
+  border-radius: var(--bd-radius-pill);
+  background: var(--bd-surface-2);
+  color: var(--bd-text-subtle);
+  font-weight: var(--bd-weight-regular);
+  font-variant-numeric: tabular-nums;
+}
+.buildr-editor .bd-insert-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--bd-space-2);
+  margin: 0 0 var(--bd-space-3);
+  padding: 0;
+  list-style: none;
+}
+.buildr-editor .bd-insert-list[hidden] {
+  display: none;
+}
+.buildr-editor .bd-insert-list[data-kind="template"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-list {
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--bd-space-1);
+}
+@container (max-width: 220px) {
+  .buildr-editor .bd-insert[data-view="grid"] .bd-insert-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .buildr-editor .bd-insert[data-view="grid"] .bd-insert-list[data-kind="template"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.buildr-editor .bd-insert-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bd-space-1);
+  width: 100%;
+  min-width: 0;
+  padding: var(--bd-space-3) var(--bd-space-1);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+  color: inherit;
+  font: inherit;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  cursor: grab;
+}
+.buildr-editor .bd-insert-item:hover {
+  background: var(--bd-surface-hover);
+}
+.buildr-editor .bd-insert-item:active {
+  cursor: grabbing;
+}
+.buildr-editor .bd-insert-label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.buildr-editor .bd-insert-desc {
+  overflow: hidden;
+  color: var(--bd-text-subtle);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.buildr-editor .bd-insert-thumb {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border-radius: var(--bd-radius-sm);
+  background: var(--bd-surface);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-insert-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.buildr-editor .bd-insert-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: var(--bd-control-md);
+  height: var(--bd-control-md);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-accent-soft);
+  color: var(--bd-accent);
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-item {
+  display: grid;
+  grid-template-columns: var(--bd-control-md) minmax(0, 1fr);
+  grid-template-areas: "icon label" "icon desc";
+  align-items: center;
+  column-gap: var(--bd-space-3);
+  padding: var(--bd-space-2) var(--bd-space-3);
+  text-align: start;
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-icon,
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-thumb {
+  grid-area: icon;
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-thumb {
+  width: var(--bd-control-md);
+  aspect-ratio: 16 / 10;
+  height: auto;
+  align-self: center;
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-label {
+  grid-area: label;
+  font-weight: var(--bd-weight-medium);
+}
+.buildr-editor .bd-insert[data-view="list"] .bd-insert-desc {
+  grid-area: desc;
+}
+.buildr-editor .bd-insert-skeleton {
+  aspect-ratio: 16 / 10;
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+  animation: bd-insert-pulse 1.2s ease-in-out infinite;
+}
+@keyframes bd-insert-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .buildr-editor .bd-insert-skeleton {
+    animation: none;
+  }
+}
+.buildr-editor .bd-insert-empty {
+  margin: var(--bd-space-8) 0;
+  text-align: center;
+  color: var(--bd-text-muted);
+}
+
+/* --- Inspector (layout: PB-127) ----------------------------------------------------------- */
+.buildr-editor .bd-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-3);
+  padding: var(--bd-space-3) var(--bd-space-4);
+}
+.buildr-editor .bd-inspector-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+}
+.buildr-editor .bd-inspector-headline {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-3);
+}
+.buildr-editor .bd-inspector-icon {
+  flex: none;
+  color: var(--bd-accent);
+}
+.buildr-editor .bd-inspector-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--bd-text-lg);
+  line-height: var(--bd-leading-lg);
+  font-weight: var(--bd-weight-semibold);
+  letter-spacing: var(--bd-tracking-tight);
+}
+.buildr-editor .bd-inspector-actions {
+  display: flex;
+  flex: none;
+  gap: var(--bd-space-0);
+}
+.buildr-editor .bd-inspector-count,
+.buildr-editor .bd-inspector-locked {
+  margin: 0;
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-inspector .bd-tabs-list {
+  padding: 0;
+}
+.buildr-editor .bd-inspector .bd-tab {
+  flex: 1;
+  padding: var(--bd-space-2) var(--bd-space-3);
+}
+.buildr-editor .bd-inspector-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bd-space-2);
+  padding: var(--bd-space-7) var(--bd-space-4);
+  text-align: center;
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-inspector-empty p {
+  margin: 0;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+.buildr-editor .bd-inspector-empty-title {
+  color: var(--bd-text-muted);
+  font-weight: var(--bd-weight-medium);
+}
+.buildr-editor .bd-props-group + .bd-props-group {
+  border-top: var(--bd-border-width) solid var(--bd-border);
+}
+.buildr-editor .bd-props-heading {
+  margin: 0;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-props-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-1);
+  width: 100%;
+  padding: var(--bd-space-3) 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.buildr-editor .bd-props-fields {
+  padding-bottom: var(--bd-space-2);
+}
+/* A field is a grid: the label row (label, reset, value modes) and the control under it; short
+   controls put the control beside the label instead. */
+.buildr-editor .bd-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--bd-space-3);
+  row-gap: var(--bd-space-1);
+  margin: var(--bd-space-2) 0;
+}
+.buildr-editor .bd-field > * {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+.buildr-editor .bd-field-head {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bd-space-2);
+  min-height: var(--bd-control-sm);
+}
+.buildr-editor .bd-field-body {
+  display: contents;
+}
+.buildr-editor .bd-field-body > .bd-value {
+  display: contents;
+}
+.buildr-editor .bd-field-body > .bd-value > :not(.bd-value-modes),
+.buildr-editor .bd-field-body > :not(.bd-value) {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+.buildr-editor .bd-field .bd-value-modes {
+  grid-column: 2;
+  grid-row: 1;
+}
+.buildr-editor .bd-field .bd-value-modes .bd-button {
+  min-height: var(--bd-control-sm);
+  padding: 0 var(--bd-space-2);
+  font-size: var(--bd-text-xs);
+}
+.buildr-editor .bd-field[data-layout="row"] {
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+}
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-head {
+  grid-column: 1;
+}
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-body {
+  display: block;
+  grid-column: 2;
+  grid-row: 1;
+}
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-body > .bd-value {
+  display: flex;
+}
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-body > .bd-value > * {
+  grid-column: auto;
+}
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-hint,
+.buildr-editor .bd-field[data-layout="row"] > .bd-field-unsupported {
+  grid-column: 2;
+}
+.buildr-editor .bd-field-label {
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-medium);
+}
+/* Reset is an icon that shows on hover or focus, and always where there is no hover. */
+.buildr-editor .bd-field-reset {
+  opacity: 0;
+  width: var(--bd-control-sm);
+  height: var(--bd-control-sm);
+  min-height: 0;
+}
+.buildr-editor .bd-field:hover .bd-field-reset,
+.buildr-editor .bd-field:focus-within .bd-field-reset,
+.buildr-editor .bd-field-reset:focus-visible {
+  opacity: 1;
+}
+@media (hover: none) {
+  .buildr-editor .bd-field-reset {
+    opacity: 1;
+  }
+}
+.buildr-editor .bd-field-hint,
+.buildr-editor .bd-field-unsupported {
+  margin: 0;
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-field-chip {
+  margin: 0;
+  padding: var(--bd-space-0) var(--bd-space-3);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-pill);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  overflow-wrap: anywhere;
+}
+.buildr-editor .bd-textarea {
+  min-height: 72px;
+  padding: var(--bd-space-2) var(--bd-space-3);
+  resize: vertical;
+}
+.buildr-editor .bd-inspector-notice:empty {
+  display: none;
+}
+
+/* Rich text, list and object controls (PB-080) */
+.buildr-editor .bd-rich {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-1);
+}
+.buildr-editor .bd-rich-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bd-space-0);
+}
+.buildr-editor .bd-rich-button[aria-pressed="true"] {
+  background: var(--bd-accent-soft);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-rich-link {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bd-space-1);
+  align-items: center;
+}
+.buildr-editor .bd-rich-editor {
+  min-height: 72px;
+  padding: var(--bd-space-2) var(--bd-space-3);
+  overflow-wrap: anywhere;
+  outline-offset: 1px;
+}
+.buildr-editor .bd-list,
+.buildr-editor .bd-object {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.buildr-editor .bd-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.buildr-editor .bd-list-item {
+  padding: var(--bd-space-2);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+}
+.buildr-editor .bd-list-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--bd-space-1);
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+}
+.buildr-editor .bd-list-empty {
+  margin: 0;
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-object-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-0);
+}
+
+/* Style inspector (PB-082) */
+.buildr-editor .bd-styles-layer {
+  margin: 0 0 var(--bd-space-2);
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-style-group > summary {
+  cursor: pointer;
+  font-weight: var(--bd-weight-semibold);
+  padding: var(--bd-space-1) 0;
+}
+.buildr-editor .bd-style-box {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--bd-space-1);
+}
+.buildr-editor .bd-style-source {
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-style-error {
+  margin: 0;
+  font-size: var(--bd-text-xs);
+  line-height: var(--bd-leading-xs);
+  color: var(--bd-danger);
+}
+.buildr-editor .bd-style-check {
+  display: flex;
+  gap: var(--bd-space-2);
+  align-items: center;
+}
+
+/* Value editor */
+.buildr-editor .bd-value {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+}
+.buildr-editor .bd-value-modes {
+  display: flex;
+  gap: var(--bd-space-0);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.buildr-editor .bd-value-modes button[aria-pressed="true"] {
+  background: var(--bd-accent-soft);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-value-fields {
+  display: flex;
+  flex-direction: column;
+  max-height: 160px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.buildr-editor .bd-value-fields button[aria-pressed="true"] {
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-value-chip[data-invalid="true"],
+.buildr-editor .bd-value-error,
+.buildr-editor .bd-value-diagnostics [data-severity="error"] {
+  color: var(--bd-danger);
+}
+.buildr-editor .bd-value-diagnostics {
+  margin: 0;
+  padding-left: var(--bd-space-5);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+.buildr-editor .bd-value-preview {
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  color: var(--bd-text-muted);
+}
+
+/* Content language (PB-115) */
+.buildr-editor .bd-field[data-untranslated] [data-prop] {
+  opacity: 0.6;
+}
+.buildr-editor .bd-field[data-untranslated] input,
+.buildr-editor .bd-field[data-untranslated] textarea {
+  color: var(--bd-text-muted);
+  font-style: italic;
+}
+.buildr-editor .bd-translation-hint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bd-space-3);
+}
+
+/* --- Issues and publish (PB-088) ---------------------------------------------------------- */
+.buildr-editor .bd-issues-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bd-space-0);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.buildr-editor .bd-issues-filters button[aria-pressed="true"] {
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-issues-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.buildr-editor .bd-issue {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-1);
+  padding: var(--bd-space-2) 0;
+  border-bottom: var(--bd-border-width) solid var(--bd-border);
+}
+.buildr-editor .bd-issue-target {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-1);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.buildr-editor .bd-issue-target:disabled {
+  cursor: default;
+}
+.bd-publish-blocked,
+.buildr-editor .bd-issue-error {
+  color: var(--bd-danger);
+}
+.buildr-editor .bd-issues-severity {
+  margin-top: var(--bd-space-3);
+}
+.buildr-editor .bd-issues-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  margin: 0;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-issues-severity[data-severity="error"] .bd-issues-heading,
+.buildr-editor .bd-issue[data-severity="error"] .bd-issue-severity {
+  color: var(--bd-danger);
+}
+.buildr-editor .bd-issues-severity[data-severity="warning"] .bd-issues-heading,
+.buildr-editor .bd-issue[data-severity="warning"] .bd-issue-severity {
+  color: var(--bd-warning);
+}
+.buildr-editor .bd-issues-severity[data-severity="info"] .bd-issues-heading,
+.buildr-editor .bd-issue[data-severity="info"] .bd-issue-severity {
+  color: var(--bd-info);
+}
+.buildr-editor .bd-issue-head {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+}
+.buildr-editor .bd-issue-owner {
+  font-weight: var(--bd-weight-medium);
+  color: var(--bd-text);
+}
+.buildr-editor .bd-issue-source,
+.buildr-editor .bd-issue-help {
+  margin: 0;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-issues-group > summary {
+  cursor: pointer;
+  padding: var(--bd-space-1) 0;
+  font-weight: var(--bd-weight-semibold);
+}
+.bd-publish-summary {
+  display: flex;
+  gap: var(--bd-space-3);
+  margin: var(--bd-space-3) 0;
+  padding: 0;
+  list-style: none;
+}
+.bd-publish-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  padding: var(--bd-space-1) var(--bd-space-3);
+  border-radius: var(--bd-radius-pill);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--bd-weight-medium);
+}
+.bd-publish-badge[data-severity="error"] {
+  background: var(--bd-danger-soft);
+  color: var(--bd-danger);
+}
+.bd-publish-badge[data-severity="warning"] {
+  background: var(--bd-warning-soft);
+  color: var(--bd-warning);
+}
+.bd-publish-badge[data-severity="info"] {
+  background: var(--bd-info-soft);
+  color: var(--bd-info);
+}
+
+/* --- Media picker and control (PB-089) ---------------------------------------------------- */
+.bd-media-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-3);
+}
+.bd-media-tools {
+  display: flex;
+  gap: var(--bd-space-3);
+}
+.bd-media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: var(--bd-space-3);
+  max-height: 320px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+.bd-media-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-1);
+  width: 100%;
+  padding: var(--bd-space-1);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-sm);
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.bd-media-item:hover {
+  background: var(--bd-surface-hover);
+}
+.bd-media-item img {
+  width: 100%;
+  height: 72px;
+  object-fit: cover;
+}
+.bd-media-name,
+.bd-media-file {
+  overflow: hidden;
+  font-size: var(--bd-text-sm);
+  line-height: var(--bd-leading-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bd-media-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+}
+.bd-media-error {
+  color: var(--bd-danger);
+}
+.bd-media-control,
+.bd-media-preview,
+.bd-media-actions {
+  display: flex;
+  gap: var(--bd-space-2);
+}
+.bd-media-control {
+  flex-direction: column;
+}
+.bd-media-preview img {
+  object-fit: cover;
+}
+
+/* --- Style inspector and value editor controls (PB-128) ----------------------------------- */
+.buildr-editor .bd-style-field {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--bd-space-1);
+}
+.buildr-editor .bd-style-head {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  min-height: var(--bd-control-sm);
+}
+.buildr-editor .bd-style-head > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.buildr-editor .bd-style-head .bd-field-reset {
+  flex: 0 0 auto;
+}
+.buildr-editor .bd-source-dot {
+  flex: 0 0 auto;
+  width: var(--bd-space-3);
+  height: var(--bd-space-3);
+  border-radius: var(--bd-radius-pill);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  background: transparent;
+}
+.buildr-editor .bd-source-dot[data-origin="set"] {
+  border-color: var(--bd-accent);
+  background: var(--bd-accent);
+}
+.buildr-editor .bd-source-dot[data-origin="inherited"] {
+  border-color: var(--bd-warning);
+  background: var(--bd-warning-soft);
+}
+.buildr-editor .bd-style-value {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-1);
+  min-width: 0;
+}
+.buildr-editor .bd-style-input {
+  display: flex;
+  align-items: stretch;
+  gap: var(--bd-space-1);
+  min-width: 0;
+}
+.buildr-editor .bd-style-input > .bd-input,
+.buildr-editor .bd-style-input > .bd-number-unit {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.buildr-editor .bd-style-enum {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bd-space-2);
+}
+.buildr-editor .bd-style-enum > select {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+}
+/* Elementor-style row: the label on the left, the control on the right. */
+.buildr-editor .bd-style-inline {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  align-items: center;
+  column-gap: var(--bd-space-2);
+}
+.buildr-editor .bd-style-inline .bd-style-head {
+  grid-column: 1;
+}
+.buildr-editor .bd-style-inline > :not(.bd-style-head) {
+  grid-column: 2;
+  min-width: 0;
+}
+.buildr-editor .bd-style-inline .bd-style-enum {
+  justify-content: flex-end;
+}
+/* A slider shares its row with the number field: label above, slider and number below. */
+.buildr-editor .bd-style-inline:has(.bd-range) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.buildr-editor .bd-style-inline:has(.bd-range) > :not(.bd-style-head) {
+  grid-column: 1;
+}
+.buildr-editor .bd-style-value:has(> .bd-range) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.buildr-editor .bd-style-value:has(> .bd-range) > .bd-range {
+  order: 0;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
+}
+.buildr-editor .bd-style-value:has(> .bd-range) > .bd-style-input {
+  order: 1;
+  flex: 0 0 40%;
+}
+.buildr-editor .bd-style-value:has(> .bd-range) > .bd-style-error,
+.buildr-editor .bd-style-value:has(> .bd-range) > .bd-style-source {
+  order: 2;
+  flex: 1 0 100%;
+}
+.buildr-editor .bd-style-pair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--bd-space-3);
+  align-items: start;
+}
+.buildr-editor .bd-style-pair > .bd-style-field {
+  min-width: 0;
+}
+.buildr-editor .bd-range {
+  width: 100%;
+  accent-color: var(--bd-accent);
+}
+.buildr-editor .bd-unit-select {
+  flex: 0 0 auto;
+  height: var(--bd-control-md);
+  padding: 0 var(--bd-space-1);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-sm);
+  background: var(--bd-surface);
+  color: var(--bd-text);
+  font: inherit;
+  font-size: var(--bd-text-xs);
+}
+.buildr-editor .bd-unit-select:disabled {
+  opacity: 0.5;
+}
+.buildr-editor .bd-number-unit-compact > .bd-input {
+  padding-inline: var(--bd-space-1);
+  text-align: center;
+}
+.buildr-editor .bd-color-input {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.buildr-editor .bd-color-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.buildr-editor .bd-color-input:focus-within .bd-swatch {
+  outline: 2px solid var(--bd-accent);
+  outline-offset: 1px;
+}
+.buildr-editor .bd-side-field {
+  min-width: 0;
+}
+.buildr-editor .bd-side-field[data-source="set"] .bd-input {
+  border-color: var(--bd-accent);
+}
+.buildr-editor .bd-sides,
+.buildr-editor .bd-ring {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bd-space-2);
+}
+.buildr-editor .bd-sides-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--bd-space-1);
+}
+.buildr-editor .bd-sides-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--bd-space-0);
+  min-width: 0;
+}
+.buildr-editor .bd-sides-label {
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-xs);
+  text-align: center;
+}
+.buildr-editor .bd-ring {
+  padding: var(--bd-space-2);
+  border: var(--bd-border-width) dashed var(--bd-border-strong);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+}
+.buildr-editor .bd-ring .bd-ring {
+  border-style: solid;
+  background: var(--bd-surface);
+}
+.buildr-editor .bd-ring .bd-ring .bd-ring {
+  background: var(--bd-surface-2);
+}
+.buildr-editor .bd-ring .bd-style-head {
+  flex-wrap: wrap;
+  gap: var(--bd-space-1);
+  margin-bottom: var(--bd-space-1);
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-xs);
+}
+.buildr-editor .bd-ring .bd-style-head .bd-source-dot,
+.buildr-editor .bd-ring .bd-style-head .bd-token-trigger {
+  display: none;
+}
+.buildr-editor .bd-ring .bd-style-head .bd-unit-select {
+  height: var(--bd-control-sm);
+}
+.buildr-editor .bd-ring .bd-style-head .bd-icon-button {
+  width: var(--bd-control-sm);
+  height: var(--bd-control-sm);
+}
+.buildr-editor .bd-ring-grid {
+  display: grid;
+  grid-template-columns: var(--bd-control-md) minmax(0, 1fr) var(--bd-control-md);
+  grid-template-areas:
+    ". top ."
+    "left center right"
+    ". bottom .";
+  gap: var(--bd-space-1);
+  align-items: center;
+  justify-items: center;
+}
+.buildr-editor .bd-ring-grid .bd-side-field {
+  width: var(--bd-control-md);
+}
+.buildr-editor .bd-ring-grid .bd-side-field .bd-input {
+  border-color: transparent;
+  background: transparent;
+  color: var(--bd-text-muted);
+}
+.buildr-editor .bd-ring-grid .bd-side-field[data-source="set"] .bd-input {
+  border-color: transparent;
+  color: var(--bd-text);
+  font-weight: var(--bd-weight-semibold);
+}
+.buildr-editor .bd-ring-grid .bd-side-field .bd-input:hover,
+.buildr-editor .bd-ring-grid .bd-side-field .bd-input:focus {
+  border-color: var(--bd-accent);
+  background: var(--bd-surface);
+}
+.buildr-editor .bd-ring-top {
+  grid-area: top;
+}
+.buildr-editor .bd-ring-left {
+  grid-area: left;
+}
+.buildr-editor .bd-ring-right {
+  grid-area: right;
+}
+.buildr-editor .bd-ring-bottom {
+  grid-area: bottom;
+}
+.buildr-editor .bd-ring-center {
+  grid-area: center;
+  min-width: 0;
+  width: 100%;
+}
+.buildr-editor .bd-ring-core {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--bd-control-md);
+  border: var(--bd-border-width) solid var(--bd-border-strong);
+  border-radius: var(--bd-radius-sm);
+  background: var(--bd-surface);
+  color: var(--bd-text-muted);
+  font-size: var(--bd-text-xs);
+}
+.buildr-editor .bd-value-field {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  width: 100%;
+  padding: var(--bd-space-1) var(--bd-space-2);
+  border: 0;
+  border-radius: var(--bd-radius-sm);
+  background: transparent;
+  color: var(--bd-text);
+  font: inherit;
+  font-size: var(--bd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.buildr-editor .bd-value-field:hover:not(:disabled) {
+  background: var(--bd-surface-hover);
+}
+.buildr-editor .bd-value-field[aria-pressed="true"] {
+  background: var(--bd-accent-soft);
+}
+.buildr-editor .bd-value-field code {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.buildr-editor .bd-value-field-icon {
+  flex: 0 0 auto;
+  color: var(--bd-text-subtle);
+}
+.buildr-editor .bd-value-field-type {
+  color: var(--bd-text-subtle);
+  font-size: var(--bd-text-xs);
+}
+.buildr-editor .bd-value-preview.bd-card {
+  display: flex;
+  align-items: center;
+  gap: var(--bd-space-2);
+  margin: 0;
+  padding: var(--bd-space-2) var(--bd-space-3);
+  border: var(--bd-border-width) solid var(--bd-border);
+  border-radius: var(--bd-radius-md);
+  background: var(--bd-surface-2);
+}
+.buildr-editor .bd-value-preview.bd-card output {
+  color: var(--bd-text);
+  overflow-wrap: anywhere;
+}