/* Panel sizes are personal workspace preferences, separate from website styles. */
#builder-dialog.panel-layout .builder-workspace[hidden],
#builder-dialog .panel-resizer[hidden] { display: none; }

#builder-dialog .panel-resizer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  align-self: stretch;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  background: #eef1e8;
  border-inline: 1px solid #d2dbc9;
  outline-offset: -2px;
  z-index: 2;
}
#builder-dialog .panel-resizer span {
  width: 3px;
  height: 38px;
  border-radius: 3px;
  background: #91a383;
}
#builder-dialog .panel-resizer:hover,
#builder-dialog .panel-resizer:focus-visible { background: #dbe7d0; }
#builder-dialog .panel-resizer:focus-visible { outline: 2px solid #385d2c; }
#builder-dialog.panel-resizing,
#builder-dialog.panel-resizing * { cursor: col-resize !important; user-select: none !important; }
#builder-dialog.panel-resizing iframe { pointer-events: none; }

#builder-dialog.panel-layout .builder-workspace { padding: 20px 24px; gap: 16px; }
#builder-dialog.panel-layout #cloud-save-status { margin: 0; }
#builder-dialog.panel-layout #cloud-save-status:empty { display: none; }
.builder-details { border: 1px solid #c9d5bf; border-radius: 10px; background: #f7f9f2; flex: none; }
.builder-details > summary { cursor: pointer; padding: 15px 17px; font-size: 15px; font-weight: 650; color: #1e3b2e; }
.builder-details > summary small { display: block; margin: 5px 0 0 17px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #607057; }
.builder-details[open] > summary { border-bottom: 1px solid #d8e1ce; }
.builder-manual-content { max-height: min(60vh, 640px); padding: 18px 16px 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.builder-manual-content .builder-steps { flex-wrap: wrap; margin-bottom: 20px; }
.builder-manual-content .builder-footer { flex-wrap: wrap; bottom: 0; margin-inline: -16px; padding-inline: 16px; }

@media (min-width: 801px) {
  #builder-dialog.panel-layout .builder-body,
  #builder-dialog.panel-layout.preview-expanded .builder-body {
    grid-template-columns: var(--editor-width, 36%) var(--editor-grip, 10px) minmax(0, 1fr);
  }
  #builder-dialog.panel-layout .builder-workspace { grid-column: 1; grid-row: 1; min-width: 0; }
  #builder-dialog.panel-layout #editor-resizer { grid-column: 2; grid-row: 1; }
  #builder-dialog.panel-layout .preview-workspace { grid-column: 3; grid-row: 1; min-width: 0; border-left: 0; padding: 22px 18px 14px; }
}
@media (max-width: 800px) {
  #builder-dialog .panel-resizer { display: none; }
  #builder-dialog.panel-layout .builder-workspace { max-width: none; }
  .builder-manual-content { max-height: 60vh; }
}