@layer components {
  /* Page editor — Editor.js integration styles for CMS content editing. */
  .app-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-spacing);
    margin-bottom: var(--app-spacing);
  }

  .app-page-header > div {
    display: flex;
    align-items: center;
    gap: var(--app-spacing);
  }

  .app-page-header > div > * {
    margin-bottom: 0;
    width: auto;
  }

  .app-page-header button,
  .app-page-header input {
    margin-bottom: 0;
    width: auto;
  }

  .app-page-header h1 {
    margin: 0;
  }

  label.app-field > span {
    display: block;
  }

  label.app-field > small {
    display: block;
  }

  .page-editor-actions {
    margin-top: var(--app-spacing);
    display: flex;
    gap: var(--app-spacing);
    justify-content: flex-end;
  }

  .page-editor[data-edit-mode="view"] .page-editor-actions {
    display: none;
  }

  .page-editor[data-edit-mode="view"] .ce-toolbar,
  .page-editor[data-edit-mode="view"] .ce-inline-toolbar,
  .page-editor[data-edit-mode="view"] .ce-popover {
    display: none !important;
  }

  .ce-block__content,
  .ce-toolbar__content {
    max-width: 90% !important;
  }

  .ce-editorjsColumns_wrapper .ce-toolbar__content,
  .ce-editorjsColumns_wrapper .ce-block__content {
    max-width: 100% !important;
  }

  .ce-popover-item[data-item-name="columns"] svg {
    width: 14px;
    height: 14px;
  }

  .app-details-aside-section button {
    margin-bottom: 0;
  }

  @media (min-width: 968px) {
    .app-page-action-card {
      position: sticky;
      top: calc(var(--app-spacing) * 4);
    }
  }
}