/*
 * 《闸北》自定义主题 —— 「纸墨」
 * ------------------------------------------------------------
 * 设计目标：
 *   1. 浅底深字，长时间阅读不累；侧栏不再用内置 sepia 的近黑底
 *      （内置 color-theme-1 会把 .book-summary 刷成 #111，与浅色正文冲突）。
 *   2. 用「朱砂」做唯一强调色，标题/链接/表格头统一口径。
 *   3. 只做配色与排版增强，不改动 HonKit 主题的结构与交互。
 *
 * 注意：侧栏/正文的底色用 !important —— 内置主题的选择器形如
 *   `.book.color-theme-N .book-summary`（权重高于本文件的 `.book .book-summary`），
 *   不加 !important 会在用户切换主题按钮后失效。这是有意为之。
 */

/* ============ 1. 调色板（改配色只动这一段） ============ */
:root {
  --paper:        #fdfbf7;  /* 正文底色 */
  --paper-soft:   #f7f3ea;  /* 表格斑马纹 / 代码底 */
  --sidebar-bg:   #f4f1ea;  /* 侧栏底色 */
  --sidebar-line: #e4dccd;  /* 侧栏分隔线 */
  --ink:          #2a2a2a;  /* 正文文字 */
  --ink-strong:   #151515;  /* 大标题 */
  --ink-muted:    #8a8072;  /* 侧栏分组标题 */
  --accent:       #9c3d2e;  /* 朱砂：强调色 */
  --accent-soft:  #b8563f;  /* 朱砂浅 */
  --rule:         #e0d8c8;  /* 分隔线 */
}

/* ============ 2. 侧栏：从近黑改回浅纸 ============ */
.book .book-summary {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-line);
  color: var(--ink) !important;
  font-size: 14px;
}

.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  color: #4a4a4a !important;
  padding: 6px 12px;
}

.book .book-summary ul.summary li a:hover {
  color: var(--accent) !important;
  background: #ece7db;
}

.book .book-summary ul.summary li.active > a {
  color: var(--accent) !important;
  font-weight: 700;
  border-right: 3px solid var(--accent);
  background: #f0ebe0;
}

/* 侧栏里的分组标题（第一部分 / 附录 …） */
.book .book-summary ul.summary li.header,
.book .book-summary ul.summary li span.header {
  color: var(--ink-muted) !important;
  text-transform: none;
}

/* 侧栏顶部搜索框 + 仓库链接 */
.book .book-summary .book-search input,
.book .book-summary .book-search input:focus {
  background: #fff;
  border: 1px solid var(--sidebar-line);
  color: var(--ink);
}

/* ============ 3. 正文 ============ */
.book .book-body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.book .book-body .page-wrapper .page-inner {
  max-width: 860px;
}

.book .book-body .page-wrapper .page-inner section.normal {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}

.book .book-body .page-wrapper .page-inner section.normal p {
  margin: 0 0 1.1em;
  text-align: justify;
}

/* ============ 4. 标题：朱砂强调 ============ */
.book .book-body .page-wrapper .page-inner section.normal h1 {
  font-size: 1.9em;
  color: var(--ink-strong);
  border-bottom: 3px double var(--accent);
  padding-bottom: 0.4em;
  margin-top: 0.2em;
}

.book .book-body .page-wrapper .page-inner section.normal h2 {
  font-size: 1.35em;
  color: var(--accent);
  margin-top: 1.8em;
  padding-left: 0.5em;
  border-left: 4px solid var(--accent);
}

.book .book-body .page-wrapper .page-inner section.normal h3 {
  font-size: 1.12em;
  color: #6b5b4a;
  margin-top: 1.5em;
}

.book .book-body .page-wrapper .page-inner section.normal h4 {
  color: #6b5b4a;
}

/* ============ 5. 链接 ============ */
.book .book-body .page-wrapper .page-inner section.normal a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(156, 61, 46, 0.35);
}

.book .book-body .page-wrapper .page-inner section.normal a:hover {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

/* ============ 6. 表格：史书里最重要的呈现形式 ============ */
.book .book-body .page-wrapper .page-inner section.normal table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2em 0;
  font-size: 0.92em;
}

.book .book-body .page-wrapper .page-inner section.normal table th {
  background: var(--paper-soft);
  color: #4a3219;
  font-weight: 700;
  text-align: left;
  padding: 0.55em 0.8em;
  border: 1px solid var(--rule);
}

.book .book-body .page-wrapper .page-inner section.normal table td {
  padding: 0.5em 0.8em;
  border: 1px solid var(--rule);
  vertical-align: top;
}

.book .book-body .page-wrapper .page-inner section.normal table tr:nth-child(even) td {
  background: var(--paper-soft);
}

/* ============ 7. 引用块：史料原文的容器 ============ */
.book .book-body .page-wrapper .page-inner section.normal blockquote {
  margin: 1.3em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid #c9b48a;
  background: #f8f5ef;
  color: #3f3428;
  font-size: 0.97em;
}

.book .book-body .page-wrapper .page-inner section.normal blockquote p {
  margin: 0.5em 0;
}

/* ============ 8. 代码块：用作示意图 ============ */
.book .book-body .page-wrapper .page-inner section.normal pre {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.85em;
  line-height: 1.6;
}

.book .book-body .page-wrapper .page-inner section.normal code {
  background: var(--paper-soft);
  color: #8a4b1f;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ============ 9. 其他 ============ */
.book .book-body .page-wrapper .page-inner section.normal strong {
  color: var(--accent);
}

.book .book-body .page-wrapper .page-inner section.normal hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2em 0;
}

/* 顶部工具栏的按钮配色 */
.book .book-header .btn {
  color: #6b5b4a !important;
}

.book .book-header .btn:hover {
  color: var(--accent) !important;
}

/* 标题锚点图标：默认太抢眼，弱化 */
.plugin-anchor {
  color: var(--rule);
  padding-left: 0.35em;
  font-size: 0.8em;
}

.plugin-anchor:hover {
  color: var(--accent);
}

/* ============ 10. 顶栏：域名徽标 + 语言栏 ============
   模板：local-plugins/honkit-plugin-zhabei-theme/_layouts/website/header.html
   （覆盖主题同名模板。多语言下每个语种是独立 Book，模板必须放插件，
     放项目根 _layouts/ 会静默失效 —— 详见该模板顶部的长注释。）

   布局思路：顶栏原来是一个「左浮动按钮排」——
   主题 JS 用 toolbar.createButton() 往 .book-header 里插的按钮
   （侧栏开关、编辑本页、字体设置）**全是 pull-left**，右侧本就空着，
   所以「域名徽标 + 语言栏」一起靠右放，与按钮互不打扰。

   两枚元素都靠 order 排序（按钮是默认的 order:0）：
     .site-domain order:9  ← 自带 margin-left:auto，吃掉全部剩余空间，
     .lang-bar    order:10   于是两者一起被推到最右，且域名在语言栏左侧。
   ⚠ 两个元素**只能有一个** margin-left:auto：给两个都加的话剩余空间会被
     均分，域名会飘到中间去。

   实测（CDP 1560px）：header 占 x∈[300,1545]，按钮排到 x≈500，
   h1 的 BFC 被浮动的按钮挤到 [500,1537] 且只在 hover 时淡入。
   h1 与右侧两枚元素同处右侧，hover 时会打架，而正文已经有 h1 了 ——
   故把它 display:none 隐去（**只是藏起来，不删**：
   toolbar.createButton 按 ".btn, .dropdown, h1" 的子元素序号定位，
   从 DOM 里删掉 h1 会让按钮插错位置）。 */

/* 顶栏本体：flex 容器，内容默认靠左，靠子元素的 order 与 auto 边距分区。
   ⚠ flex-wrap / height / min-height / row-gap 这四条是 v3.5.0 加的，原因值得记下来：
     顶栏一行要放下「工具按钮（约 200px）+ 域名徽标（约 90px）+ 语言栏（约 460px）」
     ≈ 750px。而**侧栏是固定 300px 的**（主题规则 `.book.with-summary .book-body{left:300px}`），
     所以顶栏的可用宽度 = 视口 − 300，而不是视口本身。
     早先只在 900px 处折行，等于默认「视口 = 顶栏宽度」——实测在 901–1070px 这一段，
     语言栏已经挤不进却又不折行，flex 就把它当可压缩项往下压：链接触发 CJK 断行、
     「Français」被裁掉、「编辑本页」竖排成四行（已用 CDP 在 900/901px 复现）。
     现在把决定权交回 flex（flex-wrap 常开 + 高度 auto），与视口断点解耦：
     放得下就是一行，放不下就折到第二行，不再有"挤扁"这种中间态。
     高度改 auto 是安全的：`.book-header` 在 `.body-inner`（滚动容器）里是**普通流**，
     主题没给它 position:fixed/absolute，长高只会把正文往下推，不会遮挡。 */
.book .book-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;  /* 整组靠右；折行后第二行的语言栏也因此仍然靠右 */
  height: auto;
  min-height: 50px;       /* 单行时正好 50px，与主题原高一致 */
  row-gap: 6px;           /* 折行后两行之间留白 */
  padding: 0 10px;
  background: var(--sidebar-bg) !important;
}

/* 域名徽标：展示本书的对外域名，链接回本语种封面（相对链接，本地预览可用） */
.book .book-header .site-domain {
  order: 9;
  flex: 0 0 auto;         /* 尺寸由内容决定，不参与拉伸/压缩 */
  margin-left: auto;      /* 唯一的 auto 边距：把「徽标 + 语言栏」一起顶到最右侧，
                             同时把工具按钮留在最左（顶栏没有它俩会一起被 flex-end 推到右边） */
  margin-right: 10px;
  padding: 0 10px 0 0;
  border-right: 1px solid var(--rule);   /* 与语言栏之间的细竖线 */
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 26px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.book .book-header .site-domain:hover {
  color: var(--accent);
  text-decoration: none;
}

.book .book-header h1 {
  display: none;
}

.lang-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* 自身放不下时让七条链接内部折行，而不是被压扁 */
  justify-content: flex-end;  /* 它独占一行时仍右对齐，位置与在第一行时一致 */
  flex: 0 0 auto;             /* ★ 不许被压缩：放不下就整条折到第二行。
                                 若写成 flex:0 1 auto（可压缩），flex 宁可把链接压扁
                                 （链接触发 CJK 断行、「Français」被裁）也不折行，
                                 这正是 v3.5.0 之前那段视口断点留下的坑。
                                 也试过 flex:1 1 auto：自由空间会被 grow 吃掉，
                                 徽标的 auto 边距拿不到空间、被拽回按钮右边（实测 x=503），
                                 故最终不用 auto 边距，改为整个顶栏 justify-content:flex-end。 */
  gap: 2px;
  order: 10;           /* 工具按钮（☰ 编辑本页 Aa）在 DOM 里排在语言栏之后，
                          靠 order 把它们拉回左侧，形成「左工具 / 右语言」的常规布局 */
  white-space: nowrap;
}

.lang-bar .lang-bar-icon {
  padding: 0 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.lang-bar .lang-link {
  display: inline-block;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  color: #6b5b4a;
  font-size: 12px;
  line-height: 26px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-bar .lang-link:hover {
  background: var(--paper);
  color: var(--accent);
  text-decoration: none;
}

.lang-bar .lang-link.is-current {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.lang-bar .lang-link.is-current:hover {
  color: #fff;
}

/* 窄屏（≤900px）：语言栏整条独占一行、居中，并把七条链接内部的间距放宽一点。
   注意这里**不再是"能不能放下"的判据** —— 那个已经交给 flex 的 flex-wrap 自动决定
   （见上面 .book-header 的注释）。这条断点只负责一件事：窄屏时让语言栏换来换去更整齐。
   域名徽标（order:9）不参与整行让位，它靠自身的 auto 边距留在第一行最右，
   于是窄屏的顶栏读作「第一行：工具左 / 域名右；第二行起：语言栏居中」。
   （语言栏从 6 增到 7 时（v3.3.0 加繁体）这一阈值要重测：七条约占 470px、
     左侧工具按钮约 200px、徽标约 90px；实测 320px 下徽标与按钮同处第一行不溢出。） */
@media screen and (max-width: 900px) {
  .book .book-header {
    padding: 0 6px 6px;
  }

  .lang-bar {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .lang-bar .lang-bar-icon {
    display: none;
  }

  /* 徽标与语言栏此时已不在同一行，那条竖线失去了分隔对象，去掉 */
  .book .book-header .site-domain {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
}

/* ============ 11. 页脚：站点署名 + 作者与版本 ============
   注入方式：构建后由 scripts/inject-seo.mjs 在每个 </section> 之后插入
   （主题 default 里没有 website/footer.html 这个模板，覆盖 page.html 又要把
     128 行模板整份抄过来，漂移即静默失效 —— 用纯文本后处理，可被
     scripts/check-branding.py 全量复查）。
   插在 .page-inner 之内、.search-plus 的 .search-noresults 里，因此：
     · 与正文同宽同列，随正文滚动，不遮挡左上/右上的翻页箭头；
     · 该书内搜索出结果时整块隐藏（与正文一起被 search-results 顶掉），符合预期。
   行内顺序固定为：书名 → zhabei.org → 舟哥@2026（粗体）→ 版本号（小字）。 */
.book .page-inner .book-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 3.2em 0 1.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}

.book .page-inner .book-footer .book-footer-book {
  letter-spacing: 0.01em;
}

.book .page-inner .book-footer .book-footer-site {
  color: var(--accent);
  letter-spacing: 0.03em;
}

.book .page-inner .book-footer .book-footer-site:hover {
  color: var(--accent-soft);
}

/* 作者署名（v3.5.3）：做成粗体、用正文墨色，在一行浅灰小字里跳出来。
   与域名同样的处理逻辑 —— 落款里最该被记住的是"谁写的"。 */
.book .page-inner .book-footer .book-footer-author {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* 版本号（v3.5.3）：比页脚基准字号再降一号，并压成弱色。
   它是给作者和回访读者"一眼看出这是哪一版"用的，不该跟书名抢注意力。 */
.book .page-inner .book-footer .book-footer-version {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ============ 12. 语言提示条（v3.6.0） ============
   根地址一律跳进简体中文；若浏览器语言不是中文，就在落地页上浮出这一条，
   给一个「换到我这一版」的入口。挂在 <body> 末尾（不在 .page-inner 里）——
   HonKit 换页是替换 .page-inner 的内容，挂在那里一翻页就没了。
   样式里**不能带 .book 前缀**：这个节点在 .book 之外。 */
.lang-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: min(92vw, 620px);
  padding: 11px 14px 11px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(42, 42, 42, 0.13);
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}

.lang-hint .lang-hint-text {
  flex: 1 1 auto;
  min-width: 0;
}

.lang-hint .lang-hint-link {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lang-hint .lang-hint-link:hover {
  border-bottom-color: currentColor;
}

.lang-hint .lang-hint-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.lang-hint .lang-hint-close:hover {
  background: var(--sidebar-bg);
  color: var(--ink);
}

/* 窄屏：改成贴底的一条，别把正文挤得只剩中间 */
@media (max-width: 600px) {
  .lang-hint {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    max-width: none;
  }
}

@media print {
  .lang-hint {
    display: none;
  }
}