/* ============================================================
   faq-enhance.css —— FAQ 页动画与阅读体验增强
   ------------------------------------------------------------
   加载顺序：位于 /zh/about/faq/index.inline.css 之后，
   用于覆盖与增强，不改动「原样提取、勿手改」的 index.inline.css。

   本文件解决三件事：
     1) 深色模式适配：index.inline.css 把 --bg / --card 硬编码为浅色，
        覆盖全站主题变量，导致深色模式下 FAQ 页仍是白底。这里改为
        读取全站主题变量，并在深色偏好下给出配套的深色取值。
     2) 阅读体验：正文行高、段距、标题层级、表格与代码的排版。
     3) 动效：details 展开/收起、目录跳转、卡片入场，
        统一遵循 prefers-reduced-motion。
   ============================================================ */

/* ===== 1. 主题变量：交还全站体系，不再硬编码浅色 ===== */
:root {
  --faq-gap: clamp(14px, 2.2vw, 22px);
  --faq-radius: 12px;
  --faq-ease: cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* 深色取值：FAQ 页 index.inline.css 把 --bg / --card / --text 无条件写死为
   浅色（#f0f4f8 / #FFFFFF / #333），会覆盖全站主题变量，
   导致深色模式下本页仍是白底、文字发灰难读。这里统一给出深色取值。

   注意：自定义属性不可自引用（如 var(--bg, #0b101b) 会整条失效），
   必须写具体值。 */
:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --faq-bg-dark: #0b101b;
  --faq-card-dark: rgba(255, 255, 255, 0.04);
  --faq-text-dark: #e6e9ef;
  --faq-gray-dark: #9aa4b2;
  --faq-shadow-dark: 0 6px 18px rgba(0, 0, 0, 0.34);
  --faq-shadow-hover-dark: 0 10px 28px rgba(0, 0, 0, 0.46);
}

/* 覆盖 inline.css 的无条件浅色：
   1) 站点内切换主题（data-theme，由 js/theme.js 写入）
   2) 未切换但系统偏好深色（首绘空窗期兜底）
   两条都必须覆盖，否则「站点切深色、系统是浅色」时仍会白底。 */
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg: var(--faq-bg-dark);
  --card: var(--faq-card-dark);
  --text: var(--faq-text-dark);
  --gray: var(--faq-gray-dark);
  --card-shadow: var(--faq-shadow-dark);
  --card-shadow-hover: var(--faq-shadow-hover-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  body:not([data-theme="light"]) {
    --bg: var(--faq-bg-dark);
    --card: var(--faq-card-dark);
    --text: var(--faq-text-dark);
    --gray: var(--faq-gray-dark);
    --card-shadow: var(--faq-shadow-dark);
    --card-shadow-hover: var(--faq-shadow-hover-dark);
  }
  /* 背景装饰层在深色下降低亮度，避免泛白 */
  body::before {
    opacity: 0.5;
  }
}

/* ===== 2. 页头卡片（zh-faq-hero）===== */
.zh-faq-hero {
  padding: 22px 24px;
}
.zh-faq-hero-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.zh-faq-hero-icon {
  width: 30px;
  height: 30px;
  flex: none;
  filter: var(--icon-filter, none);
}
.zh-faq-hero-text { min-width: 0; }
.zh-faq-hero-title {
  font-size: 21px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
}
.zh-faq-hero-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray, #666);
}

/* 快速跳转胶囊：hover 微抬升，点击有回弹 */
.zh-faq-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.zh-faq-quicknav-link {
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--bg-card-border, rgba(0, 0, 0, 0.1));
  background: var(--toggle-bg, transparent);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.18s var(--faq-ease),
              background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.zh-faq-quicknav-link:hover {
  background: var(--toggle-bg-hover, rgba(135, 206, 235, 0.12));
  border-color: var(--highlight-accent, var(--primary, #87ceeb));
  transform: translateY(-1px);
}
.zh-faq-quicknav-link:active {
  transform: translateY(0) scale(0.96);
}

/* 锚点跳转：为吸顶/固定元素留出让位空间，避免标题被遮挡 */
#md-faq h1, #md-faq h2, #md-faq h3,
#md-faq h4, #md-faq h5, #md-faq h6 {
  scroll-margin-top: 90px;
}

/* ===== 3. 阅读体验：正文排版 ===== */
#md-faq {
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.2px;
}
#md-faq p {
  margin: 0.7em 0;
}
#md-faq ul,
#md-faq ol {
  padding-left: 1.5em;
  margin: 0.6em 0;
}
#md-faq li {
  margin: 0.35em 0;
}
#md-faq blockquote {
  margin: 1em 0;
  padding: 10px 14px;
  border-left: 3px solid var(--highlight-accent, var(--primary, #87ceeb));
  background: var(--bg-card, rgba(135, 206, 235, 0.06));
  border-radius: 0 8px 8px 0;
  color: var(--gray, #666);
}
#md-faq blockquote p { margin: 0.35em 0; }

/* 表格配色：改用「变量 = 实际参数」的写法。
   此前各处的兜底值是硬编码 rgba（浅蓝 135,206,235 / 中性灰 127,127,127），
   这些值在暗色主题下不会随主题变化 —— 表头偏亮、斑马纹过淡、边框近乎不可见，
   即「镜像资源表格背景板不兼容暗色主题」的根因。
   这里统一抽出一套变量，明暗主题各自给出实际参数值。 */
:root,
html[data-theme="light"],
body[data-theme="light"] {
  --faq-table-bg: rgba(255, 255, 255, 0.72);
  --faq-table-head-bg: rgba(2, 123, 255, 0.10);
  --faq-table-zebra-bg: rgba(11, 22, 48, 0.04);
  --faq-table-hover-bg: rgba(2, 123, 255, 0.07);
  --faq-table-border: rgba(11, 22, 48, 0.12);
  --faq-table-head-text: var(--text, #1f2328);
}
html[data-theme="dark"],
body[data-theme="dark"] {
  --faq-table-bg: rgba(255, 255, 255, 0.035);
  --faq-table-head-bg: rgba(2, 123, 255, 0.16);
  --faq-table-zebra-bg: rgba(255, 255, 255, 0.045);
  --faq-table-hover-bg: rgba(2, 123, 255, 0.12);
  --faq-table-border: rgba(255, 255, 255, 0.14);
  --faq-table-head-text: var(--faq-text-dark, #e6e9ef);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  body:not([data-theme="light"]) {
    --faq-table-bg: rgba(255, 255, 255, 0.035);
    --faq-table-head-bg: rgba(2, 123, 255, 0.16);
    --faq-table-zebra-bg: rgba(255, 255, 255, 0.045);
    --faq-table-hover-bg: rgba(2, 123, 255, 0.12);
    --faq-table-border: rgba(255, 255, 255, 0.14);
    --faq-table-head-text: var(--faq-text-dark, #e6e9ef);
  }
}

/* 表格：此前无边框与留白，读起来是「糊成一片的文本」
   关键：必须显式覆盖 index.inline.css 的硬编码浅色 ——
     · #md-faq table 自身 background: #fff（整张表的「背景板」，暗色下最刺眼）
     · #md-faq tr:hover background: #f0f6fb
   上一轮只覆盖了 th / td / 斑马纹，漏了表格自身与 hover，
   这就是暗色下表格仍呈白色背景板的原因。 */
#md-faq table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  background: var(--faq-table-bg);
  box-shadow: none;
}
#md-faq th,
#md-faq td {
  padding: 9px 12px;
  border: 1px solid var(--faq-table-border);
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
#md-faq th {
  background: var(--faq-table-head-bg);
  color: var(--faq-table-head-text);
  font-weight: 600;
  white-space: nowrap;
}
#md-faq tr:nth-child(even) td {
  background: var(--faq-table-zebra-bg);
}
#md-faq tr:nth-child(even) {
  background: transparent;   /* 覆盖 inline.css 的 #f8fafc，改由 td 承担斑马纹 */
}
#md-faq tr:hover,
#md-faq tr:hover td {
  background: var(--faq-table-hover-bg);
}

/* 代码块 */
#md-faq pre {
  margin: 1em 0;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--bg-card-border, rgba(0, 0, 0, 0.1));
}
@media (prefers-color-scheme: dark) {
  #md-faq pre { background: rgba(0, 0, 0, 0.34); }
}
#md-faq code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.14);
  font-size: 0.92em;
}
#md-faq pre code {
  padding: 0;
  background: none;
}

/* 任务列表（[x] / [ ]）去掉多余缩进，保持与正文对齐 */
#md-faq li input[type="checkbox"] {
  margin-right: 6px;
}
#md-faq ul:has(> li > input[type="checkbox"]) {
  list-style: none;
  padding-left: 0.2em;
}

/* ===== 4. details 展开/收起动效 ===== */
#md-faq details {
  margin: 10px 0;
  border: 1px solid var(--bg-card-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  background: var(--bg-card, rgba(127, 127, 127, 0.03));
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#md-faq details:hover {
  border-color: var(--highlight-accent, var(--primary, #87ceeb));
}
#md-faq details > summary {
  cursor: pointer;
  padding: 12px 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
#md-faq details > summary::-webkit-details-marker { display: none; }
#md-faq details > summary::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s var(--faq-ease);
  opacity: 0.7;
}
#md-faq details[open] > summary::before {
  transform: rotate(45deg);
}
#md-faq details > summary:hover {
  background: var(--toggle-bg-hover, rgba(135, 206, 235, 0.1));
  color: var(--highlight-accent, var(--primary, #4682b4));
}
#md-faq details[open] > summary {
  border-bottom: 1px solid var(--bg-card-border, rgba(0, 0, 0, 0.08));
}
/* 展开内容淡入 */
#md-faq details[open] > *:not(summary) {
  animation: faqReveal 0.26s var(--faq-ease) both;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#md-faq details > *:not(summary) {
  padding: 4px 15px;
}
#md-faq details > *:not(summary):last-child {
  padding-bottom: 14px;
}

/* ===== 5. 无障碍：尊重「减弱动态效果」 ===== */
@media (prefers-reduced-motion: reduce) {
  .zh-faq-quicknav-link,
  #md-faq details,
  #md-faq details > summary::before {
    transition: none;
  }
  #md-faq details[open] > *:not(summary) {
    animation: none;
  }
  body::before { animation: none; }
}

/* ===== 6. 省电模式下停用装饰动效 ===== */
body.eoc-power-save .zh-faq-quicknav-link:hover {
  transform: none;
}
body.eoc-power-save body::before,
body.eoc-power-save::before {
  animation: none;
}

/* ===== 7. FAQ 正文卡片（.zh-faq-body）=====
   原正文装在 .page-wrapper > .container > .card 这套 FAQ 自建容器里，
   与全站 .main-stage > .zh-stack 骨架并行，两套宽度与主题变量互不相干。
   现正文已并入主栈，这里用全站设计变量（--bg-card / --radius-* / --text）
   为正文卡片补齐样式，取代原 .card 的私有色板，
   使 hero 与正文同属一套配色，明暗主题切换时整体一致。 */
.zh-faq-body {
  width: 100%;
  padding: clamp(16px, 2.6vw, 28px);
  animation: faqSlideUp 0.55s var(--faq-ease) both;
}
.zh-faq-body:hover {
  /* 正文区不做位移，仅保留轻微阴影过渡，避免长文阅读时抖动 */
  box-shadow: var(--card-shadow-hover, 0 10px 28px rgba(0, 0, 0, 0.18));
}
@keyframes faqSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .zh-faq-body { animation: none; }
}

/* ===== 8. Wiki 形态布局（左目录 + 右内容）=====
   页头卡片已删除，改为文档站结构：目录与正文同处一个文档壳，
   解决原先「hero 一截、正文一截」的割裂感。
   全部取值走主题变量，明暗主题自动适配。 */
.zh-faq-stage {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.zh-faq-shell {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  width: 100%;
}

/* 左侧目录：大屏吸顶，长文滚动时目录始终可见 */
.zh-faq-side { position: relative; }
.zh-faq-side-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 14px 12px;
  border: 1px solid var(--bg-card-border, rgba(127, 127, 127, 0.18));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-card, rgba(127, 127, 127, 0.04));
}
.zh-faq-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 6px 10px;
  border-bottom: 1px solid var(--bg-card-border, rgba(127, 127, 127, 0.18));
  margin-bottom: 8px;
  color: var(--text);
}
.zh-faq-side-head img { flex: none; filter: var(--icon-filter, none); }
.zh-faq-toc { display: block; }

/* 目录项：由 generateToc() 生成 .toc-item */
.zh-faq-toc .toc-item {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim, var(--text));
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease;
}
.zh-faq-toc .toc-item:hover {
  background: var(--toggle-bg-hover, rgba(127, 127, 127, 0.14));
  color: var(--text);
}
.zh-faq-toc .toc-item:active { transform: scale(0.98); }
.zh-faq-toc .toc-item.is-active {
  background: var(--faq-table-head-bg);
  color: var(--text);
  font-weight: 600;
}
/* 层级缩进 */
.zh-faq-toc .toc-h3 { padding-left: 20px; font-size: 12.5px; }

/* 右侧内容 */
.zh-faq-content {
  min-width: 0;
  padding: clamp(16px, 2.6vw, 30px);
}

/* 窄屏：目录转为内容上方的横向可滚动条，不再占位 */
@media (max-width: 860px) {
  .zh-faq-shell {
    grid-template-columns: 1fr;
  }
  .zh-faq-side-inner {
    position: static;
    max-height: none;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
  }
  .zh-faq-side-head { display: none; }
  .zh-faq-toc { display: flex; gap: 8px; flex: 1; }
  .zh-faq-toc .toc-item,
  .zh-faq-toc .toc-h3 {
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--bg-card-border, rgba(127, 127, 127, 0.18));
  }
  .zh-faq-toc .toc-h3 { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .zh-faq-toc .toc-item { transition: none; }
}