/* ============================================================
   safe-area.css — PWA / 刘海屏安全区兜底（所有页面共用）· De finale
   ============================================================
   背景：manifest display=standalone + viewport-fit=cover 时网页铺满整块
   屏幕，iOS 的状态栏 / 灵动岛 / 底部 Home Indicator 会压在内容上面。
   此前只有 thema / notes 的抽屉写了 env(safe-area-inset-bottom)，页面
   顶栏完全没有让开状态栏；而 ≤720px 时顶栏导航只剩一个「登录 / 注册」，
   它正好落在状态栏那一条上 —— 点下去被系统状态栏吃掉（触发「点顶部回到
   顶部」），手机 PWA 里因此点不到登录。

   加载方式：每个页面 <head> 末尾、页面自带 <style> 之后引入，保证这里的
   兜底规则能盖住页面样式。与 mobile.css 分工：mobile.css 只管 ≤900px 的
   排版，这里只管安全区，任何宽度（含平板 / 桌面 PWA）都生效。

   非刘海设备、浏览器标签页里 env() 解析为 0，等于什么都没改。
   ============================================================ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ---------- 1) 整页让开安全区 ----------
   body 是 header + main + footer 的 flex 列容器：给 body 加内边距即可让
   整条顶栏（含登录按钮）落到状态栏下方，底部同时避开 Home Indicator。 */
body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* ---------- 2) 侧滑抽屉 ----------
   position:fixed 不受 body 内边距影响，单独让开（只在抽屉打开时生效，
   避免影响同样叫 .browser 的普通容器）。 */
@media (max-width: 960px) {
  body.drawer-open .browser,
  body.drawer-open aside#sidebar {
    top: var(--sat);
    left: var(--sal);
  }
}
/* video_notes.html 的目录也是固定定位，top 写死 63px（顶栏高度） */
@media (max-width: 900px) {
  .page-vnotes aside {
    top: calc(63px + var(--sat));
    bottom: var(--sab);
  }
}

/* ---------- 3) 登录 / 注册弹窗 ----------
   弹窗是 position:fixed，body 内边距管不到：四边让开安全区，并改成
   「可滚动 + 自动居中」，软键盘弹出或小屏横屏时按钮不会被裁掉。 */
.modal-backdrop {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
}
.modal-backdrop .modal {
  margin: auto;
}