/* Widget builder page; colours and spacing come from site.css tokens. */
.wrap { max-width: 1040px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
.lead { color: var(--on-surface-variant); margin-bottom: var(--space-lg); }
.cols { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.panel { border: 1px solid var(--outline-variant); border-radius: 8px; padding: var(--space-md); background: var(--surface); }
.panel h2 { font-size: 1rem; margin: var(--space-md) 0 var(--space-sm); }
.panel > h2:first-child { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; color: var(--on-surface-variant); margin-bottom: var(--space-sm); }
.field[hidden] { display: none; }
.builder select, .builder textarea, .builder button {
  font: inherit; font-size: 0.875rem; color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--outline); border-radius: 6px; padding: 6px 10px; min-height: 36px;
}
.builder textarea { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 0.8125rem; resize: vertical; line-height: 1.5; }
.builder button { cursor: pointer; margin-top: var(--space-sm); background: var(--primary-container); color: var(--on-primary-container); border-color: var(--primary); }
.builder button:hover { background: var(--surface-container); }
.note { font-size: 0.8125rem; color: var(--on-surface-variant); margin: var(--space-sm) 0 0; }
#preview { display: block; border: 0; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }