/* ============================================================
   正文外壳 · 一张印在纸上的阅读页
   ------------------------------------------------------------
   这一版把 2026-10 的「印张」语言落进阅读页，和门户 / 动态 /
   游戏厅 / 大学书架是同一套：整页没有一处彩色，只有纸、墨，
   和三种线型。

   印张怎么读：
     纸   --paper   亮色＝白纸黑墨，暗色＝黑纸白墨，两边互为负片
     框   1px --plate 细框 + 四角套准角线（.layout::before）
     网   13px 一格的极淡网点，印在纸上
     尺   main 顶上那把带长短刻度的尺（main::before）
     线型 实线 / 虚线 / 点线 用来分层，代替颜色：
           目录一级＝实线，目录子级＝点线，
           表格＝三线（顶底重、中间细），引用＝点线
     负片 代码块、悬停的按钮与导航格一律翻成墨底纸字

   旧变量名（--surface / --ink-soft / --mark / --line …）在本文件末尾
   全部保留为别名 —— 页面里那些内联 style="…var(--line)…" 不用改。
   ============================================================ */

:root {
  color-scheme: light dark;

  /* —— 印张 —— */
  --paper: #ffffff;                       /* 纸 */
  --desk:  #fafafc;                       /* 纸外面的桌面 */
  --ink:   #0a0a0b;                       /* 墨 */
  --mut:   rgb(10 10 11 / 56%);           /* 次级墨 */
  --dim:   rgb(10 10 11 / 40%);           /* 三级墨 */
  --mesh:  rgb(10 10 11 / 8%);            /* 网点 */
  --rule:  rgb(10 10 11 / 15%);           /* 细线 */
  --rule2: rgb(10 10 11 / 42%);           /* 重线 */
  --plate: rgb(10 10 11 / 80%);           /* 印版边框 */
  --cloth: rgb(10 10 11 / 5.5%);          /* 极淡底纹 */
  --code-bg: #0a0a0b;                     /* 负片块 */
  --code-fg: #f4f4f5;

  --maxw: 1040px;
  --r: 2px;                               /* 印刷品的圆角几乎为零 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0b0c;
    --desk:  #0f1013;
    --ink:   #f4f4f5;
    --mut:   rgb(244 244 245 / 56%);
    --dim:   rgb(244 244 245 / 42%);
    --mesh:  rgb(244 244 245 / 7%);
    --rule:  rgb(244 244 245 / 15%);
    --rule2: rgb(244 244 245 / 34%);
    --plate: rgb(244 244 245 / 26%);
    --cloth: rgb(244 244 245 / 5.5%);
    --code-bg: #f4f4f5;
    --code-fg: #0a0a0b;
  }
}

/* —— 旧变量名别名：只为不改动页面里的内联 style —— */
:root {
  --bg: var(--desk);
  --surface: var(--cloth);
  --surface-2: color-mix(in srgb, var(--ink) 9%, transparent);
  --hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --ink-soft: var(--mut);
  --ink-faint: var(--dim);
  --line: var(--rule);
  --line-2: var(--rule2);
  --mark: var(--ink);
  --code-inline-bg: var(--cloth);
  --kbd: var(--rule2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 16px; line-height: 1.78; letter-spacing: .002em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;          /* 长路径/网址在窄屏下强制换行，不撑破页面 */
}
::selection { background: var(--ink); color: var(--paper); }

/* 顶部阅读进度：一条墨线 */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: var(--ink); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .08s linear;
}

/* ——— 印张本体 ———
   目录在右（.toc-box 是第一个子元素，row-reverse 把它推过去），
   正文在左。四角套准角线用 8 条 linear-gradient 画在 inset:9px 的角上，
   和大学书架那张纸是同一段代码。 */
.layout {
  position: relative; isolation: isolate;
  display: flex; flex-direction: row-reverse; align-items: flex-start;
  max-width: var(--maxw); margin: 30px auto;
  padding: 44px 34px 38px; gap: 54px;
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--mesh) 0 .9px, transparent 1.15px);
  background-size: 13px 13px;
  border: 1px solid var(--plate);
  border-radius: var(--r);
}
.layout::before {
  content: ''; position: absolute; inset: 9px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2));
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px,
                   13px 1px, 1px 13px, 13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
main { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }

/* 顶上那把尺：一条基线 + 6px 短刻度 + 30px 长刻度 */
main::before {
  content: ''; display: block; height: 8px; margin: 0 0 28px;
  opacity: .55; border-bottom: 1px solid var(--rule2);
  background-image:
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--rule2) 0 1px, transparent 1px 30px);
  background-size: 100% 4px, 100% 7px;
  background-position: left top, left top;
  background-repeat: repeat-x, repeat-x;
}

/* ——— 侧边目录：靠线型分层 ——— */
.toc {
  position: sticky; top: 34px; z-index: 1;
  flex: 0 0 196px; font-size: 12.5px; line-height: 1.55;
  max-height: calc(100vh - 68px); overflow-y: auto; scrollbar-width: thin;
}
.toc-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 12px; padding: 0 0 9px 11px;
  border-bottom: 1.5px solid var(--ink);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 5px 11px; color: var(--mut); text-decoration: none;
  border-left: 1px solid var(--rule); border-bottom: 0;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toc a:hover { color: var(--ink); border-left-color: var(--rule2); background: var(--cloth); box-shadow: none; }
.toc a.on { color: var(--ink); font-weight: 600; border-left-color: var(--ink); background: var(--cloth); }
.toc .lv3 a { padding-left: 22px; border-left-style: dotted; }
.toc .lv4 a { padding-left: 33px; border-left-style: dotted; }

/* 目录的折叠外壳。用 <details> 是为了无 JS 也能折叠：
   桌面端 display:contents 让 <nav> 直接当 .layout 的 flex 子项（版式不变），
   窄屏才露出可点的折叠条。 */
.toc-box { display: contents; }
.toc-box > .toc-sum { display: none; }
@media (min-width: 901px) {
  .toc-box > .toc { display: block !important; }
  /* ⚠ 2026-10-06 修好一个一直没人发现的 bug：Chrome 131 起 <details> 的正文被
     塞进 ::details-content，未展开时这个盒根本不在盒树里，于是上面「把 <nav
     摊成 .layout 的 flex 子项」失效——量到的目录宽度是 0（换成改版前的旧样式
     也是 0，所以不是这次改出来的：桌面端目录其实一直是隐形的，正文因此宽到
     900px 而不是该有的 720px）。下面两行把 ::details-content 也摊平、并解除
     它的 content-visibility:hidden。老浏览器不认识这个伪元素，规则整条被忽略，
     正好退回对它们本来正确的行为。 */
  .toc-box::details-content { display: contents; content-visibility: visible; }
}

/* ——— 标题：像一本印出来的书 ——— */
h1 {
  font-size: 31px; font-weight: 700; letter-spacing: .01em; line-height: 1.26;
  margin: 0 0 0; padding-bottom: 16px; position: relative;
}
/* h1 底下那道双层线：上面 1.5px 墨线，下面 1px 细线 */
h1::after {
  content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule2);
}
h2 {
  position: relative; font-size: 21px; font-weight: 600; line-height: 1.4;
  margin: 58px 0 22px; padding-bottom: 11px; border-bottom: 1px solid var(--rule);
}
/* 章节线上的那截加重墨块 —— 和门户页头是同一个记号 */
h2::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 52px; height: 2px; background: var(--ink);
}
h3 { font-size: 17.5px; font-weight: 600; margin: 38px 0 14px; }
h4 { font-size: 15.5px; font-weight: 600; margin: 28px 0 12px; }
h5 { font-size: 14.5px; font-weight: 600; margin: 26px 0 10px; color: var(--mut); }
h6 {
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin: 24px 0 10px;
}
/* 点目录/锚点跳转时，标题不要紧贴视口顶端 */
h2, h3, h4, h5, h6 { scroll-margin-top: 28px; }

/* ——— 正文 ——— */
p { margin: 0 0 1.05em; }
ul, ol { margin: 1.05em 0; padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--dim); }
strong { font-weight: 600; }
a {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule2);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
a:hover { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }
del { color: var(--dim); }

/* 引用块 → 旁注：一条点线，一点极淡底纹 */
blockquote {
  margin: 22px 0; padding: 14px 20px; background: var(--cloth);
  border-left: 3px dotted var(--rule2); border-radius: 0; color: var(--mut);
}
blockquote p { margin: 6px 0; }
blockquote strong { color: var(--ink); }

/* ——— 表格：印刷三线表 ——
   顶线底线重、表头下线中、其余细；外面套一层可横向滚动的壳
   （由 wrap_tables 生成），窄屏表格自己滚，页面不滚。 */
.tw {
  margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* position:relative 不是装饰 —— 少了它，表格里 KaTeX 那些绝对定位的小件
     （.rlap/.inner/.vlist…）会去认 main 当包含块，于是绕过这里的滚动容器
     把整个文档撑宽（实测 390px 下多出 62~283px 横向滚动）。 */
  position: relative;
}
.tw::-webkit-scrollbar { height: 8px; }
.tw::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 4px; }
table {
  border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0;
  font-size: 14px; background: transparent;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  /* 表格里大量数值对照，等宽数字才能让小数点对齐 */
  font-variant-numeric: tabular-nums;
}
thead { background: transparent; }
th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink);
  letter-spacing: .04em; padding: 11px 14px; border-bottom: 1px solid var(--rule2);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--cloth); }

/* ——— 代码：负片块（纸墨互换） ——— */
code {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace; font-size: .92em;
  background: var(--cloth); color: var(--ink);
  padding: 2px 5px; border-radius: var(--r);
}
pre {
  background: var(--code-bg); color: var(--code-fg); padding: 20px 22px;
  border-radius: var(--r); overflow-x: auto; margin: 22px 0;
  font-size: 13px; line-height: 1.62;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit;
           font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace; }
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 4px; }

input[type="checkbox"] { margin-right: 7px; accent-color: var(--ink); }
img { max-width: 100%; border-radius: var(--r); }

/* KaTeX */
.katex { font-size: 1.05em; }
/* 窄屏兜底：整段是一整个不可断行的公式时（化学方程式、积分换元…），
   它在 390px 下能比正文栏宽出几十像素。缩小一档比横向滚动整页好。 */
@media (max-width: 520px) {
  .katex { font-size: .88em; }
  .katex-display > .katex { font-size: .96em; }
}
.katex-display { margin: 22px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex-display > .katex { font-size: 1.13em; }

/* ——— 固定出入口：左上「返回」、右上「书架」，都是一张小票根 ———
   齿孔用 currentColor 的点线，翻成负片时它自己跟着变色。 */
.backbtn, .shelfbtn {
  position: fixed; top: 14px; z-index: 200;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border: 1.5px solid var(--plate); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  text-decoration: none; border-bottom-width: 1.5px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  transition: background .16s ease, color .16s ease;
}
.backbtn { left: 14px; }
.shelfbtn { right: 14px; }
.backbtn:hover, .shelfbtn:hover {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink); box-shadow: none;
}
.backbtn .arw { font-size: 13px; line-height: 1; padding-right: 9px; border-right: 1px dotted; }
.shelfbtn .arw { font-size: 13px; line-height: 1; padding-left: 9px; border-left: 1px dotted; order: 2; }

/* ——— 页尾票根：上一本 / 回书架 / 下一本 ———
   三格之间是点线齿孔，指到哪一格那一格翻成负片。 */
.navStrip {
  display: flex; align-items: stretch; margin: 62px 0 0;
  border: 1.5px solid var(--plate); border-radius: var(--r); overflow: hidden;
}
.navStrip > * {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 13px 15px; background: var(--paper); color: var(--ink);
  text-decoration: none; border-bottom: 0;
}
.navStrip > * + * { border-left: 1px dotted var(--rule2); }
.navStrip a { transition: background .16s ease, color .16s ease; }
.navStrip a:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.navStrip .k {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.navStrip a:hover .k { color: var(--paper); opacity: .75; }
.navStrip .v {
  font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navStrip .mid { flex: 0 0 auto; text-align: center; }
.navStrip .off { color: var(--dim); }
.navStrip .off .v { font-weight: 400; }

/* 页脚：全站统一的「最后更新」日期（日期常量在 LAST_UPDATED，改那一处） */
.site-foot {
  margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--dim); letter-spacing: .06em;
}

/* ——— 响应式 ——— */
@media (max-width: 900px) {
  /* 窄屏：印张铺满整屏，去掉左右框和圆角（纸就是屏幕） */
  .layout {
    flex-direction: column; margin: 0; padding: 30px 18px 34px; gap: 24px;
    border-left: 0; border-right: 0; border-radius: 0;
    /* ⚠ 桌面端为了不让目录被拉高设了 align-items:flex-start，竖排时必须还原成
       stretch —— 否则 main 会按「最宽一行」撑开（实测 390px 屏上撑到 521px），
       整页横向溢出。 */
    align-items: stretch;
  }
  .layout::before { display: none; }
  main::before { margin-bottom: 20px; opacity: .4; }
  .backbtn, .shelfbtn { top: 10px; padding: 6px 11px; font-size: 10.5px; letter-spacing: .1em; }
  .backbtn { left: 10px; }
  .shelfbtn { right: 10px; }

  /* 目录收成一条可点的折叠条，展开后跟着页面滚（不再内嵌滚动） */
  .toc-box { display: block; }
  .toc-sum {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 9px;
    padding: 12px 14px; cursor: pointer; user-select: none;
    background: var(--cloth); border: 1px solid var(--rule);
    border-radius: var(--r); font-size: 12.5px; font-weight: 600; color: var(--ink);
  }
  .toc-sum::-webkit-details-marker { display: none; }
  .toc-sum .tri { font-size: 8px; color: var(--dim); transition: transform .2s ease; }
  .toc-box[open] .toc-sum { border-radius: var(--r) var(--r) 0 0; }
  .toc-box[open] .toc-sum .tri { transform: rotate(90deg); }
  .toc {
    position: static; flex: none; width: 100%;
    max-height: none; overflow: visible;
    background: var(--cloth); border: 1px solid var(--rule); border-top: 0;
    border-radius: 0 0 var(--r) var(--r); padding: 8px 6px; font-size: 12px;
  }
  .toc-title { display: none; }     /* 折叠条上已经写了「目录」 */
  .toc a { white-space: normal; }

  .tw { margin: 18px 0; }
  h1 { font-size: 25px; padding-bottom: 14px; }
  h2 { font-size: 19px; margin-top: 50px; }
  h3 { font-size: 16.5px; }
  table { font-size: 13px; } th, td { padding: 9px 11px; }
  pre { padding: 16px; font-size: 12.5px; }

  /* 页尾票根在窄屏竖排 */
  .navStrip { flex-direction: column; margin-top: 48px; }
  .navStrip > * + * { border-left: 0; border-top: 1px dotted var(--rule2); }
  .navStrip .v { font-size: 12.5px; }
}

@media print {
  .toc-box, .toc, .backbtn, .shelfbtn, .progress, .navStrip { display: none; }
  .layout {
    display: block; padding: 0; margin: 0; max-width: none; gap: 0;
    border: 0; border-radius: 0; background-image: none;
  }
  .layout::before { display: none; }
  main::before { display: none; }
  body { background: var(--paper); color: var(--ink); font-size: 11pt; }
  h2 { page-break-after: avoid; }
  table, pre, blockquote { page-break-inside: avoid; }
  a { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}