/* 开场与菜单锁定滚动时，根视口仍保留滚动条位置，避免内容横向跳动。 */
html {
  scrollbar-gutter: stable;
}

@supports (scrollbar-gutter: stable) {
  /* 已保留位置的浏览器无需再叠加菜单的旧版宽度补偿。 */
  body.site-menu-open {
    padding-right: 0;
  }
}

/* 仅调整桌面原生滚动条；触屏和系统高对比度模式保留平台样式。 */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  :root {
    --site-scrollbar-track: #f3ebdc;
    --site-scrollbar-thumb: #997336;
    --site-scrollbar-thumb-active: #79551f;
    background-color: var(--site-scrollbar-track);
  }

  @supports selector(::-webkit-scrollbar) {
    html::-webkit-scrollbar,
    .joined-work-viewport::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    html::-webkit-scrollbar-track,
    .joined-work-viewport::-webkit-scrollbar-track {
      background: var(--site-scrollbar-track);
    }

    html::-webkit-scrollbar-thumb,
    .joined-work-viewport::-webkit-scrollbar-thumb {
      min-height: 44px;
      min-width: 44px;
      border: 2px solid var(--site-scrollbar-track);
      border-radius: 999px;
      background: var(--site-scrollbar-thumb);
    }

    html::-webkit-scrollbar-thumb:hover,
    html::-webkit-scrollbar-thumb:active,
    .joined-work-viewport::-webkit-scrollbar-thumb:hover,
    .joined-work-viewport::-webkit-scrollbar-thumb:active {
      background: var(--site-scrollbar-thumb-active);
    }

    html::-webkit-scrollbar-button,
    .joined-work-viewport::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }

    html::-webkit-scrollbar-corner,
    .joined-work-viewport::-webkit-scrollbar-corner {
      background: var(--site-scrollbar-track);
    }
  }

  @supports not selector(::-webkit-scrollbar) {
    html,
    .joined-work-viewport {
      scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track);
      scrollbar-width: thin;
    }
  }
}