/* ============================================================================
   /p/ 系列（检索着陆页）专用排版件
   ── 只补 site.css 里没有的「长内容」部件：面包屑、正文段、键值表、真表格、
      FAQ、截图注释、页间内链。颜色/圆角/宽度一律引用 site.css 的 :root 令牌，
      所以浅色 / 深色（html[data-theme='light']）自动跟随，这里不写第二个色值。
   ── 刻意不使用 .hero / .hall / .panel：site.js 的长廊引擎按这些类做滚动驱动，
      文章页没有 #hall，交给引擎只会算出错误的透明度（见 site.js 里的 hall 兜底）。
   ========================================================================== */

.art {
  position: relative;
  padding-block: clamp(30px, 5vw, 56px) clamp(52px, 8vw, 96px);
  background: var(--bg);
}
.art__in { max-width: 78ch; }

/* ---------- 面包屑 ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.crumb a:hover { color: var(--acc); }
.crumb i { font-style: normal; color: var(--line); }

/* ---------- 标题区 ---------- */
.art__h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.art__h1 em { font-style: normal; color: var(--acc); }
.art__lede {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.art__lede strong { color: var(--ink); font-weight: 600; }
.art__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.art__tags li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--ink-2);
  background: var(--panel);
}

/* ---------- 正文节 ---------- */
.sec { margin-top: clamp(36px, 5vw, 56px); scroll-margin-top: 84px; }
.sec h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sec__h {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.sec__h::before {
  content: attr(data-no);
  display: inline-block;
  margin-right: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--acc);
}
.sec p { margin: 0 0 13px; font-size: 15.5px; line-height: 1.8; color: var(--ink-2); }
.sec p:last-child { margin-bottom: 0; }
.sec p strong { color: var(--ink); font-weight: 600; }
.ulist { margin: 6px 0 0; padding-left: 20px; }
.ulist li { margin-bottom: 8px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.ulist li::marker { color: var(--acc); }

/* ---------- 键值表：一项一条，左名右释 ---------- */
.kv {
  display: grid;
  gap: 1px;
  margin: 20px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
}
.kv__r {
  display: grid;
  grid-template-columns: minmax(112px, 190px) 1fr;
  gap: 14px;
  padding: 13px 16px;
  background: var(--panel);
}
.kv__k { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.kv__v { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.kv__v b { color: var(--ink); font-weight: 600; }

/* ---------- 真表格（格式要求、对照项） ---------- */
.tbl { width: 100%; margin: 20px 0 0; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tbl caption { padding-bottom: 10px; text-align: left; font-size: 12.5px; color: var(--ink-3); }
.tbl th, .tbl td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.6; }
.tbl thead th { color: var(--ink-3); font-weight: 600; font-size: 12px; background: var(--panel-2); }
.tbl tbody th { color: var(--ink); font-weight: 600; }
.tbl td { color: var(--ink-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- 说明块 / 边界声明 ---------- */
.note {
  margin: 22px 0 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--panel);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 600; }
.note--warn { border-left-color: #E0A44C; }

/* ---------- 真实截图 ---------- */
.shot { margin: 24px 0 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.shot figcaption { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { margin: 18px 0 0; border-top: 1px solid var(--line); }
.faq__i { padding: 15px 0; border-bottom: 1px solid var(--line); }
.faq__q { margin: 0 0 7px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.faq__a { margin: 0; font-size: 14.5px; line-height: 1.78; color: var(--ink-2); }

/* ---------- 页间内链（同一主题的着陆页互指，构成可抓取的站内网络） ---------- */
.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pager a {
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.pager a:hover { transform: translateY(-2px); border-color: rgba(var(--a), 0.34); box-shadow: 0 8px 22px -14px rgba(var(--s), 0.5); }
.pager b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pager s { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); text-decoration: none; }

/* ---------- 文内目录 ---------- */
.toc { margin: 26px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.toc__t { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin-bottom: 6px; font-size: 13.5px; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--acc); }

@media (max-width: 640px) {
  .kv__r { grid-template-columns: 1fr; gap: 4px; }
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 9px 10px; }
}