/* 本文件沿用「单行紧凑声明 + 分层重复选择器覆盖」写法（与 docs-original.css 一致）。
   这两条规则均无法自动修复：单行声明需逐条拆行、重复选择器是刻意的覆盖层（见 54 行注释），
   为避免产生大量无行为影响的空行 diff，这里按文件关闭。 */

/* stylelint-disable declaration-block-single-line-max-declarations, no-duplicate-selectors */

.mcp-docs-page {
  min-height: calc(100vh - 120px);

  /* 官网顶部导航是 fixed-top，高度取自 --navBarHeightNew；
     正文容器必须预留等高留白，否则目录卡片与 Hero 顶部会被导航压住。 */
  padding-top: var(--navBarHeightNew, 80px);
  background: #f7f9ff;
}

/* 返回按钮已按需求移除（两个 hero 模板不再输出 .mcp-docs-back），样式一并清掉。 */

.mcp-docs-eyebrow {
  color: #6684ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.mcp-docs-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.mcp-docs-meta span { padding: 4px 10px; color: #dbe2f7; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 99px; }

.mcp-docs-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 52px; padding-top: 54px; padding-bottom: 30px; }

/* 目录卡片吸附在导航下方；视口偏矮时改为卡片内部滚动，保证末尾章节始终可达。 */
.mcp-docs-nav {
  position: sticky;
  top: 112px;
  align-self: start;
  box-sizing: border-box;
  max-height: calc(100vh - 144px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: #fff;
  border: 1px solid #e6ebf4;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(29, 38, 51, 0.04);
}
.mcp-docs-nav::-webkit-scrollbar { width: 6px; }
.mcp-docs-nav::-webkit-scrollbar-thumb { background: #dbe2f0; border-radius: 6px; }
.mcp-docs-nav::-webkit-scrollbar-thumb:hover { background: #c3cee4; }
.mcp-docs-nav-toggle { display: none; }
.mcp-docs-nav-list a { display: block; padding: 8px 10px; color: #657083; font-size: 14px; border-radius: 6px; }
.mcp-docs-nav-list a:hover { color: #3853f4; background: #f1f4ff; text-decoration: none; }

/* 目录二级：缩进 + 小一号字，形成层级（.lv2 由 docsNav.ejs 输出） */
.mcp-docs-nav-list a.lv2 { padding-left: 26px; font-size: 13px; color: #8a94a6; }

/* 当前章节高亮：docs.js 的 scrollspy 负责添加 .is-current */
.mcp-docs-nav-list a.is-current { color: #3853f4; background: #eef2ff; font-weight: 600; }

.mcp-docs-content { min-width: 0; padding: 8px 0 0; }

/* ---------- 二期：与 MCP 产品页一致的文档骨架 ---------- */
.mcp-docs-page { padding-top: var(--navBarHeightNew, 80px); }
.mcp-docs-hero-stage { position: relative; min-height: 215px; overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 22%, #3f5fd7 0, rgba(63, 95, 215, 0.68) 14%, transparent 36%), linear-gradient(118deg, #1f439b 0%, #1c42a6 58%, #4967dd 120%); }
.mcp-docs-hero-stage::before { content: ''; position: absolute; right: 72px; bottom: -118px; width: 310px; height: 310px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.05), 0 0 0 68px rgba(255, 255, 255, 0.035); }

.mcp-docs-hero-inner { position: relative; z-index: 1; padding-top: 7px; padding-bottom: 24px; }

/* 页头文字行间距：eyebrow → H1 → 副标题 三段靠太近会显得挤（原先 7/7）。
   泛光带高 24px，所以 padding-bottom 不能小于 24px。 */
.mcp-docs-hero-inner h1 { margin: 10px 0 12px; color: #fff; font-size: 24px; line-height: 1.3; letter-spacing: -0.3px; }
.mcp-docs-hero-inner p { max-width: 790px; margin: 0; color: #d6def4; font-size: 14px; line-height: 1.72; }
.mcp-docs-titlebar { position: sticky; z-index: 12; top: var(--navBarHeightNew, 80px); height: 0; overflow: hidden; color: #fff; background: linear-gradient(90deg, #1d3a83 0%, #1a3374 56%, #3d5df6 100%); box-shadow: 0 8px 22px rgba(31, 47, 86, 0.15); font-size: 13.5px; font-weight: 700; transition: height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mcp-docs-titlebar .mcp-container { display: flex; align-items: center; height: 44px; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease 0.12s, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s; }
.mcp-docs-titlebar.is-visible { height: 44px; }
.mcp-docs-titlebar.is-visible .mcp-container { opacity: 1; transform: translateY(0); }
.mcp-docs-titlebar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-docs-shell { position: relative; z-index: 2; gap: 28px; padding-top: 20px; }
.mcp-docs-nav { top: calc(var(--navBarHeightNew, 80px) + 74px); }

@media (max-width: 991.98px) {
  .mcp-docs-shell { grid-template-columns: 1fr; gap: 22px; padding-top: 32px; }

  /* 移动端：目录卡片收起为可折叠面板，由 .mcp-docs-nav-toggle 控制 .is-open */
  .mcp-docs-nav { position: static; max-height: none; padding: 0; overflow: hidden; }
  .mcp-docs-nav-toggle { display: flex; width: 100%; padding: 14px 16px; justify-content: space-between; color: #253044; background: #fff; border: 0; font-size: 14px; font-weight: 600; }
  .mcp-docs-nav-list { display: none; padding: 8px 12px 12px; }
  .mcp-docs-nav.is-open .mcp-docs-nav-list { display: block; }
  .mcp-docs-hero-stage { min-height: 186px; }
  .mcp-docs-hero-inner h1 { margin-top: 7px; font-size: 22px; }
  .mcp-docs-titlebar { top: var(--navBarHeightNew, 80px); }

  .mcp-docs-titlebar.is-visible,
  .mcp-docs-titlebar .mcp-container { height: 40px; }
}

/* ---------- 本轮：内容铺开 + 索引页头图收紧 + footer 定位修复 ---------- */

/* 加宽正文容器，让内容铺开（index.css 原为 1100px） */
.mcp-docs-page .mcp-container { max-width: 1280px; }

/* 数据索引独立页头图内容更少，进一步收紧 */
.mcp-docs-index-hero { min-height: 124px; }

@media (max-width: 991.98px) {
  .mcp-docs-index-hero { min-height: 118px; }
}

/* Footer：原 .page-footer 为 static，内部 absolute 版权栏锚到整页底部、产生大片空白。
   本样式表仅在 MCP 文档页加载，将其设为 relative，版权栏即锚回 footer 自身底部。 */
.page-footer { position: relative; }

/* ---------- 本轮：头图左缘对齐左侧目录 + 字号降档 + 底部空白修复 ---------- */

/* 头图文字左缘 = 左侧目录「列表项文字」的左缘。
   实测（真浏览器，1440 视口）：
     左目录外框 80  →  列表项外框 93  →  列表文字 103
     即：容器左缘 80 + 列表内边距 13 + 链接内边距 10 = 103
   目录属于居中容器（.mcp-docs-page .mcp-container { max-width:1280px }），
   所以这个值随视口变化；用下面的算式跟随，等于「容器左缘 + 63」：
     63 = 40 + (100vw - 1360) / 2
   ⚠️ 这里的 1234 由「容器 1280 + 左目录 220 + 列表/链接内边距 23 + 栏间距 52…」
   推导并实测校准而来。以后若改左目录宽度或 .mcp-docs-shell 的 gap，
   必须重新量一次目录列表文字的左坐标并同步这个数（最简单办法：拖预览页的
   「页头左缘」滑杆，读到的数字代回 2×pad + 1234）。
   吸顶标题栏用同一条左栅格，否则滚动时标题会左右跳。 */
.mcp-docs-page .mcp-docs-hero-stage .mcp-docs-hero-inner,
.mcp-docs-page .mcp-docs-titlebar .mcp-container {
  max-width: none;
  padding-left: calc((100vw - 1234px) / 2);
  padding-right: 40px;
  margin: 20px 0 0 0;
  padding-bottom: 50px;
}

/* 窄屏容器不再居中：左目录外框落在 40px，列表文字即 63px */
@media (max-width: 1360px) {
  .mcp-docs-page .mcp-docs-hero-stage .mcp-docs-hero-inner,
  .mcp-docs-page .mcp-docs-titlebar .mcp-container { padding-left: 63px; }
}

@media (max-width: 767.98px) {
  .mcp-docs-meta { gap: 6px; }
  .mcp-docs-meta span { font-size: 11px; }

  /* 手机端左目录外框 20px → 列表文字 43px */
  .mcp-docs-page .mcp-docs-hero-stage .mcp-docs-hero-inner,
  .mcp-docs-page .mcp-docs-titlebar .mcp-container { padding-left: 43px; padding-right: 20px; }
}

/* 底部空白：layoutNew.css 里 html/body 是 height:100%，而 .page-container 是
   min-height:100%，文档页的 <main> 又在 .page-container 之外，于是容器只剩
   footer（约 270px）却被撑到整屏高（约 757px），页面底部凭空多出约 487px 空白。
   本样式表只在 MCP 文档两个页面加载，直接取消这个最小高度即可。 */
.page-container { min-height: 0; }

/* ---------- 目录/锚点：顺滑跳转 + 落点提示动画 ---------- */

/* docs.css 只在 MCP 文档两个页面加载，直接作用到根元素不会影响其他页面。
   落点偏移由 docs-original.css 里的 scroll-margin-top 负责（顶部导航 + 吸顶标题栏）。 */
html { scroll-behavior: smooth; }

/* 只用 outline 做脉冲，不碰 background / box-shadow，避免和卡片自身样式打架 */
@keyframes mcp-doc-jump-pulse {
  0% { outline-color: rgba(56, 83, 244, 0.55); }
  100% { outline-color: rgba(56, 83, 244, 0); }
}

.mcp-doc-original > section:target,
.mcp-doc-original > section.is-jump-target,
.mcp-doc-original .ix-card:target,
.mcp-doc-original .ix-card.is-jump-target {
  outline: 3px solid rgba(56, 83, 244, 0);
  outline-offset: 3px;
  border-radius: 14px;
  animation: mcp-doc-jump-pulse 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .mcp-doc-original > section:target,
  .mcp-doc-original > section.is-jump-target,
  .mcp-doc-original .ix-card:target,
  .mcp-doc-original .ix-card.is-jump-target { animation: none; }
}

/* ---------- 键盘可达性：补 focus-visible 轮廓 ----------
   原先只有浏览器默认轮廓，在深色代码块和蓝色按钮上几乎看不清，
   键盘用户 Tab 到目录、筛选按钮、复制按钮时定位困难。 */
.mcp-docs-nav-list a:focus-visible,
.mcp-docs-nav-toggle:focus-visible,
.mcp-doc-original .chip:focus-visible,
.mcp-doc-original .search:focus-visible,
.mcp-doc-original .fields summary:focus-visible,
.mcp-doc-original .mini-copy:focus-visible,
.mcp-doc-original .ix-full-btn:focus-visible,
.mcp-doc-original .table-wrap a:focus-visible {
  outline: 2px solid #3853f4;
  outline-offset: 2px;
  border-radius: 6px;
}

/* 深色代码块里的复制按钮换成浅色轮廓 */
.mcp-doc-original .cb .copy:focus-visible {
  outline: 2px solid #b9c8ff;
  outline-offset: 2px;
}
