/*
 * docs-site.css — docs 站（quickfind-docs）专属版式层
 *
 * 为什么必须是一个「新文件」，而不是改 site.css：
 *   docs 站的 assets 是从主站同步来的（_tools/sync_docs_site.js，真源在
 *   quickfind-web-v5）。任何对 site.css / tokens.css / ui.css 的手改，都会在
 *   下一次同步时被覆盖掉，而且改坏的是主站共享资产。只有不在同步清单里的
 *   文件才属于 docs 站自己，所以这个文件由 build_docs_pages.js 通过 <link>
 *   注入，永远排在 footer.css 之后。
 *
 * 视觉范式：Vercel / Next.js 式文档站（2026-10-16 重设计）
 *   —— 1px 细边框承担全部分隔，阴影只在 hover 时浮起一层；
 *      圆角从 12–18px 收敛到 6–10px；
 *      品牌色**只**出现在链接、活跃指示与焦点环，卡片与正文一律中性灰阶；
 *      层级靠字号/字重/留白拉开，不靠彩色块和发光。
 *   这样深浅色两套观感都干净，也不需要为 dark 另写一套版式。
 *
 * 为什么只写 "[ scoped ]" 选择器：
 *   index.html 也会加载这个文件，但它是导航枢纽页，没有 .docs-shell /
 *   .docs-prose 这些结构。下面的规则全部挂在 .docs-* / .page-hero.docs-hero
 *   之下，不会对首页造成任何副作用（首页自己的样式在 docs-index.css）。
 *
 * 为什么只用 --qf-* 变量：
 *   tokens.css 里有完整的 [data-theme="dark"] 覆盖，跟着变量走就能自动
 *   深浅色，不必再写一套 dark 分支（少量确实需要差异的再单独写）。
 *
 * ⚠ 类名契约（改之前必读）：本文件里凡是 .docs-search* / .ds-* / .docs-updated /
 *   .guide-* 的类名，都是 docs-search.js、docs-enhance.js、guide.js 在**运行时**
 *   写进 DOM 的。改类名 = JS 找不到挂载点，而且**应用层零报错**（只是搜索框
 *   不出现、目录不生成）。所以只许改视觉属性，不许改这些名字。
 *
 * 由 _tools/build_docs_pages.js 注入；不要手改生成页。
 */

/* ---------------------------------------------------------------------------
   0. docs 站自己的尺度变量
   --------------------------------------------------------------------------- */
:root {
  --docs-maxw: 1400px;   /* 三栏外壳的最大宽度 */
  --docs-side: 236px;    /* 左栏分组导航 */
  --docs-toc: 212px;     /* 右栏本页大纲 */
  --docs-gap: 64px;      /* 栏间距：宁可两栏远一点，也别让文字贴脸 */
  --docs-top: 86px;      /* sticky 偏移 = header 66 + 呼吸 20 */

  /* 圆角梯度：比主站的 8/12/16 更收敛，这是「文档站」与「营销页」最快的区分 */
  --docs-r-sm: 6px;
  --docs-r-md: 8px;
  --docs-r-lg: 10px;

  /* 唯一允许的阴影：hover 时的极轻浮起。静态元素一律不投影 */
  --docs-lift: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04);
  --docs-pop:  0 8px 28px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);
}

[data-theme="dark"] {
  --docs-lift: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 12px rgba(0, 0, 0, .22);
  --docs-pop:  0 10px 34px rgba(0, 0, 0, .52), 0 2px 8px rgba(0, 0, 0, .34);
}

/* ---------------------------------------------------------------------------
   1. 版面：三栏要空间，所以这里比主站的 1200 再放宽一点
   --------------------------------------------------------------------------- */
.docs-body-sec {
  padding: 48px 0 96px;
}

.docs-body-sec .docs-shell {
  max-width: var(--docs-maxw);
}

/* ---------------------------------------------------------------------------
   2. Hero：面包屑 + 章节标识 + 大标题
      关键改动 —— 去掉主站那套彩色渐变底与发光，改成纯背景 + 一条底部细线。
      大厂文档站的 hero 是「安静的」，靠排版而不是装饰取胜。
   --------------------------------------------------------------------------- */
.page-hero.docs-hero {
  padding: 20px 0 40px;
  text-align: left;
  background: none;
  border-bottom: 1px solid var(--qf-border-soft);
}

.docs-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--qf-text-muted);
}

/* 分隔符从「旋转 45° 的小方块」换成纯文本斜杠：更轻，也不用额外盒模型 */
.docs-crumb li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: .45;
}

.docs-crumb a {
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.docs-crumb a:hover {
  color: var(--qf-text);
}

.docs-crumb li[aria-current="page"] {
  color: var(--qf-text);
}

.docs-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* 章节图标：从 62px 渐变方块改成 40px 细描边徽标 —— 品牌色留给链接 */
.docs-hero-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--qf-border);
  border-radius: var(--docs-r-md);
  background: var(--qf-surface);
  color: var(--qf-text);
}

.docs-hero-ico svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.6;
}

.docs-hero-text {
  min-width: 0;
}

.page-hero.docs-hero .docs-hero-text .kicker {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--qf-text-muted);
}

.page-hero.docs-hero h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-hero.docs-hero .lead {
  margin: 0;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--qf-text-muted);
}

@media (max-width: 639px) {
  .page-hero.docs-hero { padding: 14px 0 30px; }
  .docs-hero-main { gap: 13px; }
  .docs-crumb ol { margin-bottom: 18px; }
}

/* ---------------------------------------------------------------------------
   3. 章节导航：宽屏走左栏，窄屏走顶部横向 chip 条，两者不同时出现
   --------------------------------------------------------------------------- */
.doc-pages {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  display: block;
  padding: 9px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--qf-border-soft);
  border-radius: 0;
  background: color-mix(in srgb, var(--qf-bg) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.doc-pages .container {
  max-width: var(--docs-maxw);
}

.doc-pages .doc-page-list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.doc-pages .doc-page-list::-webkit-scrollbar { display: none; }

/* 宽屏下这条 chip 条是隐藏的；窄屏的横向导航要读起来轻：纯文字 + 细底 */
.doc-pages .doc-page-list a {
  display: inline-block;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--docs-r-md);
  background: none;
  font-size: 13px;
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.doc-pages .doc-page-list a:hover {
  background: var(--qf-surface-hover);
  color: var(--qf-text);
}

.doc-pages .doc-page-list a[aria-current="page"] {
  border-color: var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
  font-weight: 500;
}

.docs-side,
.docs-toc {
  display: none;
}

@media (min-width: 1024px) {
  .doc-pages { display: none; }
  .docs-shell {
    display: grid;
    grid-template-columns: var(--docs-side) minmax(0, 1fr);
    gap: var(--docs-gap);
    align-items: start;
  }
  .docs-side { display: block; }
}

@media (min-width: 1280px) {
  .docs-shell {
    grid-template-columns: var(--docs-side) minmax(0, 1fr) var(--docs-toc);
  }
  .docs-toc { display: block; }
}

/* 左栏：分组导航。分隔线只到 group 之间，不给整栏加框 */
.docs-side-inner {
  position: sticky;
  top: var(--docs-top);
}

.docs-side-group + .docs-side-group {
  margin-top: 28px;
}

.docs-side-h {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--qf-text-muted);
  margin-bottom: 8px;
  padding-left: 12px;
}

.docs-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border-left: 1px solid var(--qf-border-soft);
}

.docs-side-list a {
  display: block;
  position: relative;
  padding: 6px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--docs-r-sm) var(--docs-r-sm) 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.docs-side-list a:hover {
  color: var(--qf-text);
  background: var(--qf-surface-hover);
}

/* 活跃项：竖线变实 + 文字加深，不铺彩色底 —— 大厂左栏的通行做法 */
.docs-side-list a[aria-current="page"] {
  border-left-color: var(--qf-primary);
  color: var(--qf-text);
  font-weight: 500;
}

/* 求助块：从虚线框改成一条顶部细线 + 小字，去掉「框住」的强调 */
.docs-side-help {
  display: block;
  margin-top: 32px;
  padding: 14px 12px 0;
  border-top: 1px solid var(--qf-border-soft);
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.docs-side-help:hover {
  color: var(--qf-primary);
}

/* 右栏：本页大纲（条目由 docs-enhance.js 生成） */
.docs-toc-inner {
  position: sticky;
  top: var(--docs-top);
}

.docs-toc-h {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--qf-text-muted);
  margin-bottom: 8px;
  padding-left: 12px;
}

.docs-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border-left: 1px solid var(--qf-border-soft);
}

.docs-toc-list a {
  display: block;
  padding: 5px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.docs-toc-list a:hover {
  color: var(--qf-text);
}

.docs-toc-list a.is-active {
  border-left-color: var(--qf-primary);
  color: var(--qf-text);
  font-weight: 500;
}

.docs-toc-top {
  display: inline-block;
  margin-top: 14px;
  margin-left: 12px;
  font-size: 12.5px;
  color: var(--qf-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.docs-toc-top:hover {
  color: var(--qf-text);
}

/* ---------------------------------------------------------------------------
   4. 正文：行长与呼吸感是「不拥挤」的唯一解法
   --------------------------------------------------------------------------- */
.docs-main {
  min-width: 0;
}

.docs-prose {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--qf-text);
}

/* 分区标题与 hero 的 h1 是同一句话，页内再重复一次纯属噪音；
   真正的层级由注入的 .doc-block h2 承担（h1 → h2 依然连续）。 */
.docs-prose > .doc-sec > .doc-sec-title {
  display: none;
}

.docs-prose .doc-block {
  margin-bottom: 52px;
}

.docs-prose .doc-block:last-child {
  margin-bottom: 0;
}

/* h2：大厂文档站的章节标题几乎不靠颜色，靠字号 + 字重 + 一条底部细线 */
.docs-prose h2 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--qf-border-soft);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--qf-text);
}

.docs-prose h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--qf-text);
  margin: 30px 0 10px;
}

.docs-prose p {
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--qf-text-muted);
}

.docs-prose p:last-child {
  margin-bottom: 0;
}

.docs-prose ul,
.docs-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.docs-prose li {
  margin-bottom: 9px;
  line-height: 1.75;
  color: var(--qf-text-muted);
}

.docs-prose li:last-child {
  margin-bottom: 0;
}

/* 列表符号用中性灰：正文里的彩色圆点会和链接抢注意力 */
.docs-prose li::marker {
  color: var(--qf-text-muted);
  opacity: .7;
}

.docs-prose a {
  color: var(--qf-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--qf-primary-ring);
  transition: border-color .15s ease;
}

.docs-prose a:hover {
  border-bottom-color: var(--qf-primary);
}

/* 行内 code：别让它把行高顶开 */
.docs-prose p code,
.docs-prose li code,
.docs-prose td code {
  padding: 1.5px 5px;
  border-radius: 4px;
  background: var(--qf-surface-hover);
  border: 1px solid var(--qf-border-soft);
  font-size: 12.8px;
  color: var(--qf-text);
}

/* callout：底色 + 左侧 3px 语义色，图标去圆底（细描边即可） */
.docs-prose .callout {
  gap: 12px;
  margin: 22px 0;
  padding: 14px 18px;
  border-radius: var(--docs-r-md);
  border-left-width: 3px;
  font-size: 14.2px;
  line-height: 1.75;
}

.docs-prose .callout > .ci {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: none;
}

.docs-prose .callout > .ci svg {
  width: 17px;
  height: 17px;
}

.docs-prose .callout-info { border-left-color: var(--qf-info); }
.docs-prose .callout-ok { border-left-color: var(--qf-success); }
.docs-prose .callout-warn { border-left-color: var(--qf-warning); }

/* 表格：只留横线，不给外框 —— 外框是「组件感」，大厂正文用「表格式排版」 */
.docs-prose .tbl-wrap {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--qf-border);
  border-bottom: 1px solid var(--qf-border);
  border-radius: 0;
  background: none;
  overflow-x: auto;
}

.docs-prose .tbl {
  min-width: 640px;
  font-size: 14.2px;
  border-collapse: collapse;
  background: none;
}

.docs-prose .tbl th,
.docs-prose .tbl td {
  padding: 12px 16px 12px 0;
  line-height: 1.7;
  border: 0;
  border-bottom: 1px solid var(--qf-border-soft);
  background: none;
}

.docs-prose .tbl th:last-child,
.docs-prose .tbl td:last-child {
  padding-right: 0;
}

.docs-prose .tbl thead th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--qf-text-muted);
  background: none;
  border-bottom: 1px solid var(--qf-border);
}

.docs-prose .tbl tbody tr:last-child td {
  border-bottom: 0;
}

.docs-prose .tbl tbody tr:hover {
  background: none;
}

.docs-prose .tbl th[scope="row"] {
  color: var(--qf-text);
  font-weight: 500;
}

/* 快捷键表：行式列表，只用行分隔线 */
.docs-prose .kbd-table {
  margin: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--qf-border);
  border-bottom: 1px solid var(--qf-border);
  border-radius: 0;
  overflow: hidden;
  background: none;
}

.docs-prose .kbd-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--qf-border-soft);
  font-size: 14px;
}

.docs-prose .kbd-row:last-child {
  border-bottom: 0;
}

.docs-prose .kbd-row:hover {
  background: none;
}

.docs-prose .kr-keys {
  flex-basis: auto;
  gap: 5px;
}

.docs-prose kbd {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--qf-surface-hover);
  border: 1px solid var(--qf-border);
  border-bottom-width: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--qf-text);
}

.docs-prose .kr-act {
  color: var(--qf-text-muted);
  line-height: 1.7;
}

@media (max-width: 639px) {
  .docs-prose .kbd-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }
}

/* 代码块：深色是全站唯一的「重色块」，允许保留圆角 */
.docs-prose .code-block {
  margin: 22px 0;
  border: 1px solid var(--qf-border);
  border-radius: var(--docs-r-md);
  background: var(--qf-code-bg, #0D1B24);
}

.docs-prose .code-block pre {
  padding: 18px 20px;
  overflow-x: auto;
}

.docs-prose .code-block code {
  font-size: 13.2px;
  line-height: 1.75;
}

.docs-prose .code-copy {
  right: 9px;
  top: 9px;
  padding: 4px 10px;
  border-radius: var(--docs-r-sm);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  opacity: 0;
  transition: opacity .16s ease, background .16s ease;
}

.docs-prose .code-block:hover .code-copy,
.docs-prose .code-copy:focus-visible {
  opacity: 1;
}

.docs-prose .code-copy:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.docs-prose .code-copy.is-done {
  opacity: 1;
  background: rgba(5, 150, 105, .26);
  border-color: rgba(5, 150, 105, .45);
  color: #d1fae5;
}

/* ---------------------------------------------------------------------------
   5. 页尾上下节：读完就知道下一站去哪，而不是回到导航里重新找
   --------------------------------------------------------------------------- */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--qf-border-soft);
}

.docs-pager-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--docs-r-md);
  background: none;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}

.docs-pager-item:hover {
  border-color: var(--qf-border);
  background: var(--qf-surface);
}

.docs-pager-item.is-empty {
  border: 0;
  background: none;
}

.docs-pager-item.is-next {
  text-align: right;
  align-items: flex-end;
}

.docs-pager-k {
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--qf-text-muted);
}

.docs-pager-item.is-prev .docs-pager-k::before {
  content: "← ";
}

.docs-pager-item.is-next .docs-pager-k::after {
  content: " →";
}

.docs-pager-t {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--qf-text);
  transition: color .16s ease;
}

.docs-pager-item:hover .docs-pager-t {
  color: var(--qf-primary);
}

@media (max-width: 639px) {
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-item.is-empty { display: none; }
}

/* ---------------------------------------------------------------------------
   6. 深浅色差异：绝大多数跟着变量走，只有 breadcrumb 分隔符需要微调
   --------------------------------------------------------------------------- */
[data-theme="dark"] .docs-crumb li + li::before {
  opacity: .6;
}

/* ---------------------------------------------------------------------------
   7. 本地降级搜索（docs-search.js）+ 左栏过滤 + 内容更新行
   ---------------------------------------------------------------------------
   搜索框由 docs-search.js 在运行时注入（分区页进左栏、枢纽页进 hero 之后的
   搜索带），所以这里只管样式。三种形态共用一套规则：
     .docs-search--side   分区页左栏（窄面板向右溢出，祖先没有 overflow 裁剪）
     .docs-search--band   枢纽页 / 单页版的全宽搜索带（面板限宽居中）
   面板绝对定位挂在 .docs-search 下，因此滚动时跟着输入框走；左栏本身是 sticky，
   输入框始终可及。
   --------------------------------------------------------------------------- */

.docs-search {
  position: relative;
  margin: 0 0 20px;
  font-size: 15px;
}

.docs-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  height: 38px;
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--docs-r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.docs-search-box:focus-within {
  border-color: var(--qf-primary);
  box-shadow: 0 0 0 3px var(--qf-primary-soft);
}

.docs-search-ic {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--qf-text-muted);
}

.docs-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--qf-text);
  font: inherit;
  font-size: 14px;
}

.docs-search-input::placeholder {
  color: var(--qf-text-muted);
}

/* 原生清除按钮会和右侧的 / 提示打架，统一收掉（Esc 仍可清空） */
.docs-search-input::-webkit-search-cancel-button,
.docs-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.docs-search-kbd {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--qf-border);
  border-radius: 4px;
  background: var(--qf-surface-hover);
  color: var(--qf-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.docs-search-box:focus-within .docs-search-kbd {
  opacity: 0;
}

.docs-search-spin {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--qf-border);
  border-top-color: var(--qf-primary);
  border-radius: 50%;
  animation: docs-search-spin .7s linear infinite;
}

@keyframes docs-search-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------- 结果面板 --------------------------------- */

.docs-search-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--docs-r-lg);
  box-shadow: var(--docs-pop);
  z-index: var(--qf-z-dropdown);
}

.docs-search--side .docs-search-panel {
  width: max(100%, 320px);
  max-width: min(420px, 78vw);
}

.docs-search--band .docs-search-panel {
  width: min(100%, 620px);
  left: 50%;
  transform: translateX(-50%);
}

.ds-group + .ds-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--qf-border-soft);
}

.ds-group-h {
  padding: 6px 8px;
  color: var(--qf-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--docs-r-sm);
  text-decoration: none;
  color: var(--qf-text);
}

.ds-item:hover,
.ds-item.ds-active {
  background: var(--qf-surface-hover);
}

.ds-item:focus-visible {
  outline: 2px solid var(--qf-primary);
  outline-offset: -2px;
}

.ds-item-t {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.ds-item-m {
  display: block;
  margin-top: 2px;
  color: var(--qf-text-muted);
  font-size: 11.8px;
  line-height: 1.45;
}

.ds-item-s {
  display: block;
  margin-top: 4px;
  color: var(--qf-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-word;
}

.docs-search-panel mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  font-weight: 600;
}

/* --------------------------------- 状态与出口 -------------------------------- */

.ds-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px;
  color: var(--qf-text-muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.ds-state--err strong {
  color: var(--qf-warning);
}

.ds-hot {
  padding: 2px 0 4px;
}

.ds-hot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 2px;
}

.ds-chip {
  padding: 4px 10px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: none;
  color: var(--qf-text-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ds-chip:hover {
  border-color: var(--qf-border);
  background: var(--qf-surface-hover);
  color: var(--qf-text);
}

.ds-chip:focus-visible {
  outline: 2px solid var(--qf-primary);
  outline-offset: 2px;
}

.ds-foot {
  padding: 9px 8px 3px;
  border-top: 1px solid var(--qf-border-soft);
  text-align: center;
}

.ds-foot-link {
  color: var(--qf-text-muted);
  font-size: 12.8px;
  text-decoration: none;
  transition: color .15s ease;
}

.ds-foot-link:hover {
  color: var(--qf-primary);
}

/* --------------------------------- 枢纽页搜索带 -------------------------------- */

.docs-search-band {
  padding: 4px 0 8px;
}

.docs-search-band--inline {
  padding-top: 18px;
}

.docs-search--band {
  margin: 0 auto;
  max-width: 680px;
}

.docs-search--band .docs-search-box {
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
}

.docs-search--band .docs-search-input {
  font-size: 15.5px;
}

.docs-search-band-sub {
  margin: 12px 0 0;
  color: var(--qf-text-muted);
  font-size: 12.5px;
  text-align: center;
}

.docs-search-band-sub a {
  color: var(--qf-text-muted);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--qf-border);
  transition: color .15s ease, border-color .15s ease;
}

.docs-search-band-sub a:hover {
  color: var(--qf-primary);
  border-bottom-color: var(--qf-primary-ring);
}

/* ------------------------------- 左栏过滤的空态 ------------------------------- */

.docs-side-nomatch {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px dashed var(--qf-border);
  border-radius: var(--docs-r-md);
  color: var(--qf-text-muted);
  font-size: 12.5px;
  text-align: center;
}

/* ------------------------------ 内容更新行（docs-enhance.js） ------------------------------ */

.docs-updated {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--qf-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.docs-updated::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  opacity: .5;
}

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

@media (max-width: 639px) {
  /* iOS 聚焦时缩放页面：输入框字号必须 ≥16px */
  .docs-search-input,
  .docs-search--band .docs-search-input { font-size: 16px; }
  .docs-search--side .docs-search-panel { width: 100%; max-width: 100%; }
  .docs-search-panel { max-height: 56vh; }
}

/* ---------------------------------------------------------------------------
   8. 使用指南章节页（guide.html / #guideWrap，DOM 由 guide.js 渲染）
   ---------------------------------------------------------------------------
   这一节刻意**不发明新组件**：章节 rail 直接复用左栏 .docs-side-list 的那套
   语言（左侧 1px 竖线 + 激活项 2px 竖线），目录头复用 .docs-side-h
   的小标题样式，翻页卡片复用 .docs-pager-item 的尺寸与 hover，唯一的差异化只
   关且插值到主题变量上——这样它和其它 docs 页看起来是同一套 UI。
   --------------------------------------------------------------------------- */

.docs-main .guide-layout {
  gap: 44px;
}

/* ---- 章节目录：与左栏 .docs-side 同一套（宽度也对齐 --docs-toc） ---- */

.docs-main .guide-nav {
  flex: 0 0 var(--docs-toc);
  position: sticky;
  top: var(--docs-top);
  max-height: calc(100vh - var(--docs-top) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: none;
  box-shadow: none;
  scrollbar-width: thin;
}

.docs-main .guide-nav-h {
  margin-bottom: 8px;
  padding-left: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--qf-text-muted);
}

.docs-main .guide-nav-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--qf-border-soft);
}

.docs-main .guide-nav-btn {
  align-items: center;
  gap: 8px;
  margin-left: -1px;
  padding: 6px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--docs-r-sm) var(--docs-r-sm) 0;
  font-size: 13.2px;
  line-height: 1.5;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.docs-main .guide-nav-btn:hover {
  background: var(--qf-surface-hover);
  color: var(--qf-text);
}

.docs-main .guide-nav-btn.active {
  border-left-color: var(--qf-primary);
  color: var(--qf-text);
  font-weight: 500;
}

.docs-main .gn-i {
  flex: none;
  width: 16px;
  padding: 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--qf-text-muted);
  opacity: .7;
}

.docs-main .guide-nav-btn.active .gn-i {
  color: var(--qf-text);
  opacity: 1;
}

/* ---- 章节头：与正文 h2 同一套（底部细线 + 大字重） ---- */

.docs-main .guide-chapter-head {
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom-color: var(--qf-border-soft);
}

.docs-main .guide-chapter-title {
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--qf-text);
}

/* 旧的「品牌竖线」在 h2 已改用底部细线后必须去掉，否则同页出现两套章节标识 */
.docs-main .guide-chapter-title::before {
  content: none;
}

.docs-main .guide-progress {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--qf-text-muted);
}

/* ---- 章内切换：只做一次极轻的淡入，不动位移，与其它页的观感一致 ---- */

@media (prefers-reduced-motion: no-preference) {
  .docs-main .guide-body > * {
    animation: guide-fade-in .22s ease both;
  }
}

@keyframes guide-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 底部翻页：与页尾 .docs-pager-item 同尺寸同质感 ---- */

.docs-main .guide-pager {
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
  gap: 12px;
  align-items: stretch;
}

/* 首章没有上一章、末章没有下一章：空占位收掉，回到顶部才能居中 */
.docs-main .guide-pager > span:empty {
  display: none;
}

.docs-main .guide-pager-btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 15px 18px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--docs-r-md);
  background: none;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, background .16s ease;
}

.docs-main .guide-pager-btn.is-next {
  align-items: flex-end;
  text-align: right;
}

.docs-main .guide-pager-btn:hover {
  border-color: var(--qf-border);
  background: var(--qf-surface);
}

.docs-main .guide-pager > [data-top] {
  align-self: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--qf-text-muted);
  font-size: 12.5px;
  transition: color .15s ease;
}

.docs-main .guide-pager > [data-top]:hover {
  color: var(--qf-text);
  text-decoration: none;
}

.docs-main .gp-k {
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--qf-text-muted);
}

.docs-main .gp-t {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--qf-text);
  transition: color .16s ease;
}

.docs-main .guide-pager-btn:hover .gp-t {
  color: var(--qf-primary);
}

/* ---- 窄屏：rail 退化为顶部横向 chip 条（对齐 .doc-pages 的 chip 语言） ---- */

@media (max-width: 1023px) {
  .docs-main .guide-layout {
    gap: 16px;
  }
  .docs-main .guide-nav {
    position: static;
    flex: none;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }
  .docs-main .guide-nav-h {
    flex-basis: 100%;
    margin-bottom: 0;
    padding-left: 0;
  }
  .docs-main .guide-nav-list {
    display: contents;
  }
  .docs-main .guide-nav-btn {
    width: auto;
    margin-left: 0;
    padding: 6px 12px;
    border: 1px solid var(--qf-border);
    border-radius: var(--docs-r-md);
    background: none;
    font-size: 13px;
  }
  .docs-main .guide-nav-btn:hover {
    border-color: var(--qf-primary-ring);
    color: var(--qf-primary);
  }
  .docs-main .guide-nav-btn.active {
    border-color: var(--qf-border);
    background: var(--qf-surface);
    color: var(--qf-text);
  }
  .docs-main .gn-i { display: none; }
  .docs-main .guide-pager { margin-top: 32px; }
}