/* 中文 API 接口文档页（/api-docs）专属样式。
 *
 * 独立成一个文件而不是内联进 HTML：全站的字号/间距/圆角/行宽都走 style.css 的
 * 令牌，而「令牌有没有被用上」这件事是靠测试盯的（web/typescale_test.go、
 * web/spacescale_test.go）——那两个用例读的是 .css 文件。内联样式能躲过它们，
 * 于是第一个在 HTML 里写死 15.5px 的人不会红，等别人发现时已经是既成事实。
 *
 * 页面骨架：左侧目录 / 中间正文 / 右侧提示，窄屏逐级塌成单列。
 */
.adoc-hero { padding-block: var(--s7) var(--s4); }
.adoc-hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); margin: 0 0 var(--s3); letter-spacing: -.02em; }
.adoc-hero .lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--text-dim); max-width: var(--measure-prose); margin: 0; }

.adoc-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr) 260px; gap: var(--s6); padding-bottom: var(--s8); }

/* 目录与提示栏吸附在视口里。长文档里「我在哪、怎么跳」比省下的那点高度重要。 */
.adoc-toc { position: sticky; top: var(--s5); align-self: start; border-right: 1px solid var(--line); padding-right: var(--s4); }
.adoc-toc a { display: block; padding: var(--s1) 0; color: var(--text-dim); font-size: var(--fs-sm); line-height: var(--lh-heading); text-decoration: none; }
.adoc-toc a:hover, .adoc-toc a:focus-visible { color: var(--accent); }

.adoc-main section { margin-bottom: var(--s7); scroll-margin-top: var(--s5); }
.adoc-main h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); margin: var(--s6) 0 var(--s3); letter-spacing: -.015em; }
.adoc-main section > h2:first-child { margin-top: 0; }
.adoc-main h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); margin: var(--s5) 0 var(--s2); }
.adoc-main p, .adoc-main li { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-prose); }
.adoc-main ul { padding-left: var(--s5); }

/* 代码块用深浅两套令牌。--code-bg/--code-ink 在 style.css 里已按暗色覆写过，
 * 这里不再自己判断主题——自己判就会在系统切到暗色时留一块白。 */
.adoc-main pre { background: var(--code-bg); color: var(--code-ink); border-radius: var(--r2); padding: var(--s4); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.65; margin: 0 0 var(--s3); }
.adoc-main pre code { font-family: var(--font-mono); }
.adoc-main code { font-family: var(--font-mono); font-size: .95em; }

.adoc-copy { position: relative; }
.adoc-copy button { position: absolute; top: var(--s2); right: var(--s2); border: 1px solid var(--text-faint); border-radius: var(--r1); padding: 2px var(--s2); background: transparent; color: var(--code-ink); font-size: var(--fs-sm); cursor: pointer; }
.adoc-copy button:hover, .adoc-copy button:focus-visible { border-color: var(--accent); color: var(--accent); }

/* 表格在窄屏横向滚动。给外层容器而不是 table 本身设 overflow，
 * 否则表格会把自己的宽度算成容器宽度，列被压成两个汉字一换行。 */
.adoc-scroll { overflow-x: auto; margin: 0 0 var(--s4); }
.adoc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adoc-table th, .adoc-table td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: var(--lh-body); }
.adoc-table th { color: var(--text-dim); font-weight: 600; font-size: 12.5px; }
/* 字段名列：整列不断词会把 "a / b / c / d" 这种多 token 的名字撑成 330px 一列，
 * 三列表格在桌面上就只剩第一列可见（2026-09-12 截图抓到）。只让每个 code 不断，
 * token 之间的 " / " 允许换行——窄屏上也不会再出现「两个汉字一换行」，因为断点只在分隔符。 */
.adoc-table td:first-child { white-space: normal; }
.adoc-table td:first-child code { white-space: nowrap; }
/* 档位列只有「公开 / 专业」两个字，别让它被压成两行。 */
.adoc-table td:nth-child(2):not(:last-child) { white-space: nowrap; }
/* 第二列本身就是长文本的表（两个接口的对照）：三列都换行，否则第一列会被挤成一字一行 */
.adoc-table.adoc-wrap td:nth-child(2) { white-space: normal; }
.adoc-table.adoc-wrap td:first-child, .adoc-table.adoc-wrap th:first-child { white-space: nowrap; }
.adoc-table code { font-family: var(--font-mono); }

/* 「这句要紧」——全站第三类表面，与产品页 .honest 同一族（调色底 + 同色描边）。 */
.adoc-note { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border-left: 3px solid var(--accent); border-radius: 0 var(--r1) var(--r1) 0; padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.adoc-note p { margin: 0; }
.adoc-note p + p { margin-top: var(--s2); }

/* 接口锚点卡：两个接口各一张，标题行是「方法 + 路径」。 */
.adoc-ep { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s5); margin-bottom: var(--s4); }
.adoc-ep h3 { margin-top: 0; }
.adoc-method { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ok); margin-right: var(--s2); }
.adoc-path { font-family: var(--font-mono); font-size: var(--fs-body); overflow-wrap: anywhere; }

.adoc-side { position: sticky; top: var(--s5); align-self: start; }
.adoc-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); margin-bottom: var(--s4); }
.adoc-card h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.adoc-card p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-dim); }
.adoc-card p + p { margin-top: var(--s2); }

/* 两级塌陷：1024 先收掉右栏，760 再收掉左栏。
 * 一次收到底会让 900px 的平板上正文只有 60ch 的宽度还空着一大块。 */
/* 宽屏给文档三栏更多宽度：站点容器 960px 下正文只剩 426px，Pulse 字段字典（三列，774px）
 * 桌面上只看得见第一列，说明列要横向滚动才看得到。hero 一起放宽，左缘才对齐。 */
@media (min-width: 1100px) {
  .adoc-hero.container, .adoc-layout.container { max-width: 1180px; }
  .adoc-layout { grid-template-columns: 180px minmax(0, 1fr) 280px; }
}

@media (max-width: 1024px) {
  .adoc-layout { grid-template-columns: 160px minmax(0, 1fr); }
  .adoc-side { display: none; }
}
@media (max-width: 760px) {
  .adoc-layout { display: block; }
  .adoc-toc { position: static; display: flex; gap: var(--s4); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 var(--s2); margin-bottom: var(--s5); }
  .adoc-toc a { white-space: nowrap; padding: var(--s1) 0; }
  .adoc-ep { padding: var(--s4); }
}