/* 右侧导航卡片：一份 FBC 文件（Paranatural Master Index） */
/* 右侧导航栏：和左侧栏左右对称 */
/* 导航切换的是整个页面，所以向右出血：没有右侧留白，卡片一直延伸到屏幕右边缘以外 */
#nav {
  --nav-bleed: 60px;   /* 卡片超出屏幕右边缘多少（由脚本按参数设置） */
  position: fixed; right: 0; top: calc(var(--clip-top) * var(--zf, 1)); bottom: calc(var(--clip-bottom) * var(--zf, 1));
  zoom: var(--unzoom, 1);   /* 抵消浏览器缩放（Ctrl + / −），卡片保持原来的物理大小；vh / vw 会被一起缩小，所以乘回 --zf（js/zoom.js） */
  /* --nav-k：整张卡片的等比缩放（js/nav.js fitCard，2026-10-27）。上下边界放不下 2K 时的高度，就把宽、高、字号、边距一起缩，卡片不变方 */
  width: calc((var(--side-w) + var(--side-pad)) * var(--nav-k, 1)); padding: 0 0 0 calc(var(--side-pad) * var(--nav-k, 1));
  display: flex; flex-direction: column; justify-content: center;   /* 上下边界对称，所以卡片中心 = 屏幕垂直中心 */
}
/* 导航卡片 = 幻灯机的片门。白纸单独一层（paper-layer），只做羽化，不分色、不错位；
   文字按油墨分层（ink-layer），各自带一个羽化片门，位置按通道略微错开，转动时依次滞后 */
#nav .nav-card {
  --feather: 40px;
  /* 宽度伸出屏幕外；高度 = 屏幕内可见的宽度 × 纵横比（--card-ratio，由参数面板设置），不超过上下边界 */
  width: calc(100% + var(--nav-bleed)); height: calc((var(--side-w) + var(--side-pad)) * var(--nav-k, 1) * var(--card-ratio, 1.25)); max-height: 100%; flex: none;
  position: relative; display: block;
  isolation: isolate; text-decoration: none; cursor: default;   /* 整张卡片不是手指：只有标题文字和翻页白条可点（2026-10-18） */
}
#nav .ink-layer, #nav .paper-layer {
  position: absolute; inset: calc(-1 * var(--feather));
  --mx: 0px; --my: 0px;
}
#nav .nav-card.masked .ink-layer, #nav .nav-card.masked .paper-layer {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--mx) var(--my), var(--mx) var(--my);
          mask-position: var(--mx) var(--my), var(--mx) var(--my);
}
/* 一张幻灯片在某个通道上的那一层：和卡片一样大，放在羽化边距里面 */
/* 每块印版 / 点击层上都是同一份 FBC 文件：上（文件头 + 标题）、中（引导行 + 三个分区）、下（引导句 + 页脚） */
/* 字号由参数面板设置：--title-size / --sec-size / --small-size */
#nav .plate, #nav .hit-layer {
  position: absolute; inset: var(--feather);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(20px * var(--nav-k, 1)) calc(24px * var(--nav-k, 1) + var(--nav-bleed)) calc(18px * var(--nav-k, 1)) calc(24px * var(--nav-k, 1));   /* 右边加上出血，右对齐的小字不会跑到屏幕外 */
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink);
  will-change: transform;
}
#nav .hit-layer { inset: 0; will-change: auto; }
/* 小字（文件头、引导行、编号、页脚）：Interstate 大写 */
#nav .doc-head, #nav .doc-lead, #nav .doc-foot, #nav .entry .num {
  font-family: var(--font-label); font-weight: 500; font-size: var(--small-size, 10px);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
/* 文件头和引导行用正文字体 Basic Commercial */
#nav .doc-head, #nav .doc-lead { font-family: var(--font-body); font-weight: 400; letter-spacing: .1em; }
/* 引导行按原文大小写（只有首字母大写） */
#nav .doc-lead { text-transform: none; letter-spacing: .02em; }
/* 分割线用 currentColor：印版上是油墨色，点击层上是透明 */
#nav .doc-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: calc(8px * var(--nav-k, 1)); border-bottom: 1.5px solid currentColor; }
#nav .doc-head .right { text-align: right; white-space: nowrap; }
#nav .doc-foot .left { white-space: nowrap; }   /* 页码在左（2026-10-21），About 在右 */
#nav .doc-title { display: block; margin-top: calc(14px * var(--nav-k, 1)); font-size: var(--title-size, 28px); line-height: .98; letter-spacing: -0.015em; }
#nav .doc-lead { margin-bottom: calc(10px * var(--nav-k, 1)); }
#nav .doc-list { display: flex; flex-direction: column; gap: var(--sec-gap, 10px); }
/* 分区组名（2026-10-22：Records / Entities）：小字，和引导行同一套，组与组之间多空一点 */
#nav .doc-group {
  font-family: var(--font-label); font-weight: 500; font-size: var(--small-size, 10px); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.5; opacity: .6; margin-bottom: calc(var(--sec-gap, 10px) * -0.5);
}
#nav .doc-group:not(:first-child) { margin-top: calc(var(--sec-gap, 10px) * 0.6); }
/* 一个分区 = 章节号 + 名称 */
#nav .entry { display: grid; grid-template-columns: calc(var(--small-size, 10px) * 3.4) 1fr; align-items: start; }
#nav .entry .num { padding-top: .35em; }
#nav .entry .name { font-size: var(--sec-size, 40px); line-height: .98; letter-spacing: -0.015em; }
#nav .doc-guide { margin: 0 0 10px; font-family: var(--font-body); font-weight: 400; font-size: calc(var(--small-size, 10px) * 1.3); line-height: 1.4; }
#nav .doc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: calc(8px * var(--nav-k, 1)); border-top: 1.5px solid currentColor; }
#nav .doc-foot .links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
/* 一个条目里的每一行文字 = 一个 .seg（两行标题就是两个独立的块，中间有行距） */
#nav .hit { display: block; }
#nav .seg { display: block; width: fit-content; padding: 1px 2px; margin: 0 -2px; }
#nav .seg + .seg { margin-top: .14em; }
/* 涂黑：每一行各自一块。涂黑条也是油墨——每块印版画自己颜色的条，对齐时是黑色，错位时有彩边 */
#nav .plate .redacted .seg { color: transparent; background: var(--ink); transition: color .15s, background-color .15s; }
/* 悬停哪个条目，它的涂黑褪去 */
#nav .plate .redacted.peek .seg { color: var(--ink); background: transparent; }
/* 点击层：透明，排版和印版完全重合，负责悬停和点击 */
#nav .hit-layer { color: transparent; }
/* 手指只在可点的标题文字上（文件标题、三个分区；当前页和页脚链接不可点）：放在 .seg 上，不是整行 */
#nav .hit-layer .hit { cursor: default; }
#nav .hit-layer .hit:not(.current):not(.link) .seg { cursor: pointer; }
/* 白纸：一整张，和卡片一样大 */
#nav .paper {
  position: absolute; inset: var(--feather);
  background: #fff; will-change: transform;
}
/* 白底页面上的卡片：内描黑框（不改变卡片尺寸） */
#nav .paper.framed { box-shadow: inset 0 0 0 1.5px #111; }
/* 文字印版：透明底，正片叠底印在纸上；对齐时各色叠成黑字 */
#nav .ink-layer { mix-blend-mode: multiply; }
/* CMYK（印刷 = 油墨） */
#nav .ink-layer[data-ink="c"] .plate { --ink: #00a0e9; color: var(--ink); }
#nav .ink-layer[data-ink="m"] .plate { --ink: #e4007f; color: var(--ink); }
#nav .ink-layer[data-ink="y"] .plate { --ink: #ffe100; color: var(--ink); }
#nav .ink-layer[data-ink="k"] .plate { --ink: #111; color: var(--ink); }
/* 彩色版（青、品红、黄）半透明：对齐时黑版盖住一切，错位时只露出淡淡的彩边 */
#nav .ink-layer[data-ink="c"], #nav .ink-layer[data-ink="m"], #nav .ink-layer[data-ink="y"] { opacity: var(--color-ink-opacity, .3); }
/* RGB（光）：某个通道缺光的字，看起来是它的补色——缺红显青、缺绿显品红、缺蓝显黄 */
#nav .ink-layer[data-ink="r"] .plate { --ink: #00ffff; color: var(--ink); }
#nav .ink-layer[data-ink="g"] .plate { --ink: #ff00ff; color: var(--ink); }
#nav .ink-layer[data-ink="b"] .plate { --ink: #ffff00; color: var(--ink); }
/* About（第 5 页，2026-10-22）：点页脚 About，卡片转成这一张；左上角 Back 转回去。字号等由参数面板设置（--about-*） */
#nav .about-body {
  flex: 1; min-height: 0; margin-top: var(--about-top, 16px); margin-bottom: calc(12px * var(--nav-k, 1));
  display: flex; flex-direction: column; gap: var(--about-gap, 13px);
}
#nav .about-title { font-size: var(--about-title, 22px); line-height: 1; letter-spacing: -0.01em; margin-bottom: calc(var(--about-head-gap, 5px) + 3px); }
#nav .about-h {
  font-family: var(--font-label); font-weight: 500; font-size: var(--about-head, 10px);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; margin-bottom: var(--about-head-gap, 5px);
}
#nav .about-p {
  margin: 0; font-family: var(--font-body); font-weight: 400;
  font-size: var(--about-size, 12.5px); line-height: var(--about-line, 1.4); letter-spacing: 0;
}
#nav .about-p em { font-style: italic; }
/* 正文里的链接：行内（.seg 平时是块），下划线 */
#nav .about-p .about-link, #nav .about-p .about-link .seg { display: inline; padding: 0; margin: 0; }
#nav .about-p .about-link .seg { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
/* 涂黑的链接（名字，2026-10-22）：行内的一块黑条，两边各多出 2px；悬停揭开后显示带下划线的名字 */
#nav .about-p .about-link.redacted .seg { padding: 0 2px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Back 加下划线（2026-10-26 用户：和进站提示的 Continue 一样，让人看出这种字能按）；点击层上字是透明的，下划线也透明 */
#nav .back .seg { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
/* Back 大一些（2026-10-26 用户；字号 = 面板 aboutBackSize），About 右上角的 Form 编号块可以关掉（aboutForm，默认关）*/
#nav .doc-head .back { font-size: var(--about-back, 10px); }
/* 2026-10-28 用户：About 和导航卡片切换时上下分割线不动 → 编号块关掉时只隐藏、照样占两行（原来 display: none）；
   Back 行高 1 + 上边留 .25em（字的位置和原来行高 1.5 时一样），不再比两行小字高、把文件头撑高；页脚右边的占位看不见 */
#nav [data-about-form="0"] .about-form { visibility: hidden; }
#nav .doc-head .back { line-height: 1; padding-top: .25em; }
#nav .foot-ghost { visibility: hidden; }
/* 第一节标题二选一（S.aboutTitle / checkAboutTitle，2026-10-28）：默认大标题；small = 小标题 ABOUT，和 Credits 等一样 */
#nav .about-title-small { display: none; }
#nav [data-about-title="small"] .about-title { display: none; }
#nav [data-about-title="small"] .about-title-small { display: block; }
/* Back 和页脚的 About 可点 */
#nav .hit-layer .hit.link[data-key="about"] .seg { cursor: pointer; }
/* 导航栏在所有页面内容之上（灰底、OoP 的文字块和画布） */
#nav { z-index: 100; }
/* （翻页白条 .nav-edge 的样式：2026-10-22 用户删掉了白条，换页只用导航卡片；备份在 archive/scroll-page-turn-2026-10-22/nav.css） */