/* 知识文档页外壳
 *
 * 只负责 aj-doc-* 这一层：顶部 chip、左侧目录、标题区、事实条、变更记录。
 * 正文样式（.aj-kb-*）由 kb-doc-content.css 提供，那份是 tools/kb_scope_css.py
 * 从静态页内联样式生成的作用域版本，不要在这里重复定义。
 *
 * 加载顺序：kb-doc-content.css 在前，本文件在后，用来覆盖个别需要改的取值。
 */

/* ---------- 脱离主题骨架 ----------
 *
 * 主题默认是「品牌栏 176px + 主列 + 侧栏 296px」的三栏骨架，文档页不要这套：
 * 品牌栏换成顶部 header 里的字标与面包屑，右侧栏整个去掉。
 * 只作用于 body.aj-doc-page，其余页面零影响。
 */

body.aj-doc-page {
  padding-left: 0;
}

body.aj-doc-page .aj-brand-rail {
  display: none;
}

body.aj-doc-page .header.aj-site-header {
  left: 0;
}

/* ---------- 栅格 ---------- */

/* 左目录 200 + 正文列 820，整体居中；这是 wiki 的形态，不是站点列表页 */
.aj-doc-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 820px);
  justify-content: center;
  gap: 40px;
  max-width: var(--aj-page-max);
  margin: 0 auto;
  padding: var(--aj-space-8) var(--aj-page-gutter) var(--aj-space-16);
}

/* legacy 两页（network / gpt-claude-timeline）是自绘整页版式，不挂左目录。
 *
 * 宽度必须交回 .nm-wrap 自己管（min(1360px, 100% - 48px)），这里不能再设列宽上限。
 * 收到 1040 时会连锁塌两处：
 *   1. vendors 五列的卡片内容宽只剩 135px，.nm-vendor h3 是 flex:1 + min-width:0，
 *      会被同行的 38px 图标和 58px「推广链接」标签挤到约 29px —— 一个汉字一行。
 *   2. 拓扑 .nm-mapinner 等比缩到 0.67，但 .nm-devices / .nm-status 的 12px 字号、
 *      12px 内边距是固定 px，不跟着缩，相对放大 1.4 倍后直接盖住 SVG 节点。
 * 左右内缩也归零，否则 .nm-wrap 的 100% - 48px 会在 24px gutter 里再缩一次。 */
.aj-doc-layout--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.aj-doc-main {
  min-width: 0;
}

/* ---------- 左侧目录 ---------- */

.aj-doc-nav {
  position: sticky;
  top: calc(var(--aj-header-h) + var(--aj-space-6));
  align-self: start;
  max-height: calc(100vh - var(--aj-header-h) - var(--aj-space-12));
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--aj-type-body-sm-size);
}

.aj-doc-nav__summary {
  display: none;
}

.aj-doc-nav__list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--aj-line);
  list-style: none;
}

.aj-doc-nav__item a {
  display: block;
  min-height: 34px;
  margin-left: -1px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  color: var(--aj-muted);
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.aj-doc-nav__item a:hover,
.aj-doc-nav__item a:focus-visible {
  color: var(--aj-text);
}

.aj-doc-nav__item.is-current a {
  border-left-color: var(--aj-accent);
  color: var(--aj-text);
  font-weight: var(--aj-font-weight-medium);
}

.aj-doc-nav__item.is-current a:hover {
  color: var(--aj-text);
}

/* 章节页比总览低一档，靠缩进表达层级 */
.aj-doc-nav__item--sub a {
  padding-left: var(--aj-space-6);
}

/* ---------- 标题区 ---------- */

.aj-doc-head {
  max-width: var(--aj-reading-max);
  padding-bottom: var(--aj-space-5);
}

.aj-doc-eyebrow {
  margin: 0 0 var(--aj-space-2);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
  line-height: var(--aj-line-height-caption);
}

.aj-doc-head h1 {
  margin: 0 0 var(--aj-space-3);
  font-size: var(--aj-type-heading-1-size);
  font-weight: var(--aj-font-weight-semibold);
  line-height: var(--aj-line-height-heading-1);
  overflow-wrap: anywhere;
}

/* 核对日 / 更新次数 / 引用来源：原来在右侧卡片里，没有侧栏了就压成一行 */
.aj-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--aj-space-5);
  margin: 0 0 var(--aj-space-4);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
}

.aj-doc-answer {
  margin: 0 0 var(--aj-space-6);
  color: var(--aj-text);
  font-size: var(--aj-type-body-size);
  line-height: var(--aj-line-height-body);
}

/* legacy 页的外壳区块（meta / 事实条 / 广告）不在自绘版式的包裹层里，必须手动对齐
 * 正文列宽，否则会贴到浏览器最左边或被拉满整屏。两页列宽不同，按类型给变量：
 *   network  —— 正文自带 .nm-wrap 收在 1360；文字起点 = .nm-block 内边距 36 + 1px 边框
 *   timeline —— 提取器丢了原来的 <main class="mrt-shell">，列宽由下面的
 *               .aj-doc-legacy--timeline 补回（同 .mrt-shell：1420 居中），文字贴列左边 */
.aj-doc-page--network {
  --aj-doc-legacy-w: min(1360px, 100% - 48px);
  --aj-doc-legacy-inset: 37px;
}

.aj-doc-page--timeline {
  --aj-doc-legacy-w: min(var(--aj-page-max), 100% - 2 * var(--aj-page-gutter));
  --aj-doc-legacy-inset: 0px;
}

.aj-doc-page--legacy .aj-doc-head,
.aj-doc-page--legacy .aj-doc-facts,
.aj-doc-page--legacy .aj-doc-related,
.aj-doc-page--legacy .aj-doc-changelog,
.aj-doc-page--legacy .orbui-post {
  width: var(--aj-doc-legacy-w);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.aj-doc-page--legacy .aj-doc-head {
  padding-left: var(--aj-doc-legacy-inset);
  padding-bottom: var(--aj-space-4);
}

/* 等价于原静态页的 .mrt-shell { width: min(1420px, 100% - 48px); margin: 0 auto; padding: 48px 0 72px }，
 * 但顶部不留白：上面已有 meta 行，.mrt-hero 自带 52px（窄屏 36px）上内边距，再加 48 就是一大块空白。
 * 双类提权：kb-legacy-timeline.css 后加载，且把原 body 的 margin:0 挂在了 .aj-doc-legacy 上。 */
.aj-doc-body.aj-doc-legacy--timeline {
  width: var(--aj-doc-legacy-w);
  margin: 0 auto;
  padding: 0 0 72px;
}

/* ---------- 关键事实条 ---------- */

.aj-doc-facts {
  margin: 0 0 var(--aj-space-8);
  border-top: 2px solid var(--aj-text);
}

.aj-doc-facts__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--aj-space-4);
  padding: var(--aj-space-3) 0 var(--aj-space-2);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
}

.aj-doc-fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--aj-space-4);
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--aj-line);
}

.aj-doc-fact dt {
  margin: 0;
  color: var(--aj-muted);
  font-size: var(--aj-type-body-sm-size);
}

.aj-doc-fact dd {
  margin: 0;
  font-size: var(--aj-type-ui-size);
  line-height: 1.6;
}

.aj-doc-fact dd b {
  display: block;
  font-weight: var(--aj-font-weight-medium);
}

.aj-doc-fact dd span {
  display: block;
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
}

/* ---------- 正文容器 ---------- */

.aj-doc-body {
  min-width: 0;
}

.aj-doc-body > :first-child {
  margin-top: 0;
}

/* ---------- 代码块 ----------
 *
 * 文档正文不在 .article-content 作用域里，所以主题那套深底代码块规则不命中；
 * 但 main.js 依然会给每个 <pre> 套 .prettyprint 做语法高亮，而 prettify 的
 * token 色是按深底调的（.prettyprint .pln = #f5f1e8）—— 结果就是近白字落在
 * 浅色页面上，看不见。这里把同一套约束补到 .aj-doc-body，视觉与文章页一致。
 */
.aj-doc-body .prewrapper {
  position: relative;
  margin: var(--aj-space-5) 0;
  padding-top: 34px;
  overflow: hidden;
  border-radius: var(--aj-radius-md);
  background: var(--aj-color-code-surface);
}

.aj-doc-body .prewrapper > pre {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.aj-doc-body pre,
.aj-doc-body .aj-kb-code,
.aj-doc-body .aj-kb-route {
  max-width: 100%;
  padding: var(--aj-space-4) !important;
  border-radius: var(--aj-radius-md) !important;
  background: var(--aj-color-code-surface) !important;
  color: var(--aj-color-neutral-200) !important;
  font-family: var(--aj-font-mono) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 有语言标签时，原来的 padding-top:32px 是给标签让位的；
   现在让位交给 .prewrapper，再留 32px 会出现一大片空白 */
.aj-doc-body .aj-kb-code[data-lang] {
  padding-top: var(--aj-space-4) !important;
}

/* 语言标签落在 pre 内右上角；复制按钮在 wrapper 顶部 34px 区域，两者不重叠 */
.aj-doc-body .aj-kb-code[data-lang]::before {
  color: var(--aj-color-neutral-400);
}

.aj-doc-body .aj-kb-route {
  border-left-color: var(--aj-accent) !important;
}

.aj-doc-body pre code {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  opacity: 1 !important;
}

/* 复制按钮在 #11110f 上要有一道边，否则和代码底糊在一起 */
.aj-doc-body .prewrapper > button.precopy {
  top: 0;
  right: 0;
  min-width: 64px;
  min-height: 34px;
  border: 1px solid #3d3a33;
  border-radius: 0 var(--aj-radius-sm) 0 var(--aj-radius-sm);
  font: 12px/1.5 var(--aj-font-sans);
  cursor: pointer;
}

/* 锚点要躲开 64px 吸顶 header；content 样式里给的是 24px */
.aj-doc-body .aj-kb-section,
.aj-doc-body [id] {
  scroll-margin-top: calc(var(--aj-header-h) + var(--aj-space-4));
}

/* ---------- 相关页面 ---------- */

.aj-doc-related {
  margin-top: var(--aj-space-10);
  padding-top: var(--aj-space-4);
  border-top: 1px solid var(--aj-line);
}

.aj-doc-related h2 {
  margin: 0 0 var(--aj-space-2);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
  font-weight: var(--aj-font-weight-medium);
}

.aj-doc-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--aj-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj-doc-related a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: var(--aj-type-body-sm-size);
  text-decoration: none;
}

.aj-doc-related a:hover {
  color: var(--aj-accent);
}

.aj-doc-related em {
  color: var(--aj-muted);
  font-style: normal;
}

/* ---------- 变更记录 ---------- */

.aj-doc-changelog {
  margin-top: var(--aj-space-10);
  padding-top: var(--aj-space-4);
  border-top: 2px solid var(--aj-text);
}

.aj-doc-changelog h2 {
  margin: 0 0 var(--aj-space-3);
  font-size: 14px;
  font-weight: var(--aj-font-weight-medium);
  line-height: var(--aj-line-height-heading-3);
}

.aj-doc-changelog table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--aj-type-body-sm-size);
}

.aj-doc-changelog th {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--aj-line);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
  font-weight: var(--aj-font-weight-medium);
  text-align: left;
}

.aj-doc-changelog td {
  padding: var(--aj-space-2) 12px var(--aj-space-2) 0;
  border-bottom: 1px solid var(--aj-line);
  vertical-align: top;
}

.aj-doc-changelog time {
  color: var(--aj-muted);
  font-family: var(--aj-font-mono);
  font-size: var(--aj-type-caption-size);
  white-space: nowrap;
}

/* ---------- 顶栏 chip ---------- */

/* 品牌字标：桌面原本靠左侧品牌栏提供 logo，文档页把品牌栏隐藏了，
   字标改为在 header 里显示，点击回首页 */
body.aj-doc-page .aj-mobile-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--aj-text);
}

body.aj-doc-page .aj-mobile-brand .aj-brand-wordmark {
  color: var(--aj-text);
  font: italic 700 22px/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

body.aj-doc-page .aj-mobile-brand .aj-brand-wordmark i {
  color: var(--aj-color-accent-primary);
  font-style: normal;
}

.aj-doc-chip {
  display: flex;
  align-items: center;
  gap: var(--aj-space-2);
  /* 吃掉剩余空间：字标与面包屑靠左，右侧操作区靠右 */
  flex: 1 1 auto;
  min-width: 0;
  color: var(--aj-muted);
  font-size: var(--aj-type-body-sm-size);
}

.aj-doc-chip__link {
  flex: 0 0 auto;
  color: var(--aj-muted);
  text-decoration: none;
}

.aj-doc-chip__link:hover,
.aj-doc-chip__link:focus-visible {
  color: var(--aj-color-accent-primary);
}

.aj-doc-chip__sep {
  flex: 0 0 auto;
  color: var(--aj-line);
}

.aj-doc-chip__title {
  overflow: hidden;
  color: var(--aj-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aj-doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--aj-line);
  border-radius: var(--aj-radius-round);
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
  white-space: nowrap;
}

.aj-doc-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aj-accent);
}

/* ---------- 知识库总目录 ---------- */

.aj-kb-index {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--aj-space-10) var(--aj-page-gutter) var(--aj-space-16);
}

.aj-kb-index__head {
  margin-bottom: var(--aj-space-8);
  padding-bottom: var(--aj-space-5);
  border-bottom: 2px solid var(--aj-text);
}

.aj-kb-index__head h1 {
  margin: 0 0 var(--aj-space-2);
  font-size: var(--aj-type-heading-1-size);
  font-weight: var(--aj-font-weight-semibold);
  line-height: var(--aj-line-height-heading-1);
}

.aj-kb-index__head p {
  margin: 0;
  color: var(--aj-muted);
  font-size: var(--aj-type-body-sm-size);
}

.aj-kb-group + .aj-kb-group {
  margin-top: var(--aj-space-10);
}

.aj-kb-group__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aj-space-4);
  margin: 0 0 var(--aj-space-3);
  padding-bottom: var(--aj-space-2);
  border-bottom: 1px solid var(--aj-line);
  font-size: var(--aj-type-heading-2-size);
  font-weight: var(--aj-font-weight-semibold);
  line-height: var(--aj-line-height-heading-2);
}

.aj-kb-group__title a {
  text-decoration: none;
}

.aj-kb-group__title span {
  color: var(--aj-muted);
  font-size: var(--aj-type-caption-size);
  font-weight: var(--aj-font-weight-regular);
}

.aj-kb-group__desc {
  max-width: var(--aj-reading-max);
  margin: 0 0 var(--aj-space-3);
  color: var(--aj-muted);
  font-size: var(--aj-type-body-sm-size);
  line-height: 1.7;
}

/* 课程组：一行一节（序号 / 完整标题，去掉「第 N 课：」前缀）。
 * 不是把文章列表换个皮——总目录要能一屏扫完整门课，细节进课程页。 */
.aj-kb-lessons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj-kb-lessons li + li {
  border-top: 1px solid var(--aj-line);
}

.aj-kb-lessons a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px var(--aj-space-3);
  align-items: baseline;
  min-height: 44px;
  padding: var(--aj-space-2) 0;
  text-decoration: none;
}

.aj-kb-lessons__num {
  color: var(--aj-muted);
  font-family: var(--aj-font-mono);
  font-size: var(--aj-type-caption-size);
}

.aj-kb-lessons strong {
  font-size: var(--aj-type-ui-size);
  font-weight: var(--aj-font-weight-medium);
  line-height: 1.5;
}

.aj-kb-lessons a:hover strong {
  color: var(--aj-color-accent-primary);
}

/* ---------- 响应式 ---------- */

@media (max-width: 1024px) {
  /* 单栏：目录折到正文之前，默认收起，避免一进页面先看到一屏目录 */
  .aj-doc-layout,
  .aj-doc-layout--full {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--aj-space-5);
    padding-top: var(--aj-space-5);
  }

  .aj-doc-nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--aj-space-3);
    border-bottom: 1px solid var(--aj-line);
  }

  .aj-doc-nav__summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    color: var(--aj-text);
    font-size: var(--aj-type-ui-size);
    font-weight: var(--aj-font-weight-medium);
    cursor: pointer;
  }

  .aj-doc-nav__summary::-webkit-details-marker {
    display: none;
  }

  .aj-doc-nav__summary::after {
    content: "▾";
    color: var(--aj-muted);
  }

  .aj-doc-nav__list {
    margin-top: var(--aj-space-2);
  }
}

@media (max-width: 768px) {
  .aj-doc-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* .nm-wrap 在这一档收到 100% - 28px，.nm-block 水平内边距降到 18，跟着对齐；
   * timeline 的列宽走 --aj-page-gutter（此档 14px），自动收到 100% - 28px */
  .aj-doc-page--network {
    --aj-doc-legacy-w: calc(100% - 28px);
    --aj-doc-legacy-inset: 19px;
  }

  /* 只留「首页 / 知识库」两级；页面标题在正文 h1 里已经有了 */
  .aj-doc-chip__sep--kb,
  .aj-doc-chip__title {
    display: none;
  }

  body.aj-doc-page .aj-mobile-brand .aj-brand-wordmark {
    font-size: 18px;
  }

  .aj-doc-badge {
    height: 24px;
    padding: 0 var(--aj-space-2);
  }

  .aj-doc-changelog th:nth-child(4),
  .aj-doc-changelog td:nth-child(4) {
    display: none;
  }

  .aj-kb-group__title {
    display: block;
    font-size: var(--aj-type-heading-3-size);
  }

  /* 代码块：按钮升到 44px 可点，给按钮让位的空间同步加高 */
  .aj-doc-body .prewrapper {
    padding-top: 44px;
  }

  .aj-doc-body .prewrapper > button.precopy {
    min-height: 44px;
  }

  .aj-doc-body pre,
  .aj-doc-body .aj-kb-code {
    padding: var(--aj-space-3) !important;
    border-radius: var(--aj-radius-sm) !important;
  }
}

@media (max-width: 480px) {
  .aj-doc-badge {
    display: none;
  }

  /* 375 宽再挤下去字标 + 两级面包屑会顶到图标，只留「知识库」 */
  .aj-doc-chip__link--home,
  .aj-doc-chip__sep--home {
    display: none;
  }

  .aj-doc-facts__hd {
    flex-direction: column;
    gap: 2px;
  }
}