/* ============================================================
   Clomio 文档系统 —— 三栏布局 + markdown 排版  (docs.css)
   依赖 site.css 的设计 token,沿用 Clomio 小清新主题。
   ============================================================ */

.docs-shell { max-width:1380px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:248px minmax(0,1fr) 232px; gap:36px; }
@media (max-width:1140px){ .docs-shell { grid-template-columns:240px minmax(0,1fr); } .toc-col { display:none; } }
@media (max-width:880px){ .docs-shell { grid-template-columns:minmax(0,1fr); gap:0; } }

/* ---------- 顶部细化:文档专用面包屑 ---------- */
.brand .crumb { color:var(--text-faint); font-weight:500; }
.brand .crumb b { color:var(--text); font-weight:600; }
.menu-btn { display:none; }
@media (max-width:880px){ .menu-btn { display:inline-flex; } }

/* ---------- 左侧导航 ---------- */
.side-col { position:relative; }
.sidebar {
  position:sticky; top:78px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto;
  padding:6px 8px 40px 0; scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar { width:6px; } .sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.nav-group { margin-bottom:18px; }
.nav-group > .gh { display:flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:0 12px; margin-bottom:6px; }
.nav-group > .gh .dot { width:5px; height:5px; border-radius:50%; background:var(--grad-soft); }
.nav-link { display:block; padding:5px 12px; border-radius:8px; font-size:.82rem; line-height:1.5; color:var(--text-soft);
  transition:.15s var(--ease); position:relative; }
.nav-link:hover { background:var(--bg-tint); color:var(--text); }
.nav-link.active { color:var(--chip-text); background:var(--chip); font-weight:600; }
.nav-link.active::before { content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:2px; background:var(--grad-soft); }

@media (max-width:880px){
  .side-col { position:fixed; inset:0 auto 0 0; z-index:60; width:280px;
    background:var(--card); border-right:1px solid var(--border); box-shadow:var(--sh-3);
    transform:translateX(-100%); transition:transform .28s var(--ease); padding:14px; }
  .side-col.open { transform:none; }
  .sidebar { position:static; max-height:none; top:0; }
  .scrim { position:fixed; inset:0; z-index:55; background:rgba(10,20,30,.4); opacity:0; pointer-events:none; transition:.28s; }
  .scrim.show { opacity:1; pointer-events:auto; }
}

/* ---------- 中间正文 ---------- */
.content-col { min-width:0; padding:30px 0 80px; }
.doc-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; }
.doc-actions { display:flex; gap:8px; flex:none; }
.skeleton { padding:40px 0; }
.skeleton .ln { height:14px; border-radius:6px; background:var(--bg-tint); margin:14px 0; animation:blink 1.4s infinite; }
.skeleton .ln:nth-child(1){ width:50%; height:26px; } .skeleton .ln:nth-child(3){ width:80%; } .skeleton .ln:nth-child(4){ width:70%; }

/* ---------- markdown 排版 ---------- */
.md { color:var(--text); font-size:.96rem; line-height:1.75; }
.md > :first-child { margin-top:0; }
.md h1 { font-size:clamp(1.6rem,3vw,2.05rem); font-weight:800; letter-spacing:-.02em; color:var(--navy);
  line-height:1.2; margin:0 0 6px; }
[data-theme="dark"] .md h1 { color:var(--text); }
.md h2 { font-size:1.32rem; font-weight:750; letter-spacing:-.01em; color:var(--navy);
  margin:38px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--border); scroll-margin-top:84px; }
[data-theme="dark"] .md h2 { color:var(--text); }
.md h3 { font-size:1.08rem; font-weight:700; margin:26px 0 10px; color:var(--text); scroll-margin-top:84px; }
.md h4 { font-size:.98rem; font-weight:700; margin:20px 0 8px; }
.md p { margin:13px 0; }
.md a { color:var(--chip-text); font-weight:500; text-decoration:none; border-bottom:1px solid transparent; transition:.15s; }
.md a:hover { border-bottom-color:currentColor; }
.md strong { font-weight:700; color:var(--text); }
.md ul, .md ol { margin:13px 0; padding-left:22px; }
.md li { margin:6px 0; }
.md li::marker { color:var(--mint-d); }
.md hr { border:0; height:1px; background:var(--border); margin:30px 0; }

/* 内联代码 */
.md :not(pre) > code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85em;
  background:var(--chip); color:var(--chip-text); padding:2px 6px; border-radius:6px;
  border:1px solid color-mix(in srgb,var(--mint) 16%, transparent); white-space:nowrap; }

/* 代码块 —— 终端风,带复制 */
.md .codeblock { position:relative; margin:16px 0; border-radius:var(--r-md); overflow:hidden;
  background:var(--code-bg); border:1px solid rgba(125,211,252,.12); box-shadow:var(--sh-1); }
.md .codeblock .cbar { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.md .codeblock .cbar i { width:9px; height:9px; border-radius:50%; }
.md .codeblock .cbar i:nth-child(1){ background:var(--sky); } .md .codeblock .cbar i:nth-child(2){ background:var(--mint); } .md .codeblock .cbar i:nth-child(3){ background:var(--amber); }
.md .codeblock .cbar small { margin-left:auto; color:rgba(233,244,247,.42); font-size:.68rem; letter-spacing:.06em; font-family:ui-monospace,Menlo,monospace; text-transform:uppercase; }
.md .codeblock pre { margin:0; padding:14px 46px 14px 15px; overflow-x:auto; }
.md .codeblock pre code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.82rem;
  color:var(--code-text); line-height:1.7; background:none; padding:0; border:0; white-space:pre; }
.md .codeblock .copy { position:absolute; top:36px; right:9px; width:29px; height:29px; border:none; border-radius:8px;
  cursor:pointer; background:rgba(255,255,255,.08); color:#bfe7e6; display:grid; place-items:center; transition:.16s var(--ease); }
.md .codeblock .copy:hover { background:rgba(255,255,255,.18); color:#fff; }
.md .codeblock .copy.done { background:var(--grad-soft); color:#06403a; }
.md .codeblock .copy svg { width:15px; height:15px; }

/* 引用块 —— 提示/注意 */
.md blockquote { margin:16px 0; padding:13px 18px; border-radius:12px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(125,211,252,.10), transparent 70%),
    var(--bg-tint);
  border:1px solid var(--border); border-left:3px solid var(--mint); color:var(--text-soft); }
.md blockquote p { margin:6px 0; }
.md blockquote strong { color:var(--text); }
.md blockquote a { color:var(--chip-text); }

/* 表格 */
.md .table-wrap { overflow-x:auto; margin:16px 0; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-1); }
.md table { width:100%; border-collapse:collapse; font-size:.88rem; background:var(--card); }
.md thead th { background:var(--bg-tint); color:var(--navy); font-weight:700; text-align:left; padding:11px 14px; white-space:nowrap; }
[data-theme="dark"] .md thead th { color:var(--text); }
.md tbody td { padding:11px 14px; border-top:1px solid var(--border); vertical-align:top; }
.md tbody tr:hover { background:color-mix(in srgb,var(--mint) 5%, transparent); }
.md tbody td code { white-space:nowrap; }

/* 图片 */
.md img { max-width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--border); box-shadow:var(--sh-2); margin:14px 0; display:block; }

/* 上一页/下一页 */
.pager { display:flex; gap:14px; margin-top:44px; }
.pager a { flex:1; min-width:0; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--sh-1); transition:.2s var(--ease); }
.pager a:hover { transform:translateY(-2px); box-shadow:var(--sh-3); border-color:color-mix(in srgb,var(--mint) 40%,var(--border)); }
.pager .k { font-size:.72rem; color:var(--text-faint); }
.pager .t { font-weight:600; color:var(--text); margin-top:3px; }
.pager .next { text-align:right; }

/* ---------- 右侧目录 ---------- */
.toc-col { position:relative; }
.toc { position:sticky; top:78px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto; padding-top:30px; }
.toc .tt { font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; padding-left:13px; }
.toc .page-title { margin:0 13px 12px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:.82rem; font-weight:650; background:rgba(20,184,166,.06); }
.toc a { display:block; padding:5px 13px; font-size:.82rem; color:var(--text-faint); border-left:2px solid var(--border);
  transition:.15s; line-height:1.45; }
.toc a:hover { color:var(--text); }
.toc a.h3 { padding-left:24px; font-size:.79rem; }
.toc a.active { color:var(--chip-text); border-left-color:var(--mint); font-weight:600; }