/* builder.css — widget builder page */
.page-builder .topbar {
  gap: 16px;
}
.meta-fields {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.meta-fields input[type="text"], .meta-fields input:not([type]), .meta-fields input[type="number"], .meta-fields select {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  font: inherit;
}
.meta-fields input[type="number"] { width: 56px; }
.meta-fields .hint { display: inline-flex; align-items: center; gap: 6px; }

.builder-blocks {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
}
.builder-blocks .bb {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  cursor: grab;
  text-align: center;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  user-select: none;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.builder-blocks .bb:hover { border-color: var(--accent); transform: translateY(-1px); }
.builder-blocks .bb:active { cursor: grabbing; }
.builder-blocks .bb .glyph { font-size: 18px; color: var(--accent); }
.builder-blocks .bb .meta { color: var(--fg-3); font-size: 10px; }

.builder-stage {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  width: 100%;
  height: 100%;
}
.builder-canvas {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  overflow: auto;
}
.canvas-label {
  position: absolute;
  top: 6px;
  left: 14px;
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  pointer-events: none;
}
.builder-canvas .grid-stack {
  margin-top: 16px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 8.333% 100%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 100% 32px;
  background-color: var(--bg-3);
  border-radius: var(--r-md);
  min-height: 320px;
}

.builder-inspect {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  overflow-y: auto;
}
.ins-title {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.ins-empty { padding: 14px 0; text-align: center; }
.ins-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ins-row label {
  font-size: 11px;
  color: var(--fg-3);
}
.ins-row input, .ins-row textarea, .ins-row select {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font: inherit;
}
.ins-row textarea { min-height: 60px; resize: vertical; }
.constraint-pill {
  display: inline-block;
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fg-2);
  margin: 2px 4px 2px 0;
}

/* canvas blocks (smaller than dashboard widgets) */
.canvas .grid-stack-item-content {
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px;
  font-size: 11px;
  cursor: pointer;
}
.canvas .grid-stack-item.selected .grid-stack-item-content {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

@media (max-width: 900px) {
  .builder-stage { grid-template-columns: 1fr; }
  .builder-inspect { max-height: 240px; }
}