/* Workspace spacing only. Email content and exported HTML retain their own rules. */
:root {
  --flow-space-2: 8px;
  --flow-space-3: 12px;
  --flow-space-4: 16px;
  --flow-space-5: 20px;
  --flow-space-6: 24px;
}

/* A field can be a label or a div. Both need a real block box so the existing
   bottom margin separates the control from the next section. */
label.field {
  display: block;
  min-width: 0;
}

.field,
.field-row > * {
  min-width: 0;
}

.field :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

label.field:has(+ .design-icon-grid) {
  margin-bottom: var(--flow-space-5);
}

.design-icon-grid {
  gap: var(--flow-space-3);
}

.design-icon-option {
  min-width: 0;
}

.design-icon-option > span {
  max-width: 100%;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Headings and control groups wrap before they can squeeze against each other. */
.topbar {
  gap: var(--flow-space-4);
  flex-wrap: wrap;
}

.topbar > .crumb {
  min-width: 0;
  flex-wrap: wrap;
  line-height: 1.6;
}

.top-tools {
  gap: var(--flow-space-3);
}

.toolbar,
.toolbar-left,
.toolbar-right,
.section-heading {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--flow-space-3);
}

.page-head > div,
.section-heading > div,
.rq-title-line {
  min-width: 0;
}

.section-heading > .help-icon {
  flex-shrink: 0;
}

.v1-tool-actions,
.v1-campaign-tools > div,
.studio-block-tools,
.editor-actions,
.rq-row-actions,
.fb-template-actions,
.library-tabs,
.fh-toolbar,
.fm-zone-field > div,
.ft-target-control,
#context-time-converter .ft-target-control {
  gap: var(--flow-space-2);
}

.section-help-tools {
  flex-wrap: wrap;
  gap: var(--flow-space-2);
}

.compose-footer,
.block-row {
  gap: var(--flow-space-3);
  flex-wrap: wrap;
}

.compose-footer > .btn {
  flex-shrink: 0;
}

.inspector-fields .field-row {
  column-gap: var(--flow-space-3);
}

/* Autocomplete floats clear of its input; its existing positioning and focus
   handling remain unchanged. Resource search can use a full row when needed. */
.mc-suggestions {
  top: calc(100% + var(--flow-space-2));
}

.mc-settings-toolbar,
.mc-catalog-toolbar,
.mc-page-meta {
  flex-wrap: wrap;
  gap: var(--flow-space-4);
}

.mc-search-field {
  min-width: 0;
}

.mc-catalog-toolbar .mc-search-field {
  flex-basis: 240px;
}

.mc-pagination > div,
.mc-tabs,
.pl-navigation {
  flex-wrap: wrap;
  gap: var(--flow-space-2);
}

@media (max-width: 620px) {
  .topbar,
  body.studio-mode .topbar {
    gap: var(--flow-space-3);
  }

  .top-tools,
  body.studio-mode .top-tools {
    gap: var(--flow-space-2);
  }

  .campaign-toolbar .toolbar-right,
  .v1-tool-actions,
  .v1-campaign-tools > div:last-child,
  .v1-export-actions {
    gap: var(--flow-space-2);
  }

  .mc-catalog-toolbar .mc-search-field {
    flex-basis: 100%;
  }

  .mc-settings-toolbar > .field,
  .mc-page-meta > .field {
    min-width: 0;
    max-width: 100%;
  }

  .pl-filters {
    flex-wrap: wrap;
  }

  .pl-filters label {
    min-width: 0;
    flex: 1 1 120px;
  }
}