/* builder page styles (page-specific only; shared patterns live in app.css). */
.bl-filter { gap: 10px; align-items: center; padding: 4px 0 8px; }
.bl-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--pg-gap); align-items: start; }
.bl-type { padding: 14px var(--pad-x); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bl-type p { margin: 0; }
.bl-add { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 14px var(--pad-x) 0; }
.bl-addb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 64px; border: 1px solid var(--border-default); border-radius: var(--radius); background: transparent; color: var(--fg-1); font: 500 var(--text-xs) var(--font-sans); cursor: pointer; }
.bl-addb:hover { background: var(--bg-muted); }
.bl-pad { padding: 10px var(--pad-x) 14px; margin: 0; }
.bl-eh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px var(--pad-x); border-bottom: 1px solid var(--border-subtle); background: var(--bg-muted); }
.bl-f { padding: 12px var(--pad-x); border-bottom: 1px solid var(--border-subtle); }
.bl-f .field { margin: 0; }
.bl-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--pad-x); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; background: var(--bg-muted); border-radius: var(--radius); border: 1px solid var(--border-default); }
.seg button { height: calc(var(--control-h-sm) - 2px); padding: 0 6px; border: 0; border-radius: calc(var(--radius) - 2px); font: 500 var(--text-sm) var(--font-sans); cursor: pointer; background: transparent; color: var(--fg-2); }
.seg button[aria-checked="true"] { background: var(--surface-1); color: var(--fg-1); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* the canvas */
.bl-w { position: relative; cursor: pointer; overflow: visible; }
.bl-w.sel { outline: 2px solid var(--prism-stop-violet, var(--chart-1)); outline-offset: -1px; cursor: default; }
.bl-w.dragging { opacity: .45; }
.bl-w:focus-visible { outline: 2px solid var(--focus-ring, var(--chart-1)); }
.bl-selt { position: absolute; top: -10px; left: 12px; padding: 1px 8px; border-radius: var(--radius); background: var(--fg-1); color: var(--bg-canvas, var(--surface-1)); font-size: var(--text-xs); font-weight: 500; }
.bl-new { position: absolute; top: -10px; right: 12px; display: inline-flex; }
.bl-grip { color: var(--fg-3); cursor: grab; padding-top: 2px; flex: none; }
.bl-corner { position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); cursor: nwse-resize; touch-action: none; }
.bl-drop { grid-column: span 12; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 70px; border: 1px dashed var(--border-strong, var(--border-default)); border-radius: var(--radius); background: transparent; color: var(--fg-2); font: var(--font-body) var(--font-sans); cursor: pointer; }
.bl-drop:hover { background: var(--bg-muted); }
.bl-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bl-checks li { display: flex; gap: 8px; align-items: flex-start; }
.bl-checks li.ok svg { color: var(--approved-fg); }
.bl-checks li.no svg { color: var(--pending-fg); }
@media (max-width: 1100px) { .bl-grid { grid-template-columns: 1fr; } }

/* the top row: name, type, filter and who can open it, labels above, wrapping on narrow screens */
.bl-top { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(170px, 1fr) minmax(220px, 1.3fr); gap: 12px 16px; align-items: start; padding: 4px 0 12px; }
.bl-top .field { margin: 0; }
.bl-top .ds-sel-trig, .bl-top .ds-in-wrap { width: 100%; }
.bl-locked { display: flex; align-items: center; min-height: var(--control-h-sm); color: var(--fg-1); }
@media (max-width: 1100px) { .bl-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bl-top { grid-template-columns: minmax(0, 1fr); } }
.bl-f .hint.err { display: block; margin-top: 6px; }