/* ═══════════════════════════════════════════════════════════════════
   r31 · 自采编文章详情页的可读性层

   为什么只加样式、不改正文:正文由 _articles.py 从编辑部/宏观分析师的 markdown
   原稿机器生成,那边写着「⛔ 别手改 _mains/insights-*.zh.html」。稿子会继续改,
   手插一个结构进去,下次转换就被冲掉,而页面看起来一切正常。
   ⇒ 这一层只改「怎么呈现」,一个字的内容都不新增。目录也是拿作者自己的 <h2> 拼的。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 顶部元信息:三行 dek 压成一块 ─────────────────────────────── */
.ia-meta {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border-left: 2px solid var(--c-accent-500);
  background: var(--c-surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ia-meta .ia__dek {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.ia-meta .ia__dek strong {
  display: inline-block;
  min-width: 3.2em;
  color: var(--c-text-3);
  font-weight: 600;
}

/* ── 「这一篇讲了什么」目录 ───────────────────────────────────── */
.ia-toc {
  margin: var(--s-6) 0 var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.ia-toc__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent-700);
}
.ia-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5);
  counter-reset: iatoc;
}
.ia-toc__list li { counter-increment: iatoc; }
.ia-toc__list a {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ia-toc__list a::before {
  content: counter(iatoc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}
.ia-toc__list a:hover { color: var(--c-primary-700); border-bottom-color: var(--c-border-strong); }

@media (max-width: 760px) {
  .ia-toc__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 正文层级 ─────────────────────────────────────────────────── */
/* 开篇第一段抬一号:稿子的第一段都是「这篇只做一件事」,它是全文的入口 */
.ia__body > p:first-of-type {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--c-text);
}

/* h2 前加一道青色短杠。有了它,分节自己看得见 ——
   下面那条 .ia-rule 就不必再承担分节任务,收成几乎不可见的一道线。 */
.ia__body h2 {
  position: relative;
  padding-top: var(--s-4);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.ia__body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--c-accent-500);
}
.ia-rule { opacity: .35; }
/* h2 紧跟着 hr 时,两个分节记号叠在一起 —— 把 hr 前的空隙收掉 */
.ia-rule + h2 { margin-top: var(--s-5); }

/* ── 表格:原先只有几条底线,在深底上几乎读不出是张表 ──────────── */
.ia-tablewrap {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.ia-table th {
  background: var(--c-surface-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
}
.ia-table tr:last-child td { border-bottom: 0; }

/* ── 引用块:原先只有一条灰竖线,和正文糊在一起 ──────────────── */
.ia-quote {
  padding: var(--s-4);
  border-left: 2px solid var(--c-accent-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-surface);
  color: var(--c-text-2);
}

/* ── 出处里的网址:看起来像可抄写的标识,不像坏掉的链接 ────────── */
.ia-url {
  display: inline-block;
  padding: 1px var(--s-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--c-surface-subtle);
}

/* ── 文末回栏目 ───────────────────────────────────────────────── */
.ia-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-strong);
}
.ia-more a {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
}
.ia-more a:hover { color: var(--c-primary-700); border-color: var(--c-primary-700); }