/* Global scroll-nav rail behavior: enable mask mode whenever nav overflows. */
.gb-body .scroll-nav-wrap {
  --scroll-nav-edge: 16px;
  overflow-x: hidden;
}

.gb-body .scroll-nav {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gb-body .scroll-nav::-webkit-scrollbar {
  height: 0;
}

.gb-body .scroll-nav-mask {
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--scroll-nav-edge),
    #000 calc(100% - var(--scroll-nav-edge)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--scroll-nav-edge),
    #000 calc(100% - var(--scroll-nav-edge)),
    transparent
  );
}

.gb-body .scroll-nav-wrap.scroll-nav-fixed .scroll-nav-mask {
  mask-image: none;
  -webkit-mask-image: none;
}

/* Safety inset so first/last labels don't sit inside fade zone. */
.gb-body .scroll-nav__track {
  padding-inline: max(var(--scroll-nav-pad-start, 0px), calc(var(--scroll-nav-edge) + 6px))
    max(var(--scroll-nav-pad-end, 0px), calc(var(--scroll-nav-edge) + 6px));
}