/* Merlin — Page builder.
   Every rule is scoped to #builder so nothing leaks into the chat/admin/history UI.
   Token values are the Fleet Hub subset transcribed in SPEC §8.10 (dark is the default). */

#builder {
  /* typography — frontend/src/assets/tokens/typography.css */
  --fh-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fh-fs-base: 14px; --fh-fs-sm: 13px; --fh-fs-lg: 16px; --fh-fs-xl: 18px;
  --fh-fs-2xl: 20px; --fh-fs-3xl: 24px; --fh-fs-4xl: 28px;
  --fh-fw-regular: 400; --fh-fw-medium: 500; --fh-fw-semibold: 600; --fh-fw-bold: 700;
  --fh-lh-tight: 1.2; --fh-lh-normal: 1.5;
  --fh-ls-tight: -0.03em; --fh-ls-wide: 0.04em;

  /* spacing — spacing.css */
  --fh-space-1: 4px;  --fh-space-2: 8px;  --fh-space-3: 12px; --fh-space-4: 16px;
  --fh-space-5: 20px; --fh-space-6: 24px; --fh-space-8: 32px; --fh-space-10: 40px;

  /* radius — radius.css (control = lg/12, surface = xl/16) */
  --fh-radius-sm: 4px; --fh-radius-md: 8px; --fh-radius-lg: 12px;
  --fh-radius-xl: 16px; --fh-radius-full: 9999px;
  --fh-radius-control: 12px; --fh-radius-surface: 16px;

  /* borders — borders.css */
  --fh-border-hairline: 1px; --fh-border-thick: 2px;

  /* colours — colors.css :root (DARK) */
  --fh-bg-base: #020617; --fh-bg-elevated: #0f172a; --fh-bg-surface: #0f172a;
  --fh-bg-surface-hover: #1e293b; --fh-bg-card-solid: #0f172a; --fh-bg-recessed: #020617;
  --fh-accent: #ace131; --fh-accent-light: #a3e635; --fh-accent-dark: #84b21a;
  --fh-accent-glow: rgba(172,225,49,.15);
  --fh-accent-secondary: #8b5cf6; --fh-accent-tertiary: #84cc16;
  --fh-text-primary: #ffffff; --fh-text-secondary: #a3a3a3; --fh-text-accent: #ace131;
  --fh-text-on-accent: #0f1f1a;
  --fh-border: #334155; --fh-border-medium: #475569; --fh-border-strong: #64748b;
  --fh-success: #10b981; --fh-warning: #f59e0b; --fh-danger: #ef4444;
  --fh-info: #3b82f6;    --fh-neutral: #64748b;
  --fh-chart-1: #96e300; --fh-chart-2: #3b82f6; --fh-chart-3: #f59e0b; --fh-chart-4: #ef4444;
  --fh-chart-5: #8b5cf6; --fh-chart-6: #06b6d4; --fh-chart-7: #ec4899; --fh-chart-8: #84cc16;
  --fh-chart-9: #facc15; --fh-chart-10: #22d3ee; --fh-chart-11: #f97316;
  --fh-teal-700: #0d9488; --fh-green-500: #22c55e; --fh-purple-500: #a855f7;
  --fh-cyan-500: #06b6d4; --fh-orange-500: #f97316; --fh-gray-400: #9ca3af; --fh-gray-700: #374151;

  /* kpi tones (KpiRow colours its value with these) */
  --fh-kpi-success: var(--fh-success); --fh-kpi-warning: var(--fh-warning);
  --fh-kpi-danger: var(--fh-danger);   --fh-kpi-info: var(--fh-info);
  --fh-kpi-accent: var(--fh-accent);   --fh-kpi-neutral: var(--fh-text-primary);
  --fh-kpi-muted: var(--fh-text-secondary);

  /* shadows — shadows.css (dark) */
  --fh-shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --fh-shadow-card: 0 0 0 1px var(--fh-border), 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  --fh-shadow-focus: 0 0 0 3px var(--fh-accent-glow);

  font-family: var(--fh-font-sans);
  font-size: var(--fh-fs-base);
}

@media (prefers-color-scheme: light) {
  #builder {
    --fh-bg-base: #f3f2f8; --fh-bg-elevated: #ffffff; --fh-bg-surface: #ffffff;
    --fh-bg-surface-hover: #eae9f1; --fh-bg-card-solid: #ffffff; --fh-bg-recessed: #f3f2f8;
    --fh-text-primary: #0f1f1a; --fh-text-secondary: #4b5563; --fh-text-accent: #487309;
    --fh-border: #e2e8f0; --fh-border-medium: #cbd5e1; --fh-border-strong: #94a3b8;
    --fh-accent-secondary: #7c3aed; --fh-accent-glow: rgba(172,225,49,.08);
    --fh-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --fh-shadow-card: 0 0 0 1px var(--fh-border), 0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
  }
}

/* the one recipe every wireframe card uses (RCard: flat solid panel, hairline border, 16px radius) */
#builder .fh-card {
  background: var(--fh-bg-card-solid);
  border: var(--fh-border-hairline) solid var(--fh-border);
  border-radius: var(--fh-radius-surface);
  padding: var(--fh-space-5);
}

/* ─────────────────────────── shell ─────────────────────────── */

#builder[hidden] { display: none !important; }
#builder {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--fh-bg-base); color: var(--fh-text-primary);
  line-height: var(--fh-lh-normal);
}
#builder * { box-sizing: border-box; }

#bTopbar {
  display: flex; align-items: center; gap: var(--fh-space-2); flex-wrap: wrap;
  padding: var(--fh-space-3) var(--fh-space-4);
  background: var(--fh-bg-elevated);
  border-bottom: var(--fh-border-hairline) solid var(--fh-border);
}
#bTopbar .b-brand { font-weight: var(--fh-fw-semibold); font-size: var(--fh-fs-lg); margin-right: var(--fh-space-2); }
#bTopbar label { color: var(--fh-text-secondary); font-size: var(--fh-fs-sm); }

#builder input, #builder select, #builder textarea {
  background: var(--fh-bg-surface); color: var(--fh-text-primary);
  border: var(--fh-border-hairline) solid var(--fh-border);
  border-radius: var(--fh-radius-md);
  padding: 6px 9px; font: inherit; font-size: var(--fh-fs-sm);
}
#builder input:focus, #builder select:focus, #builder textarea:focus {
  outline: none; border-color: var(--fh-accent); box-shadow: var(--fh-shadow-focus);
}
#builder input.b-bad { border-color: var(--fh-danger); }
#builder input[readonly] { color: var(--fh-text-secondary); background: var(--fh-bg-recessed); }

#builder button.b-btn {
  background: var(--fh-bg-surface); color: var(--fh-text-primary);
  border: var(--fh-border-hairline) solid var(--fh-border);
  border-radius: var(--fh-radius-md);
  padding: 6px 12px; font: inherit; font-size: var(--fh-fs-sm); cursor: pointer;
}
#builder button.b-btn:hover:not(:disabled) { background: var(--fh-bg-surface-hover); }
#builder button.b-btn:disabled,
#builder button.b-btn.b-primary:disabled {
  opacity: .4; cursor: not-allowed; filter: grayscale(.7);
  background: var(--fh-bg-surface); border-color: var(--fh-border); color: var(--fh-text-secondary);
  box-shadow: none;
}
#builder button.b-btn.b-primary {
  background: var(--fh-accent); border-color: var(--fh-accent); color: var(--fh-text-on-accent);
  font-weight: var(--fh-fw-semibold);
}
#builder button.b-btn.b-primary:hover:not(:disabled) { background: var(--fh-accent-light); }
#builder button.b-icon {
  background: transparent; border: none; color: var(--fh-text-secondary);
  cursor: pointer; padding: 2px 5px; border-radius: var(--fh-radius-sm); font-size: var(--fh-fs-sm);
}
#builder button.b-icon:hover { background: var(--fh-bg-surface-hover); color: var(--fh-text-primary); }

#bStatus { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); white-space: nowrap; }
#bStatus.b-ok { color: var(--fh-success); }
#bStatus.b-err { color: var(--fh-danger); }
#bSaveState { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); white-space: nowrap; }
#bSaveState.b-ok { color: var(--fh-success); }
#bSaveState.b-err { color: var(--fh-danger); font-weight: var(--fh-fw-semibold); }
#bSaveState.b-warn-txt { color: var(--fh-warning); }
#bPublishState { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); }
#bPublishState a { color: var(--fh-text-accent); }
.b-spacer { flex: 1; }

/* ─────────────────────────── main grid ─────────────────────────── */

/* The height chain that makes both side panes scroll at EVERY viewport:
   #builder (flex column, 100vh) → #bMain (grid, flex:1, min-height:0)
   → .b-pane (grid item, min-height:0, overflow:hidden)
   → .b-pane-body (flex:1, min-height:0, overflow-y:auto).
   Every link needs its min-height:0 — drop one and the pane grows to its content
   and is clipped by the fixed overlay instead of scrolling. */
#bMain {
  display: grid; grid-template-columns: 260px 1fr 380px; grid-template-rows: minmax(0, 1fr);
  gap: 0; flex: 1 1 auto; min-height: 0; overflow: hidden;
}

#builder .b-pane {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0; height: 100%; overflow: hidden;
  background: var(--fh-bg-elevated);
}
#bPalette { border-right: var(--fh-border-hairline) solid var(--fh-border); }
#bSide { border-left: var(--fh-border-hairline) solid var(--fh-border); }
#builder .b-pane-summary {
  display: none; cursor: pointer; padding: var(--fh-space-2) var(--fh-space-3);
  font-weight: var(--fh-fw-semibold); font-size: var(--fh-fs-sm);
  border-bottom: var(--fh-border-hairline) solid var(--fh-border);
  flex: 0 0 auto;
}
#builder .b-pane-summary::before { content: '▾ '; }
#builder .b-pane.b-collapsed .b-pane-summary::before { content: '▸ '; }
#builder .b-pane-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; max-height: 100%;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
#builder .b-pane.b-collapsed .b-pane-body { display: none; }

.b-section-title {
  font-size: 11px; letter-spacing: var(--fh-ls-wide); text-transform: uppercase;
  color: var(--fh-text-secondary); font-weight: var(--fh-fw-semibold);
  padding: var(--fh-space-3) var(--fh-space-3) var(--fh-space-1);
}
.b-help { font-size: 12px; color: var(--fh-text-secondary); padding: 0 var(--fh-space-3) var(--fh-space-2); }

#bPaletteSearch { margin: var(--fh-space-3); width: calc(100% - 2 * var(--fh-space-3)); }

.b-pal-card {
  display: flex; gap: var(--fh-space-2); align-items: flex-start;
  margin: 0 var(--fh-space-3) var(--fh-space-2);
  padding: var(--fh-space-2) var(--fh-space-3);
  background: var(--fh-bg-surface); border: var(--fh-border-hairline) solid var(--fh-border);
  border-radius: var(--fh-radius-control); cursor: grab;
}
.b-pal-card:hover { background: var(--fh-bg-surface-hover); border-color: var(--fh-border-medium); }
.b-pal-card:active { cursor: grabbing; }
.b-pal-card .b-pal-emoji { font-size: var(--fh-fs-lg); line-height: 1.1; }
.b-pal-card .b-pal-name { font-weight: var(--fh-fw-semibold); font-size: var(--fh-fs-sm); }
.b-pal-card .b-pal-desc { font-size: 12px; color: var(--fh-text-secondary); line-height: var(--fh-lh-normal); }
.b-pal-group { padding: var(--fh-space-2) var(--fh-space-3) 2px; font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--fh-ls-wide); color: var(--fh-text-secondary); }

.b-comp-row {
  display: flex; gap: var(--fh-space-2); align-items: center; cursor: help;
  margin: 0 var(--fh-space-3) 4px; padding: 5px var(--fh-space-2);
  border: 1px dashed var(--fh-border); border-radius: var(--fh-radius-md);
  font-size: 12px; color: var(--fh-text-secondary);
}
.b-comp-row:hover { border-color: var(--fh-accent); color: var(--fh-text-primary); }
.b-comp-row .b-comp-name { font-family: var(--fh-font-mono); color: var(--fh-text-primary); }
.b-chip {
  font-size: 10px; padding: 1px 6px; border-radius: var(--fh-radius-full);
  background: var(--fh-bg-surface-hover); color: var(--fh-text-secondary); white-space: nowrap;
}

/* ─────────────────────────── canvas ─────────────────────────── */

#bCanvas { overflow: auto; min-height: 0; background: var(--fh-bg-base); display: flex; flex-direction: column; }
#bCanvasNotice {
  font-size: 12px; color: var(--fh-text-secondary); padding: var(--fh-space-2) var(--fh-space-4);
  border-bottom: var(--fh-border-hairline) solid var(--fh-border); background: var(--fh-bg-recessed);
}
#bCanvasBanner { display: none; margin: var(--fh-space-3) var(--fh-space-4) 0; padding: var(--fh-space-2) var(--fh-space-3);
  border-radius: var(--fh-radius-md); font-size: var(--fh-fs-sm);
  background: rgba(245,158,11,.12); color: var(--fh-warning); border: 1px solid rgba(245,158,11,.4); }
#bCanvasInner { position: relative; padding: var(--fh-space-4); display: flex; flex-direction: column; gap: var(--fh-space-4); flex: 1 0 auto; }

.b-empty {
  border: 2px dashed var(--fh-border-medium); border-radius: var(--fh-radius-surface);
  padding: var(--fh-space-10); text-align: center; color: var(--fh-text-secondary);
}
.b-drop-indicator {
  position: absolute; left: var(--fh-space-4); right: var(--fh-space-4);
  height: 3px; background: var(--fh-accent); border-radius: 2px;
  pointer-events: none; z-index: 5; box-shadow: 0 0 0 3px var(--fh-accent-glow);
}

.b-block { border-radius: var(--fh-radius-surface); border: var(--fh-border-hairline) solid transparent; }
.b-block.b-selected { outline: var(--fh-border-thick) solid var(--fh-accent); outline-offset: 2px; }
.b-block.b-dragging { opacity: .4; }
.b-block.b-has-error { border-left: 3px solid var(--fh-danger); }
.b-block.b-has-warning { border-left: 3px solid var(--fh-warning); }
.b-block-head {
  display: flex; align-items: center; gap: var(--fh-space-2);
  font-size: 11px; color: var(--fh-text-secondary); padding: 2px var(--fh-space-1) 4px;
  cursor: grab;
}
.b-block-head .b-type { font-family: var(--fh-font-mono); letter-spacing: 0; }
.b-block-head .b-grip { cursor: grab; }
.b-block-head .b-err-chip { color: var(--fh-danger); font-weight: var(--fh-fw-semibold); cursor: help; }
.b-block-head .b-warn-chip { color: var(--fh-warning); cursor: help; }
.b-block-head .b-bind-chip { color: var(--fh-text-accent); font-family: var(--fh-font-mono); }
.b-block-body { pointer-events: none; }

/* wireframe primitives */
#builder .fh-title { font-size: var(--fh-fs-lg); font-weight: var(--fh-fw-semibold); letter-spacing: var(--fh-ls-tight); }
#builder .fh-sub { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); }
#builder .fh-mono { font-family: var(--fh-font-mono); }
#builder .fh-muted { color: var(--fh-text-secondary); }

.fh-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--fh-space-3); }
.fh-kpi-grid.fh-compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fh-kpi-tile {
  background: var(--fh-bg-card-solid); border: var(--fh-border-hairline) solid var(--fh-border);
  border-radius: var(--fh-radius-surface); padding: var(--fh-space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.fh-kpi-tile .fh-kpi-label { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); }
.fh-kpi-tile .fh-kpi-value { font-family: var(--fh-font-mono); font-size: var(--fh-fs-3xl);
  font-weight: var(--fh-fw-semibold); letter-spacing: var(--fh-ls-tight); }
.fh-kpi-tile .fh-kpi-unit { font-size: var(--fh-fs-sm); color: var(--fh-text-secondary); margin-left: 4px; }
.fh-delta { font-size: 11px; padding: 1px 7px; border-radius: var(--fh-radius-full);
  background: var(--fh-bg-surface-hover); align-self: flex-start; }
.fh-delta.fh-good { color: var(--fh-success); background: rgba(16,185,129,.14); }
.fh-delta.fh-bad { color: var(--fh-danger); background: rgba(239,68,68,.14); }

.fh-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fh-space-3); }
.fh-icon-chip {
  width: 34px; height: 34px; border-radius: var(--fh-radius-full);
  background: var(--fh-bg-surface-hover); display: inline-flex; align-items: center; justify-content: center;
}

#builder table.fh-table { width: 100%; border-collapse: collapse; font-size: var(--fh-fs-sm); }
#builder table.fh-table th, #builder table.fh-table td {
  padding: 7px 10px; border-bottom: var(--fh-border-hairline) solid var(--fh-border); text-align: left;
  white-space: nowrap;
}
#builder table.fh-table th { color: var(--fh-text-secondary); font-weight: var(--fh-fw-semibold); font-size: 12px; }
#builder table.fh-table th.fh-accent { background: var(--fh-accent-glow); }
#builder table.fh-table td.fh-mono { font-family: var(--fh-font-mono); }
#builder table.fh-table td.fh-strong { font-weight: var(--fh-fw-semibold); }
#builder table.fh-table tr.fh-footer td { font-weight: var(--fh-fw-bold); border-top: var(--fh-border-thick) solid var(--fh-border); }
.fh-table-wrap { overflow-x: auto; }
.fh-col-sub { display: block; font-weight: var(--fh-fw-regular); color: var(--fh-text-secondary); font-size: 11px; }

.fh-track { height: 8px; border-radius: var(--fh-radius-full); background: var(--fh-bg-surface-hover); overflow: hidden; }
.fh-track > i { display: block; height: 100%; border-radius: var(--fh-radius-full); background: var(--fh-accent); }

.fh-badge { font-size: 11px; padding: 2px 9px; border-radius: var(--fh-radius-full); border: 1px solid transparent; }

.fh-alert {
  display: flex; gap: var(--fh-space-3); align-items: flex-start;
  padding: var(--fh-space-3) var(--fh-space-4); border-radius: var(--fh-radius-control);
  border: 1px solid var(--fh-border);
}

.fh-filters { display: flex; flex-wrap: wrap; gap: var(--fh-space-2); align-items: center; }
.fh-seg { display: inline-flex; background: var(--fh-bg-surface); border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-full); padding: 2px; gap: 2px; }
.fh-seg > span { padding: 4px 14px; border-radius: var(--fh-radius-full); font-size: var(--fh-fs-sm); }
.fh-seg > span.fh-on { background: var(--fh-accent); color: var(--fh-text-on-accent); font-weight: var(--fh-fw-semibold); }

.fh-rail { position: relative; padding-left: 22px; }
.fh-rail::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--fh-border); }
.fh-rail-item { position: relative; padding-bottom: var(--fh-space-4); }
.fh-rail-dot { position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fh-neutral); box-shadow: 0 0 0 3px var(--fh-bg-card-solid); }

.fh-map {
  position: relative; height: 180px; border-radius: var(--fh-radius-control); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--fh-border) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--fh-border) 23px 24px),
    var(--fh-bg-recessed);
}
.fh-map > .fh-pin { position: absolute; transform: translate(-50%, -100%); font-size: 22px; }

.fh-matrix-group { text-align: center; font-size: 11px; }

.fh-chart-wrap { position: relative; height: 240px; }
.fh-chart-ph {
  height: 240px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--fh-border-medium); border-radius: var(--fh-radius-control);
  color: var(--fh-text-secondary); font-size: var(--fh-fs-sm);
}
.fh-chart-row { display: grid; gap: var(--fh-space-4); }

.b-unknown {
  border: 2px dashed var(--fh-danger); border-radius: var(--fh-radius-surface);
  padding: var(--fh-space-4); color: var(--fh-danger); font-size: var(--fh-fs-sm);
}

/* ─────────────────────────── side panel ─────────────────────────── */

#bPrompt, #bSteps, #bInspector { padding: var(--fh-space-3); }
#bPrompt { border-bottom: var(--fh-border-hairline) solid var(--fh-border); }
#bPromptText { width: 100%; min-height: 70px; resize: vertical; }
#bSteps { border-bottom: var(--fh-border-hairline) solid var(--fh-border); font-size: var(--fh-fs-sm); }
#bSteps:empty { display: none; }
#bSteps .b-step { display: flex; gap: var(--fh-space-2); color: var(--fh-text-secondary); }
#bInspector { flex: 0 0 auto; overflow: visible; }
.b-tabs { display: flex; gap: var(--fh-space-1); margin-bottom: var(--fh-space-2); }
.b-tab { padding: 4px 12px; border-radius: var(--fh-radius-full); cursor: pointer; font-size: var(--fh-fs-sm);
  border: 1px solid var(--fh-border); background: var(--fh-bg-surface); color: var(--fh-text-primary); }
.b-tab.b-on { background: var(--fh-accent); border-color: var(--fh-accent); color: var(--fh-text-on-accent); }
.b-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--fh-space-3); }
.b-field > label { font-size: 12px; color: var(--fh-text-secondary); }
.b-field > label .b-req { color: var(--fh-danger); }
.b-field input, .b-field select, .b-field textarea { width: 100%; }
.b-field .b-desc { font-size: 11px; color: var(--fh-text-secondary); }
.b-repeater { border: 1px solid var(--fh-border); border-radius: var(--fh-radius-md); padding: var(--fh-space-2); }
.b-repeater .b-rep-item { border-bottom: 1px dashed var(--fh-border); padding-bottom: var(--fh-space-2); margin-bottom: var(--fh-space-2); }
.b-repeater .b-rep-item:last-of-type { border-bottom: none; margin-bottom: 0; }
#bJsonText { width: 100%; min-height: 260px; font-family: var(--fh-font-mono); font-size: 12px; }
.b-json-err { color: var(--fh-danger); font-size: 12px; margin-top: var(--fh-space-1); white-space: pre-wrap; }
.b-err-list { margin-top: var(--fh-space-2); font-size: 12px; }
.b-err-list .b-err-row { padding: 3px 0; cursor: pointer; color: var(--fh-danger); border-bottom: 1px dashed var(--fh-border); }
.b-err-list .b-err-row.b-warn { color: var(--fh-warning); }
.b-note { font-size: 12px; color: var(--fh-text-secondary); background: var(--fh-bg-recessed);
  border: 1px solid var(--fh-border); border-radius: var(--fh-radius-md); padding: var(--fh-space-2); }

/* ─────────────────────────── modal ─────────────────────────── */

#bModal[hidden] { display: none !important; }
#bModal {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}
#bModal .b-modal-box {
  background: var(--fh-bg-elevated); border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-surface); box-shadow: var(--fh-shadow-card);
  width: min(900px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
#bModal .b-modal-head { display: flex; align-items: center; gap: var(--fh-space-2);
  padding: var(--fh-space-3) var(--fh-space-4); border-bottom: 1px solid var(--fh-border); }
#bModal .b-modal-head strong { font-size: var(--fh-fs-lg); }
#bModal .b-modal-body { padding: var(--fh-space-4); overflow: auto; }
#bModal pre { font-family: var(--fh-font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word;
  background: var(--fh-bg-recessed); border: 1px solid var(--fh-border); border-radius: var(--fh-radius-md);
  padding: var(--fh-space-3); max-height: 55vh; overflow: auto; }
.b-list-row { display: flex; align-items: center; gap: var(--fh-space-2);
  padding: var(--fh-space-2); border-bottom: 1px solid var(--fh-border); font-size: var(--fh-fs-sm); }
.b-list-row:hover { background: var(--fh-bg-surface-hover); }
.b-ep-method { font-family: var(--fh-font-mono); font-weight: var(--fh-fw-semibold); color: var(--fh-text-accent); min-width: 48px; }
.b-ep-path { font-family: var(--fh-font-mono); }

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 1100px) {
  #bMain { grid-template-columns: 1fr; grid-template-rows: auto minmax(320px, 1fr) auto; overflow: auto; }
  #bPalette, #bSide { border: none; border-bottom: var(--fh-border-hairline) solid var(--fh-border); }
  /* stacked: each pane is an accordion sized by its own content, capped at 45vh */
  #builder .b-pane { height: auto; max-height: 52vh; }
  #builder .b-pane-summary { display: block; }
  #bPalette .b-pane-body, #bSide .b-pane-body { max-height: 45vh; }
}

/* ─────────────────────────── toast + confirm ─────────────────────────── */

#bToast {
  position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--fh-bg-elevated); color: var(--fh-text-primary);
  border: 1px solid var(--fh-accent); border-radius: var(--fh-radius-full);
  padding: 8px 18px; font-size: var(--fh-fs-sm); box-shadow: var(--fh-shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 45;
}
#bToast.b-on { opacity: 1; transform: translate(-50%, 0); }

#bConfirm {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}

/* B6 — the drag-free way to place a block (also the keyboard path). */
#builder .b-pal-card .b-pal-add {
  align-self: center; font-size: var(--fh-fs-lg); line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
#builder .b-pal-card:hover .b-pal-add,
#builder .b-pal-card .b-pal-add:focus-visible { opacity: 1; }

/* ───────────────── half-width / span rows ─────────────────
   `flex: <span> 1 0` reproduces a 12-column grid closely enough for a wireframe
   and keeps the gutter a real element, so nothing shifts while the pointer moves. */

#builder .b-row { display: flex; gap: var(--fh-space-4); align-items: flex-start; }
#builder .b-row > .b-block { min-width: 0; }
#builder .b-block { position: relative; }

#builder .b-lonely-chip {
  font-size: 10px; padding: 1px 7px; border-radius: var(--fh-radius-full);
  background: rgba(245,158,11,.14); color: var(--fh-warning); cursor: help; white-space: nowrap;
}
#builder button.b-icon.b-on { color: var(--fh-text-on-accent); background: var(--fh-accent); }

/* the handle that lives between two side-by-side blocks */
#builder .b-gutter {
  position: relative; flex: 0 0 14px; align-self: stretch; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--fh-radius-full); cursor: col-resize;
  color: var(--fh-text-secondary); transition: background .12s ease;
}
#builder .b-gutter:hover { background: var(--fh-bg-surface-hover); color: var(--fh-text-primary); }
#builder .b-gutter-grip { pointer-events: none; font-size: var(--fh-fs-lg); line-height: 1; }
#builder .b-gutter[data-action='swap'] { background: var(--fh-accent-glow); color: var(--fh-text-accent); }
#builder .b-gutter[data-action='unpair'] { background: rgba(245,158,11,.18); color: var(--fh-warning); }
#builder .b-gutter-actions {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; gap: 2px; z-index: 6;
  background: var(--fh-bg-elevated); border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-full); padding: 3px;
}
#builder .b-gutter:hover .b-gutter-actions { display: flex; }
#builder .b-gutter-btn { font-size: 12px; padding: 1px 4px; }

/* the snap-to-grid handle on a block's right edge */
#builder .b-resize {
  position: absolute; top: 0; bottom: 0; right: -4px; width: 10px;
  cursor: col-resize; border-radius: var(--fh-radius-full);
  display: flex; align-items: center; justify-content: center;
}
#builder .b-resize::after {
  content: ''; width: 3px; height: 34px; border-radius: 2px;
  background: var(--fh-border-strong); opacity: 0; transition: opacity .12s ease;
}
#builder .b-block:hover .b-resize::after { opacity: .7; }
#builder .b-resize.b-on::after { opacity: 1; background: var(--fh-accent); height: 100%; }
#builder .b-resize-badge {
  position: absolute; top: 6px; right: 12px; white-space: nowrap;
  font-size: 11px; font-family: var(--fh-font-mono);
  color: var(--fh-text-on-accent); background: var(--fh-accent);
  border-radius: var(--fh-radius-full); padding: 1px 8px;
}
#builder .b-resize-badge:empty { display: none; }

#builder .b-layout-pane { border-bottom: 1px dashed var(--fh-border); padding-bottom: var(--fh-space-2); margin-bottom: var(--fh-space-3); }
#builder .b-inline-field { display: flex; align-items: center; gap: 8px; font-size: var(--fh-fs-sm); margin-bottom: var(--fh-space-2); }
#builder .b-inline-field input { width: auto; }

/* ───────────────── the Markdown subset ───────────────── */

#builder .fh-md { line-height: var(--fh-lh-normal); }
#builder .fh-md-h1 { font-size: var(--fh-fs-2xl); font-weight: var(--fh-fw-semibold); letter-spacing: var(--fh-ls-tight); margin: 0 0 var(--fh-space-2); }
#builder .fh-md-h2 { font-size: var(--fh-fs-lg); font-weight: var(--fh-fw-semibold); margin: var(--fh-space-3) 0 var(--fh-space-1); }
#builder .fh-md-h3 { font-size: var(--fh-fs-base); font-weight: var(--fh-fw-semibold); color: var(--fh-text-secondary); margin: var(--fh-space-3) 0 var(--fh-space-1); }
#builder .fh-md-p { margin: 0 0 var(--fh-space-3); max-width: 72ch; }
#builder .fh-md-p:last-child { margin-bottom: 0; }
#builder .fh-md-list { margin: 0 0 var(--fh-space-3); padding-left: var(--fh-space-5); }
#builder .fh-md-list li { margin-bottom: var(--fh-space-1); }
#builder .fh-md-code {
  font-family: var(--fh-font-mono); font-size: 12px; padding: 1px 5px;
  border-radius: var(--fh-radius-sm); background: var(--fh-bg-recessed); border: 1px solid var(--fh-border);
}
#builder .fh-md-link { color: var(--fh-text-accent); text-decoration: underline; text-underline-offset: 2px; cursor: help; }