/* ============================================================================
   常驻外壳（shell.html）布局 —— 顶栏固定，内容区热切换
   ----------------------------------------------------------------------------
   为什么要这层外壳：
     原来是四个独立页面，点一次导航整份文档重新加载，顶栏跟着重建一次。
     即使把顶栏样式做得一模一样，页面上仍能看到「顶栏先消失再出现」。
     这里把顶栏提到最外层只渲染一次，下面用一块固定的内容区承载各页文档，
     点导航只换内容区 —— 顶栏 DOM 从头到尾没动过，位置自然不可能再变。

   三条硬规则（改之前先读）：
     1. zoom 只挂在 #page（顶栏层）。#view 是独立文档，内容页自己会按 --fit-s
        缩放；这里要是再给 #view 套一层 zoom，就是双重缩放（曾缩成 40px）。
     2. body 不滚动（overflow:hidden），滚动发生在内容区内部。
        这样顶栏永远看得见，也彻底避免了「外层滚动条出现/消失导致宽度抖 1~2px」。
     3. #view-host 用 position:fixed 从顶栏下沿铺到底。
        它必须在 #page 外面，否则 fixed 会掉进 zoom 的包含块、被缩放带偏。
   ========================================================================== */

:root{
  --brand:#2E7DFF;
  --brand-deep:#1F6BEE;
  --ink:#0E1A2E;
  --line:#E9EEF7;
  --page:#F6F8FC;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;height:100%;}
body{
  margin:0;
  height:100%;
  overflow:hidden;                 /* 滚动交给内容区，外层永不滚 */
  background:var(--page);
  color:var(--ink);
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
svg{display:block;}

/* 顶栏的栅格容器。数值与首页 .wrap 完全一致，少一个断点就会在窄屏上错位 */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 80px;}

/* ---------- 顶栏缩放层 ---------- */
/* 与首页同一条规则：整层按 --fit-s 等比缩放，顶栏因此是 68*fit-s 高。
   首页在 1440 视口下是 52px，这里必须一模一样。 */
html.fit #page{zoom:var(--fit-s, 1);}

/* sticky 在外层不滚动时没有意义，还可能在部分浏览器里带出 1px 位移，
   这里直接按普通流排布。 */
#page > .site-header{position:relative;top:auto;}

/* ---------- 内容区 ---------- */
/* top 用 --hdr-h（真实视觉高度，由 shell.html 内联脚本和 shell.js 实测写入）。
   var() 的兜底值按 68px 导航 + 1px 分隔线算，并跟着缩放走，
   这样即使 JS 没跑起来，内容区也不会压到顶栏上。 */
#view-host{
  position:fixed;
  left:0;right:0;bottom:0;
  top:var(--hdr-h, calc(69px * var(--fit-s, 1)));
  background:var(--page);
  overflow:hidden;
}
html:not(.fit) #view-host{top:var(--hdr-h, 69px);}

/* 内容区里的文档自己带滚动条，宽度因此就是可视宽；
   与改动前「整页滚动」时的可用宽度只差 1~2px，肉眼不可见。 */
#view{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:var(--page);
  color-scheme:normal;
}

/* ---------- 窄屏（与首页 .wrap 断点保持一致） ---------- */
@media (max-width:899px){
  .wrap{padding:0 32px;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
}