/* ═══════════════════════════════════════════════════════════════
   财小云 V17 — 文章详情页（V17 审美升级版）
   依赖：tokens.css / base.css / home.css / components.css
   结构：阅读进度条 / 文章头（元信息+极光线）/ prose 正文 + 导语卡 + 目录卡 /
        声明双卡 / 文末 CTA / 相关推荐图文卡 / 返回
   V17 升级六点（Haning 260719 拍板 1-6）：
     ① 文章头补元信息行（阅读时长 · 核验日期 · 法规）+ h1 下方极光装饰线
     ② 导语「一句话总结」结构化卡（图标 + 主结论 + ✅⚠️ 关键结论分行）
     ③ 声明恢复双卡（V16 art-notes 双卡 + V17 卡片语言 + 左边线分色）
     ④ 相关推荐恢复图文卡（acard 复用 + 全宽 sec.alt）
     ⑤ TOC 已读进度（.is-read 淡化 + .is-on 当前节主蓝，home.js 第 12 模块）
     ⑥ 关键数字突出（.num · Space Grotesk + 主蓝 + tabular-nums）
   ═══════════════════════════════════════════════════════════════ */

/* ────────── 阅读进度条 ────────── */
.reading-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--cxy-z-nav); background: transparent; }
.reading-bar-fill { display: block; height: 100%; width: 100%; background: var(--cxy-gradient-aurora); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .reading-bar { display: none; } }

/* ────────── 宽容器网格：prose 左列 + 目录卡右栏 ────────── */
.art-layout {
  display: grid; grid-template-columns: minmax(0, 700px) 190px;
  gap: var(--cxy-space-10); align-items: start;
  max-width: calc(700px + 190px + var(--cxy-space-10));   /* V17（260719）：内容整体居中，不贴左——prose+TOC 在视口对称 */
  margin-left: auto; margin-right: auto;
  padding: var(--cxy-space-9) 0 var(--cxy-space-10);
}
.art-main { min-width: 0; }   /* grid 子元素防溢出（prose 内宽表格） */
@media (max-width: 1023px) {
  .art-layout { grid-template-columns: 1fr; }
  .art-toc { display: none; }
}

/* ────────── 目录卡（V17：已读进度 + 当前节高亮）────────── */
.art-toc {
  position: sticky; top: calc(72px + var(--cxy-space-6));
  background: var(--cxy-surface-card);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-lg); padding: var(--cxy-space-5);
  max-height: calc(100vh - 140px); overflow: auto;
}
.art-toc-h {
  font-size: var(--cxy-size-sm); font-weight: var(--cxy-weight-bold); color: var(--cxy-ink);
  margin-bottom: var(--cxy-space-3);
}
.art-toc a {
  display: block; padding: var(--cxy-space-1) 0;
  font-size: var(--cxy-size-caption); color: var(--cxy-muted); line-height: var(--cxy-leading-snug);
  transition: color var(--cxy-duration-fast) var(--cxy-ease-standard);
}
.art-toc a:hover { color: var(--cxy-action); }
/* 已读：淡化（读者扫过的章节视觉降权，未读的更醒目）——用 muted 而非 faint，保 4.5:1 */
.art-toc a.is-read { color: var(--cxy-muted); }
/* 当前节：主蓝加粗（覆盖 is-read 淡化） */
.art-toc a.is-on { color: var(--cxy-action); font-weight: var(--cxy-weight-semibold); }

/* ────────── 文章头（V17：补元信息行 + h1 极光装饰线）────────── */
.art-head { padding-bottom: var(--cxy-space-6); }
.art-cat { margin-bottom: var(--cxy-space-4); }
.art-head h1 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, var(--cxy-size-h1-article, 2.5rem));
  line-height: var(--cxy-leading-snug); letter-spacing: var(--cxy-tracking-tight);
  color: var(--cxy-ink);
}
/* h1 下方极光装饰线（V17 新） */
.art-head h1::after {
  content: ""; display: block; width: 48px; height: 3px;
  border-radius: 2px; background: var(--cxy-gradient-aurora);
  margin-top: var(--cxy-space-5);
}
/* 元信息行（V17 新） */
.art-meta {
  margin-top: var(--cxy-space-4); display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--cxy-space-2); font-size: var(--cxy-size-caption); color: var(--cxy-muted);
}
.art-meta-item { display: inline-flex; align-items: center; gap: var(--cxy-space-1); }
.art-meta-item svg { width: 14px; height: 14px; }
.art-meta-sep { color: var(--cxy-faint); }

/* ────────── 导语卡 art-lede（V17 新：结构化摘要）────────── */
.art-lede {
  margin: 0 0 var(--cxy-space-8); padding: var(--cxy-space-6) var(--cxy-space-7);
  background: var(--cxy-gradient-soft); border-radius: var(--cxy-radius-lg);
  border-left: 3px solid var(--cxy-blue);
}
.lede-h {
  display: inline-flex; align-items: center; gap: var(--cxy-space-2);
  font-family: var(--cxy-font-display); font-size: var(--cxy-size-label);
  font-weight: var(--cxy-weight-bold); letter-spacing: var(--cxy-tracking-label);
  text-transform: uppercase; color: var(--cxy-action); margin-bottom: var(--cxy-space-3);
}
.lede-h svg { width: 16px; height: 16px; stroke: currentColor; }
.lede-lead {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-bold);
  font-size: var(--cxy-size-h3); line-height: var(--cxy-leading-snug);
  color: var(--cxy-ink); margin: 0 0 var(--cxy-space-4);
}
.lede-keys { list-style: none; padding: 0; margin: 0 0 var(--cxy-space-4); display: grid; gap: var(--cxy-space-2); }
.lede-keys li {
  display: flex; align-items: flex-start; gap: var(--cxy-space-3);
  font-size: var(--cxy-size-sm); color: var(--cxy-text); line-height: var(--cxy-leading-body);
}
.key-ic {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cxy-font-display); font-size: 11px; font-weight: var(--cxy-weight-bold);
  margin-top: 1px;
}
.key-ok { background: var(--cxy-tint-green-bg); color: var(--cxy-tint-green-fg); }
.key-warn { background: var(--cxy-tint-amber-bg); color: var(--cxy-tint-amber-fg); }
.lede-who {
  font-size: var(--cxy-size-caption); color: var(--cxy-muted); margin: 0;
  padding-top: var(--cxy-space-3);
  border-top: var(--cxy-border-hairline) solid color-mix(in srgb, var(--cxy-ink) 8%, transparent);
}

/* ────────── 关键数字突出（V17 新：仅用于结构化位置——导语/表格/元信息）────────── */
.num {
  font-family: var(--cxy-font-num); font-weight: var(--cxy-weight-bold);
  color: var(--cxy-action); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ────────── prose 正文 ────────── */
.prose { font-size: var(--cxy-size-body-article); line-height: 1.8; color: var(--cxy-text); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; }
.prose strong { font-weight: var(--cxy-weight-bold); color: var(--cxy-ink); }
.prose a { color: var(--cxy-action); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cxy-action) 35%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--cxy-action); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose h2 {
  position: relative;
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: var(--cxy-size-h2-article, 1.625rem); letter-spacing: var(--cxy-tracking-tight);
  color: var(--cxy-ink); margin: 2.2em 0 0.9em; padding-top: var(--cxy-space-4);
}
.prose h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; border-radius: 2px; background: var(--cxy-gradient-aurora);
}
.prose h3 { font-size: var(--cxy-size-h3-article, 1.25rem); font-weight: var(--cxy-weight-bold); color: var(--cxy-ink); margin: 1.8em 0 0.6em; }
.prose hr { border: 0; height: 1px; background: var(--cxy-border); margin: var(--cxy-space-7) 0; }

/* prose 内 blockquote（正文法规引用，克制浅底——极光浅底留给导语卡） */
.prose blockquote {
  margin: 0 0 var(--cxy-space-6); padding: var(--cxy-space-5) var(--cxy-space-6);
  background: var(--cxy-surface-subtle); border-radius: var(--cxy-radius-md);
  border-left: 3px solid var(--cxy-border-strong);
  color: var(--cxy-ink-2); font-size: var(--cxy-size-body);
}
.prose blockquote p { margin: 0 0 0.6em; }
.prose blockquote p:last-child { margin-bottom: 0; }

/* 表格：hairline 阅读型（v16 版式保留） */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--cxy-space-6); font-size: var(--cxy-size-sm); }
.prose th, .prose td { padding: var(--cxy-space-3) var(--cxy-space-4); text-align: left; vertical-align: top; }
.prose thead th { font-weight: var(--cxy-weight-bold); color: var(--cxy-ink); border-bottom: 2px solid var(--cxy-border-strong); }
.prose th:first-child { white-space: nowrap; }   /* V17：表头首列不换行（"税率"等短标签防竖排，Haning 260719）*/
.prose tbody td { border-bottom: var(--cxy-border-hairline) solid var(--cxy-border); color: var(--cxy-text); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { white-space: nowrap; color: var(--cxy-ink-2); font-weight: var(--cxy-weight-semibold); }

/* 折叠块（政策原文） */
.prose details {
  margin: 0 0 var(--cxy-space-6);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-lg); background: var(--cxy-surface-card);
  overflow: hidden;
}
.prose details summary {
  cursor: pointer; list-style: none;
  padding: var(--cxy-space-4) var(--cxy-space-5);
  font-size: var(--cxy-size-sm); font-weight: var(--cxy-weight-semibold); color: var(--cxy-action);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cxy-space-4);
}
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--cxy-duration-base) var(--cxy-ease-standard);
}
.prose details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.prose details .details-body { padding: 0 var(--cxy-space-5) var(--cxy-space-5); font-size: var(--cxy-size-sm); color: var(--cxy-text); }
.prose details .details-body blockquote { background: var(--cxy-surface-subtle); font-size: var(--cxy-size-sm); padding: var(--cxy-space-4) var(--cxy-space-5); }

/* ────────── 声明双卡（V17 新：恢复 V16 art-notes 形态）────────── */
.art-notes { display: grid; gap: var(--cxy-space-4); margin: var(--cxy-space-8) 0 var(--cxy-space-7); }
.art-note {
  padding: var(--cxy-space-5) var(--cxy-space-6);
  background: var(--cxy-surface-card);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-left: 3px solid var(--cxy-border-strong);
  border-radius: var(--cxy-radius-md);
}
.art-note-warn { border-left-color: var(--cxy-warning); }
.art-note-ai { border-left-color: var(--cxy-violet); }
.art-note-label {
  display: inline-flex; align-items: center; gap: var(--cxy-space-2);
  font-size: var(--cxy-size-sm); font-weight: var(--cxy-weight-bold);
  color: var(--cxy-ink); margin-bottom: var(--cxy-space-2);
}
.art-note-label svg { width: 16px; height: 16px; stroke: currentColor; }
.art-note-body { font-size: var(--cxy-size-sm); color: var(--cxy-text); line-height: var(--cxy-leading-body); }
.art-note-body p { margin: 0; }

/* ────────── 文末 CTA ────────── */
.art-end-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cxy-space-6);
  background: var(--cxy-gradient-soft); border-radius: var(--cxy-radius-xl);
  padding: var(--cxy-space-7) var(--cxy-space-8);
  margin: 0 0 var(--cxy-space-6);
}
.art-end-cta h2 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: var(--cxy-size-h3); color: var(--cxy-ink); margin-bottom: var(--cxy-space-2);
}
.art-end-cta p { font-size: var(--cxy-size-sm); color: var(--cxy-text); }
.art-end-cta .btn { flex: none; position: relative; }   /* V17：给 nav-qr 弹码定位基准 */
/* V23 批B：CTA 侧列（二维码按钮 + /register 文本链纵向成组） */
.art-end-cta-side { display: flex; flex-direction: column; align-items: center; gap: var(--cxy-space-2); flex: none; }
.art-end-reg { margin: 0; font-size: var(--cxy-size-sm); color: var(--cxy-muted); }
.art-end-reg a { color: var(--cxy-action); font-weight: var(--cxy-weight-semibold); text-decoration: none; }
.art-end-reg a:hover { text-decoration: underline; }

/* ────────── 返回知识中心 ────────── */
.art-back {
  display: inline-flex; align-items: center; gap: var(--cxy-space-2); min-height: 44px;
  font-size: var(--cxy-size-sm); font-weight: var(--cxy-weight-semibold); color: var(--cxy-muted);
  transition: color var(--cxy-duration-fast) var(--cxy-ease-standard);
}
.art-back:hover { color: var(--cxy-action); }

/* ────────── 相关推荐图文卡（V17 新：恢复 V16 acard）────────── */
.art-rel .sec-h { margin-bottom: var(--cxy-space-6); }
.art-rel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cxy-space-5);
}
/* 复用 home.css 的 .acard 基础（卡片+阴影+hover）；覆盖首页杂志变体的专属规则 */
.art-rel-grid .acard-cover {
  background: var(--cxy-gradient-soft);
  padding: var(--cxy-space-5) var(--cxy-space-5) var(--cxy-space-4);
}
.art-rel-grid .acard-body { padding: var(--cxy-space-5); }
.art-rel-grid .acard-body h3 {
  font-size: var(--cxy-size-body); font-weight: var(--cxy-weight-bold);
  line-height: var(--cxy-leading-snug); margin: 0 0 var(--cxy-space-3);
}
.art-rel-grid .acard-body h3 a { color: var(--cxy-ink); transition: color var(--cxy-duration-fast) var(--cxy-ease-standard); }
.art-rel-grid .acard-body h3 a:hover { color: var(--cxy-action); }
.art-rel-grid .acard-desc {
  font-size: var(--cxy-size-sm); color: var(--cxy-text);
  line-height: var(--cxy-leading-body); margin: 0 0 var(--cxy-space-4);
}
.art-rel-grid .acard-read {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--cxy-size-sm); font-weight: var(--cxy-weight-semibold); color: var(--cxy-action);
}

/* ────────── 响应式 ────────── */
@media (max-width: 768px) {
  .art-end-cta { flex-direction: column; align-items: flex-start; padding: var(--cxy-space-6); }
  .art-rel-grid { grid-template-columns: 1fr; }
  .prose td:first-child { white-space: normal; }
}

/* ═══════════ V16 样式回迁（260720）：来源尾注 / 延伸阅读 / 返回位 / 折叠目录 / 术语页相关问答 ═══════════ */

/* ── 文末返回位 ── */
.art-end-back { padding: 0 0 var(--cxy-space-9); }
.art-end-back .art-back { margin-bottom: 0; }

/* ── 来源与时效（小字尾注区，artSources transform 包裹）── */
.art-sources { margin-top: var(--cxy-space-7); padding-top: var(--cxy-space-5); border-top: var(--cxy-border-hairline) solid var(--cxy-border); }
.art-sources > h2 {
  font-size: var(--cxy-size-label); font-weight: var(--cxy-weight-bold); color: var(--cxy-muted);
  letter-spacing: var(--cxy-tracking-label); text-transform: uppercase;
  margin: 0 0 var(--cxy-space-3);
}
.art-sources p,
.art-sources li { font-size: var(--cxy-size-caption); color: var(--cxy-muted); line-height: 1.55; margin: 0 0 var(--cxy-space-2); }
.art-sources ul, .art-sources ol { padding-left: 1.5em; margin: 0 0 var(--cxy-space-2); }
.art-sources table { font-size: var(--cxy-size-caption); color: var(--cxy-muted); line-height: 1.5; width: 100%; border-collapse: collapse; margin: 0 0 var(--cxy-space-3); }
.art-sources th, .art-sources td { padding: 4px 8px; border: var(--cxy-border-hairline) solid var(--cxy-border); text-align: left; }
.art-sources a { font-size: inherit; color: var(--cxy-action); }

/* ── 延伸阅读（artFurther transform 包裹；卡列表 + 极光左边线）── */
.art-further {
  margin-top: var(--cxy-space-9); padding-top: var(--cxy-space-6);
  border-top: var(--cxy-border-hairline) solid var(--cxy-border);
}
/* V23 批B：模板直出版（.art-further-auto）的 h2 在 .prose 之外，补与 prose h2 同语言的样式 */
.art-further-auto h2 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: var(--cxy-size-h2-article, 1.625rem); letter-spacing: var(--cxy-tracking-tight);
  color: var(--cxy-ink); margin: 0 0 var(--cxy-space-4);
}
.art-further ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--cxy-space-2); }
.art-further li {
  position: relative; margin: 0;
  padding: var(--cxy-space-3) var(--cxy-space-4) var(--cxy-space-3) var(--cxy-space-5);
  background: var(--cxy-surface-card); border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-sm);
  transition: transform var(--cxy-duration-base) var(--cxy-ease-out),
              box-shadow var(--cxy-duration-base) var(--cxy-ease-out);
}
.art-further li:hover { transform: translateY(-2px); box-shadow: var(--cxy-elevation-1); }
.art-further li::before {
  content: ""; position: absolute; left: 0; top: var(--cxy-space-2); bottom: var(--cxy-space-2);
  width: 2px; background: var(--cxy-gradient-aurora); border-radius: var(--cxy-radius-pill);
}
.art-further a {
  font-size: var(--cxy-size-body-article); color: var(--cxy-ink); font-weight: var(--cxy-weight-semibold);
  text-decoration: none;
}
.art-further a:hover { color: var(--cxy-action); }
.art-further a:focus-visible { box-shadow: var(--cxy-ring); border-radius: var(--cxy-radius-xs); outline: none; }
.art-further-note {
  display: block; margin-top: var(--cxy-space-1);
  font-size: var(--cxy-size-caption); color: var(--cxy-muted); font-weight: var(--cxy-weight-regular);
  line-height: 1.5;
}

/* ── 折叠目录（<1200px 与 .art-toc 侧栏互斥；articleToc transform 注入）── */
.article-toc-inline {
  margin: 0 0 var(--cxy-space-6);
  background: var(--cxy-subtle);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-md);
  padding: 0 var(--cxy-space-4);
}
.article-toc-inline summary {
  cursor: pointer; font-size: var(--cxy-size-label); font-weight: var(--cxy-weight-semibold);
  letter-spacing: var(--cxy-tracking-label); text-transform: uppercase;
  color: var(--cxy-muted); padding: var(--cxy-space-3) 0;
  list-style: none;
}
.article-toc-inline summary::-webkit-details-marker { display: none; }
.article-toc-inline summary::after {
  content: "▾"; float: right; color: var(--cxy-faint, var(--cxy-muted));
  transition: transform 0.2s ease;
}
.article-toc-inline[open] summary::after { transform: rotate(180deg); }
.article-toc-inline ol { list-style: none; margin: 0; padding: 0 0 var(--cxy-space-3); display: grid; gap: 2px; }
.article-toc-inline a {
  display: block; padding: 4px var(--cxy-space-3); border-radius: var(--cxy-radius-xs);
  font-size: var(--cxy-size-sm); color: var(--cxy-ink-2); line-height: 1.4;
  text-decoration: none;
}
.article-toc-inline a:hover { color: var(--cxy-action); background: var(--cxy-tint-blue-bg); }
.article-toc-inline a:focus-visible { box-shadow: var(--cxy-ring); outline: none; }

/* ── 术语页：相关问答 + 返回术语库（glossary-term.njk）── */
.term-related { margin-top: var(--cxy-space-7); padding-top: var(--cxy-space-5); border-top: var(--cxy-border-hairline) solid var(--cxy-border); }
.term-related h2 {
  font-size: var(--cxy-size-label); font-weight: var(--cxy-weight-bold); color: var(--cxy-muted);
  letter-spacing: var(--cxy-tracking-label); text-transform: uppercase;
  margin: 0 0 var(--cxy-space-3);
}
.term-related h2::before { display: none; }
.term-qa-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--cxy-space-2); }
.term-qa-list a { font-size: var(--cxy-size-body-article); color: var(--cxy-ink); font-weight: var(--cxy-weight-semibold); text-decoration: none; }
.term-qa-list a:hover { color: var(--cxy-action); }
.term-qa-list a:focus-visible { box-shadow: var(--cxy-ring); border-radius: var(--cxy-radius-xs); outline: none; }
.term-back-link { margin: var(--cxy-space-6) 0 0; }
.term-back-link a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--cxy-size-caption); color: var(--cxy-muted); font-weight: var(--cxy-weight-regular);
  text-decoration: none;
}
.term-back-link a:hover { color: var(--cxy-action); }
.term-back-link a:focus-visible { box-shadow: var(--cxy-ring); border-radius: var(--cxy-radius-xs); outline: none; }

/* 260816 掉字修复收口：手机端引文收窄左右内距（24→12px）。
   动机：text-wrap: balance 引擎行数上限约 6 行，长法规引文在窄屏排 7 行会退回默认换行
   产生"2-3字+句号"孤尾；行宽容 +24px 让多数引文回到 6 行内由 balance 均分。 */
@media (max-width: 480px) {
  .prose blockquote { padding: var(--cxy-space-4) var(--cxy-space-4); }
}