/* ==========================================================================
   paper.css — 全球变化科学论文 HTML 版 · 公共样式
   主题：地球科学 / 地理信息 · DOI 期刊论文排版风格
   所有文章共用本文件，请勿在单篇 HTML 内重复编写样式
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 地球科学配色：深海蓝 + 冰川青 + 土壤棕 */
  --c-primary: #1b4965;
  --c-primary-dark: #12324a;
  --c-accent: #2a9d8f;
  --c-accent-soft: #e6f4f1;
  --c-globe: #5a8f7b;
  --c-earth: #b08968;

  --c-text: #1f2429;
  --c-text-2: #404952;
  --c-text-3: #6b7681;
  --c-line: #dfe4e8;
  --c-line-soft: #eef1f4;
  --c-bg: #ffffff;
  --c-bg-soft: #f7f9fa;
  --c-bg-page: #f2f4f6;

  --c-ref: #1b4965;
  --c-fig: #2a6f97;
  --c-tab: #8a6d3b;
  --c-eq: #6a4c93;

  --font-serif-cn: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC",
    "SimSun", "STSong", "FZSSK", serif;
  --font-sans-cn: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC",
    "Microsoft YaHei", "SimHei", sans-serif;
  --font-serif-en: "Times New Roman", "Georgia", "Liberation Serif", serif;
  --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

  --page-w: 900px;
  --radius: 6px;
  --shadow-1: 0 1px 3px rgba(20, 40, 60, 0.08);
  --shadow-2: 0 6px 24px rgba(20, 40, 60, 0.16);
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-bg-page);
  color: var(--c-text);
  font-family: var(--font-serif-cn);
  font-size: 16.5px;
  line-height: 1.9;
  text-align: justify;
}

/* ---------- 3. 顶部进度条 + 顶栏 ---------- */
#progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .1s linear;
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: 52px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
}
.topbar .tb-mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  position: relative;
}
.topbar .tb-mark::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75);
  border-left-color: transparent; border-bottom-color: transparent;
}
.topbar .tb-title {
  font-family: var(--font-sans-cn);
  font-size: 13.5px; font-weight: 600; color: var(--c-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.topbar .tb-journal {
  font-size: 12px; color: var(--c-text-3); white-space: nowrap;
}
.tb-btn {
  font-family: var(--font-sans-cn);
  font-size: 12.5px; color: var(--c-text-2);
  border: 1px solid var(--c-line); background: #fff;
  padding: 5px 11px; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: .18s;
}
.tb-btn:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.tb-btn.tb-dataset { border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }

/* ---------- 4. 主体布局 ---------- */
.layout {
  max-width: 1240px; margin: 0 auto;
  padding: 74px 20px 80px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 32px; align-items: start;
}
.sidebar {
  position: sticky; top: 72px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  font-family: var(--font-sans-cn);
  padding-right: 4px;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: #cfd6dc; border-radius: 3px; }

.toc-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--c-text-3); text-transform: uppercase;
  padding: 0 0 8px; border-bottom: 1px solid var(--c-line);
  margin-bottom: 8px;
}
.toc a {
  display: block; font-size: 13px; line-height: 1.55;
  color: var(--c-text-2); text-decoration: none;
  padding: 5px 9px; border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0; transition: .15s;
}
.toc a:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.toc a.active {
  color: var(--c-primary); font-weight: 600;
  border-left-color: var(--c-accent); background: var(--c-accent-soft);
}
.toc a.lv2 { padding-left: 22px; font-size: 12.5px; }
.toc a.lv3 { padding-left: 34px; font-size: 12px; color: var(--c-text-3); }

/* ---------- 5. 论文纸张 ---------- */
.paper {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  padding: 54px 62px 64px;
  min-width: 0;
}

/* ---------- 6. 论文头部 ---------- */
.journal-line {
  font-family: var(--font-sans-cn);
  font-size: 12.5px; color: var(--c-text-3);
  letter-spacing: .4px;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding-bottom: 12px; border-bottom: 2px solid var(--c-primary);
  margin-bottom: 26px;
}
.journal-line .jl-name { color: var(--c-primary); font-weight: 600; }
.journal-line .jl-sep { color: var(--c-line); }

h1.paper-title {
  font-family: var(--font-sans-cn);
  font-size: 27px; line-height: 1.42; font-weight: 700;
  color: var(--c-primary-dark);
  margin: 0 0 6px; text-align: left; letter-spacing: .3px;
}
.title-en {
  font-family: var(--font-serif-en);
  font-size: 16px; line-height: 1.5; color: var(--c-text-3);
  font-style: italic; margin: 0 0 22px;
}

.authors {
  font-family: var(--font-sans-cn);
  font-size: 15.5px; line-height: 2;
  margin: 0 0 6px; text-align: left;
}
.authors .au-name { font-weight: 600; color: var(--c-text); }
.authors sup { color: var(--c-accent); font-weight: 700; }
.author-en { font-family: var(--font-serif-en); font-size: 13.5px; color: var(--c-text-3); margin-bottom: 12px; }

.affiliations {
  font-family: var(--font-sans-cn);
  font-size: 13px; line-height: 1.85; color: var(--c-text-2);
  margin: 0 0 20px; padding: 0; list-style: none;
}
.affiliations li { margin-bottom: 2px; }
.affiliations .aff-idx { color: var(--c-accent); font-weight: 700; margin-right: 4px; }

/* 元信息卡片 */
.meta-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px; background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft); border-radius: var(--radius);
  margin: 0 0 26px; overflow: hidden;
}
.meta-card .mc {
  background: var(--c-bg-soft); padding: 10px 14px;
  font-family: var(--font-sans-cn); font-size: 12.5px; line-height: 1.6;
}
.meta-card .mc .k {
  display: block; font-size: 11px; color: var(--c-text-3);
  letter-spacing: .6px; margin-bottom: 3px;
}
.meta-card .mc .v { color: var(--c-text); word-break: break-word; }
.meta-card .mc a { color: var(--c-primary); text-decoration: none; }
.meta-card .mc a:hover { text-decoration: underline; }
.meta-card .mc .v.mono { font-family: var(--font-mono); font-size: 12px; }

/* 摘要 */
.abstract {
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin: 0 0 18px;
}
.abstract h2, .keywords h2 {
  font-family: var(--font-sans-cn);
  font-size: 14.5px; font-weight: 700; color: var(--c-primary);
  margin: 0 0 8px; letter-spacing: 1px;
}
.abstract p { margin: 0; font-size: 15.5px; line-height: 1.92; color: var(--c-text); }
.keywords {
  padding: 0 4px; margin: 0 0 30px;
  font-family: var(--font-sans-cn); font-size: 14.5px; line-height: 1.85;
  color: var(--c-text-2);
}
.keywords .kw {
  display: inline-block; background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: 20px;
  padding: 1px 11px; margin: 0 5px 5px 0; font-size: 13.5px; color: var(--c-primary);
}
.sec-sep { height: 1px; background: var(--c-line); margin: 30px 0; }

/* ---------- 7. 正文排版 ---------- */
.body-text p {
  margin: 0 0 15px; text-indent: 2em; font-size: 16.5px; line-height: 1.92;
}
.body-text p.no-indent { text-indent: 0; }

/* 数据可用性声明 / 作者分工 / 利益冲突声明 */
.body-text p.stmt {
  font-family: "KaiTi", "STKaiti", "KaiTi GB2312", "楷体", "楷体_GB2312",
    var(--font-serif-cn);
  font-size: 16.5px; line-height: 1.92;
  color: var(--c-text);
}
.body-text p.stmt-avail { text-indent: 2em; }
/* 长链接整体不拆断，避免 DOI/CSTR 地址被拦腰截断 */
.body-text .url { white-space: nowrap; }
@media (max-width: 720px) {
  .body-text .url { white-space: normal; overflow-wrap: anywhere; }
}

h2.sec, h3.sec, h4.sec {
  font-family: var(--font-sans-cn); color: var(--c-primary-dark);
  margin: 30px 0 14px; text-align: left; line-height: 1.5;
}
h2.sec { font-size: 19px; font-weight: 700; border-bottom: 1px solid var(--c-line-soft); padding-bottom: 7px; }
h3.sec { font-size: 16.5px; font-weight: 700; }
h4.sec { font-size: 15px; font-weight: 600; color: var(--c-text-2); }

.sec-note {
  font-family: var(--font-sans-cn); font-size: 13.5px; line-height: 1.85;
  color: var(--c-text-2); background: var(--c-bg-soft);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px;
}
.sec-note strong { color: var(--c-primary); }

/* ---------- 8. 图片 ---------- */
figure.fig {
  margin: 26px 0 30px; text-align: center;
  scroll-margin-top: 80px;
}
.fig-frame {
  position: relative; display: inline-block; max-width: 100%;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: #fff; padding: 8px; cursor: zoom-in;
  transition: box-shadow .2s, border-color .2s;
}
.fig-frame:hover { border-color: var(--c-fig); box-shadow: var(--shadow-2); }
img.fig-img {
  display: block; max-width: 100%; height: auto; border-radius: 3px;
}

/* 下载按钮 */
.fig-tools {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 6px; opacity: 0; transform: translateY(-3px);
  transition: .18s; z-index: 2;
}
.fig-frame:hover .fig-tools,
.fig-frame:focus-within .fig-tools { opacity: 1; transform: none; }
.fig-tools button, .fig-tools a {
  font-family: var(--font-sans-cn); font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(27, 73, 101, .92); color: #fff;
  text-decoration: none; box-shadow: var(--shadow-1);
  transition: .15s;
}
.fig-tools button:hover, .fig-tools a:hover { background: var(--c-primary-dark); }
.fig-tools svg { width: 13px; height: 13px; fill: currentColor; }

figure.fig figcaption {
  font-family: var(--font-sans-cn); font-size: 14px; line-height: 1.75;
  color: var(--c-text-2); margin-top: 11px; text-align: center;
}
figure.fig figcaption .cap-tag {
  font-weight: 700; color: var(--c-fig); margin-right: 6px;
}

/* ---------- 9. 表格 ---------- */
figure.tab {
  margin: 26px 0 30px; text-align: center;
  scroll-margin-top: 80px;
}
figure.tab figcaption {
  font-family: var(--font-sans-cn); font-size: 14px; line-height: 1.75;
  color: var(--c-text-2); margin-bottom: 10px; text-align: center;
}
figure.tab figcaption .cap-tag { font-weight: 700; color: var(--c-tab); margin-right: 6px; }

.tab-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
table.ptable {
  border-collapse: collapse; width: 100%;
  font-family: var(--font-sans-cn); font-size: 13.5px; line-height: 1.65;
  background: #fff; text-align: left;
}
table.ptable th, table.ptable td {
  border: 1px solid var(--c-line);
  padding: 7px 10px; vertical-align: middle;
}
table.ptable thead th {
  background: #eef3f6; color: var(--c-primary-dark);
  font-weight: 700; text-align: center; white-space: nowrap;
}
table.ptable tbody td { color: var(--c-text); }
table.ptable tbody tr:nth-child(even) { background: #fafbfc; }
table.ptable td.num, table.ptable th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ptable td.ctr, table.ptable th.ctr { text-align: center; }

/* 表格双视图：结构化表格 / 原版图片 */
.tab-view[hidden] { display: none; }
.tab-view[data-view="image"] { text-align: center; }
.tab-switch {
  margin-top: 10px; display: flex; gap: 8px; justify-content: center;
  font-family: var(--font-sans-cn);
}
.tab-switch button {
  font-size: 12px; padding: 4px 13px; cursor: pointer;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-text-2);
  border-radius: 20px; transition: .15s;
}
.tab-switch button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.tab-switch button.on {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}

/* ---------- 10. 公式（MathML 矢量）---------- */
/* 数学字体：优先使用系统数学字体，保证符号字形与原文一致 */
math {
  font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math",
               "Times New Roman", "SimSun", serif;
  font-size: 1.02em;
  line-height: 1;
}

/* 独立公式：居中，编号右对齐 */
.eq-block {
  margin: 20px 0; text-align: center;
  scroll-margin-top: 80px;
  position: relative;
  padding: 2px 54px;
  overflow-x: auto;
  /* MathML 盒子不吃 text-align，必须用 flex 才能真正居中 */
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.eq-block > math,
.eq-block math[display="block"] {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  font-size: 1.06em;
}
.eq-block .eq-no {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif-en); font-size: 14px;
  color: var(--c-eq); white-space: nowrap;
}

/* 行内公式：与正文基线对齐 */
p.para math,
.note math,
.body-text math[display="inline"] {
  font-size: 1em;
  vertical-align: -0.16em;
  margin: 0 1px;
}

/* 公式内的分数、根式在行内不宜过大 */
p.para math mfrac > * { font-size: 0.92em; }

/* 兼容：早期图片型公式 */
.eq-block .eq-inner { display: inline-flex; align-items: center; gap: 10px; }
.eq-block .eq-img {
  display: block; max-width: 100%; height: auto;
  padding: 2px 4px; cursor: zoom-in;
  border-radius: 4px; transition: background .15s;
}
.eq-block .eq-img:hover { background: var(--c-accent-soft); }
img.eq-inline {
  display: inline-block; vertical-align: middle;
  cursor: zoom-in; padding: 0 1px;
  border-radius: 3px; transition: background .15s;
}
img.eq-inline:hover { background: var(--c-accent-soft); }
.eq-fail {
  color: #b3261e; font-size: .85em;
  border: 1px dashed #b3261e; border-radius: 3px; padding: 0 3px;
}

/* ---------- 11. 交叉引用链接 ---------- */
a.xref {
  color: var(--c-ref); text-decoration: none;
  border-bottom: 1px dotted var(--c-ref);
  cursor: pointer; padding: 0 1px;
  transition: .15s;
}
a.xref:hover { background: var(--c-accent-soft); border-bottom-style: solid; }
sup.ref-mark { font-size: .78em; line-height: 0; vertical-align: super; }
sup.ref-mark a.xref { border-bottom: none; font-family: var(--font-serif-en); }

/* 跳转高亮 */
@keyframes flash-hl {
  0%   { background: rgba(42, 157, 143, .32); }
  60%  { background: rgba(42, 157, 143, .18); }
  100% { background: transparent; }
}
.flash { animation: flash-hl 1.9s ease-out; border-radius: 3px; }

/* ---------- 12. 参考文献 ---------- */
.refs { margin-top: 34px; scroll-margin-top: 80px; }
.refs h2 {
  font-family: var(--font-sans-cn); font-size: 19px; font-weight: 700;
  color: var(--c-primary-dark);
  border-bottom: 1px solid var(--c-line-soft); padding-bottom: 7px;
  margin: 0 0 16px;
}
ol.ref-list { list-style: none; margin: 0; padding: 0; counter-reset: r; }
ol.ref-list li {
  font-family: var(--font-sans-cn);
  font-size: 13.5px; line-height: 1.78; color: var(--c-text-2);
  padding: 7px 10px 7px 44px; position: relative;
  border-radius: var(--radius); scroll-margin-top: 80px;
  text-align: left;
}
ol.ref-list li:nth-child(odd) { background: #fafbfc; }
ol.ref-list li .ref-no {
  position: absolute; left: 8px; top: 7px;
  font-family: var(--font-serif-en); font-weight: 700;
  color: var(--c-ref); font-size: 13px;
}
ol.ref-list li .backref {
  font-size: 11.5px; color: var(--c-accent); text-decoration: none;
  margin-left: 7px; border-bottom: 1px dotted var(--c-accent); cursor: pointer;
}
ol.ref-list li .backref:hover { background: var(--c-accent-soft); }
.ref-links a { color: var(--c-primary); word-break: break-all; }

/* ---------- 13. 页脚 ---------- */
.paper-foot {
  margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--c-line);
  font-family: var(--font-sans-cn); font-size: 12.5px; color: var(--c-text-3);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
}
.paper-foot a { color: var(--c-primary); text-decoration: none; }
.paper-foot a:hover { text-decoration: underline; }

/* ---------- 14. 图片灯箱 ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 22, 30, .93);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; padding: 28px;
}
#lightbox.on { display: flex; }
#lightbox img {
  max-width: 96vw; max-height: 82vh; object-fit: contain;
  background: #fff; border-radius: 6px; box-shadow: var(--shadow-2);
}
#lightbox .lb-cap {
  color: #dbe4ea; font-family: var(--font-sans-cn); font-size: 14px;
  margin-top: 14px; text-align: center; max-width: 760px; line-height: 1.6;
}
#lightbox .lb-bar { position: absolute; top: 16px; right: 18px; display: flex; gap: 8px; }
#lightbox .lb-bar button, #lightbox .lb-bar a {
  font-family: var(--font-sans-cn); font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 20px;
  padding: 6px 14px; text-decoration: none;
}
#lightbox .lb-bar button:hover, #lightbox .lb-bar a:hover { background: rgba(255,255,255,.26); }
#lightbox .lb-close {
  position: absolute; top: 14px; left: 18px;
  font-size: 26px; line-height: 1; color: #fff; background: none;
  border: none; cursor: pointer; opacity: .8;
}
#lightbox .lb-close:hover { opacity: 1; }

/* ---------- 15. 返回顶部 ---------- */
#totop {
  position: fixed; right: 22px; bottom: 26px; z-index: 70;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-line); background: #fff;
  color: var(--c-primary); cursor: pointer;
  box-shadow: var(--shadow-1); display: none;
  align-items: center; justify-content: center; font-size: 17px;
}
#totop.on { display: flex; }
#totop:hover { background: var(--c-accent-soft); border-color: var(--c-accent); }

/* ---------- 16. 响应式 ---------- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; padding-top: 68px; }
  .sidebar { position: static; max-height: none; display: none; }
  .paper { padding: 34px 26px 44px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .paper { padding: 24px 16px 34px; border-radius: 0; border-left: 0; border-right: 0; }
  h1.paper-title { font-size: 22px; }
  .body-text p { text-indent: 2em; }
  .topbar .tb-journal { display: none; }
}
@media print {
  .topbar, .sidebar, #totop, #lightbox, .fig-tools { display: none !important; }
  .layout { display: block; padding: 0; }
  .paper { border: 0; box-shadow: none; padding: 0; }
  a.xref { color: inherit; border: 0; }
}