/* 阿里云架构解析栏目 —— 布局层（v1）
   叠加在 style-v3.css 之后，仅用于 /aliyun/ 下的页面。
   结构：吸顶顶端栏（栏目名 + 组件速览）+ 左侧栏（默认展开）
   + 右侧正文。无 JS；窄屏退化为顶部平铺导航。
   注意：/assets/ 有 30 天 CDN 缓存，修改请递增文件名版本。 */

/* ---------- 覆盖全站网格：本栏目用自己的文档式布局 ---------- */

body.aliyun-docs {
  display: block;
  max-width: 78em;
  padding: 0 1.6em 3em;
}

/* ---------- 顶端栏：栏目标识 + 组件速览，吸顶 ---------- */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 -1.6em;
  padding: 0 1.6em;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
}

.docs-topbar-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em 1.6em;
  padding: 0.65em 0;
}

.docs-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.docs-brand a {
  color: var(--ink);
  text-decoration: none;
}

.docs-topbar-meta {
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* 组件速览：单名字条，等宽数字、宽字距，不使用色块 */
.docs-chips {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1em;
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

.docs-chips a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.docs-chips a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- 左侧栏（宽屏默认展开并吸附） ---------- */

.docs-sidebar {
  padding: 1.6em 0 0;
}

.docs-nav-label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 1.6em 0 0.45em;
}

.docs-sidebar .docs-nav-label:first-child {
  margin-top: 0;
}

.docs-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-sidebar li {
  margin: 0 0 0.35em;
  line-height: 1.6;
}

.docs-sidebar a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.docs-sidebar a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.docs-sidebar a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* 本页目录：细线悬挂缩进，次级灰 */
.docs-nav-toc {
  border-left: 1px solid var(--line);
  padding-left: 0.9em;
  margin-left: 0.15em;
}

.docs-nav-toc a {
  font-size: 0.88em;
  color: var(--ink-faint);
}

/* ---------- 正文 ---------- */

.docs-content {
  grid-area: auto; /* 抵消 style-v3 中 main { grid-area: main } 的泄漏 */
  min-width: 0; /* 表格横滚正常工作 */
  max-width: 47em;
  padding-top: 1.8em;
}

.docs-content > h1 {
  font-size: 1.55em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.25em;
  letter-spacing: 0.01em;
}

.docs-page-sub {
  margin: 0 0 1.8em;
  padding-bottom: 1em;
  border-bottom: 2px solid var(--ink);
  font-size: 0.82em;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* 锚点跳转时为吸顶栏留出空间 */
.docs-content section[id] {
  scroll-margin-top: 4.6em;
}

/* 组件小节序号：次级灰，与标题字重分离 */
.comp-num {
  color: var(--ink-faint);
  font-weight: 400;
  margin-right: 0.25em;
}

/* 图示：说明文字小号灰 */
figure.diagram {
  margin: 1.4em 0;
}

figure.diagram img {
  display: block;
}

figure.diagram figcaption {
  margin-top: 0.55em;
  font-size: 0.82em;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* ---------- 页脚 ---------- */

body.aliyun-docs footer.site-footer {
  margin-top: 3.5em;
}

/* ---------- 宽屏：侧栏展开 + 吸附 ---------- */

@media (min-width: 56em) {
  .docs-layout {
    display: grid;
    grid-template-columns: 14.5em 1fr;
    column-gap: 3.2em;
  }

  .docs-sidebar {
    position: sticky;
    top: 3.4em;
    align-self: start;
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
    border-right: 1px solid var(--line);
    padding: 1.8em 1.3em 2em 0;
  }
}

/* ---------- 窄屏：侧栏退化为顶部平铺导航 ---------- */

@media (max-width: 56em) {
  body.aliyun-docs {
    padding: 0 1.1em 2.5em;
  }

  .docs-topbar {
    margin: 0 -1.1em;
    padding: 0 1.1em;
  }

  .docs-chips {
    margin-left: 0;
  }

  .docs-sidebar {
    padding: 0.9em 0;
    border-bottom: 1px solid var(--line);
  }

  .docs-sidebar ul.docs-nav-pages li,
  .docs-sidebar ul.docs-nav-site li {
    display: inline;
    margin: 0 1.1em 0.3em 0;
    white-space: nowrap;
  }

  .docs-nav-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.1em;
    border-left: none;
    padding-left: 0;
  }

  .docs-nav-toc li {
    margin: 0;
    white-space: nowrap;
  }

  .docs-content {
    padding-top: 0.4em;
  }

  .docs-content > h1 {
    font-size: 1.3em;
  }

  .docs-content section[id] {
    scroll-margin-top: 7em;
  }
}

/* ---------- 打印 ---------- */

@media print {
  .docs-topbar,
  .docs-sidebar {
    display: none;
  }
}