/* V856 — stable desktop header proportions and collision-free navigation. */
@media (min-width: 1121px) {
  html body.app-modern-shell .workspace-utility-bar,
  html body.app-modern-shell.sidebar-collapsed .workspace-utility-bar {
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  html body.app-modern-shell .workspace-utility-bar .header-actions,
  html body.app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
    width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  html body.app-modern-shell .app-header,
  html body.app-modern-shell.products-modern-body .app-header {
    /* JS writes the real utility width into --gm-actions-reserve. */
    padding-right: var(--gm-actions-reserve, 390px) !important;
    column-gap: clamp(8px, 1vw, 18px) !important;
  }

  html body.app-modern-shell .main-nav,
  html body.app-modern-shell.products-modern-body .main-nav {
    justify-content: flex-start !important;
    gap: calc(1px + 5px * var(--gm-nav-fit, 1)) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body.app-modern-shell .main-nav-menu,
  html body.app-modern-shell.products-modern-body .main-nav-menu {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
  }

  html body.app-modern-shell .main-nav__link,
  html body.app-modern-shell .main-nav-menu > .main-nav__link,
  html body.app-modern-shell.products-modern-body .main-nav__link,
  html body.app-modern-shell.products-modern-body .main-nav-menu > .main-nav__link {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding-inline: calc(2px + 6px * var(--gm-nav-fit, 1)) !important;
    font-size: calc(8.7px + 3px * var(--gm-nav-fit, 1)) !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body.app-modern-shell .main-nav__link > span,
  html body.app-modern-shell .main-nav-menu > .main-nav__link > span {
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  html body.app-modern-shell .brand-name,
  html body.app-modern-shell.products-modern-body .brand-name {
    font-size: calc(12px + 3px * var(--gm-nav-fit, 1)) !important;
    white-space: nowrap !important;
  }
}

/* Mid-size desktop remains a desktop header, but compacts as one system instead
   of allowing individual navigation labels to collapse into each other. */
@media (min-width: 1121px) and (max-width: 1480px) {
  html body.app-modern-shell .app-header,
  html body.app-modern-shell.products-modern-body .app-header {
    grid-template-columns: clamp(132px, 10vw, 158px) minmax(0, 1fr) !important;
    padding-left: 12px !important;
  }
  html body.app-modern-shell .header-profile-button__text { display: none !important; }
}