/* 超级表使用手册 /docs/ — 在 /help/article.css 之上叠加的布局与组件
   (侧栏目录、本页内容、上下页、章节卡片)。视觉 token 沿用 article.css。 */

.docs-layout{max-width:1180px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:248px minmax(0,1fr); gap:44px; align-items:start;}
.docs-main{min-width:0; max-width:800px; padding-bottom:32px;}
.docs-main .art-head{padding-top:0;}

/* ===== 侧栏目录 ===== */
.docs-side{position:sticky; top:80px; max-height:calc(100vh - 96px); overflow:auto; padding:24px 0 24px; font-size:.9rem; scrollbar-width:thin;}
.docs-nav>summary{display:none;}
.docs-side .side-home{display:block; padding:6px 10px; margin-bottom:10px; border-radius:6px; color:var(--body); text-decoration:none; font-weight:600;}
.docs-side .ch{margin:0 0 16px;}
.docs-side .ch-t{display:block; padding:4px 10px 6px; font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.06em; color:var(--ink); text-decoration:none;}
.docs-side a{display:block; padding:5px 10px 5px 18px; border-radius:6px; color:var(--body); text-decoration:none; line-height:1.45;}
.docs-side a:hover{background:var(--muted); color:var(--ink);}
.docs-side a.cur{background:var(--blue-50); color:var(--blue-600); font-weight:600;}
.docs-side .ch.planned .ch-t{color:var(--gray-400); display:inline-block;}
.docs-side .soon,.ch-card .soon{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--muted); color:var(--soft); font-size:.7rem; font-weight:600; vertical-align:middle;}

/* ===== 本页内容 ===== */
.toc{background:var(--muted); border-radius:10px; padding:14px 18px; margin:0 0 8px; font-size:.92rem;}
.toc-t{font-weight:700; color:var(--ink); margin-bottom:6px; font-size:.8rem; letter-spacing:.06em;}
.toc ol{margin:0; padding-left:1.2rem;}
.toc li{margin:.2rem 0;}
.toc a{color:var(--body); text-decoration:none;}
.toc a:hover{color:var(--blue);}

/* ===== 正文补充 ===== */
.prose h2{scroll-margin-top:84px;}
.prose h3{scroll-margin-top:84px;}
.prose .quote{margin:1.2rem 0; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--gray-200); color:var(--soft);}
.prose .quote p{margin:.4rem 0;}
.prose pre.code{background:#0B1220; color:#E5E7EB; border-radius:10px; padding:14px 18px; overflow:auto; font-size:.9rem; line-height:1.6; margin:1.2rem 0;}
.prose pre.code code{background:transparent; color:inherit; padding:0; font-size:inherit;}
.prose .tbl-wrap{overflow-x:auto; margin:1.4rem 0;}
.prose .tbl{margin:0; min-width:520px;}
.prose .tbl td,.prose .tbl th{vertical-align:top; line-height:1.55;}
.prose .callout p{margin:.4rem 0;}
.prose .callout p:last-child{margin-bottom:0;}
.prose .fig img{border:2px solid var(--gray-200);}
.prose kbd{display:inline-block; padding:.05rem .4rem; border:1px solid var(--gray-200); border-bottom-width:2px; border-radius:5px; background:#fff; font-family:'Plus Jakarta Sans',ui-monospace,Menlo,monospace; font-size:.85em; color:var(--ink);}
.prose ol li::marker{color:var(--blue-600); font-weight:700;}

/* ===== 上下页 ===== */
.pn{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:40px 0 8px;}
.pn a{display:block; padding:14px 16px; border:2px solid var(--muted); border-radius:12px; text-decoration:none; color:var(--ink); transition:border-color .2s ease;}
.pn a:hover{border-color:var(--blue);}
.pn a span{display:block; font-size:.78rem; color:var(--soft); margin-bottom:2px;}
.pn a b{font-weight:700; line-height:1.4;}
.pn .pn-next{text-align:right;}

.docs-feedback{margin:18px 0 0; padding:14px 0 0; border-top:2px solid var(--muted); font-size:.92rem; color:var(--soft);}
.docs-feedback a{color:var(--blue-600);}

/* ===== 章节列表 / 首页卡片 ===== */
.ch-list{list-style:none; margin:0; padding:0;}
.ch-list li{margin:0 0 12px;}
.ch-list a{display:block; padding:16px 18px; border:2px solid var(--muted); border-radius:12px; text-decoration:none; transition:border-color .2s ease;}
.ch-list a:hover{border-color:var(--blue);}
.ch-list b{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:4px;}
.ch-list span{display:block; color:var(--soft); font-size:.92rem; line-height:1.6;}

.ch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:8px 0 28px;}
.ch-card{border:2px solid var(--muted); border-radius:12px; padding:18px 20px;}
.ch-card h2{font-family:'Plus Jakarta Sans','Noto Sans SC',sans-serif; font-weight:800; font-size:1.1rem; margin:0 0 6px; color:var(--ink);}
.ch-card h2 a{color:var(--ink); text-decoration:none;}
.ch-card h2 a:hover{color:var(--blue);}
.ch-card p{color:var(--soft); font-size:.92rem; line-height:1.6; margin:0 0 10px;}
.ch-card ol,.ch-card ul{margin:0; padding-left:1.2rem; font-size:.92rem; line-height:1.7;}
.ch-card ol a{color:var(--body); text-decoration:none;}
.ch-card ol a:hover{color:var(--blue);}
.ch-card.planned{background:#FAFAFB; border-style:dashed;}
.ch-card.planned ul{color:var(--soft); list-style:none; padding-left:0;}
.ch-card.planned li::before{content:"·"; margin-right:.4rem; color:var(--gray-400);}
.soon-note{color:var(--soft); font-size:.95rem; margin:0 0 12px;}
.planned-list{margin:0 0 20px; padding-left:1.3rem; line-height:1.9; color:var(--body);}
.docs-side .ch.planned a.ch-t{display:inline-block; color:var(--gray-400);}
.docs-side .ch.planned a.ch-t:hover{color:var(--blue); background:transparent;}

/* ===== 手机 ===== */
@media(max-width:900px){
  .docs-layout{display:block;}
  .docs-side{position:static; max-height:none; padding:16px 0 0;}
  /* 手机上目录收成一个可展开的盒子;默认收起(页内一小段脚本在窄屏时去掉 open) */
  .docs-nav{border:2px solid var(--muted); border-radius:10px; padding:0 12px;}
  .docs-nav>summary{display:block; cursor:pointer; padding:10px 2px; font-weight:700; color:var(--ink); list-style:none;}
  .docs-nav>summary::-webkit-details-marker{display:none;}
  .docs-nav>summary::after{content:"目录 ▾"; float:right; font-weight:500; color:var(--soft);}
  .docs-nav[open]>summary{border-bottom:2px solid var(--muted); margin-bottom:8px;}
  .docs-nav[open]>summary::after{content:"收起 ▴";}
  .docs-nav .side-home{margin:4px 0 6px;}
  .docs-nav>.ch:last-of-type,.docs-nav>.planned:last-child{padding-bottom:6px;}
  .pn{grid-template-columns:1fr;}
  .pn .pn-next{text-align:left;}
}