/* The form builder's layout (TASK-103, 2f): three panes on desktop — question types, the form, a
   properties pane that is hidden until opened — and one column on phones. Which panes show is
   state on #builder (data-drawer: closed | question | form; data-sheet: open | closed), set by the
   builder Stimulus controller, so it survives every redraw of the panes. */
.builder-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
/* The form that wraps the form and the properties pane lets them be grid items themselves. */
.builder-form { display: contents; }

#builder[data-drawer="closed"] #builder_drawer { display: none; }
#builder[data-drawer="question"] #drawer_form_mode,
#builder[data-drawer="form"] #drawer_question_mode { display: none; }
#builder[data-drawer="question"] [data-drawer-title="form"],
#builder[data-drawer="form"] [data-drawer-title="question"] { display: none; }
#builder[data-drawer="question"] .builder-tab[data-tab="question"],
#builder[data-drawer="form"] .builder-tab[data-tab="form"] { background: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-primary); }

.builder-fab { display: none; }
.builder-done { display: none; }
.builder-close-sheet { display: none; }

@media (min-width: 1024px) {
  .builder-grid { flex: 1 1 auto; min-height: 0; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #builder[data-drawer="question"] .builder-grid,
  #builder[data-drawer="form"] .builder-grid { grid-template-columns: 15rem minmax(0, 1fr) 22rem; }
}

@media (max-width: 1023px) {
  /* the question types: a sheet from the bottom, opened by the "+ Add question" button */
  #builder_palette { display: none; }
  #builder[data-sheet="open"] #builder_palette {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; max-height: 72%; overflow-y: auto; z-index: 40;
    border-radius: 1rem 1rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25);
  }
  .builder-close-sheet { display: inline-flex; }
  .builder-fab { display: inline-flex; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 30; border-radius: 999px; }
  #builder[data-sheet="open"] .builder-fab { display: none; }
  /* properties: a full screen over the form, closed with Done */
  #builder[data-drawer="question"] #builder_drawer,
  #builder[data-drawer="form"] #builder_drawer { position: fixed; inset: 0; z-index: 45; overflow-y: auto; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .builder-done { display: inline-flex; }
}