/* ==========================================================================
   正文内容排版 —— 前台文章 & 后台编辑器预览，共用**唯一**一份
   ==========================================================================

   ⛔⛔ 为什么单独一个文件、而不是两边各写一份：
      后台编辑器有「实时预览」，它必须和「前台成稿」长得一模一样 ——
      否则预览就是骗人的。两份 CSS 一定会漂移（改了一处忘另一处），
      所以这里只放一份：post.html 与 admin.html 都引它。

   ⛔ 类名沿用 .article__body（前台先用起来的），后台预览区把同一个类
      加到预览容器上即可，不必改前台 HTML。

   ⛔ 2026-10-09 补全了 Markdown 会产出的那些标签的样式：
      原来正文是手写 HTML，只用到 <p>/<h2>/<ul>/<code>；
      换成 Markdown 之后会出现 h1/h3/ol/blockquote/pre/a/img/hr，
      不补样式这些标签会全部挤成默认样子（预览立刻露馅）。
   ========================================================================== */

.article__body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  word-wrap: break-word;
}

.article__body p { margin: 0 0 18px; }

.article__body h1,
.article__body h2,
.article__body h3,
.article__body h4 {
  color: var(--ink-1);
  font-weight: 600;
  line-height: 1.4;
}

.article__body h1 { font-size: 24px; margin: 34px 0 14px; }
.article__body h2 { font-size: 20px; margin: 32px 0 12px; }
.article__body h3 { font-size: 17px; margin: 26px 0 10px; }
.article__body h4 { font-size: 16px; margin: 22px 0 8px; }

/* 首个子元素不留上边距，否则预览顶部会莫名空一截 */
.article__body > :first-child { margin-top: 0; }

.article__body ul,
.article__body ol { margin: 0 0 18px; padding-left: 24px; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { margin-bottom: 8px; }
.article__body li > ul,
.article__body li > ol { margin: 8px 0 0; }

.article__body blockquote {
  margin: 0 0 18px;
  padding: 10px 16px;
  border-left: 3px solid var(--brand);
  background: var(--brand-tint-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-3);
}

.article__body blockquote p:last-child { margin-bottom: 0; }

.article__body code {
  font-family: var(--font-en);
  font-size: 13px;
  background: var(--brand-tint-2);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--brand-ink);
}

/* 代码块。.md-pre 是 renderMarkdown 产出的类名，一并兜住 */
.article__body pre,
.md-pre {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article__body pre code {
  background: none;
  padding: 0;
  color: var(--ink-1);
  font-size: 13px;
  line-height: 1.7;
}

/* ⛔⛔ 只作用于「没有 class 的链接」—— Markdown 产出的正是这种。
   写成 `.article__body a` 的话，特异性 (0,1,1) 会**压过**卡片自己的规则 (0,1,0)：
   「去下载」按钮的 color 被染成品牌绿，和按钮底色完全相同 → 整个字看不见；
   站点卡也会被强行加上下划线。2026-10-09 实测踩到，别改回去。 */
.article__body a:not([class]) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article__body a:not([class]):hover { color: var(--brand-ink); }

.article__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 18px;
  border-radius: var(--r-md);
}

.article__body hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: 28px 0;
}

/* ============================================================
   表格（2026-10-09 补）
   ⛔ 为什么外层要套一个滚动容器：列一多，手机上必然超宽。
      让**表格自己**横向滚，不要把整个页面撑出横向滚动条
      （页面级横向滚动是最难用的移动端体验之一）。
   ⛔ th 设 nowrap、td 不设：表头短且要整齐，正文单元格该换行就换行，
      否则一个长句子会把某一列撑到屏幕外。
   ============================================================ */

.md-tablewrap {
  margin: 0 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

.md-table th,
.md-table td {
  border: 1px solid var(--border-2);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.md-table th {
  background: var(--bg-sunken);
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
}

.md-table tbody tr:nth-child(even) { background: var(--brand-tint-3); }

/* 表格里再套卡片/代码块会让行高失控，收敛一下 */
.md-table code { font-size: 12px; }
.md-table p { margin: 0; }

/* ============================================================
   正文卡片：站点卡 / 下载卡
   ⛔ 站点卡的视觉语言与首页站点卡一致（圆形图标底 + 名称 + 描述 + 前往）——
      "文章里的卡片"和"首页的卡片"要是同一件事，不是两种东西。
   ⛔ 元素一律用 span：正文被包在 <p> 里，div 会被浏览器提前闭合、结构错乱。
   ============================================================ */

.pcard {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  /* ⛔ 边框用 --border-2：--border-1 与卡片底色亮度差不到 2%，卡片等于没有边界 */
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  /* ⛔ 不自带下边距：卡片独占一个段落（插入时前后各留了空行），
     段落 .article__body p 已有 18px 下边距 —— 卡片再加一份就是双倍留白 */
  margin: 0;
  background: var(--bg-card);
}

.pcard--site:hover { border-color: var(--brand); }

.pcard__ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pcard__ic img,
.pcard__ic svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.pcard__bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcard__nm { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-1); }

.pcard__ds {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcard__go {
  flex: none;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

/* ============================================================
   下载卡
   ⛔⛔ 2026-10-09 第二版（第一版被评价"还是难看"，原因与对策都记在这）：
   1. 第一版给卡片加了 `border-left: 3px 品牌色` —— 而 **blockquote 用的是
      一模一样的左条**。视觉语言撞车，下载卡看起来就是个引用块。
      ⇒ 去掉左条，改用**左上角的图标块**当视觉锚点。
   2. 16px 的小箭头在 672px 宽的卡里几乎没有存在感 ⇒ 换成 38px 图标块。
   3. 标题与体积横排、分居两端，中间一大片空白 ⇒ 改成**竖排**（标题在上、
      副信息在下），结构与站点卡对齐。
   4. 行高必须显式重置：卡片长在 .article__body 里会继承正文的 line-height:1.85
      （16px → 29.6px 行高），15px 标题被撑到 27.75px 高，内部全散开。
      **卡片是组件，不是段落。**
   ============================================================ */

.pcard--dl {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31, 58, 54, 0.06));
}

/* 头部：图标块 +「标题 / 副信息」两行 */
.pcard--dl .pcard__hd {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pcard__badge {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard__hdtext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcard__tt {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-1);
  overflow-wrap: break-word;
}

.pcard__mt {
  font-size: 12px;
  line-height: 1.4;
  /* ⛔ 用 ink-3 而不是 ink-4：白底上 #7a9692 只有 3.1:1（低于 AA 的 4.5），
     #5b7671 约 5.0:1 才够。2026-10-09 笔记页改纯白底时一并调的。 */
  color: var(--ink-3);
}

/* 网盘列表：一行 = 一个下载入口，行间细线分隔 */
.pcard__rows {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--border-1);
}

.pcard__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-1);
}

/* 最后一个网盘行不收底线，否则卡片底部会多出一道 */
.pcard__row:last-child { border-bottom: 0; padding-bottom: 0; }

/* 网盘名做成实心小标签：从"一行普通文字"变成"一个有归属的单元" */
.pcard__pn {
  flex: none;
  /* ⛔ margin-right:auto 把「提取码 + 按钮」一起推到右侧成组，
     并且保证有码/无码两种情况下按钮位置一致 */
  margin-right: auto;
  max-width: 40%;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  background: var(--bg-sunken);
  border-radius: var(--r-xs);
  padding: 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 提取码：整块可点复制，与按钮相邻（同属"操作"组） */
.pcard__cd {
  flex: none;
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 5px 10px;
  cursor: pointer;
}

.pcard__cd b { font-weight: 600; letter-spacing: 0.08em; }
.pcard__cd:hover { border-color: var(--brand); }
.pcard__cd.is-done { background: var(--brand); color: var(--on-brand); }

/* 下载按钮：整张卡片里唯一的强色块 = 唯一的主操作 */
.pcard__btn {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-brand);
  background: var(--brand);
  border-radius: var(--r-sm);
  padding: 7px 18px;
  transition: background 0.15s;
}

.pcard__btn:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
  text-decoration: none;
}

.pcard__nt {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1);
  font-size: 12px;
  line-height: 1.6;
  /* 同 .pcard__mt：白底上要够对比度 */
  color: var(--ink-3);
}

.pcard__miss { font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* 窄屏收紧，保证「网盘标签 + 提取码 + 按钮」一行放得下 */
@media (max-width: 480px) {
  .pcard--dl { padding: 14px 15px; }
  .pcard__badge { width: 34px; height: 34px; }
  .pcard__pn { font-size: 12px; padding: 3px 8px; max-width: 34%; }
  .pcard__cd { padding: 4px 8px; }
  .pcard__btn { padding: 6px 13px; }
}