/* Desktop flyouts must stay readable at both sides of the viewport. */
@media (min-width: 992px) {
  /* Keep the flyout invisible while the script chooses its final side. This
     prevents the one-frame right-to-left flash at the viewport edge. */
  #adtm_menu ul#menu > li.li-niveau1.codex-menu-measuring > .adtm_sub,
  #adtm_menu .bp-tree-wrap li.bp-tree-li.codex-tree-measuring > ul.bp-tree {
    visibility: hidden !important;
  }

  #adtm_menu ul#menu > li.li-niveau1.codex-menu-open-left > .adtm_sub {
    left: auto !important;
    right: 0 !important;
    transform: translateX(var(--codex-menu-panel-offset, 0));
  }

  #adtm_menu .bp-tree-wrap li.bp-tree-li.has-children.codex-tree-open-left > ul.bp-tree {
    left: auto !important;
    right: calc(100% + 2px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(var(--codex-tree-panel-offset, 0));
  }

  /* The content comes from the menu module and may grow over time. Limit a
     panel to the visible viewport; labels then wrap instead of creating a
     horizontal overflow. Keep overflow visible: nested panels must remain
     reachable outside their parent panel. */
  #adtm_menu .bp-tree-wrap > ul.bp-tree,
  #adtm_menu .bp-tree-wrap ul.bp-tree ul.bp-tree {
    box-sizing: border-box !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* A child panel needs enough room for a category label. A flex row keeps
     the following lines aligned with the label, never below its icon. */
  #adtm_menu .bp-tree-wrap ul.bp-tree ul.bp-tree {
    width: max-content !important;
    min-width: 280px !important;
  }

  #adtm_menu .bp-tree-wrap li.bp-tree-li > a.bp-tree-link {
    display: flex !important;
    align-items: flex-start !important;
    column-gap: 8px !important;
    white-space: normal !important;
  }

  #adtm_menu .bp-tree-wrap li.bp-tree-li > a.bp-tree-link .bp-item-icon {
    flex: 0 0 auto !important;
    margin: 3px 0 0 !important;
  }

  #adtm_menu .bp-tree-wrap li.bp-tree-li > a.bp-tree-link .bp-item-name {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #adtm_menu .bp-tree-wrap li.bp-tree-header > a.bp-tree-headlink {
    white-space: normal !important;
  }
}