/* Center-zone safe areas around collapsible menu panels. */

  #workspace_root.menu-workspace #top_zone,
  #workspace_root.menu-workspace #content_zone,
  #workspace_root.menu-workspace #bottom_zone {
    --menu-safe-left: var(--left-zone-width);
    --menu-safe-right: var(--right-zone-width);
  }

  #workspace_root.menu-workspace.menu-left-collapsed #top_zone,
  #workspace_root.menu-workspace.menu-left-collapsed #content_zone,
  #workspace_root.menu-workspace.menu-left-collapsed #bottom_zone {
    --menu-safe-left: var(--menu-side-collapsed-width);
  }

  #workspace_root.menu-workspace.menu-left-unavailable #top_zone,
  #workspace_root.menu-workspace.menu-left-unavailable #content_zone,
  #workspace_root.menu-workspace.menu-left-unavailable #bottom_zone {
    --menu-safe-left: 0px;
  }

  #workspace_root.menu-workspace.menu-right-collapsed #top_zone,
  #workspace_root.menu-workspace.menu-right-collapsed #content_zone,
  #workspace_root.menu-workspace.menu-right-collapsed #bottom_zone {
    --menu-safe-right: var(--menu-side-collapsed-width);
  }

  #workspace_root.menu-workspace.menu-right-unavailable #top_zone,
  #workspace_root.menu-workspace.menu-right-unavailable #content_zone,
  #workspace_root.menu-workspace.menu-right-unavailable #bottom_zone {
    --menu-safe-right: 0px;
  }

  #workspace_root.menu-workspace #top_zone {
    padding-left: calc(var(--menu-center-pad-x) + var(--menu-safe-left));
    padding-right: calc(var(--menu-center-pad-x) + var(--menu-safe-right));
    transition:
      padding-left 260ms cubic-bezier(0.2, 0, 0.2, 1),
      padding-right 260ms cubic-bezier(0.2, 0, 0.2, 1);
  }

  #workspace_root.menu-workspace #content_zone {
    padding-left: var(--menu-safe-left);
    padding-right: var(--menu-safe-right);
    transition:
      padding-left 260ms cubic-bezier(0.2, 0, 0.2, 1),
      padding-right 260ms cubic-bezier(0.2, 0, 0.2, 1);
  }

  #workspace_root.menu-workspace #bottom_zone {
    padding-left: var(--menu-safe-left);
    padding-right: var(--menu-safe-right);
    transition:
      transform 260ms cubic-bezier(0.2, 0, 0.2, 1),
      height 260ms cubic-bezier(0.2, 0, 0.2, 1),
      opacity 180ms ease,
      padding-left 260ms cubic-bezier(0.2, 0, 0.2, 1),
      padding-right 260ms cubic-bezier(0.2, 0, 0.2, 1);
  }

  #center_zone:has(.menu-topbar-shell) > #top_zone {
    height: var(--menu-topbar-height);
    min-height: var(--menu-topbar-height);
    max-height: var(--menu-topbar-height);
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
  }

  #center_zone:has(.new-variation-wrap) > #top_zone,
  #center_zone:has(.profile-edit-wrap) > #top_zone,
  #center_zone:has(.variation-edit-wrap) > #top_zone,
  #center_zone:has(.new-variation-wrap) > #bottom_zone,
  #center_zone:has(.profile-edit-wrap) > #bottom_zone,
  #center_zone:has(.variation-edit-wrap) > #bottom_zone {
    display: none;
  }