/* =====================================================================
 * 分册页 + 骨架页专用样式（真实文件，别再靠兜底页假装它存在）
 * ---------------------------------------------------------------------
 * 为什么单独一个文件：split-docs.js 给每个单节页写的是
 *   <link rel="stylesheet" href="../style.css"> + <link rel="stylesheet" href="docs.css">
 * 前者是全站基座，后者只服务「拆册之后才出现的东西」（导航条、上一节/下一节、
 * 册级 masthead）。历史上这个文件根本不存在，nginx 的 try_files 把它兜到
 * /index.html，返回 200 + text/html —— 浏览器认 MIME，样式静默全丢，
 * 26 个分册页裸奔了一整轮没人发现。现在它是真文件，并且有构建期闸盯着。
 * ⚠️ 路径基准：本文件在 design/ 根，被 docs/*.html 引用时是 ../docs.css。
 *   split-docs.js 的 fixSiblingRefs() 按「design/ 根下是否存在同名文件」决定要不要退一级，
 *   所以只要这个文件在，引用就会自动写成 ../docs.css；它没了就退回危险的裸名。
 * =================================================================== */

/* ---------- 分册导航条（每节页顶部） ---------- */
.docbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 18px;background:var(--ink);color:#f3efe6;
  border-bottom:2px solid var(--red);font-size:12.5px}
.docbar .db-sp{flex:1 1 auto}
.docbar a{color:#ffcf2d;text-decoration:none;font-weight:800;
  padding:4px 10px;border:1px solid rgba(243,239,230,.24);border-radius:3px;white-space:nowrap}
.docbar a:hover{background:var(--red);border-color:var(--red);color:#fff}
.docbar .db-hub,.docbar .db-char{color:#8fd0ff;border-color:rgba(143,208,255,.3)}

/* ---------- 册级 masthead（比全本的矮，正文才是主角） ---------- */
.doc-mh{padding:22px 18px 16px}
.doc-mh h1{font-size:26px}
.doc-mh .mh-right{gap:6px}
.doc-mh .kv{font-size:12px}

/* ---------- 骨架页：分册卡片网格 ----------
   这套以前压根没写过 —— index.html 里那 12 张卡一直是无样式的裸链接。 */
.parts{margin:0 0 8px}
.parts-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0 0 10px;border-bottom:3px solid var(--ink);margin-bottom:10px}
.parts-h b{font-family:"Noto Serif SC",serif;font-size:21px}
.parts-h span{font-size:12.5px;color:#4a5260}
.ph-tip{margin-left:auto;font-weight:800;color:var(--red)}
.parts-note{margin:0 0 14px;font-size:13px;color:#3b4250;line-height:1.7}
.parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.pc{display:flex;flex-direction:column;gap:4px;padding:13px 14px;
  background:#fffdf6;border:1.5px solid var(--ink);border-radius:4px;
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.pc:hover{transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--red);background:#fff}
.pc-no{font:800 10px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--red)}
.pc-t{font-family:"Noto Serif SC",serif;font-weight:900;font-size:16px}
.pc-n{font-size:12px;color:#4a5260;line-height:1.55}
.pc-c{margin-top:auto;font:11px/1.4 ui-monospace,monospace;color:#8a929e}
.pc.star{background:#fff4e8;border-color:var(--red)}
.pc.star .pc-t{color:var(--red)}
.pc.hub{background:#0e1218;color:#f3efe6;border-color:#0e1218}
.pc.hub:hover{background:#161d27}
.pc.hub .pc-t{color:#ffcf2d}
.pc.hub .pc-n{color:#c3cbd6}
.pc.hub .pc-c{color:#8a929e}

/* ---------- 骨架页：正文装载区 ----------
   iframe 撑满剩余高度，内部自己滚。外层不滚是关键：
   主文档节点数恒定在几百，正文有多少节点都跟骨架无关。 */
.reader{display:flex;flex-direction:column;
  height:calc(100vh - 26px);min-height:520px;
  border:1.5px solid var(--ink);border-radius:5px;background:#fffdf6;
  box-shadow:var(--shadow);overflow:hidden;margin:0 0 18px}
.reader-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 13px;background:var(--ink);color:#f3efe6;border-bottom:2px solid var(--red)}
.rb-title{font-family:"Noto Serif SC",serif;font-weight:900;font-size:14px;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-sp{flex:1 1 auto}
.rb-btn{font-size:12px;font-weight:800;color:#ffcf2d;text-decoration:none;
  padding:4px 10px;border:1px solid rgba(243,239,230,.26);border-radius:3px;white-space:nowrap}
.rb-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
#reader-frame{flex:1 1 auto;width:100%;height:100%;border:0;display:block;background:#f3efe6}

/* 侧栏目录取不到 toc.js 时的显式报错（绝不静默出空目录） */
.t-err{padding:14px 12px;font-size:12.5px;line-height:1.7;color:#ffd7d3;
  background:rgba(226,64,43,.16);border:1px dashed var(--red);border-radius:4px;margin:8px}
.t-err code{background:rgba(0,0,0,.35);padding:1px 5px;border-radius:2px}
.t-err a{color:#ffcf2d;font-weight:800}
/* 当前正在读的那一节 */
#tree a.t-a.cur{background:#122033;color:#8fd0ff}

@media (max-width:1080px){
  .reader{height:calc(100vh - 14px)}
  .parts-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}