/* =====================================================================
   《风之谷》知识手册 — 作品级样式系统
   主题命名："腐海标本志"（Fukai Herbarium）
   设计动机：把手册做成"娜乌西卡本人留下的腐海田野笔记本"——
   她在风之谷地下密室里种孢子、做对比实验、给虫类分类编目，
   这种"博物学家标本卡片"的气质，就是本手册视觉语言的来源，
   而不是套用通用百科全书或仪表盘式的默认审美。
   色彩：苔藓灰绿 + 风化卡其（中明度，杜绝纯黑/纯白大面积色块）
   字体（在线 Google Fonts）：标题用底纹沉稳的衬线，正文用人文黑体
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --header-h: 3.4rem;

  /* —— 纸面与墨色（中明度卡其/苔藓灰，杜绝纯黑纯白） —— */
  --paper:       #E8E2C9;   /* 页面主背景：风化卡其纸 */
  --paper-deep:  #DCD4B4;   /* 卡片/侧栏底：略深一档 */
  --paper-deep2: #D2C9A6;   /* 表头/强调底块：再深一档 */
  --paper-rise:  #F1ECDA;   /* 卡片浮起面：略浅一档，配合阴影分层 */
  --ink:         #322D22;   /* 主文字：暖墨棕，非纯黑 */
  --ink-soft:    #4C4736;   /* 次级文字 */
  --ink-faint:   #605A42;   /* 辅助/说明文字（已核对 WCAG AA） */
  --rule:        #B9AE84;   /* 分隔线：苔藓黄褐 */
  --rule-soft:   #CBC1A0;

  /* —— 顶栏与深色锚点（局部使用，不作为大面积背景） —— */
  --moss-dark:   #262C22;   /* 深苔绿炭色：仅用于顶栏/页脚/图钉等局部 */
  --moss-text:   #F3EEDD;   /* 深色底上的文字，非纯白 */

  /* —— 主强调色（腐海孢子金 + 风纹松石，克制点缀，不做大面积铺色） —— */
  --spore:       #A9852E;   /* 孢子金：知识点/关键数据 */
  --spore-bright:#D9B65C;   /* 深色底上的孢子金（已核对对比度） */
  --spore-deep:  #705119;   /* 已核实对比度：此前 #7C5A1C 在 .volcard:hover 的
                               --paper-deep 背景下仅4.23，低于WCAG AA 4.5标准
                               （鼠标悬停瞬间才触发，容易被忽略）；按同色相小幅
                               加深（HLS亮度×0.9）修正为此色值，在全站已知使用
                               该变量的所有背景（paper/paper-deep/paper-rise）
                               上均达到4.9以上，肉眼观感与原色几乎无差异。 */
  --wind-teal:   #296B5E;   /* 风纹松石：现实事件/案例强调 */
  --wind-teal-deep: #1D4E44;
  --rust:        #8E3524;   /* 王虫赤：警示/冲突类内容 */

  /* —— 知识领域十色谱（已逐一核对 WCAG AA 对比度） —— */
  --d-ecology:      #4F6B45;
  --d-environment:  #6B5836;
  --d-warfare:      #8E3524;
  --d-politics:     #3D5468;
  --d-religion:     #5E3F61;
  --d-biotech:      #296B5E;
  --d-linguistics:  #7C5A1C;
  --d-engineering:  #4E4E44;
  --d-art:          #965038;
  --d-production:   #3A3F5C;

  /* —— 字体 —— */
  --font-display: 'Noto Serif SC', 'Songti SC', serif;
  --font-body:    'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* —— 节奏与形态 —— */
  --gutter: clamp(1rem, 3vw, 2.4rem);
  --rail-w: 16rem;
  --folio-w: min(50rem, 100%);
  --r-outer: 20px;   /* 卡片外圆角 */
  --r-inner: 12px;   /* 卡片内层元素圆角（同心：outer = inner + padding） */
  --shadow-1: 0 1px 0 rgba(50,45,34,.06), 0 14px 32px -20px rgba(38,44,34,.35);
  --shadow-2: 0 1px 0 rgba(50,45,34,.05), 0 6px 16px -10px rgba(38,44,34,.28);
}

/* —————— 重置与基底 —————— */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 70% at 8% -8%, rgba(169,133,46,.08), transparent 55%),
    radial-gradient(90% 60% at 108% 110%, rgba(41,107,94,.06), transparent 55%);
  line-height:1.85;
  font-size:17px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--wind-teal-deep); text-decoration:none; border-bottom:1px solid rgba(41,107,94,.35); transition:color .15s, border-color .15s; }
a:hover{ color:var(--rust); border-color:var(--spore); }
::selection{ background:rgba(169,133,46,.28); }

/* 全局键盘焦点可见性：此前全站316处可交互元素（链接/按钮）里，除.skip-link
   外没有任何一处定义:focus样式，键盘用户Tab导航时完全看不到焦点落在哪个
   元素上。用:focus-visible（只在键盘导航时显示，鼠标点击不触发，不干扰
   视觉简洁度）统一补上清晰的孢子金描边，覆盖全站所有原生可聚焦元素。 */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--spore-bright);
  outline-offset:2px;
  border-radius:2px;
}
.volcard:focus-visible, .auxcard:focus-visible{
  outline:2px solid var(--wind-teal);
  outline-offset:2px;
}
.to-top:focus-visible{ outline-offset:3px; }
p{ margin:0 0 1rem; text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; }
small,.sm{ font-size:.82rem; color:var(--ink-faint); }
.font-mono, .tnum{ font-variant-numeric: tabular-nums; }

/* =====================================================================
   顶栏「标本志」品牌条：深苔绿炭色，仅此一处使用深色大面积
   ===================================================================== */
.brand{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, var(--moss-dark), #202519);
  color:var(--moss-text);
  border-bottom:1px solid rgba(217,182,92,.28);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.55);
}
.brand__inner{
  max-width:100rem; margin:0 auto;
  display:flex; align-items:center; gap:.9rem;
  padding:.6rem var(--gutter);
}
.brand__mark{
  font-family:var(--font-display); font-weight:700;
  font-size:1.28rem; line-height:1; letter-spacing:.03em;
  color:var(--spore-bright);
  display:flex; align-items:center; gap:.5rem;
}
.brand__mark a{ color:var(--spore-bright); border:none; display:flex; align-items:center; gap:.5rem; }
.brand__mark a:hover{ color:#EAD07E; }
.brand__mark .glyph{ display:inline-flex; width:1.5rem; height:1.5rem; }
.brand__mark .pipe{ color:rgba(243,238,221,.4); margin:0 .1em; font-weight:400; }
.brand__sub{ font-size:.72rem; letter-spacing:.2em; color:rgba(243,238,221,.68); text-transform:uppercase; font-family:var(--font-mono); }
.brand__crumb{ margin-left:auto; font-size:.82rem; color:rgba(243,238,221,.82); }
.brand__crumb a{ color:rgba(243,238,221,.95); border-bottom:1px dotted rgba(243,238,221,.5); }

/* 页面阅读进度条（风纹丝线，细而克制） */
.progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:70; background:linear-gradient(90deg, var(--wind-teal), var(--spore)); transition:width .12s linear; }

/* =====================================================================
   布局骨架：左 粘性目录栏 + 右 正文标本页
   ===================================================================== */
.layout{ max-width:100rem; margin:0 auto; display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); grid-template-rows:1fr; gap:0; }
/* 显式栅格定位：.rail-dock（目录停靠区，运行时由 initRailDock() 包裹
   .rail-toggle + .rail 生成）固定在第1列、.folio/.workindex（正文）固定在
   第2列——与 HTML 源码里"目录在前、正文在后"的 DOM 顺序一致（用户明确要求
   Tab 顺序须"先目录、后正文"，方便随时跳转到具体小节，故本轮已撤销此前
   运行时重排 DOM 顺序的做法）。这里继续显式写出 grid-column，只是为了
   让布局意图一目了然、不依赖隐式网格自动排列的默认行为，并非解耦 Tab
   顺序之用。 */
.rail-dock, .rail{ grid-column:1; grid-row:1; }
.folio, .workindex{ grid-column:2; grid-row:1; }
.rail{
  position:sticky; top:var(--header-h); align-self:start;
  height:calc(100vh - var(--header-h));
  overflow-y:auto;
  padding:1.4rem 1rem 3rem;
  border-right:1px solid var(--rule-soft);
  background:linear-gradient(180deg, var(--paper-deep), var(--paper));
}
.rail::-webkit-scrollbar{ width:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:3px; }
.rail__cap{ font-family:var(--font-display); color:var(--wind-teal-deep); font-size:.98rem; letter-spacing:.04em; padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:2px solid var(--spore); font-weight:700; }
.rail__sec{ font-size:.66rem; letter-spacing:.22em; color:var(--ink-faint); text-transform:uppercase; margin:1rem 0 .3rem; font-family:var(--font-mono); }
.rail__list{ list-style:none; margin:0; padding:0; }
.rail__list li{ margin:.03rem 0; }
.rail__list a{
  display:flex; gap:.5rem; align-items:baseline;
  padding:.34rem .5rem; font-size:.85rem; color:var(--ink-soft);
  border-left:2px solid transparent; border-bottom:none; border-radius:0 8px 8px 0;
}
.rail__list a:hover{ background:rgba(169,133,46,.14); border-left-color:var(--spore); color:var(--ink); }
.rail__list a.is-here{ color:var(--wind-teal-deep); border-left-color:var(--wind-teal); background:rgba(41,107,94,.08); font-weight:600; }
.rail__list .num{ font-family:var(--font-mono); color:var(--spore-deep); font-size:.78rem; min-width:1.6rem; font-variant-numeric:tabular-nums; }
.rail__nav{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--rule-soft); }

.rail-toggle{ display:none; }
@media (max-width:62rem){
  /* 注意：这里必须用 minmax(0,1fr) 而非裸 1fr——Grid 轨道在 1fr 写法下
     仍带有隐式的内容最小宽度（min-width:auto），一旦轨道内出现比视口更宽的
     子元素（如本页横向滚动的 Mermaid 图表），整个网格轨道会被撑宽，导致
     整个页面出现横向溢出/滚动条，图表内部本该起作用的局部滚动条反而失效。
     minmax(0,1fr) 显式把最小宽度归零，轨道宽度真正被视口限制住，图表的
     溢出只会体现在图表自己的 .viz__scrollbox 内部横向滚动，不外溢到整页。 */
  .layout{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  /* 窄屏下 rail-dock 与 folio 改为单列纵向堆叠，此时 grid-row 需要区分先后
     （而非桌面端两者都在 grid-row:1 里通过 grid-column 左右并排）——用
     grid-row:auto 让浏览器按 HTML 源码里"目录在前、正文在后"的实际先后
     顺序纵向排列即可，不必像桌面端那样写死数字。 */
  .rail-dock, .folio, .workindex{ grid-column:1; grid-row:auto; }
  .rail-dock{ position:sticky; top:var(--header-h); z-index:50; max-height:calc(100vh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; background:var(--paper-deep); box-shadow:0 8px 16px -12px rgba(38,44,34,.4); }
  .rail-toggle{
    display:flex; align-items:center; gap:.5rem; width:100%; justify-content:space-between;
    padding:.7rem var(--gutter); background:var(--paper-deep); border:none; border-bottom:1px solid var(--rule-soft);
    font-family:var(--font-display); color:var(--wind-teal-deep); font-size:1rem; cursor:pointer; position:sticky; top:0; z-index:1; min-height:44px;
  }
  .rail{ position:static; height:auto; max-height:0; overflow:hidden; border-right:none; padding:0 1.1rem; transition:max-height .25s ease; }
  .rail.open{ max-height:400rem; padding:0 1.1rem 1.4rem; }
  .folio{ padding-top:1.2rem; }
}
@media (max-width:40rem){ body{ font-size:16px; } }

/* =====================================================================
   正文标本页（folio）
   ===================================================================== */
.folio{ padding:2.2rem var(--gutter) 3.4rem; max-width:var(--folio-w); margin:0 auto; width:100%; }
.workindex{ padding:0 var(--gutter) 3rem; max-width:68rem; margin:0 auto; }

/* 册首标本卡（取代渐变 hero） */
.spread{
  position:relative; margin:0 0 2.4rem; padding:2.2rem 1.9rem 2rem;
  background:var(--paper-rise);
  border:1px solid var(--rule-soft);
  border-top:3px solid var(--wind-teal);
  border-radius:var(--r-outer);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.spread::before{ content:""; position:absolute; inset:.5rem; border:1px solid rgba(169,133,46,.35); border-radius:calc(var(--r-outer) - 6px); pointer-events:none; }
.spread__eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--spore-deep); margin:0 0 .5rem; }
.spread__vol{ font-family:var(--font-display); color:var(--wind-teal-deep); font-size:1.05rem; letter-spacing:.06em; margin:0 0 .3rem; font-weight:700; }
.spread__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.16; color:var(--ink); margin:0 0 .5rem; }
.spread__sub{ color:var(--ink-soft); font-size:1rem; letter-spacing:.02em; margin:0 0 1rem; }
.spread__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.8rem; color:var(--ink-faint); margin-top:.6rem; font-family:var(--font-mono); }
.spread__meta b{ color:var(--ink-soft); font-weight:600; font-family:var(--font-body); }

/* 标题层级 */
h2.fol-head,h3.fol-head{ font-family:var(--font-display); color:var(--wind-teal-deep); line-height:1.3; font-weight:700; }
h2.fol-head{ font-size:clamp(1.4rem,3vw,1.75rem); margin:2.4rem 0 1rem; padding-bottom:.4rem; border-bottom:1px solid var(--rule); display:flex; align-items:baseline; gap:.6rem; }
h2.fol-head .ord{ font-size:.76rem; color:var(--spore-deep); letter-spacing:.18em; font-family:var(--font-mono); }
h3.fol-head{ font-size:1.14rem; margin:1.7rem 0 .6rem; color:var(--ink); }
h3.fol-head::before{ content:"◈ "; color:var(--spore); font-size:.85em; }
.lead{ font-size:1.05rem; color:var(--ink-soft); }
.dropcap > p:first-of-type::first-letter{ font-family:var(--font-display); float:left; font-size:3.2rem; line-height:.82; padding:.1rem .45rem .05rem 0; color:var(--wind-teal-deep); }

/* =====================================================================
   签名组件①：三栏「标本对照卡」（原作漫画 ↔ 现实知识点 ↔ 现实事件）
   ===================================================================== */
.speci{
  margin:1.5rem 0 2rem; border:1px solid var(--rule-soft); background:var(--paper-rise);
  border-radius:var(--r-outer); box-shadow:var(--shadow-1); overflow:hidden;
}
.speci__head{
  font-family:var(--font-display); font-weight:700; color:var(--moss-text);
  background:linear-gradient(180deg, #2E3527, var(--moss-dark));
  padding:.65rem 1.1rem; margin:0; font-size:1rem; letter-spacing:.03em;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.speci__head .tag-loc{ font-family:var(--font-mono); font-size:.72rem; color:var(--spore-bright); letter-spacing:.06em; background:rgba(217,182,92,.14); padding:.14rem .55rem; border-radius:999px; border:1px solid rgba(217,182,92,.3); }
.speci__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; }
.speci__cell{ padding:1.05rem 1.1rem; border-right:1px dashed var(--rule); border-top:1px solid var(--rule-soft); cursor:pointer; transition:background-color .15s, box-shadow .15s; }
.speci__cell:last-child{ border-right:none; }
.speci__cell:hover{ background-color:rgba(169,133,46,.07); }
/* 点击某一栏「钉选」高亮：让读者能在虚构情节／现实知识点／现实事件三栏间
   聚焦对比某一栏时，视觉上把其余两栏适度调暗，凸显被选中的一栏——
   之前这里只有JS切换类名却完全没有配套样式，交互形同虚设。 */
.speci__cell.is-pinned{ background-color:rgba(217,182,92,.16) !important; box-shadow:inset 0 0 0 2px var(--spore); position:relative; z-index:1; }
.speci__grid:has(.is-pinned) .speci__cell:not(.is-pinned){ opacity:.55; }
.speci__label{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 .5rem; font-weight:700; font-family:var(--font-mono); display:flex; align-items:center; gap:.4rem; }
.speci__cell h4{ font-family:var(--font-display); font-weight:700; margin:0 0 .4rem; font-size:1rem; color:var(--ink); line-height:1.35; }
.speci__cell p{ font-size:.9rem; line-height:1.75; margin:0 0 .5rem; color:var(--ink-soft); }
.speci__cell p:last-child{ margin-bottom:0; }
.speci__cell .ref{ display:inline-block; margin-top:.3rem; font-size:.74rem; color:var(--spore-deep); border-bottom:1px dotted var(--spore); }
.speci__cell.is-fiction{ background:linear-gradient(180deg, rgba(41,107,94,.05), transparent 60%); border-left:3px solid var(--wind-teal); }
.speci__cell.is-fiction .speci__label{ color:var(--wind-teal-deep); }
.speci__cell.is-science{ background:linear-gradient(180deg, rgba(169,133,46,.06), transparent 60%); border-left:3px solid var(--spore); }
.speci__cell.is-science .speci__label{ color:var(--spore-deep); }
.speci__cell.is-event{ background:linear-gradient(180deg, rgba(142,53,36,.05), transparent 60%); border-left:3px solid var(--rust); }
.speci__cell.is-event .speci__label{ color:var(--rust); }
.speci__note{ padding:.7rem 1.1rem; border-top:1px solid var(--rule-soft); background:var(--paper-deep); font-size:.82rem; color:var(--ink-faint); }
.speci__note b{ color:var(--ink-soft); }

@media (max-width:52rem){
  .speci__grid{ grid-template-columns:1fr; }
  .speci__cell{ border-right:none; }
}

/* 页边批注 / 引文 */
.margin-note{ position:relative; margin:1.6rem 0; padding:.7rem 1rem .7rem 2rem; background:var(--paper-deep); border-radius:var(--r-inner); font-size:.9rem; color:var(--ink-soft); }
.margin-note::before{ content:"☙"; position:absolute; left:.6rem; top:.6rem; color:var(--spore-deep); font-size:1.05rem; }
.margin-note b{ color:var(--wind-teal-deep); }
.pullquote{ margin:1.8rem 0; padding:1.1rem 1.3rem; font-family:var(--font-display); font-size:1.1rem; line-height:1.6; color:var(--wind-teal-deep); text-align:center; border-top:2px double var(--spore); border-bottom:2px double var(--spore); background:rgba(241,236,218,.5); border-radius:var(--r-inner); }
.pullquote cite{ display:block; margin-top:.5rem; font-family:var(--font-body); font-size:.8rem; color:var(--ink-faint); font-style:normal; letter-spacing:.05em; }

/* 知识领域标签 */
.tag{ display:inline-block; font-size:.66rem; letter-spacing:.08em; padding:.16rem .55rem; border-radius:999px; color:#fff; font-weight:600; font-family:var(--font-mono); }
.t-ecology{ background:var(--d-ecology); }
.t-environment{ background:var(--d-environment); }
.t-warfare{ background:var(--d-warfare); }
.t-politics{ background:var(--d-politics); }
.t-religion{ background:var(--d-religion); }
.t-biotech{ background:var(--d-biotech); }
.t-linguistics{ background:var(--d-linguistics); }
.t-engineering{ background:var(--d-engineering); }
.t-art{ background:var(--d-art); }
.t-production{ background:var(--d-production); }

/* 可视化容器 */
/* —— 参考资料列表 —— */
.reflist{ list-style:none; margin:1rem 0 1.6rem; padding:0; display:grid; gap:.6rem; }
.reflist li{ padding:.75rem 1rem; background:var(--paper-deep); border-left:3px solid var(--wind-teal); border-radius:var(--r-inner); font-size:.92rem; line-height:1.7; color:var(--ink-soft); }
.reflist b{ color:var(--wind-teal-deep); font-family:var(--font-display); }

/* —— 数据表格（年表、对照表等） —— */
.dtable{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.88rem; background:var(--paper-rise); border-radius:var(--r-outer); overflow:hidden; box-shadow:var(--shadow-1); }
.dtable th,.dtable td{ padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--rule-soft); line-height:1.6; }
.dtable th{ background:var(--paper-deep2); color:var(--wind-teal-deep); font-family:var(--font-display); font-weight:700; font-size:.85rem; }
/* 数据行首列的行标题（如三线年表每行的"年份"）语义上应为 <th scope="row">
   而非 <td>，但若不加区分，会被上一条规则统一套上表头专用的深色底
   （--paper-deep2）与 --wind-teal-deep 文字色——曾用真实浏览器验证过，
   这个组合会与 .dtable td:first-child 的等宽字体/--spore-deep 文字色规则
   叠加冲突，产生 --spore-deep 文字色配 --paper-deep2 背景的对比度仅3.79、
   低于WCAG AA 4.5标准的问题。此处显式把 <tbody> 内的行标题背景/字重改回
   与同行 <td> 一致的浅色数据行外观，只保留语义角色的差异（scope="row"
   供屏幕阅读器建立行上下文），视觉上与此前的纯 <td> 版本完全一致。 */
.dtable tbody th{ background:transparent; color:var(--spore-deep); font-weight:400; }
.dtable td:first-child,.dtable th:first-child{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--spore-deep); white-space:nowrap; }
.dtable tr:last-child td{ border-bottom:none; }
.dtable tr:hover td,.dtable tr:hover th{ background:rgba(169,133,46,.06); }
@media (max-width:640px){
  .dtable{ font-size:.8rem; }
  .dtable th,.dtable td{ padding:.5rem .55rem; }
}

.viz{ margin:1.5rem 0; border:1px solid var(--rule-soft); background:var(--paper-rise); padding:1rem 1rem .6rem; border-radius:var(--r-outer); box-shadow:var(--shadow-1); text-align:center; }
.viz__cap{ font-size:.78rem; color:var(--ink-faint); margin:.6rem 0 0; letter-spacing:.02em; text-align:center; }
.viz__cap b{ color:var(--ink-soft); }
.viz .chart{ width:100%; height:22rem; margin:0 auto; }
.viz .mermaid{ background:transparent; }
.viz > svg{ margin:0 auto; }
/* —— 图表加载失败时的文字降级（第一性原理审查发现：此前 .chart:empty 的
   降级规则只覆盖了"容器加载后仍为空"这一种情况，且只对ECharts生效，对
   Mermaid未渲染时暴露原始图表语法源码完全无能为力）——script.js 检测到
   ECharts/Mermaid的CDN脚本加载失败或渲染出错后，会给最外层 .viz 容器打上
   is-fallback 标记类：此时隐藏图表本体（无论是 ECharts 的 .chart 容器、
   Mermaid 的 .mermaid 源码块，还是外层可能存在的 .viz__scrollbox 滚动壳），
   只保留下方本就存在的 .viz__cap 文字摘要作为主要展示内容，并在其前追加
   一句醒目提示——不重复撰写新文案，直接复用已有的人工说明文字，保证图文
   表述完全一致。 */
.viz.is-fallback .chart,
.viz.is-fallback .mermaid,
.viz.is-fallback .viz__scrollbox,
.viz.is-fallback > svg{ display:none; }
.viz.is-fallback .viz__cap{ text-align:left; }
.viz.is-fallback .viz__cap::before{
  content:"⚠ 图表因网络环境未能加载，以下为文字摘要：";
  display:block; color:var(--ink-faint); font-style:italic; margin-bottom:.4rem;
}

/* 图表横向滚动容器：Mermaid 关系图统一改为以「真实像素尺寸」渲染（JS 侧
   mermaid.initialize 已设置 flowchart.useMaxWidth:false），不再被压缩变形到
   字迹难辨的程度；容器 .viz__scrollbox 提供横向滚动条，图表比可用宽度窄时
   居中显示，比可用宽度宽时从左侧开始、可横向滚动查看完整内容。
   注意：这里刻意不用 flex+justify-content:center 实现居中——flex 容器对
   溢出子元素居中时，浏览器会把两端内容对称裁切、且初始 scrollLeft 仍为 0，
   视觉上却像是从中间被切断，反而看不到图表开头；改用 text-align:center +
   inline-block 则没有这个问题，溢出时天然从左侧完整开始。 */
.viz__scrollbox{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  text-align:center;
}
/* 可横向滚动区域的键盘可达性（第一性原理审查发现）：此前 .viz__scrollbox 只能
   靠鼠标拖动横向滚动条或触屏滑动查看完整图表，键盘用户完全没有路径可以看到
   被裁切在可视区域之外的部分——一张1700px宽的三线年表，键盘用户能看到的
   永远只有开头一小段。补充 tabindex="0"（HTML侧）让浏览器把它纳入Tab顺序，
   聚焦后方向键左右可原生滚动（无需额外JS，浏览器对可滚动容器的方向键处理
   是内置行为）。这里补充聚焦态样式，同时用 :focus-within 让外层 .viz 卡片
   也随之高亮，让用户能在版面上一眼看到"当前键盘焦点在这张图表里"。 */
.viz__scrollbox:focus-visible{
  outline:2px solid var(--spore-bright); outline-offset:2px;
}
.viz:has(.viz__scrollbox:focus-visible){
  box-shadow:0 0 0 2px var(--wind-teal), var(--shadow-1);
}
.viz__scrollbox::-webkit-scrollbar{ height:.55rem; }
.viz__scrollbox::-webkit-scrollbar-track{ background:var(--paper-deep); border-radius:999px; }
.viz__scrollbox::-webkit-scrollbar-thumb{ background:var(--spore); border-radius:999px; }
/* 直接子元素统一用 inline-block，才能让父级 text-align:center 生效；
   同时适用于 Mermaid（.mermaid）与 ECharts 容器（内联 style 指定固定像素宽度，
   例如信息密度较高、按响应式百分比宽度会导致标签互相重叠的年表/散点图）。 */
.viz__scrollbox > *{ display:inline-block; }
.viz__scrollbox .mermaid svg{ max-width:none !important; }


/* 册内导航（上一册 / 下一册） */
.folio-nav{ display:flex; justify-content:space-between; gap:1rem; margin:3rem 0 0; padding-top:1.3rem; border-top:2px solid var(--rule); }
.folio-nav a{ flex:1; display:block; padding:.85rem 1.05rem; border:1px solid var(--rule-soft); border-radius:var(--r-inner); background:var(--paper-deep); }
.folio-nav a:hover{ border-color:var(--wind-teal); background:var(--paper-rise); }
.folio-nav .nav-dir{ font-size:.68rem; letter-spacing:.2em; color:var(--spore-deep); text-transform:uppercase; font-family:var(--font-mono); }
.folio-nav .nav-title{ font-family:var(--font-display); font-size:.98rem; color:var(--ink); display:block; margin-top:.2rem; }
.folio-nav .next{ text-align:right; }

.spread,h2.fol-head,h3.fol-head{ scroll-margin-top:calc(var(--header-h) + .8rem); }

/* 跳到主内容：键盘用户的无障碍快捷跳转，默认视觉隐藏（但保留在焦点顺序与可访问性树中），
   聚焦时恢复可见，避免每次都要连续 Tab 跳过顶栏与侧边目录才能进入正文 */
.skip-link{
  position:absolute; top:0; left:0; z-index:100;
  padding:.7rem 1.1rem; background:var(--moss-dark); color:var(--moss-text);
  font-family:var(--font-display); font-size:.92rem; text-decoration:none; border-bottom-right-radius:var(--r-inner);
  clip-path:inset(50%); clip:rect(0 0 0 0); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.skip-link:focus{
  clip-path:none; clip:auto; width:auto; height:auto; overflow:visible;
  outline:2px solid var(--spore-bright); outline-offset:-2px;
}

/* 返回顶部 */
.to-top{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:50; width:2.75rem; height:2.75rem; min-width:40px; min-height:40px;
  border-radius:50%; background:var(--moss-dark); color:var(--spore-bright); border:1px solid var(--spore-deep);
  font-size:1.1rem; cursor:pointer; opacity:0; transform:translateY(8px);
  /* visibility:hidden ——第一性原理审查发现的焦点陷阱之一：此前只用 opacity:0
     隐藏未滚动时的按钮，但 opacity 不影响可聚焦性，键盘用户 Tab 到页面末尾时
     仍会聚焦到这个完全透明、肉眼看不见的按钮上，焦点仿佛凭空消失，无从判断
     光标去向。补充 visibility 属性（真正让浏览器排除其可聚焦性）修复，并用
     transition-delay 让「隐藏」延后到透明度淡出动画播放完毕之后才生效——
     避免直接切断正在进行的淡出效果，只有「显示」时才不设延迟、立即可交互。 */
  visibility:hidden;
  transition-property:opacity, transform, background-color, visibility; transition-duration:.2s; transition-delay:0s, 0s, 0s, .2s;
  box-shadow:var(--shadow-1);
}
.to-top.show{ opacity:.94; transform:translateY(0); visibility:visible; transition-delay:0s; }
.to-top:hover{ background:#2E3527; }
.to-top:active{ transform:translateY(0) scale(.96); }

/* 页脚 */
.foot{ padding:2rem var(--gutter); border-top:2px solid var(--spore); background:var(--paper-deep); color:var(--ink-faint); font-size:.82rem; }
.foot__inner{ max-width:var(--folio-w); margin:0 auto; }
.workindex + .foot .foot__inner, .foot.wide .foot__inner{ max-width:68rem; }
.foot b{ color:var(--wind-teal-deep); }

/* =====================================================================
   手册首页专用
   ===================================================================== */
.hero-folio{
  position:relative; margin:2.2rem 0 2.2rem; padding:clamp(1.8rem,4vw,3rem);
  background:var(--paper-rise); border:1px solid var(--rule-soft); border-top:4px solid var(--wind-teal);
  border-radius:var(--r-outer); box-shadow:var(--shadow-1); overflow:hidden;
}
.hero-folio::before{ content:""; position:absolute; inset:.55rem; border:1px solid rgba(169,133,46,.32); border-radius:calc(var(--r-outer) - 6px); pointer-events:none; }
.hero-folio__wind{ position:absolute; right:-2rem; top:-2rem; width:14rem; height:14rem; opacity:.5; pointer-events:none; }
.hero-folio h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.1rem,5.4vw,3.3rem); margin:0 0 .3rem; color:var(--ink); line-height:1.08; }
.hero-folio .ttl-alt{ color:var(--wind-teal-deep); font-family:var(--font-display); font-size:1.15rem; letter-spacing:.04em; margin-bottom:1rem; font-weight:700; }
.hero-folio p.lead{ max-width:42rem; }
.stat-row{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.5rem; position:relative; }
.stat{ min-width:5rem; }
.stat b{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--wind-teal-deep); line-height:1; font-variant-numeric:tabular-nums; }
.stat span{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; font-family:var(--font-mono); }

/* 知识领域筛盘：点击某一领域按钮，只显示与该领域有关联标本卡的分册；
   复用.tag系列已有的10色知识领域配色，选中态用实心底色+白字，未选中态
   用同色描边+同色文字，保持与下方vc-tags视觉语言一致。 */
.domain-sieve{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.6rem; }
.domain-sieve button{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  padding:.35rem .85rem; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-soft); border:1.5px solid var(--rule);
  transition:background-color .15s, color .15s, border-color .15s;
}
.domain-sieve button:hover{ border-color:var(--spore); color:var(--ink); }
.domain-sieve button.on{ background:var(--moss-dark); color:var(--moss-text); border-color:var(--moss-dark); }
.domain-sieve button[data-domain="ecology"].on{ background:var(--d-ecology); border-color:var(--d-ecology); }
.domain-sieve button[data-domain="environment"].on{ background:var(--d-environment); border-color:var(--d-environment); }
.domain-sieve button[data-domain="warfare"].on{ background:var(--d-warfare); border-color:var(--d-warfare); }
.domain-sieve button[data-domain="politics"].on{ background:var(--d-politics); border-color:var(--d-politics); }
.domain-sieve button[data-domain="religion"].on{ background:var(--d-religion); border-color:var(--d-religion); }
.domain-sieve button[data-domain="biotech"].on{ background:var(--d-biotech); border-color:var(--d-biotech); }
.domain-sieve button[data-domain="linguistics"].on{ background:var(--d-linguistics); border-color:var(--d-linguistics); }
.domain-sieve button[data-domain="engineering"].on{ background:var(--d-engineering); border-color:var(--d-engineering); }
.domain-sieve button[data-domain="art"].on{ background:var(--d-art); border-color:var(--d-art); }
.domain-sieve button[data-domain="production"].on{ background:var(--d-production); border-color:var(--d-production); }

.volgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:1rem; margin:1.5rem 0; }
.volgrid__empty{ grid-column:1 / -1; padding:1.5rem; text-align:center; color:var(--ink-faint); font-size:.9rem; background:var(--paper-deep); border-radius:var(--r-inner); }
.volcard{ display:block; padding:1.05rem 1.1rem; background:var(--paper-rise); border:1px solid var(--rule-soft); border-left:4px solid var(--wind-teal); border-radius:var(--r-outer); box-shadow:var(--shadow-2); transition-property:border-color, background-color, transform; transition-duration:.15s; }
.volcard:hover{ border-left-color:var(--spore); background:var(--paper-deep); transform:translateY(-1px); }
.volcard:active{ transform:translateY(0) scale(.99); }
.volcard .vc-num{ font-family:var(--font-mono); color:var(--spore-deep); font-size:.78rem; letter-spacing:.14em; }
.volcard .vc-ttl{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.08rem; margin:.3rem 0; line-height:1.3; }
.volcard .vc-sub{ font-size:.8rem; color:var(--ink-faint); margin:0 0 .5rem; }
.volcard .vc-tags{ display:flex; flex-wrap:wrap; gap:.3rem; }

.auxgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.9rem; margin:1.4rem 0; }
.auxcard{ display:block; padding:1rem 1.1rem; background:var(--paper-deep); border:1px solid var(--rule-soft); border-radius:var(--r-outer); transition:background-color .15s, border-color .15s; }
.auxcard:hover{ background:var(--paper-rise); border-color:var(--wind-teal); }
.auxcard b{ font-family:var(--font-display); font-weight:700; color:var(--wind-teal-deep); }
.auxcard span{ display:block; font-size:.82rem; color:var(--ink-faint); margin-top:.25rem; }

.pathlist{ counter-reset:path; list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.8rem; }
.pathlist li{ position:relative; padding:.9rem 1.1rem .9rem 3.1rem; background:var(--paper-deep); border-radius:var(--r-outer); border:1px solid var(--rule-soft); }
.pathlist li::before{ counter-increment:path; content:counter(path); position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:1.7rem; height:1.7rem; border-radius:50%; background:var(--wind-teal); color:var(--moss-text); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.85rem; }
.pathlist b{ color:var(--ink); }

/* 宽屏下放宽单栏最大宽度，减少两侧留白（不拆分页边批注栏：内容以整段卡片为主，双栏批注栏在此形态下会造成大片空白） */
@media (min-width:75rem){
  .folio{ max-width:64rem; }
}
@media (min-width:100rem){
  .folio{ max-width:72rem; }
  .workindex{ max-width:78rem; }
}

@media (max-width:40rem){ .hero-folio,.spread{ padding:1.6rem 1.2rem; } }


/* 打印 */
@media print{
  .brand,.rail,.rail-toggle,.to-top,.folio-nav,.progress{ display:none !important; }
  /* 同屏幕端@media(max-width:62rem)断点一样的教训：Grid轨道用裸1fr仍带隐式
     min-width:auto，页面内若有超宽的Mermaid/ECharts图表会把打印页面撑宽、
     右侧内容被裁切且打印无法像屏幕一样横向滚动补救；必须用minmax(0,1fr)。
     同时给.viz__scrollbox在打印时强制换行显示（不再横向滚动），保证宽图表
     打印时能完整换行展示，即便因此变得比较高，也好过被直接裁掉看不到。 */
  .layout{ grid-template-columns:minmax(0,1fr); }
  .folio{ max-width:100%; }
  body{ background:#fff; font-size:11pt; }
  .speci__grid{ grid-template-columns:1fr 1fr 1fr; }
  .viz__scrollbox{ overflow-x:visible; white-space:normal; }
  .viz__scrollbox > *{ max-width:100% !important; width:auto !important; }
}