/* ============================================================
   DAK Collectibles | Long-form (prose)  v1
   a division of DAK Industrial
   ------------------------------------------------------------
   本文件**只服务 Resources 的 8 篇文章**（`.prose`），
   站点其余 19 页完全不加载它 —— 见 gen.py `head()` 的 `css=` 参数。

   为什么不并进 site.css
   ------------------------------------------------------------
   `site.css` 是 v5 冻结版：11 页版式逐项验收过，是设计系统的唯一来源。
   文章样式有 100 多行、且只在一处长用，塞进去的后果是
   **「改文章排版」从此可能动到首页排版** —— 收益极小、风险不对称。
   所以分成独立文件，并且：

     · 不新增任何颜色、字号、间距 —— 全部取值来自 site.css 的既有令牌
       （`--t-*` / `--u-*` / `--line*` / `--paper*` / `--readw`）
     · 不覆写任何全站选择器（只写 `.prose` 作用域内的规则）
     · 表格、强调、引号、图注**一律复用 site.css 已有的类**，不另起一套

   ⚠️ 一处看起来像 bug、其实是刻意的：`site.css` 里有
   `em { font-style: normal; }` —— 本站设计语言**没有斜体**。
   所以 Markdown 的 `*强调*` 转出来的 `<em>` 在视觉上与正文一样，
   它承担的是语义（屏幕阅读器 / AI 引擎读到「这里是强调」），
   而不是样式。`compliance.html` 里已有的 `<em>` 用的是同一条规则。
   不要为了「让斜体显示出来」在这里加 `font-style: italic` ——
   那就等于在一个冻结的设计系统里悄悄引入第二种字体形态。

   阅读宽度
   ------------------------------------------------------------
   正文限 `--readw`（62ch），表格放开到整栏 860px。
   理由：62ch 是长文舒适区，而三列对比表在 62ch 里会挤成一团。
   分两档而不是「统一窄」或「统一宽」，是这两种内容的真实差别决定的。
   ============================================================ */

.prose {
  color: var(--paper-2);
  font-size: var(--t-md);
  line-height: var(--lh-body);
}

/* ---------- 1. 垂直节奏 ----------
   `> * + *` 只作用于相邻兄弟，所以块的间距由「前一个块的类型」决定，
   不需要给每个标签各写一次 margin。段内 `p` 的 1em 下边距要先归零，
   否则会与这条规则叠加成双倍间距。 */
.prose p { margin: 0; }
.prose > * + * { margin-top: var(--u-5); }
.prose > :first-child { margin-top: 0; }

/* 标题上方留一大口气（拉开小节），下方收紧（标题要贴着它带领的段落）。 */
.prose > h3 { margin-top: var(--u-8); }
.prose > h3 + * { margin-top: var(--u-4); }
.prose > h3:first-child { margin-top: 0; }

/* ---------- 2. 段落 ----------
   限宽只给「连续文字」，不给表格。 */
.prose > p,
.prose > ul,
.prose > ol,
.prose > h3,
.prose > blockquote {
  max-width: var(--readw);
}

.prose > p {
  /* 避免最后一行只剩一个词（孤字）。不支持的浏览器会忽略这一行，
     不影响任何既有规则。 */
  text-wrap: pretty;
}

/* ---------- 3. 强调 ----------
   `strong` 的样式来自 site.css（`font-weight:600; color:var(--paper)`）。
   长文里加粗比正文亮一档是刻意的：读者扫读时它是要点。 */
.prose strong { color: var(--paper); }

/* ---------- 4. 列表 ----------
   项目符号用 `::marker` 上色，而不是 `list-style-image` ——
   后者要额外的图片请求，且会破坏基线对齐。 */
.prose ul,
.prose ol {
  padding-left: var(--u-6);
  margin: 0;
}
.prose li + li { margin-top: var(--u-3); }
.prose li > ul,
.prose li > ol { margin-top: var(--u-3); }
.prose ul ::marker { color: var(--muted); }
.prose ol ::marker {
  color: var(--paper-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. 引用 ----------
   文章里两处引用都是「法规原文」与「免责声明」，语域一致：
   同一条左边线，不加引号、不换字体。 */
.prose blockquote {
  border-left: 2px solid var(--line-mid);
  padding-left: var(--u-6);
}
.prose blockquote > p { margin: 0; }
.prose blockquote > p + p { margin-top: var(--u-4); }

/* ---------- 6. 表格 ----------
   标记复用 site.css 的 `.cmp-scroll > table.cmp`（与其余 8 个页面同款，
   由 md.py 产出、`cmp_table()` 同构），所以这里只调间距，不碰表格本身。
   放开到整栏宽度 —— 正文限 62ch，表格要宽出这一档才读得动。 */
.prose .cmp-scroll { margin-top: var(--u-7); max-width: none; }
.prose .cmp-scroll + * { margin-top: var(--u-7); }

/* ---------- 7. 链接 ----------
   文章正文目前没有站内链接（8 篇实测：链接 0 个），但 prose 是通用容器，
   将来加链接时不该掉进「浏览器默认蓝紫下划线」——
   那会在一屏冷灰里突然出现两种新颜色。

   下划线颜色写死 rgba 而不用 `color-mix()`：site.css 里 `--accent-wash`
   已经用同一种写法表达「强调色的某个透明度」（本项目不做色值推导）。 */
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(206, 144, 104, .45);
  text-underline-offset: .22em;
}
.prose a:hover { color: var(--accent-lo); }

/* ---------- 8. 窄屏 ----------
   `--u-6` / `--u-8` 在手机上偏大，标题上方的留白要收；
   表格横向滚动交给 site.css 的 `.cmp-scroll`（已有 overflow-x）。 */
@media (max-width: 620px) {
  .prose > h3 { margin-top: var(--u-7); }
  .prose > * + * { margin-top: var(--u-5); }
  .prose ul,
  .prose ol { padding-left: var(--u-5); }
}