/* ============ 专题文章页（topics 表命中时的 /topics/{slug}）============
   外壳与 hero 复用 topics.css 的 .topic-*，正文复用 news.css 的 .news-body-md。
   这里只有三样新东西：文章壳的宽度、数据块（.tblk-*）、来源区（脚注）的版式。
   脚注本身的基础样式在 news.css 里，跟着 markdown 输出的其余部分。
   写死的四个枢纽页不引这个文件，不受影响。 */

/* 正文是一篇文章不是一张清单，所以比 .topic-main 的 1100px 窄一档，
   与 news.css 的 .news-article 同宽。
   页尾留白也跟 `.news-article` 一档（桌面 40px / 手机 60px），不是 `.topic-main`
   的 72px —— 那是给清单页留的，一篇文章读完只剩一个「← 全部专题」，底下空出
   130px 到页脚太旷（2026-09-03 用户提）。 */
.topic-article { max-width: 860px; padding-bottom: 40px; }
@media (max-width: 720px) { .topic-article { padding-bottom: 60px; } }
.topic-article .ta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
}
.topic-article .ta-meta .sep { color: var(--line-strong); }

/* 报道型（kind='report'）页顶那一行声明。
   ⚠️ **不是 `.ta-meta` 那一档**：元信息是「什么时候发的」，这一句是「这一篇的
   事实是什么成色」—— 读者要真读到它，所以用正文字体、比正文小一档，左侧一条
   竖线把它与导语分开。**不用告警色**：报道型是一个正常的品类，不是出了问题，
   染成黄的会被读成「这篇有毛病」。 */
.topic-article .ta-notice {
  margin: 14px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--line-strong);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* ---- 图（头图 + 节内配图）----
   两者共用 partials/topic_figure.html，只差外层 class。
   ⚠️ **宽度就是正文栏宽，不出血** —— bleed 到 1100px 容器宽时读起来是图在赶字。 */
.topic-hero-fig,
.topic-fig { margin: 24px 0; }
.topic-hero-fig { margin: 20px 0 8px; }
.topic-hero-fig .tfig-link,
.topic-fig .tfig-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
}
.topic-hero-fig img,
.topic-fig img {
  width: 100%;
  height: auto;
  display: block;
  /* 头图裁成横幅，节内配图按原比例——档案照与竖构图的现场照都能用 */
  transition: transform var(--dur-slow) var(--ease-out);
}
.topic-hero-fig img { aspect-ratio: 21 / 9; object-fit: cover; }
/* hover 微放大。**头图与节内配图同一套**（2026-09-04 用户提）—— 两者都是可点
   的图，头图原先漏了，读者在头图上找不到「这能点」的反馈。 */
.topic-hero-fig .tfig-link:hover img,
.topic-fig .tfig-link:hover img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .topic-hero-fig img,
  .topic-fig img { transition: none; }
  .topic-hero-fig .tfig-link:hover img,
  .topic-fig .tfig-link:hover img { transform: none; }
}

.topic-hero-fig figcaption,
.topic-fig figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
/* credit 与 license。**永远存在**——凡显示库里的图就必须署名。 */
.tfig-credit {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  /* ⚠️ muted 不是 faint：署名是**合规要求**的文字，深色主题下 faint(#78746a)
     落在面板底(#151619)上只有 3.9:1，muted 是 7.5:1。真正的辅助信息
     （`.tl .d` / `.tgm-meta` / `.tl-sub`）才保持 faint。 */
  color: var(--fg-muted);
}
.tfig-credit a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.tfig-credit a:hover { color: var(--accent); }

/* ---- 数据块 ---- */

.tblk {
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  /* 正文是 17px/1.8 的长文排版，块里是密集数据，不该继承那套行高 */
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}
/* 抬头只剩眉标一行 —— 「发射详情 →」/「火箭页 →」那条 2026-09-04 撤掉了，
   去处挂在标题上（同一个地方写两遍，而标题才是读者第一眼落到的）。 */
.tblk-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-faint);
}
.tblk-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* 标题**就是**去详情页的链接（工位卡没有详情页，那一处仍是 `<div>`）。
   ⚠️ `.ta-body` 那个前缀不能省：正文那份 `.news-body-md a` 会给它上主题色和
   下划线，裸 `a.tblk-name`(0,1,1) 压不过 (0,1,1) 的同分先后 —— 标题要与纯文本
   标题同色，hover 才走主题色。 */
.tblk-name { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-strong); }
.ta-body a.tblk-name { color: var(--fg-strong); text-decoration: none; }
.ta-body a.tblk-name:hover { color: var(--accent); }
/* ⚠️ **默认就带下划线**（2026-09-04 用户提）：标题与纯文本标题同色是对的，但
   同色又无装饰的结果是「看不出这是个链接」。下划线画在文字外的 `.tblk-nt` 上
   而不是整个 `<a>` 上 —— 浏览器会把 `<a>` 的下划线一路画到行尾的外链图标底下。

   🔴 **卡里每一个链接都吃这一条**（2026-09-08 用户定）：选择器从
   `a.tblk-name .tblk-nt` 放宽成 `a .tblk-nt`，标题、键值行的火箭 / 机构、
   在役火箭、历史型号 pill、发射场 / 工位一律同形。原先只有标题是链接的样子，
   另外几处是「换了个颜色的普通文字」—— 读者不知道那些格子能点。
   角标同理，统一由 `partials/topic_ext_link.html` 一份 macro 出。
   **颜色仍各按各的位置**（值列 accent / 列表行 fg / pill muted）：那是行的
   语义，不是「是不是链接」，见各自的注释。
   ⚠️ 选择器与 `.ta-body .tblk a { text-decoration: none }`（在下面、同为
   (0,2,1)）**主体不同** —— 那条画的是 `<a>` 自己，这条画的是里面的 `<span>`，
   不存在同分相争。 */
.ta-body .tblk a .tblk-nt {
  text-decoration: underline;
  text-decoration-color: var(--fg-muted);
  text-underline-offset: 0.2em;
}
.ta-body .tblk a:hover .tblk-nt { text-decoration-color: currentColor; }
/* 「新标签页打开」的角标。跟着文字走 `currentColor`，所以 hover 一起变主题色；
   卡里的链接一律 `target="_blank"`，这个图标就是那件事的说明。 */
.tblk-ext {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -1px;
}
.tblk-en { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); margin-top: 2px; }
.tblk-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin: 16px 0 8px;
}

/* 数据卡里没有图 —— 卡是拿来读数的，塞图只会把行距撑开、把数字挤散。 */
.tblk-id-text { min-width: 0; }
.tblk-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ⚠️ **卡里一行只放一个数据**：`.tblk-kv` / `.tblk-specs` 在任何断点都是单列，
   别加回 640px 起分 2/3 列的规则；年度与工位也是一行一个，不用 chips。 */
.tblk-kv { margin: 0; display: block; }
/* ⚠️ 两列**各占其位**：键列约占三分之一，值从三分之一处起左对齐 —— 不是
   「键 96px + 值紧贴」，那样两列都堆在左侧 1/3。grid 而不是 flex：
   `minmax(140px, 32%)` 让键列既有下限又不吃掉长值的空间。

   四处共用这一套几何：发射卡的 `<dl>` 行、规格 / 战绩 / 年度行、卡里的列表行、
   站内相关的行。各自的 padding 与要压掉的正文列表样式写在下面自己那条里
   （`.ta-body` 前缀在选择器组里各算各的特异性，理由见各自的注释）。 */
.tkv,
.tsp,
.ta-body .tblk-list li,
.ta-body .trel-list li {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid var(--line-faint);
}
.tkv { padding: 7px 0; }
/* 键列也走 muted（理由同 `.tfig-credit`）—— 键读不清等于整行读不清。 */
.tkv dt { color: var(--fg-muted); font-size: 13px; }
/* ⚠️ 值**左对齐**紧跟在键右边，不是两端对齐。长值换行不截断 —— 卡里只有
   一列，宽度够，截成省略号反而看不到工位全名。 */
.tkv dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
/* 值列里的链接（火箭 / 机构）走主题色。下划线与外链角标由上面那组统一给 ——
   2026-09-08 之前这里是「无下划线、hover 才出」，卡里唯一能点的两行看着就是
   两行普通的值。 */
.tkv dd a { color: var(--accent); text-decoration: none; }

/* 三处截断段落（发射卡的任务描述、图集组头的任务描述、报道摘要）共用这一套
   多行截断；截几行各自写在自己那条里。 */
.ta-body .tblk-desc,
.ta-body .tgm-desc,
.topic-news .tn-sum {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 任务描述：键值表之后的一段话（`launch_stats` 块），两行封顶 —— 长的一条能
   把整张卡撑成两屏，要全文点卡片标题。
   ⚠️ **前缀不能省**：`.news-body p`（0,1,1）给正文每个 `<p>` 加 22px 下边距，
   裸 `.tblk-desc`（0,1,0）压不过它，卡底会多出一截空白。 */
.ta-body .tblk-desc {
  /* 不画分隔线：`<dl>` 的末行自己已经有一条 `border-bottom`，再加一条顶线
     就是两条线夹着 12px 空白（同来源区那处的理由）。 */
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  -webkit-line-clamp: 2;
}

/* 任务描述里的条目（`* CyBEEsat` 这种，见 render::topic_article::desc_parts）。
   ⚠️ **前缀不能省**：`.news-body-md ul`(0,1,1) 的 `padding-left:24px` 与
   `.news-body-md ul li`(0,1,2) 的 padding / 圆角 / hover 底色都压得过裸类 ——
   理由与 `.tblk-list` 逐字相同（见那一条）。
   自己的圆点用 `::before`,而不是 `list-style` —— 卡里其余段落一律左对齐到
   同一条线上,`list-style` 的标记会挂在内容框外面。 */
.ta-body .tblk-desc-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ta-body .tblk-desc-list li {
  position: relative;
  margin: 0;
  padding: 2px 0 2px 14px;
  background: none;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.ta-body .tblk-desc-list li:hover { background: none; }
.ta-body .tblk-desc-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--fg-faint);
}

/* 「飞行时序」零节点时的空态。**与发射详情页那一句逐字相同**（那边是
   `.launch-empty`）—— 两页说的是同一件事,措辞不同只会让人以为是两种情况。
   ⚠️ 前缀不能省，理由同 `.tblk-desc`：这是个 `<p>`，`.news-body p`(0,1,1) 的
   22px 下边距会在卡底留出一截空白。 */
.ta-body .tblk-empty {
  margin: 0;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-faint);
}

/* 规格 / 战绩 / 年度：同一种一行一个的键值行，几何见上面那组。 */
.tsp { padding: 7px 0; }
.tsp-k { color: var(--fg-muted); font-size: 13px; }
.tsp-v {
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

/* 发射档案卡里的「飞行时序」小节（2026-09-08 用户定）：时刻当键、节点名当值,
   **几何全部走上面那组 `.tsp`** —— 卡里每一行都落在同一条对齐线上。这里只补
   两件 `.tsp` 没有的事:
   1. 时刻要等宽 + 数字等距 —— `T+02:30` 与 `T−01:00` 得逐位对齐,
      而 `.tsp-k` 是正文字体（键列平时装的是「制造商」这种中文词）;
   2. 英文缩写 / 说明降到副行,口径同 `.tblk-en`（mono + 12px + faint）,
      字重要显式压回 regular —— 它在 `.tsp-v` 里面,那条是 semibold。 */
.tsp-k.tft-t {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tft-en {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--fg-faint);
}

/* 年度行值列里的「成功 N」「失败 N」两格（2026-09-08 用户定，见
   render::topic_article::YearBar）。分桶与 `.tpill.success` / `.tpill.fail`
   同一套 token：浅底面板用 *-dark 那一档取够对比度，深色主题换回原色。 */
/* ⚠️ 两格之间是一个**静音的 ` / `**（2026-09-08 用户定），不是只留一段边距：
   两个带色的数字并排、中间只有空白时会被读成两栏表格，而它们说的是同一年的
   同一件事。分隔符本身不带色 —— 带色就成了第三个数据。 */
.tyb-sep { margin: 0 6px; color: var(--fg-muted); }
.tyb.ok { color: var(--success-dark); }
.tyb.fail { color: var(--danger-dark); }
html[data-theme="dark"] .tyb.ok { color: var(--success); }
html[data-theme="dark"] .tyb.fail { color: var(--danger); }
/* ⚠️ **零失败不是警告** —— `.zero` 走与其它次要文字同一个静音色。
   深色那条不能省：`html[data-theme="dark"] .tyb.fail`（0,3,1）比裸
   `.tyb.fail.zero`（0,3,0）更特殊，只写一条时深色下的 0 还是红的。 */
.tyb.fail.zero { color: var(--fg-muted); }
html[data-theme="dark"] .tyb.fail.zero { color: var(--fg-muted); }

/* 🔴 **本页每个 `<ul>` 都要带 `.ta-body` 前缀**（这一条、`.tl`、`.trel-list`）。
   正文那边 `.news-body-md ul { padding-left:24px }`（0,1,1）与
   `.news-body-md ul li { padding:3px 8px; border-radius:6px }`（0,1,2）都比裸
   `.tblk-list`（0,1,0）/ `.tblk-list li`（0,1,1）更特殊 —— 不加前缀，这几行会
   整体右推 24px（时间线的圆点会跟着浮到竖线外），还会带上正文列表的 hover
   底色与圆角。加上前缀是 (0,2,0)/(0,2,1)，压得住。 */
.ta-body .tblk-list { list-style: none; margin: 0; padding: 0; }
/* 「名字 + note」的行（在役火箭那种）note 落在值列；`.tblk-plain` 是只有
   名字的裸行（发射场 / 工位），单列全宽。 */
.ta-body .tblk-list li {
  margin: 0;
  padding: 7px 0;
  background: none;
  border-radius: 0;
  overflow-wrap: anywhere;
}
.ta-body .tblk-plain li { display: block; }
.ta-body .tblk-list li:hover { background: none; }
.ta-body .tblk-list li a { color: var(--fg); text-decoration: none; }
.ta-body .tblk-list li a:hover { color: var(--accent); }
/* 紧跟名字后面，不 `margin-left:auto` 推到行尾 —— 同「卡内全部左对齐」。 */
.tblk-list .tnote { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }

/* 「历史型号」：一排灰 pill。基础 `.tpill`（`--bg-inset` + `--fg-muted`）就是
   灰的那一档，所以不加修饰类；它们是链接，只补一个 hover。 */
.tblk-retired { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-body .tblk-retired a.tpill { color: var(--fg-muted); }
.ta-body .tblk-retired a.tpill:hover { color: var(--accent); }

/* 时间线。**不是卡片**：正文流里的一条纵向序列，左侧竖线 + 圆点，
   宽度就是正文栏宽。 */
.topic-tl, .topic-gallery { margin: 28px 0; }
/* 小节抬头（时间线 / 图集 / 站内相关）用**正文的 h3 风格**，不用卡片眉标，
   所以这里只管间距 —— 字体 / 字号 / 字重 / 颜色都由 `.news-body-md h3` 给。
   ⚠️ **别在这里写 font-* / color / text-transform**：`.news-body-md h3`(0,1,1)
   压过裸 `.tl-h`(0,1,0)，写了不生效，只有 news 那条没设的项会漏出来 ——
   曾经漏出一个 `text-transform: uppercase`，把型号名大写成「CERES-1S」。 */
.ta-body .tl-h { margin: 28px 0 14px; }
/* 抬头只写小节名，「这一节讲的是哪几款火箭」降到下面一行 mono 小字 ——
   块自带小节名，正文里不该再有同名 h2。 */
.tl-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  margin: -8px 0 14px;
}
/* 🔴 **这几条必须带 `.ta-body` 前缀**，理由同 `.tblk-list`（见上）。顺带把
   正文列表的 hover 底色与圆角显式清掉 —— 时间线的行不是可点的列表项。 */
.ta-body .tl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line-strong);
  margin-left: 6px;
}
.ta-body .tl li {
  position: relative;
  margin: 0;
  padding: 0 0 14px 20px;
  background: none;
  border-radius: 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
}
.ta-body .tl li:hover { background: none; }
.ta-body .tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--fg-dim);
}
/* 「最新报道」复用同一套 `.tl`，没有「本专题那一条」的概念所以圆点不高亮。 */
.topic-news .tl .t a { overflow-wrap: anywhere; }
/* 摘要在标题下、来源站上，**一行封顶**：这一节固定在正文最前，一条占三行就把
   第一段叙事推到屏外。要细节该点进原文。条数上限见 `NEWS_DEFAULT_LIMIT`。 */
.topic-news .tn-sum {
  -webkit-line-clamp: 1;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* 人工编辑标记：标题后跟的小 pill，以及摘要下面那行「编辑注：…」。
   ⚠️ **不共用 `.tpill`**：那一套标的是发射状态，这一套标的是我们对一条报道下的
   编辑判断，两者撞在同一节里会被读成同一类信息。所以更小、更轻。
   「存疑」用告警色，「已更正」是中性灰 —— 已更正是个交代，不是警告。 */
.topic-news .tflag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  font-weight: var(--fw-medium);
  vertical-align: 1px;
  white-space: nowrap;
}
.topic-news .tflag.disputed { background: var(--warn-soft-bg); color: var(--warn-dark); }
.topic-news .tflag.correction { background: var(--bg-inset); color: var(--fg-muted); }
/* 深色主题下 `--warn-dark` 在深底上偏暗，换回原色 —— 同 `.tpill` 那组。 */
html[data-theme="dark"] .topic-news .tflag.disputed { color: var(--warn); }
/* 编辑注独占一行,在摘要之下、来源站之上 —— 它是我们写的，不是那篇报道的一句话，
   所以用 mono 与摘要区分开。**不截断**：一句话说明本来就该看全。 */
.topic-news .tn-note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* 「任务更新」同样复用 `.tl`。正文是一段话不是一个标题，所以比时间线的任务名
   小一档（那边继承 `.news-body` 的 17px/1.8）—— 一节五条 17px 的段落会把叙事
   整个推到屏外。没有链接的更新是纯文本，样式由这条统一给。 */
.topic-upd .tl .t { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }

/* 本专题绑定的那几发。 */
.tl li.hi::before { background: var(--accent); border-color: var(--accent); }
.tl .d {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.tl .t { min-width: 0; }
.ta-body .tl .t a { color: var(--fg); text-decoration: none; font-weight: var(--fw-medium); }
.ta-body .tl .t a:hover { color: var(--accent); }
.tl .t .sub { display: block; font-size: 12.5px; color: var(--fg-faint); }
/* 🔴 **`@media` 里的选择器要跟它的基础规则同前缀。** 裸 `.tl li`（0,1,1）压不过
   基础规则 `.ta-body .tl li`（0,2,1），390px 的手机上时间线就仍是三列，标题被
   挤成一列竖排的字。已核：两列几何那组在 480px 那个 `@media` 里逐字照抄，
   `.tgm-shots.multi` 的基础规则是裸类、无需前缀。 */
@media (max-width: 640px) { .ta-body .tl li { grid-template-columns: 1fr; } }

/* 站内相关。**不是数据卡**，且**一个类型一行、同类链接并排** —— 一条链接
   占一行的话是六行 45px 高、字号跟正文标题一样大，类型标签还每行重复一遍。
   两列几何见 `.tkv`；`.ta-body` 前缀的理由同 `.tblk-list`。 */
.topic-rel { margin: 28px 0; }
.ta-body .trel-list { list-style: none; margin: 0; padding: 0; }
.ta-body .trel-list li {
  margin: 0;
  padding: 8px 0;
  /* 行高要自己定死。这一节在 `.news-body` 里面，那边是 17px/1.8 的长文排版，
     不覆盖的话每行净高 30.6px、加上 padding 就又是 46px —— 正是用户说的
     「内容太薄撑得太开」。 */
  font-size: 14px;
  line-height: 1.6;
  background: none;
  border-radius: 0;
}
.ta-body .trel-list li:hover { background: none; }
/* 类型标签是这一行的键，同 `.tkv dt` 走 muted。行内分隔符仍是 faint。 */
.trel-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.trel-links { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.trel-links .sep { color: var(--fg-faint); margin: 0 6px; }
.ta-body .trel-list a {
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ta-body .trel-list a:hover { color: var(--accent); }
/* 窄屏放不下两列，四处一起退回上下堆（键一行、值一行）。选择器与上面那组
   基础规则逐字相同 —— 特异性一样，靠位置在后面取胜。 */
@media (max-width: 480px) {
  .tkv,
  .tsp,
  .ta-body .tblk-list li,
  .ta-body .trel-list li {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
}

/* ---- 状态 pill ----
   分桶与 render::helpers::status_pill_class 一致（`~/chx/CLAUDE.md` 的发射状态
   语义表）：go/success 绿、tbc/hold/partial 黄、tbd 橙、fail/abort 红、
   live 实心红、其余灰。**分桶必须一致，色值按背景走**：这一页是浅底面板，
   所以浅色主题用 *-dark 那一档取够对比度，深色主题换回原色。 */
.tpill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.tpill.go, .tpill.success { background: var(--success-soft-bg); color: var(--success-dark); }
.tpill.tbc, .tpill.hold, .tpill.partial { background: var(--warn-soft-bg); color: var(--warn-dark); }
.tpill.tbd { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.tpill.fail, .tpill.abort { background: var(--danger-soft-bg); color: var(--danger-dark); }
/* live 是「正在进行 / 直播」的徽章，不是失败信号 —— 与 agency.css / launch.css
   同一约定，见 `~/chx/CLAUDE.md` 的发射状态语义表。 */
.tpill.live { background: var(--danger); color: var(--accent-fg); }

html[data-theme="dark"] .tpill.go,
html[data-theme="dark"] .tpill.success { color: var(--success); }
html[data-theme="dark"] .tpill.tbc,
html[data-theme="dark"] .tpill.hold,
html[data-theme="dark"] .tpill.partial { color: var(--warn); }
html[data-theme="dark"] .tpill.fail,
html[data-theme="dark"] .tpill.abort { color: var(--danger); }

/* ---- 图集 ----
   **不是数据卡**，而且**按任务分组**：正文流里的一节，一次发射一组，
   头行的排版语言与 `.tl li` 的头行一致。 */
/* 组头三行。一组 = 一次任务，组间用一条细线 + 32px 分开 —— 没有这个边界与
   这三行信息就分不清当前是哪个任务。 */
.tgal-mission + .tgal-mission {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-faint);
}
/* 组头第一行 = 标题 + 状态 pill 并排。
   ⚠️ **pill 在 h4 外面**：在里面时标题的可访问名会连着状态读成「…天启
   16-18 & 20成功」。所以排版归这一层 flex，h4 只剩字体。
   ⚠️ 前缀不能省：`.news-body-md h4`（0,1,1）的 `margin:24px 0 10px` 压得过裸
   `.tgm-title`（0,1,0），所以那份间距搬到这里、h4 自己归零。 */
.ta-body .tgm-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 10px;
  /* pill 原先长在 h4 里，继承的是 h4 的 1.35；挪出来若继承 `.news-body` 的 1.8，
     它的行盒会高 5px，baseline 对齐后把整个组头顶下去 3px。 */
  line-height: 1.35;
}
.tgm-title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--fg-strong);
}
.topic-article .ta-body .tgm-title { margin: 0; padding-top: 0; border-top: none; }
.tgm-title a { color: var(--fg-strong); text-decoration: none; }
.tgm-title a:hover { color: var(--accent); }
/* 标题里的日期（2026-09-08 起从 meta 行挪进来）。mono + tabular-nums:一组接一组
   往下扫时，日期要竖着对齐才读得快。静音色 + 常规字重 —— 它是标题的限定语,
   不该跟发射名抢重量。 */
.tgm-date {
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
.tgm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-faint);
}
.tgm-meta .sep { color: var(--line-strong); }
.tgm-meta a { color: var(--fg-muted); text-decoration: none; }
.tgm-meta a:hover { color: var(--accent); }
/* ⚠️ **前缀不能省**（同 `.tblk-desc`）：这是 `<p>`，`.news-body p`（0,1,1）的
   `margin: 0 0 22px` 压得过裸 `.tgm-desc`（0,1,0），「上 8px 下 0」会变成
   「上 0 下 22px」—— 描述贴住 meta 行，与下面的图之间反倒多出一截。 */
.ta-body .tgm-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  /* 两行封顶：任务描述长短差得很远，全放出来组头会盖过图。 */
  -webkit-line-clamp: 2;
}
/* 一张图 = 占所在栏全宽；多张 = 组内成网格。
   ⚠️ `display: block` 不能省：2026-09-08 起「历次发射」的行里也用这个 class，
   而那边它是个 `<span>`（`.tl .t` 是行内元素，塞 `<div>` 是非法嵌套）——
   不显式给 display，那一路就退回 inline、`margin-top` 也不生效。 */
.tgm-shots { display: block; margin-top: 12px; }
.tgm-shots.multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .tgm-shots.multi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 同上那条碰撞的另一面：`.news-body-md a`（0,1,1）给正文里每个 `<a>` 加橙色
   下划线。图集格子与卡片里的链接是整块可点区域，不该带正文链接的装饰。 */
.ta-body .tgal,
.ta-body .tblk a { text-decoration: none; }
.tgal { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 图片不套框、不做 hover —— 只留圆角与加载时的底色。 */
.tgal-img {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-inset);
}
.tgal-img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 组内多图时格子矮一些，一行三张不至于比正文还高。 */
.tgm-shots.multi .tgal-img img { aspect-ratio: 4 / 3; }
/* 署名，11px + muted 同 `.tfig-credit` —— 图集与正文配图没有理由分两档。 */
.tgal-credit { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); overflow-wrap: anywhere; }
/* 来源标签（「现场图」/「报道配图」）—— 多图时得看得出每张是什么。 */
.tgal-credit b { color: var(--fg-muted); font-weight: var(--fw-semibold); }

/* ---- 叙事里两种特殊小节 ----
   两者都**按抬头文字**认出来（`render::topic_article::mark_special_sections`），
   不是新的块 —— 内容层那边它们就是普通的 `## 待核` / `## 后续 · YYYY-MM-DD`。

   「待核」整节套一条带子：这一节列的是**尚未被第二来源证实的说法**（T3c §3 的
   写作规则），与正文其余部分同样的版式就等于把它读成已核过的事实。用告警色
   —— 与 `.tflag.disputed`（「存疑」）同一套语义，本页里「黄 = 我们对这段内容
   下的保留」已经有先例。 */
.ta-body .ta-sec-pending {
  margin: 40px 0 22px;
  padding: 18px 20px 4px;
  border-left: 3px solid var(--warn);
  border-radius: 0 10px 10px 0;
  background: var(--warn-soft-bg);
}
/* 抬头在带子里是 `:first-child`，`news.css` 已经把它的顶线与上边距去掉了；
   字号压到 h3 一档 —— 这一节是个提示块不是叙事的下一章。 */
.ta-body .ta-sec-pending h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 21px;
  color: var(--warn-dark);
}
/* 深色主题下 `--warn-dark` 在深底上偏暗，换回原色 —— 同 `.tpill` 那组。 */
html[data-theme="dark"] .ta-body .ta-sec-pending h2 { color: var(--warn); }
/* 图标跟着抬头的颜色走（svg 是 `stroke="currentColor"`），
   `flex-shrink` 挡住抬头换行时把它压扁。 */
.ta-sec-ico { flex-shrink: 0; }
/* 带子内最后一段的下边距由 padding 收掉，否则 22px 段距 + padding 双份留白。 */
.ta-body .ta-sec-pending > :last-child { margin-bottom: 0; }

/* 「后续 · YYYY-MM-DD」：**只改抬头，节内版式不变** —— 追加的是正文，
   不是提示框（T3b §1.1）。抬头拆成三件：「更新」pill、原抬头文字、mono 日期。
   `flex` 而不是 inline：pill 与日期要与那行大字基线看齐，而 28px 的
   `line-height:1.25` 上 `vertical-align` 调不齐。 */
.ta-body .ta-followup-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* pill 不共用 `.tpill`：那一套标的是发射状态，撞在一起会被读成同一类信息
   （理由同 `.tflag`）。这一枚是**中性**的 —— 「更新」是个交代，不是警告。 */
.ta-body .ta-upd-pill {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 日期徽章。**同一个类在正文抬头与页尾「更新记录」各出一次** —— 两处显示的
   是同一件东西，分成两档字只会让人以为不是同一个日期。 */
.ta-upd-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ta-body .ta-followup-h .ta-upd-date {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

/* 页尾的版本说明。与 hero 那行 `.ta-meta` 同一档字（mono 12px / faint）——
   两者说的是同一类事，一头一尾呼应；居中是因为它在 `.news-end-divider` 与
   「← 全部专题」之间，那两样都是居中的。 */
.topic-article .ta-foot {
  margin: -8px 0 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-faint);
  text-wrap: pretty;
}

/* 页尾「更新记录」：紧跟版本说明那一行 —— 「第 N 版」说的是有几版，
   这张表说的是每一版加了什么，同一件事的两半。居中同 `.ta-foot`。
   每行是一个页内锚点（`#followup-YYYY-MM-DD`），落到正文里那一节「后续」。 */
.topic-article .ta-updates { margin: -14px 0 22px; text-align: center; }
.topic-article .ta-updates-t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.topic-article .ta-updates-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topic-article .ta-updates-list a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
}
.topic-article .ta-updates-list a:hover { color: var(--accent); }
.topic-article .ta-updates-list .ta-upd-date { font-size: 12px; color: var(--fg-faint); }
/* 抬头本身带下划线 —— 这一行是个链接，得看得出能点；日期是它的前缀标记，
   不跟着划（同 `.tblk-nt` 那条的口径）。 */
.topic-article .ta-updates-list .ta-upd-h {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.topic-article .ta-updates-list a:hover .ta-upd-h { text-decoration-color: currentColor; }

/* ---- 脚注：来源区的版式 ----
   脚注的基础样式（引用角标与定义的序号）在 `news.css` 的 markdown 输出那一段
   —— 那几条对任何 `.news-body-md` 都成立，本页只是恰好是第一个用到脚注的页面。
   留在这里的是**专题页自己的来源区版式**，所以选择器都带 `.topic-article`。 */
/* 来源区**不用卡片**：裸行 —— 橙色 mono 序号 + 链接 + 站点 + 日期，
   行间一条细线。
   ⚠️ 抬头（「来源」小标题）放不进去：pulldown-cmark 把每条脚注定义渲染成正文的
   直接兄弟节点，没有包裹元素可挂标题。 */
.topic-article .ta-body .footnote-definition {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--line-faint);
}
/* 与上一节之间只留间距，**不画线**：上一节（多半是站内相关）自己末行已经有
   一条底线，再加一条顶线就是两条线夹着一段空白。序号 + 间距足够说明这是另一节。 */
.topic-article .ta-body .footnote-definition:first-of-type { margin-top: 28px; }
/* ⚠️ **单栏，不做两栏。** 同上：没有包裹元素，grid / column-count 都用不上，
   而 `inline-flex` + `calc(50% - Npx)` 要靠字号去猜兄弟节点间那段文本空白有
   多宽，换个字号就掉回单栏。要两栏得自己渲染来源区（T1 的
   `[[BLOCK: sources]]`），不是 CSS 能补的。 */
.topic-article .ta-body .footnote-definition p { margin: 0; }