/* tech.css —— 技术文档页布局(只加在 /tech/ 下,不碰产品页)
   颜色/字体全部沿用 /assets/style.css 的变量,明暗色随系统。 */

body.docpage main.doc { max-width: 1180px; }
body.docpage main.doc > h1 { font-size: 2rem; }
/* 正文是 1180px,页眉页脚跟着放宽,否则导航收在 780px 里、跟标题错开一截 */
body.docpage header nav,
body.docpage footer { max-width: 1180px; }

/* 「从这里开始」路线(文档首页) */
.startpath { margin: 30px 0 0; }
.startpath h2 { font-size: 1.2rem; margin: 0 0 6px; }
.startpath ol { list-style: none; padding: 0; margin: 16px 0 0; }
.startpath li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px; gap: 4px 12px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border);
}
.startpath li:last-child { border-bottom: 1px solid var(--border); }
.startpath .num {
  grid-area: 1 / 1 / 3 / 2; align-self: start;
  color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 999px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.startpath a { grid-area: 1 / 2 / 2 / 3; font-weight: 600; }
.startpath .why { grid-area: 2 / 2 / 3 / 3; color: var(--muted); font-size: 0.88rem; }
.startpath .col { grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
/* 「一条主线」轻量路线段(文档首页):五步各直链一个栏目,顶边框与栏目卡片区区分 */
.roadmap { margin: 26px 0 0; }
.roadmap h2 { font-size: 1.2rem; margin: 0 0 14px; }
.roadmap ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.roadmap li { border-top: 2px solid var(--border); padding-top: 10px; }
.roadmap a { text-decoration: none; color: inherit; display: block; }
.roadmap .step { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.roadmap .lb { display: block; font-weight: 600; margin: 3px 0; }
.roadmap .why { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.roadmap a:hover .lb { color: var(--accent); }
.roadmap li:hover { border-top-color: var(--accent); }

.colindex { margin-top: 40px; }
.colindex > h2 { font-size: 1.2rem; margin: 0; }

/* 栏目卡片网格(文档首页) */
.colcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.colcards .colcard { margin: 0; }
.colcards .colcard a { color: inherit; text-decoration: none; display: block; }
.colcards .colcard a:hover h2 { color: var(--accent); }
.colcards .colcard h2 { margin: 0 0 4px; font-size: 1.16rem; color: var(--accent); }
.colcards .colcard p { margin: 0.35em 0 0; }
.colcards .colen { font-size: 0.84rem; color: var(--muted); }
.colcards .soon { opacity: 0.6; }
.colcards .soon h2 { color: var(--muted); }

/* 栏目页列表(按章分组:每组一个 .chgroup,列表样式不变) */
.chgroup { margin-top: 38px; }
.chgroup h2 { font-size: 1.2rem; margin: 0; }
.chgroup.empty h2 { color: var(--muted); }
.chgroup.empty p.small { color: var(--muted); margin: 10px 0 0; }
.artlist { list-style: none; padding: 0; margin: 26px 0 0; }
.artlist li { border-top: 1px solid var(--border); padding: 16px 0; margin: 0; }
.artlist li:last-child { border-bottom: 1px solid var(--border); }
.artlist a { font-size: 1.06rem; font-weight: 600; }
.artlist .meta { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.artlist .small { display: block; margin-top: 4px; }

/* 文章页 */
.breadcrumb { color: var(--muted); font-size: 0.9rem; margin: 0 0 10px; }
.breadcrumb .sep { margin: 0 8px; color: var(--border); }
.art-title { font-size: 2rem; line-height: 1.25; margin: 0 0 10px; }
.art-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
.art-meta .dot { margin: 0 8px; }
.art-meta .src { word-break: break-all; }
.lede { color: var(--muted); font-size: 1.02rem; border-left: 3px solid var(--border); padding-left: 14px; margin: 0 0 28px; }

.docgrid { display: grid; grid-template-columns: 214px minmax(0, 1fr) 196px; gap: 34px; align-items: start; }
.side { position: sticky; top: 16px; align-self: start; font-size: 0.9rem; }
.sideh { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.sideh:first-child { margin-top: 0; }
.tree { list-style: none; padding: 0; margin: 0; }
.tree li { margin: 0 0 7px; line-height: 1.5; }
.tree a { color: var(--muted); }
.tree a:hover { color: var(--accent); }
.tree li.cur a { color: var(--fg); font-weight: 600; }
.tree.dim a { color: var(--muted); opacity: 0.85; }
.toc-side ul { list-style: none; padding: 0; margin: 0; }
.toc-side ul ul { padding-left: 12px; }
.toc-side li { margin: 0 0 6px; line-height: 1.5; }
.toc-side a { color: var(--muted); font-size: 0.86rem; }
.toc-side a:hover { color: var(--accent); }

.doc-content { min-width: 0; }
.doc-content h2 { font-size: 1.32rem; margin: 2.2em 0 0.6em; }
.doc-content h2:first-child { margin-top: 0; }
.doc-content h3 { font-size: 1.1rem; margin: 1.8em 0 0.5em; }
.doc-content p { margin: 0.9em 0; }
.doc-content ul, .doc-content ol { padding-left: 1.3em; }
.doc-content li { margin: 0.4em 0; }
.doc-content img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; margin: 1.2em 0; }
.doc-content pre {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; font: 0.86rem/1.65 var(--mono, ui-monospace, Consolas, monospace);
  margin: 1.2em 0;
}
.doc-content code { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 0.9em; }
.doc-content pre code { font-size: inherit; }
.doc-content p code, .doc-content li code {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.doc-content table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.95rem; display: block; overflow-x: auto; }
.doc-content th, .doc-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc-content blockquote { margin: 1.2em 0; padding-left: 14px; border-left: 3px solid var(--border); color: var(--muted); }

.taglist { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.taglist .tag { border: 1px solid var(--border); border-radius: 999px; padding: 2px 12px; font-size: 0.84rem; color: var(--muted); }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 0; border-top: 1px solid var(--border); padding-top: 18px; }
.prevnext .pn { color: var(--fg); text-decoration: none; line-height: 1.45; }
.prevnext .pn:hover { color: var(--accent); }
.prevnext .pn .small { display: block; color: var(--muted); }
.prevnext .empty { visibility: hidden; }

/* 语言 chip 未翻译时的置灰态 */
header nav .lang.off { color: var(--muted); opacity: 0.55; border-style: dashed; cursor: default; }

@media (max-width: 1100px) {
  .roadmap ol { grid-template-columns: 1fr 1fr; }
  .docgrid { grid-template-columns: minmax(0, 1fr); }
  /* 单列时正文排最前:不然读者得先翻过整栏文章列表才看见正文 */
  .doc-content { order: 1; }
  .docgrid .side { position: static; order: 2; }
  .docgrid .toc-side { order: 3; }
  .docgrid .side:not(.toc-side) ul.tree { columns: 2; column-gap: 24px; }
}
@media (max-width: 700px) {
  body.docpage main.doc { padding: 28px 16px 48px; }
  .art-title { font-size: 1.55rem; }
  .roadmap ol { grid-template-columns: 1fr; }
  .colcards { grid-template-columns: 1fr; }
  .prevnext { grid-template-columns: 1fr; }
  .docgrid .side:not(.toc-side) ul.tree { columns: 1; }
}