/* ============================================================
   九章 MCP 验证板教程专属样式
   仅由 9mod-mcpboard 教程页面通过 frontmatter head 引用，
   不影响其他产品线页面与全局主题。
   ============================================================ */

/* ---- 页面顶部模块标签行 ---- */
.jmc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 22px;
}

.jmc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 22%, transparent);
  border-radius: 999px;
}

/* ---- 概述信息卡 ---- */
.jmc-infocard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}

.jmc-infocard-item {
  background: var(--vp-c-bg-alt);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--vp-c-text-2);
}

.jmc-infocard-item .jmc-ico {
  font-size: 18px;
  margin-right: 6px;
}

.jmc-infocard-item b {
  display: block;
  margin-bottom: 4px;
  color: var(--vp-c-text-1);
  font-size: 14px;
}

/* ---- 图片卡片（页面主图 / 截图容器） ---- */
.jmc-imgcard {
  background: var(--vp-c-bg-alt);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0 8px;
}

.jmc-imgcard img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.jmc-imgcard .jmc-imgcard-cap {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--vp-c-text-2);
}

/* ---- 开源地址卡（代码 / 硬件开源链接行） ---- */
.jmc-links {
  margin: 16px 0 6px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  background: var(--vp-c-bg-alt);
  overflow: hidden;
}

.jmc-links .jmc-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
}

.jmc-links .jmc-link-row + .jmc-link-row {
  border-top: 1px dashed var(--vp-c-divider);
}

.jmc-links .jmc-link-row:hover {
  background: color-mix(in srgb, var(--vp-c-brand-1) 6%, transparent);
}

.jmc-links .jmc-link-ico { font-size: 17px; }

.jmc-links .jmc-link-label {
  flex-shrink: 0;
  color: var(--vp-c-text-1);
  font-weight: 700;
  font-size: 13px;
}

.jmc-links .jmc-link-label .jmc-link-platform {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--vp-c-text-3);
  line-height: 1.3;
}

.jmc-links a {
  font-family: var(--vp-font-family-mono);
  font-size: 13px;
  word-break: break-all;
  text-decoration: none;
}

/* ---- 章节徽标（正文 h3 前的小图标，用于分节） ---- */
.jmc-h3-ico { margin-right: 6px; }

/* ---- 下一步导航卡 ---- */
.jmc-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin: 20px 0 10px;
}

/* 兼容仍带「当前」块的页面（如 9mod 系列）：有三块时自动恢复三列布局 */
.jmc-next:has(.jmc-next-current) {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.jmc-next-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg-alt);
  transition: all 0.2s ease;
}

.jmc-next-card:hover {
  border-color: var(--vp-c-brand-2);
  background: var(--vp-c-brand-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px -6px var(--vp-c-brand-1);
}

.jmc-next-card .jmc-next-dir {
  font-size: 12px;
  color: var(--vp-c-brand-1);
  font-weight: 600;
}

.jmc-next-card .jmc-next-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  line-height: 1.4;
}

.jmc-next-current {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  font-size: 13px;
  color: var(--vp-c-text-2);
  background: var(--vp-c-brand-soft);
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 25%, transparent);
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .jmc-next, .jmc-next:has(.jmc-next-current) { grid-template-columns: 1fr; }
  .jmc-next:has(.jmc-next-current) .jmc-next-current { order: -1; }
}

/* ---- 内联高亮徽章（如 "6656"、"115200" 等关键数值） ---- */
.jmc-badge {
  display: inline-block;
  padding: 0 7px;
  font-weight: 700;
  font-size: 13px;
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
}

/* ---- 步骤代码块：独立复制框增强（九章板教程页） ---- */
.step-code-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25);
}

/* 复制按钮常显（原为 hover 才显示） */
.step-code-wrapper .step-copy-btn {
  opacity: 1;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.3rem 0.8rem;
  background: var(--vp-c-brand-3);
  color: #fff;
  border: none;
  font-weight: 600;
}

.step-code-wrapper .step-copy-btn:hover {
  background: var(--vp-c-brand-2);
}

.step-code-wrapper pre {
  border-radius: 10px;
}

/* ============================================================
   本文 API 汇总（ai-wb2 教程）
   整个章节一个容器，每个 API 一张卡片：
   彩色标题（函数名红 / 参数蓝）+ 功能描述 + 参数列表 + 返回值
   ============================================================ */
.api-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}

.api-card {
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  background: var(--vp-c-bg-alt);
  padding: 14px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.api-card:hover {
  border-color: color-mix(in srgb, var(--vp-c-brand-1) 40%, transparent);
  box-shadow: 0 4px 16px -8px var(--vp-c-brand-1);
}

/* 卡片内的界面截图：通栏展示，全宽放大 */
.api-card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto 0;
  border-radius: 6px;
}

.vp-doc .api-card h3 {
  margin: 0 0 8px;
  padding: 0 0 10px;
  border: none;
  border-bottom: 1px dashed var(--vp-c-divider);
  border-left: none;
  border-radius: 0;
  background: none;
  font-size: 17px;
  line-height: 1.6;
  scroll-margin-top: 80px;
}

/* FAQ 问题标题：不使用标题标签（避免进入文档大纲），外观与卡片标题一致 */
.api-card .faq-q {
  margin: 0 0 8px;
  padding: 0 0 10px;
  border-bottom: 1px dashed var(--vp-c-divider);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  color: var(--vp-c-text-1);
}

.api-fn {
  font-family: var(--vp-font-family-mono);
  font-weight: 700;
  font-size: 0.95em;
  color: #e05561;
}

.api-params {
  font-family: var(--vp-font-family-mono);
  font-weight: 600;
  font-size: 0.95em;
  color: #3b8cd6;
}

/* 功能描述：标题下方第一段 */
.api-card > h3 + p {
  margin: 6px 0 0;
  color: var(--vp-c-text-1);
}

/* 参数小标题 */
.api-card > h3 + p + p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-c-brand-1);
  letter-spacing: 0.5px;
}

/* API 参考页：函数名用非标题元素（避免右侧目录过长），沿用 faq-q 标题外观；
   下面两条让“说明/参数”段落在新结构下保留原有样式 */
.api-card > p.faq-q + p {
  margin: 6px 0 0;
  color: var(--vp-c-text-1);
}

.api-card > p.faq-q + p + p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-c-brand-1);
  letter-spacing: 0.5px;
}

.api-card ul {
  margin: 6px 0 0;
  padding-left: 1.15rem;
}

.api-card li {
  margin: 4px 0;
  line-height: 1.7;
  color: var(--vp-c-text-2);
}

/* 返回值：独立条带，不在参数列表内 */
.api-card > p:last-child {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 6px;
  background: var(--vp-c-default-soft);
  font-size: 14px;
}