/* C04 styles stay inside the additive Builder surface and its native dialogs. */
.creator-builder { max-width: 82rem; overflow-wrap: anywhere; }
.builder-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.builder-header h1 { margin: 0; font-size: 1.625rem; line-height: 1.2; letter-spacing: -.025em; }
.builder-header > div { min-width: 0; }
.builder-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.builder-draft-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1.25rem; padding: 1rem; border: 1px solid #efd9b1; border-radius: var(--radius-md); background: #fffbf2; font-size: .875rem; }
.builder-draft-notice p, .builder-draft-notice small { flex-basis: 100%; margin: 0; }
.builder-draft-notice small { color: var(--color-ink-600); }
.builder-layout { display: flex; flex-direction: column; gap: 1rem; }
.builder-panel { min-width: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.builder-panel h2, .builder-settings h2 { margin: 0 0 .5rem; font-size: 1rem; }
.builder-help { margin: .5rem 0 .75rem; color: var(--color-ink-600); font-size: .75rem; }
.builder-preview { order: 0; background: var(--color-brand-50); border-color: var(--color-brand-100); }
.builder-content { order: 1; }
.builder-settings-host { display: none; }
.builder-preview-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.builder-preview-heading h2 { margin: 0; }
.builder-preview-heading .status-pill { font-size: .75rem; }
.builder-draft-page { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--color-brand-500); border-radius: var(--radius-md); background: var(--color-surface-1); }
.builder-preview-kicker { margin: 0 0 .5rem; color: var(--color-brand-700); font-size: .75rem; font-weight: 750; }
.builder-draft-page h3 { margin: 0; font-size: 1.375rem; line-height: 1.3; }
#draftPreviewDescription { margin: .5rem 0 1.25rem; color: var(--color-ink-600); font-size: .875rem; white-space: pre-wrap; }
.builder-preview-items { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.builder-preview-items li { min-width: 0; }
.builder-preview-item { display: flex; flex-direction: column; gap: .3rem; width: 100%; min-height: 2.75rem; padding: .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-1); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.builder-preview-item span { color: var(--color-ink-600); font-size: .875rem; white-space: pre-wrap; }
.builder-preview-item small { color: var(--color-ink-600); font-size: .75rem; }
.builder-preview-item[aria-pressed="true"], .builder-select-item[aria-pressed="true"] { border-color: var(--color-brand-600); background: var(--color-brand-50); box-shadow: inset 3px 0 var(--color-brand-600); }
.builder-item-list { display: none; }
.builder-add { margin-top: 1rem; }
.builder-add-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.builder-add-types .button { min-width: 0; padding: .6rem .5rem; font-size: .8125rem; }
.creator-builder fieldset { min-width: 0; margin: 1rem 0; padding: 0; border: 0; }
.creator-builder legend { padding: 0; margin-bottom: .75rem; font-size: .875rem; font-weight: 800; }
.builder-settings label { display: block; margin: .75rem 0 .3rem; font-size: .8125rem; font-weight: 750; }
.builder-settings input, .builder-settings textarea, .builder-settings select { width: 100%; min-width: 0; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-ink-950); background: var(--color-surface-1); }
.builder-settings textarea { resize: vertical; }
.builder-reorder { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .75rem; }
.builder-remove { color: #962b25; border-color: #e4bcb7; background: #fff5f4; }
.creator-builder button:disabled { cursor: default; opacity: .5; }
.creator-builder :is(button, input, textarea, select, a):focus-visible { outline: 2px solid var(--color-brand-600); outline-offset: 3px; }
.builder-dialog { width: min(calc(100% - 2rem), 30rem); max-width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 1rem; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); color: var(--color-ink-950); box-shadow: var(--shadow-md); }
.builder-dialog::backdrop { background: rgba(23, 23, 42, .5); }
.builder-dialog h2 { margin-top: 0; font-size: 1.125rem; }
.builder-dialog p { font-size: .875rem; }
.builder-dialog-bar { position: sticky; top: -1rem; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: -1rem -1rem 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-1); font-weight: 800; }
.builder-dialog-bar .builder-modal-state { flex-basis: 100%; margin: 0; color: var(--color-ink-800); font-size: .75rem; }
.builder-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.builder-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 47.99rem) {
  .builder-draft-notice { position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 2; }
  .builder-settings-dialog { width: calc(100% - 1rem); max-width: calc(100% - 1rem); margin: auto auto .5rem; max-height: calc(100dvh - 1rem); }
  .builder-content > .button { width: 100%; }
}
@media (min-width: 48rem) {
  .builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem); align-items: start; }
  .builder-content { grid-column: 1 / -1; grid-row: 1; }
  .builder-preview { grid-column: 1; grid-row: 2; }
  .builder-settings-host { display: block; grid-column: 2; grid-row: 2; }
  .builder-add-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 68.75rem) {
  .builder-layout { grid-template-columns: minmax(9rem, .65fr) minmax(0, 1.8fr) minmax(14rem, 1fr); }
  .builder-content { grid-column: 1; grid-row: 1; }
  .builder-preview { grid-column: 2; grid-row: 1; }
  .builder-settings-host { grid-column: 3; grid-row: 1; }
  .builder-item-list { display: grid; gap: .5rem; margin-top: 1rem; }
  .builder-select-item { min-width: 0; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-1); text-align: left; cursor: pointer; overflow-wrap: anywhere; font-size: .8125rem; }
  .builder-add-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}