/*
 * 手机 / 平板：地址栏和底部工具栏随滚动伸缩时，页面不跳动、不被遮挡
 *
 * - 整屏高度用 svh（工具栏展开时的可视高度），滚动时不会变
 * - 弹出层用 dvh（始终贴满当前可视区域）
 * - 每条都先写一遍 vh，老浏览器不认识 svh / dvh 时用它兜底
 * - 固定在底部的元素加上 iPhone 底部横条的安全区留白
 *
 * 电脑上没有会伸缩的工具栏，svh / dvh 和 vh 完全相等，安全区为 0，所以电脑端效果不变。
 */

/* ---------- 整屏区块：svh ---------- */

/* 首页头图 */
#page-header.full_page {
  height: 100vh;
  height: 100svh;
}

/* 页面整体最小高度（内容少时页脚贴底） */
#body-wrap {
  min-height: 100vh;
  min-height: 100svh;
}

/* 文章目录的滚动区域 */
#aside-content #card-toc .toc-content {
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}
#page-header.fixed + .layout #card-toc .toc-content {
  max-height: calc(100vh - 170px);
  max-height: calc(100svh - 170px);
}

/* ---------- 弹出层：dvh ---------- */

/* 手机侧边菜单 */
#sidebar #sidebar-menus {
  height: 100vh;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 固定在底部的元素：加安全区留白 ---------- */

/* 右下角按钮组（日夜切换、回到顶部等） */
#rightside {
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* 页脚文字不被 iPhone 底部横条挡住 */
#footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media screen and (max-width: 900px) {
  /* 手机 / 平板上的悬浮目录 */
  #aside-content #card-toc {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  #aside-content #card-toc .toc-content {
    max-height: calc(100vh - 140px);
    max-height: calc(100svh - 140px);
  }
}

/* ---------- 滚动条：不靠滚动条宽度排版 ---------- */

/* 预留滚动条的位置（Windows 上滚动条占宽度；Mac 上滚动条悬浮，不占位置），
   这样打开菜单、锁住滚动时，页面不会左右跳 */
html {
  scrollbar-gutter: stable;
}

/* 打开手机侧边菜单时锁住背后页面的滚动（tech-bg.js 加上 scroll-locked） */
html.scroll-locked {
  overflow: hidden;
}