/**
 * 文章正文排版样式 —— 由 caoliao-content-hub 构建时自动生成，请勿手改。
 * 生成脚本：scripts/build-article-typography.cjs
 * 用法：宿主在包裹文章内容的元素上加 class="cl-article"，并引用本文件。
 */
.cl-article {
  --cl-bg-subtle: #f6f8fa;
  --cl-border-muted: #e5e7eb;
  --cl-code-color: #c9254e;
  --cl-link: var(--ifm-color-primary);
  --cl-link-hover: var(--ifm-color-primary-dark);
  --cl-text: #1f2328;
  --cl-text-muted: #6e7781;
  --cl-text-secondary: #374151;
  --ifm-background-surface-color: #ffffff  /* infima 内置，宿主无定义，补兜底 */;
  --ifm-color-primary: #166bc7;
  --ifm-color-primary-dark: #1360b3;
  --ifm-color-primary-lightest: #5fa0de;
}

.cl-article .markdown {
  color: var(--cl-text-secondary);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.cl-article .markdown h1,
.cl-article .markdown h2,
.cl-article .markdown h3,
.cl-article .markdown h4,
.cl-article .markdown h5,
.cl-article .markdown h6 {
  color: var(--cl-text);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.cl-article .markdown h2 {
  margin-top: 2.5em;
}

.cl-article .markdown > h1:first-child + h2,
.cl-article .markdown > header:first-child + h2 {
  margin-top: 0.3em;
}

.cl-article .markdown h3 {
  margin-top: 1.8em;
}

.cl-article .markdown p {
  margin-bottom: 1.2em;
}

.cl-article .markdown ul,
.cl-article .markdown ol {
  margin-bottom: 1.2em;
}

.cl-article .markdown li + li {
  margin-top: 0.35em;
}

.cl-article .markdown ul > li::marker,
.cl-article .markdown ol > li::marker {
  color: var(--cl-text-muted);
}

.cl-article .markdown strong {
  color: var(--cl-text);
  font-weight: 600;
}

.cl-article .markdown blockquote {
  border-left: 3px solid var(--ifm-color-primary-lightest);
  background: var(--cl-bg-subtle);
  color: var(--cl-text-secondary);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin: 1.2em 0;
}

.cl-article .markdown blockquote > :last-child {
  margin-bottom: 0;
}

.cl-article .markdown hr {
  border-color: var(--cl-border-muted);
  margin: 2em 0;
}

.cl-article .markdown :not(pre) > code {
  background: var(--cl-bg-subtle);
  border: 1px solid var(--cl-border-muted);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  color: var(--cl-code-color);
  word-break: break-word;
}

.cl-article :where(.markdown a) {
  color: var(--cl-link);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.cl-article :where(.markdown a):hover {
  color: var(--cl-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--cl-link-hover);
}

.cl-article .markdown table {
  font-size: 0.875rem;
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
  overflow: visible;
}

.cl-article .markdown table[border] {
  display: table !important;
  width: auto !important;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  table-layout: auto;
}

.cl-article .markdown th,
.cl-article .markdown td {
  border: 1px solid var(--cl-border-muted);
  padding: 10px 16px;
}

.cl-article .markdown thead th {
  background: transparent;
  color: var(--cl-text);
  font-weight: 600;
  border-bottom-width: 2px;
}

.cl-article .markdown tbody tr:nth-child(2n) {
  background: transparent;
}

.cl-article .markdown tbody tr:hover {
  background: transparent;
}

.cl-article .markdown .table-stretch table {
  display: table;
  width: 100%;
}

.cl-article .markdown .table-stretch th,
.cl-article .markdown .table-stretch td {
  text-align: left;
}

.cl-article .markdown .table-version-col table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.cl-article .markdown .table-version-col th:last-child,
.cl-article .markdown .table-version-col td:last-child {
  width: 8em;
}

.cl-article .markdown .table-version-col.wide th:last-child,
.cl-article .markdown .table-version-col.wide td:last-child {
  width: 17em;
}

.cl-article .markdown .version-card {
  border: 1px solid var(--cl-border-muted);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 16px;
}

.cl-article .markdown .version-card > :first-child {
  margin-top: 0;
}

.cl-article .markdown .version-card > :last-child {
  margin-bottom: 0;
}

.cl-article .markdown .table-label-col table {
  table-layout: fixed;
  width: 100%;
}

.cl-article .markdown .table-label-col th:first-child,
.cl-article .markdown .table-label-col td:first-child {
  width: 7em;
  white-space: nowrap;
}

.cl-article .markdown .table-label-col th:last-child,
.cl-article .markdown .table-label-col td:last-child {
  width: 30%;
}

.cl-article .markdown .doc-meta-table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--cl-border-muted);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--ifm-background-surface-color);
}

.cl-article .markdown .doc-meta-table tbody {
  display: block;
  width: 100%;
}

.cl-article .markdown .doc-meta-table tr {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(92px, 12fr) minmax(0, 38fr) minmax(92px, 12fr) minmax(0, 38fr);
}

.cl-article .markdown .doc-meta-table tr + tr > * {
  border-top: 1px solid var(--cl-border-muted);
}

.cl-article .markdown .doc-meta-table th,
.cl-article .markdown .doc-meta-table td {
  padding: 10px 14px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--cl-border-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cl-article .markdown .doc-meta-table th {
  background: var(--cl-bg-subtle);
  color: var(--cl-text-muted);
  font-weight: 600;
}

.cl-article .markdown .doc-meta-table td {
  background: var(--ifm-background-surface-color);
  color: var(--cl-text);
  font-weight: 500;
}

.cl-article .markdown .doc-meta-table td[colspan='3'] {
  grid-column: span 3;
}

.cl-article .markdown .doc-meta-table tr > *:last-child {
  border-right: 0;
}

.cl-article .markdown img {
  border-radius: 6px;
  margin: 0.5em 0;
}

.cl-article /* ── Miniapp-web 元素 reset ──
   在 [data-page-type] 已有的 margin/padding reset 基础上，
   进一步清除 .markdown 设置的 font-size/weight/line-height 等排版属性，
   确保内联样式完全控制渲染效果，匹配小程序 mp-html 的干净底板。

   specificity 分析：
   - [data-miniapp] .markdown *  → 0,
.cl-article 2,
.cl-article 0  >  .markdown h1 的 0,
.cl-article 1,
.cl-article 1 ✓
   - inline style= {{...}}

.cl-article → 1,
.cl-article 0,
.cl-article 0,
.cl-article 0 始终胜出此 reset          ✓ */


[data-miniapp] > .markdown > header:first-child,
.cl-article [data-template-web] > .markdown > header:first-child {
  display: none;
}

.cl-article [data-miniapp] > .markdown,
.cl-article [data-template-web] > .markdown {
  color: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.cl-article [data-miniapp] .markdown * {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: inherit;
  list-style: none;
  background: transparent;
}

.cl-article .markdown .plyr {
  --plyr-color-main: rgba(255, 255, 255, 0.9);
  --plyr-video-control-color: #fff;
  --plyr-range-fill-background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5em 0;
}

.cl-article .markdown .plyr--video .plyr__control--overlaid {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  padding: 18px;
  color: #fff;
}

.cl-article .markdown .plyr--video .plyr__control--overlaid:hover {
  background: rgba(0, 0, 0, 0.5);
}

.cl-article .markdown .plyr--video .plyr__controls .plyr__control:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}