/* 来时之路 —— 后人抚碑：安静、沉、克制 */
:root {
  /* 告诉浏览器这是暗色文档。滚动条、输入框内件这些原生 UI 不看我们的 CSS 变量，
     只看 color-scheme——不声明就按浅色渲染，于是侧栏滚起来时会甩出一条浅灰的
     原生滚动条压在深色面板上。声明之后原生件跟着转暗，"有时冒出来"那条也就不刺眼了。
     写在 style.css 是因为三个页面都加载它，一处即全站。 */
  color-scheme: dark;
  --bg: #14161a;
  --bg-panel: #1c1f24;
  --bg-raise: #22262c;
  --line: #2b2f36;
  --ink: #d8d4cc;
  --ink-dim: #9a968e;
  --ink-faint: #6e6b64;
  --heading: #ece5d5;
  --rust: #8f3b2e;
  --rust-ink: #c26a58;
  --verify: #6b7a8c;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --global-nav-height: 54px;
  /* 导航固定在顶上、脱离文档流，凡是 sticky 吸顶的东西都得从它下缘起算，
     否则吸住之后头上那一截就压在导航底下（+1px 是导航的 border-bottom）。 */
  --sticky-top: calc(var(--global-nav-height) + 1px + 24px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg);
  /* 点目录跳转、或直接带哈希打开时，落点要停在导航下面。
     不留这块余量，跳过去的那个小标题正好被固定导航压住，读者以为没跳对。 */
  scroll-padding-top: calc(var(--global-nav-height) + 1px + 16px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- 全站导航 ---------- */
/* 三页一律固定在顶部。固定后 nav 脱离文档流，各页必须自行让出 --global-nav-height，
   见下方 .archive-page / body.prototype-map 的 padding-top。 */
.global-nav {
  border-bottom: 1px solid var(--line);
  background: rgba(20, 22, 26, 0.86);
  backdrop-filter: blur(6px);
  color: var(--ink-dim);
  font-family: var(--serif);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
}

/* +1px 是 .global-nav 的 border-bottom：--global-nav-height 只算内容高，
   实际占位是 54+1=55px，少让这 1px 会把下面的站头压掉一条线 */
.archive-page {
  padding-top: calc(var(--global-nav-height) + 1px);
}

.global-nav-inner {
  max-width: 1280px;
  min-height: var(--global-nav-height);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* 与页脚的落款同一块东西：中英文全名 + 一句这是什么。
   行高压到 1.3（正文继承的是 1.85），两行才塞得进 54px 的导航条不撑高它——
   一撑高，各页按 --global-nav-height 让出的顶部空间就对不上了。 */
.global-brand {
  display: block;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.global-brand-name {
  display: block;
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-brand-what {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-nav-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: none;
  min-width: 0;
}

.list-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.list-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}
.list-toggle[aria-expanded="true"] {
  color: var(--heading);
  border-color: #44302b;
}

@media (max-width: 1099px) {
  .list-toggle:not([hidden]) { display: inline-flex; }
}




/* 首页原有的 fixed 覆盖已并入 .global-nav 基础规则，此处不再重复 */

@media (max-width: 560px) {
  .global-nav-inner {
    padding: 0 12px;
    gap: 8px;
  }

  .global-brand-name {
    font-size: 13.5px;
    letter-spacing: 0.12em;
  }

  .global-brand-what {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* 嵌入首页第四屏时：去掉重复的导航条与它让出的空间，正文上边距略收 */
html.is-embedded .global-nav { display: none; }
html.is-embedded .archive-page { padding-top: 0; }
html.is-embedded main { padding-top: 26px; }

/* ---------- 页顶 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--heading);
}
.site-subtitle {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
#search {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 12px;
  width: 320px;
  max-width: 100%;
  outline: none;
}
#search:focus { border-color: #4a4038; }
#search::placeholder { color: var(--ink-faint); }

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ---------- 时间轴主页 ---------- */
.timeline {
  position: relative;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.stage-block { position: relative; margin-bottom: 56px; }
.stage-node {
  position: absolute;
  left: -34px;
  top: 8px;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  background: var(--rust);
}
.stage-head { margin-bottom: 18px; }
.stage-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--heading);
}
.stage-range {
  margin-left: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
/* 一个阶段下面挂一片图卡。以图为主：4:3 满幅彩图，文字压在图的下缘。 */
.war-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

/* 分篇卡片：总览「分篇索引」节末尾的各篇入口，视觉沿用首页战争卡片。
   不覆盖 war-grid 的列宽——窄屏的单列规则在媒体查询里，覆盖了会把移动端顶成两列。 */
.doc-index-grid { margin: 16px 0 8px; }

.war-card {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.war-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-panel);
}

.war-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.war-card:hover .war-card-media img {
  transform: scale(1.04);
}

/* 只压图的下缘，够文字读就行——不是为了把整张图调暗 */
.war-card-media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  background: linear-gradient(to top,
    rgba(12, 13, 16, 0.92) 0%,
    rgba(12, 13, 16, 0.70) 34%,
    rgba(12, 13, 16, 0) 100%);
  pointer-events: none;
}

.war-card-caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 2;
}

.war-name {
  display: block;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--heading);
}

.war-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* 篇数角标绝对定位到图的右上角。原来它在 flex 流里靠 margin-left:auto 顶到右边，
   时间标签一长就换行、把卡片中间撑出一块空白（第二次鸦片战争、甲午战争都中过）。 */
.war-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid rgba(216, 212, 204, 0.22);
  border-radius: 2px;
  background: rgba(12, 13, 16, 0.55);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

/* 一句话退到图外、两行截断：它是补充，不该跟图抢 */
.war-oneline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.war-card:hover .war-oneline {
  color: var(--ink);
}

/* 不画分隔线、靠右排：这行是整份档案的落款，不是新起的一块内容，
   横一条通栏实线会把它读成另一个区块。右对齐也与首页各屏右下角的小字一致。 */
.stats-foot {
  margin-top: 44px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* ---------- 面包屑 ---------- */
.crumb {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 22px;
}
/* hover 一律只改颜色，不改 opacity。Chrome 里 opacity 一动就把元素提成独立的合成层，
   指针图标每帧重新命中一次，鼠标压在链接上时会在小手与箭头之间抖，最后常停在箭头上
   （实测：几何没有缝、:hover 状态也稳，抖的是图标本身）。color 不触发合成层。 */
.crumb a { transition: color 0.15s; }
.crumb a:hover { color: var(--ink-dim); }
.crumb .sep { margin: 0 8px; color: var(--line); }
.crumb .here { color: var(--ink-dim); }

/* ---------- 双栏布局（战争页 / 阅读页） ---------- */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.layout.with-toc { grid-template-columns: 300px minmax(0, 1fr) 190px; }

/* 正文栏居中。三栏时这一栏本就窄于 760，max-width 不起作用、位置不变；
   一旦侧栏/目录收起（≤1399、≤1099），栏宽放开到整幅，正文若还左贴，
   右边会空出一大片——把这一栏钉在中线上，页脚翻页条也随之与正文同宽。 */
.content {
  min-width: 0;
  max-width: 760px;
  margin-inline: auto;
}

.sidebar {
  min-width: 0;
  position: sticky;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top) - 24px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.side-stage {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 20px 0 0;
}
.side-stage:first-child { margin-top: 0; }
/* 战争标题上方那点间距一律走自身 padding，不用外面的 margin：
   margin 是死区，鼠标横穿它时指针会在手形与箭头之间来回跳（实测 5px 的缝就够跳）。
   把缝收进链接自己的可点范围里，整条侧栏就是一格挨一格，不留缝。 */
.side-war {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 8px 4px;
  border-left: 2px solid transparent;
  transition: color 0.15s;
}
.side-war:hover { color: var(--heading); }
.side-war.current-war { color: var(--heading); }
.side-war.current {
  border-left-color: var(--rust);
  background: var(--bg-panel);
  color: var(--heading);
}
.doc-list { list-style: none; }
.doc-item {
  display: flex;
  align-items: baseline;
  padding: 2px 8px 2px 20px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  transition: color 0.15s;
}
.doc-item:hover { color: var(--ink); }
.doc-item.current {
  border-left-color: var(--rust);
  background: var(--bg-panel);
  color: var(--heading);
}
.time-pre {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.doc-item .time-pre { flex: none; min-width: 7ch; margin-right: 4px; }
.type-tag {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 5px;
}
.type-tag.overview { color: var(--rust-ink); border-color: #44302b; }

/* ---------- 档案正文 ---------- */
.doc {
  min-width: 0;
  max-width: 760px;
}
.doc-meta {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.doc-body h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--heading);
  margin: 8px 0 22px;
  line-height: 1.5;
}
.doc-body h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--heading);
  margin: 36px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.doc-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--heading);
  margin: 26px 0 8px;
}
.doc-body h4 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--heading);
  margin: 20px 0 6px;
}
.doc-body p { margin: 12px 0; }
.doc-fig {
  position: relative;
  margin: 14px 0 18px;
  padding: 0;
}
.doc-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
}
/* 单图声明：压到图内右下角，淡到不打断阅读节奏。
   它仍要能被找到——这是「配图非史料」的告知，不能变成纯装饰，
   所以配一层暗投影，保证压在浅色天空或深色地面上都读得出来。 */
.doc-fig figcaption {
  position: absolute;
  right: 8px;
  bottom: 7px;
  max-width: calc(100% - 16px);
  text-align: right;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(236, 229, 213, 0.34);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
/* 配图声明：交代清楚即可，不要抢正文。与 .doc-meta 同一档小字。 */
.fig-notice {
  margin: 32px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.doc-body p.oneliner {
  font-size: 17.5px;
  text-indent: 2em;
  color: var(--heading);
  margin: 20px 0 26px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border-left: 2px solid var(--rust);
  border-radius: 2px;
}
.doc-body strong { color: var(--heading); font-weight: 600; }
/* 原有 `p.oneliner strong` 上色规则是给「一句话」那个标签用的，标签已于
   2026-08-03 去掉；留着会把篇首句里本来就有的粗体染成锈色，故删。 */
.doc-body ul { margin: 12px 0 12px 1.6em; }
.doc-body li { margin: 4px 0; }
.doc-body blockquote {
  margin: 14px 0;
  padding: 8px 16px;
  border-left: 2px solid var(--line);
  color: var(--ink-dim);
  background: var(--bg-panel);
  border-radius: 2px;
}
.doc-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}
.mark-red { color: var(--rust-ink); }

.table-wrap { overflow-x: auto; margin: 16px 0 20px; }
.doc-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
}
.doc-body th, .doc-body td {
  border: 1px solid var(--line);
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-body th {
  background: var(--bg-raise);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.doc-body tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

/* ---------- 目录 ---------- */
.toc {
  position: sticky;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 12.5px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.toc-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.toc a {
  display: block;
  padding: 2px 0;
  color: var(--ink-dim);
  line-height: 1.6;
  transition: color 0.15s;
}
.toc a:hover { color: var(--heading); }

/* ---------- 上一篇 / 下一篇 ---------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pager a {
  font-size: 13.5px;
  color: var(--ink-dim);
  max-width: 46%;
  transition: color 0.15s;
}
.pager a:hover { color: var(--heading); }
.pager .next { text-align: right; margin-left: auto; }
.pager .pager-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* ---------- 搜索结果 ---------- */
.search-summary {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.result-item {
  display: block;
  padding: 14px 18px 12px;
  margin-bottom: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.15s;
}
.result-item:hover { border-color: var(--ink-faint); }
.result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-title { font-size: 15.5px; color: var(--heading); }
.result-war { font-size: 12px; color: var(--ink-faint); }
.result-oneline {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.empty-note { color: var(--ink-faint); font-size: 14px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1399px) {
  .layout.with-toc { grid-template-columns: 300px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1099px) {
  main { padding: 28px 18px 64px; }
  .header-inner { padding: 22px 18px 18px; }
  .war-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .layout, .layout.with-toc { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }

  /* 窄屏侧栏是一块浮在正文上的面板。锚点现在是固定导航的下缘，
     不再跟随正文里的 sticky 工具条，所以坐标保持 CSS 常数即可。 */
  .layout.show-list .sidebar {
    display: block;
    position: fixed;
    top: calc(var(--global-nav-height) + 1px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 760px;
    max-height: calc(100vh - var(--global-nav-height) - 1px - 24px);
    overflow-y: auto;
    /* 面板滚到头之后，滚轮不再接着推底下的正文——浮层是一层单独的东西，
       两百多条翻到底就该停住，而不是把读者原来读到的位置一起冲走。 */
    overscroll-behavior: contain;
    z-index: 45;
    padding: 16px 18px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 560px) {
  .war-grid { grid-template-columns: 1fr; }
}

.search-loading {
  margin: -8px 0 16px;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---------- 语种切换 ---------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-faint);
}
.lang-switcher a,
.lang-switcher .current {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  white-space: nowrap;
}
.lang-switcher a {
  color: var(--ink-dim);
  transition: color 0.15s, background 0.15s;
}
.lang-switcher a:hover {
  color: var(--heading);
  background: rgba(255, 255, 255, 0.035);
}
.lang-switcher .current {
  color: var(--rust-ink);
  cursor: default;
}

@media (max-width: 760px) {
  .lang-switcher {
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .global-nav-actions {
    gap: 6px;
    max-width: 58vw;
  }

  .lang-switcher {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
  }

  .lang-switcher a,
  .lang-switcher .current {
    min-height: 22px;
    padding: 2px 4px;
  }
}

/* ---------- 紧凑语种切换器 ---------- */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.2;
}
.lang-menu {
  position: relative;
}
.lang-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--ink-dim);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lang-summary::-webkit-details-marker {
  display: none;
}
.lang-summary::marker {
  content: "";
}
.lang-summary:hover,
.lang-summary:focus-visible,
.lang-menu[open] .lang-summary {
  color: var(--heading);
  border-color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}
.lang-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lang-current-label {
  color: inherit;
}
.lang-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}
.lang-options a,
.lang-options .current {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  white-space: nowrap;
}
.lang-options a {
  color: var(--ink-dim);
  transition: color 0.15s, background 0.15s;
}
.lang-options a:hover,
.lang-options a:focus-visible {
  color: var(--heading);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}
.lang-options .current {
  color: var(--rust-ink);
  cursor: default;
}

@media (max-width: 560px) {
  .lang-switcher {
    flex-wrap: nowrap;
    max-width: none;
  }

  .lang-summary {
    width: 34px;
    padding-right: 0;
    padding-left: 0;
  }

  .lang-current-label {
    display: none;
  }
}

/* 静态档案页在窄屏才需要列表按钮；宽屏侧栏本来就在。手机上给按钮降一点字距，
   让品牌、档案列表、语种图标三件东西稳定留在同一条 54px 导航里。 */
@media (max-width: 560px) {
  .archive-page .global-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .archive-page .global-brand {
    flex-basis: 0;
    overflow: hidden;
  }

  .archive-page .global-nav-actions {
    max-width: none;
  }

  .archive-page .list-toggle {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}

/* .home-page 不做 body padding-top 是有意的：六屏首页每屏都是 100svh 视口构图，
   第一屏 .monument-screen 已在自身 padding-top 里加了 --global-nav-height，
   再给 body 整体让位会把六屏滚动节奏整体下推。 */

/* ---------- 表格横向溢出的根治（2026-08-04） ---------- */
/* 症状：日／英／韩的战役正文在手机上整页能横向滑动，简体不会。
   实测 390px 视口下 /ja/1899-boxer-uprising/：
     .layout 354（grid 轨道正确）→ .content 439 → .table-wrap 439 → table 439
   表格的 min-content 是 439，一路把祖先顶开，于是 .table-wrap 的
   overflow-x: auto 从未生效——它自己被撑到了内容宽度，没有可滚的余量。
   根源是 `.doc-body th { white-space: nowrap }`：中文表头短（「项」「内容」），
   min-content 小于视口所以看不出来；日英韩同样的表头长得多，就顶破了。

   两条一起上：
   1) 窄屏允许表头换行——把 min-content 降下来，多数表格直接放得下；
   2) 给链上每一层钉死 max-width，真正宽的表格只在 .table-wrap 内部滚动，
      不再传导到页面。月汐原话：让表格单独横向滚，不要强制它和页面一样宽。 */
.content,
.doc,
.doc-body {
  min-width: 0;
  max-width: 100%;
}

.table-wrap {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1099px) {
  /* 表头在窄屏换行。宽屏保持 nowrap——那里空间够，不换行更好读。 */
  .doc-body th {
    white-space: normal;
  }
}