/* ============================================================
   知识中心 · 文章详情
   1 页头  2 两栏骨架  3 正文排版  4 目录  5 FAQ  6 相关阅读  7 响应式
   ============================================================ */

/* ------------------------------------------------------------ 01 页头 */
.art-head {
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.art-head__inner { max-width: 800px; }

.art-head__cat {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-accent-ink);
}
.art-head__cat:hover { color: var(--c-accent); }

.art-head__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h1);
  line-height: 1.28;
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  text-wrap: balance;
}

.art-head__lead {
  margin: 0 0 var(--sp-3);
  max-width: 42em;
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

.art-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.art-head__dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--c-line-2);
}

/* ------------------------------------------------------------ 02 两栏骨架 */
/* container 自带左右 24px 内边距，这里的 padding 只能写在纵向，否则会把正文顶到容器外沿 */
.art-body {
  display: grid;
  grid-template-columns: minmax(0, 800px) 260px;
  column-gap: var(--sp-6);
  align-items: start;
  padding-block: var(--sp-5) var(--sp-6);
}
.art-main { min-width: 0; }

/* ------------------------------------------------------------ 03 正文排版
   site.css 里有一套通用 .prose（720px 定宽 + h2 左侧竖线），
   这里按长文阅读改写：行宽 800、去掉竖线、段落间距统一由本文件控制。 */
.art-main .prose {
  max-width: none;
  font-size: 17px;
  line-height: 1.85;
  color: var(--c-text);
  text-wrap: pretty;
}

/* 顶层流式间距统一在本文件里给，避免与通用 .prose 的 margin-top 叠加 */
.art-main .prose > * + * { margin-top: 0; }
.art-main .prose > *:first-child { margin-top: 0; }

.art-main .prose p { margin: 0 0 1.35em; }

.art-main .prose h2 {
  margin: 2.6em 0 1em;
  padding: 0 0 .55em;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--c-ink);
  scroll-margin-top: 96px;
}

.art-main .prose h3 {
  margin: 2em 0 .6em;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-ink);
  scroll-margin-top: 96px;
}

.art-main .prose h4 {
  margin: 1.6em 0 .5em;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
}

.art-main .prose strong { font-weight: 600; color: var(--c-ink); }

.art-main .prose a {
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-primary-soft);
  transition: border-color var(--t-fast);
}
.art-main .prose a:hover { border-bottom-color: var(--c-primary); }

.art-main .prose ul,
.art-main .prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.35em;
}
.art-main .prose li { margin: .4em 0; }
.art-main .prose li + li { margin-top: .4em; }
.art-main .prose li::marker { color: var(--c-text-3); }

.art-main .prose blockquote {
  margin: 1.6em 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary-soft);
  border-left: 2px solid var(--c-primary);
  color: var(--c-text-2);
  font-size: 16px;
  line-height: 1.8;
}
.art-main .prose blockquote p:last-child { margin-bottom: 0; }

.art-main .prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

.art-main .prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.art-main .prose th,
.art-main .prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.art-main .prose th {
  background: var(--c-bg-2);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}
.art-main .prose tbody tr:last-child td { border-bottom-color: var(--c-line-2); }

.art-main .prose code {
  padding: 1px 5px;
  background: var(--c-bg-3);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--c-ink);
}
.art-main .prose pre {
  margin: 1.6em 0;
  padding: var(--sp-3);
  overflow-x: auto;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.art-main .prose pre code { padding: 0; background: none; font-size: inherit; }

.art-main .prose img { max-width: 100%; height: auto; margin: 0; border: 0; }

.art-main .prose .fig { margin: 2em 0; }
.art-main .prose .fig figcaption {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-3);
  text-align: center;
}

/* ------------------------------------------------------------ 04 目录 */
.art-side {
  position: sticky;
  top: calc(var(--h-header) + var(--sp-3));
}

.art-toc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-text-3);
  cursor: pointer;
  list-style: none;
}
.art-toc__sum::-webkit-details-marker { display: none; }
.art-toc__sum svg { transition: transform var(--t-base) var(--e-out); }
.art-toc[open] .art-toc__sum svg { transform: rotate(180deg); }
/* 折叠状态下没有条目，标题下的分隔线是多余的 */
.art-toc:not([open]) .art-toc__sum { border-bottom-color: transparent; }

.art-toc__nav ol {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.art-toc__li a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.art-toc__li a:hover { color: var(--c-ink); }
.art-toc__li a.is-current {
  border-left-color: var(--c-primary);
  color: var(--c-primary);
  font-weight: 600;
}
.art-toc__li--h3 a { padding-left: 24px; font-size: var(--fs-xs); }

.art-toc__top {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.art-toc__top:hover { color: var(--c-primary); }

/* ------------------------------------------------------------ 05 FAQ */
.art-faq {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--c-ink);
}
.art-faq__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.art-faq__item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.art-faq__item:first-child { padding-top: 0; }
.art-faq__item dt {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--c-ink);
}
.art-faq__item dd {
  margin: var(--sp-1) 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ 06 相关阅读 */
.art-rel { margin-top: var(--sp-6); }
.art-rel__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.art-rel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.art-rel__item {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-line-2);
  color: inherit;
  transition: border-color var(--t-base) var(--e-out);
}
.art-rel__item:hover { border-top-color: var(--c-primary); }
.art-rel__cat {
  font-size: var(--fs-xs);
  color: var(--c-accent-ink);
}
.art-rel__name {
  margin: var(--sp-1) 0 var(--sp-2);
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.art-rel__item:hover .art-rel__name { color: var(--c-primary); }
.art-rel__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ------------------------------------------------------------ 07 响应式 */

@media (max-width: 1080px) {
  .art-body { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  /* 单栏后没有侧栏约束，正文要自己收住行宽，否则一行五十多字 */
  .art-main { max-width: 780px; }
  .art-side {
    position: static;
    order: -1;
    max-width: none;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
  }
  .art-toc__nav { padding-bottom: var(--sp-1); }
}

@media (max-width: 768px) {
  .art-head { padding-top: var(--sp-4); }
  .art-head__title { font-size: clamp(24px, 6.4vw, 30px); }
  .art-head__lead { font-size: 16px; }
  .art-main .prose { font-size: 16px; line-height: 1.85; }
  .art-main .prose h2 { font-size: 19px; margin-top: 2.2em; }
  .art-main .prose h3 { font-size: 16px; }

  /* 表格横滑：表格自身变成滚动容器，单元格不换行挤成一团 */
  .art-main .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    font-size: 13px;
  }
  .art-main .prose th,
  .art-main .prose td { padding: 8px 10px; }

  .art-rel__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .art-rel__name { margin-bottom: var(--sp-1); }
}