/* ============================================================
   shuyan/plugin/css/docs.css
   书砚插件开发文档 —— 全部文档页共享样式（6 个页面统一引用）
   布局：顶部栏 + 左侧跨页导航 + 中间正文 + 右侧本页目录
   ============================================================ */

/* ---------- 设计令牌（与产品首页同一蓝色品牌体系） ---------- */
:root{
  --brand:#4A90E2;
  --brand-deep:#2F6FC2;
  --brand-ink:#1B3A5C;
  --brand-soft:#EBF3FD;
  --ink:#242b36;
  --ink-2:#4d5666;
  --ink-3:#8a93a2;
  --paper:#ffffff;
  --bg:#f6f8fb;
  --sidebar-bg:#fbfcfe;
  --line:#e4eaf2;
  --code-bg:#2d2d2d;              /* 与 prism-tomorrow 一致 */
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --danger-border:#fecaca;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --warn-border:#fde68a;
  --radius:10px;
  --nav-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:var(--brand-deep)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace}

/* ---------- 顶部栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 22px;gap:16px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--brand-ink)}
.brand .logo{width:30px;height:30px;border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 3px 8px rgba(74,144,226,.28)}
.brand .logo img{width:100%;height:100%;object-fit:cover;display:block}
.topbar .divider{width:1px;height:22px;background:var(--line)}
.topbar .doc-name{font-size:14.5px;color:var(--ink-2);font-weight:600}
.topbar .spacer{flex:1}
.ver{font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:#fff}
.btn-home{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand-deep);
  background:var(--brand-soft);padding:7px 14px;border-radius:9px;transition:.2s}
.btn-home:hover{background:#dde9fb}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:36px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);margin:2px 0;border-radius:2px}

/* ---------- 三栏布局 ---------- */
.layout{display:grid;grid-template-columns:262px minmax(0,1fr) 210px;max-width:1440px;margin:0 auto}

/* 左侧：跨页导航（每个大点一个页面，由 docs.js 注入） */
.sidebar{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;
  background:var(--sidebar-bg);border-right:1px solid var(--line);
  padding:26px 14px 40px;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#d3dce8;border-radius:3px}
.side-title{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;padding:0 12px;margin-bottom:10px;
}
.side-link{
  display:block;padding:8px 12px;margin-bottom:2px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.45;
  border-left:2px solid transparent;transition:.15s;
}
.side-link:hover{background:var(--brand-soft);color:var(--brand-deep)}
.side-link.active{background:var(--brand-soft);color:var(--brand-deep);border-left-color:var(--brand)}
.side-order{
  display:inline-block;width:20px;color:var(--ink-3);font-size:12px;font-weight:700;
  font-family:ui-monospace,Consolas,monospace;
}
.side-link.active .side-order{color:var(--brand)}

/* ---------- 中间正文 ---------- */
.content{min-width:0;padding:40px 52px 120px;background:var(--paper);border-right:1px solid var(--line)}
.doc{max-width:800px;margin:0 auto}
.crumb{font-size:12.5px;color:var(--ink-3);margin-bottom:18px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand-deep)}
.doc h1{font-size:32px;font-weight:800;color:var(--brand-ink);line-height:1.3;margin-bottom:14px;letter-spacing:.01em}
.doc h2{
  font-size:23px;font-weight:800;color:var(--brand-ink);margin:54px 0 16px;
  padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 12px);
}
.doc h2:first-of-type{border-top:none;padding-top:10px}
.doc h3{font-size:17.5px;font-weight:700;color:var(--ink);margin:30px 0 10px;scroll-margin-top:calc(var(--nav-h) + 12px)}
.doc h4{font-size:15px;font-weight:700;color:var(--ink-2);margin:22px 0 8px;scroll-margin-top:calc(var(--nav-h) + 12px)}
.doc p{margin:12px 0;color:var(--ink-2)}
.doc ul,.doc ol{margin:12px 0 12px 22px;color:var(--ink-2)}
.doc li{margin:6px 0}
.doc strong{color:var(--ink)}
.lead{font-size:16.5px;color:var(--ink-2);margin-bottom:8px}

/* 行内代码 */
.doc :not(pre)>code{background:#eef2f8;color:#b03a48;padding:2px 7px;border-radius:5px;font-size:12.8px}

/* 代码块 */
pre{position:relative;margin:16px 0;border-radius:var(--radius) !important;background:var(--code-bg) !important;
  padding:18px 20px !important;font-size:13.2px;line-height:1.75;overflow-x:auto;
  box-shadow:0 4px 14px rgba(27,58,92,.12)}
pre code{font-size:13.2px;background:none !important;padding:0 !important;color:inherit}
.code-title{
  display:flex;align-items:center;gap:8px;background:#252526;color:#9aa4b2;font-size:12px;
  padding:8px 16px;border-radius:var(--radius) var(--radius) 0 0;margin-bottom:0;
  border-bottom:1px solid #3a3a3a;font-family:ui-monospace,Consolas,monospace;
}
.code-title + pre{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.copy-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(255,255,255,.12);color:#e6e6e6;border:1px solid rgba(255,255,255,.16);
  font-size:12px;padding:4px 11px;border-radius:6px;cursor:pointer;transition:.15s;opacity:0;
}
pre:hover .copy-btn{opacity:1}
.copy-btn:hover{background:rgba(255,255,255,.22)}
.copy-btn.ok{background:#2f7d3a;border-color:#2f7d3a;opacity:1}

/* 表格 */
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
th{background:var(--brand-soft);color:var(--brand-ink);text-align:left;font-weight:700;padding:10px 14px;white-space:nowrap}
td{padding:10px 14px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top}
tr:nth-child(even) td{background:#fafcff}
td code{font-size:12.3px;background:#eef2f8;color:#b03a48;padding:1.5px 6px;border-radius:5px;white-space:nowrap}
td:first-child code{white-space:normal}

/* 提示块 */
.tip{display:flex;gap:12px;padding:14px 18px;border-radius:var(--radius);margin:18px 0;font-size:13.8px;line-height:1.7;border:1px solid}
.tip svg{width:19px;height:19px;flex-shrink:0;margin-top:2px}
.tip-info{background:var(--brand-soft);border-color:#c9ddf7;color:#274b73}
.tip-info svg{color:var(--brand-deep)}
.tip-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.tip-danger{background:var(--danger-bg);border-color:var(--danger-border);color:#991b1b}
.tip-danger svg{color:var(--danger)}
.tip b{color:inherit}

/* 文件树 */
.tree{background:#0f172a;color:#dbe4f0;border-radius:var(--radius);padding:16px 20px;margin:16px 0;
  font-family:ui-monospace,Consolas,monospace;font-size:13.2px;line-height:1.9;overflow-x:auto;white-space:pre}
.tree .dir{color:#7fb4f5}.tree .cmt{color:#64748b}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:0 18px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;display:flex;justify-content:space-between;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--brand)}
.faq details[open] summary::after{content:"×"}
.faq .a{padding:0 0 15px;font-size:14px;color:var(--ink-2)}
.faq .a p{margin:8px 0}

/* 底部翻页（上一页 / 下一页） */
.doc-foot{margin-top:70px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.doc-foot a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--brand-deep);background:var(--brand-soft);
  padding:10px 18px;border-radius:9px;transition:.2s;
}
.doc-foot a:hover{background:#dde9fb}
.doc-foot .foot-dir{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.doc-foot .foot-next{text-align:right}

/* 右侧：本页目录（JS 自动收集当前页 h2/h3） */
.toc{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;padding:32px 18px 40px 6px}
.toc h5{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;padding-left:10px}
.toc a{display:block;padding:4px 10px;font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--line);transition:.15s;line-height:1.5}
.toc a:hover{color:var(--brand-deep)}
.toc a.active{color:var(--brand-deep);border-left-color:var(--brand);font-weight:600}
.toc a.lv3{padding-left:22px;font-size:12px}
.toc .toc-empty{padding:4px 10px;font-size:12.5px;color:var(--ink-3)}

/* 移动端遮罩 */
.mask{display:none;position:fixed;inset:0;background:rgba(15,30,50,.45);z-index:55}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
  .layout{grid-template-columns:240px minmax(0,1fr)}
  .toc{display:none}
  .content{border-right:none}
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:var(--nav-h);left:0;bottom:0;width:280px;z-index:56;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 8px 30px rgba(0,0,0,.2);
  }
  .sidebar.open{transform:translateX(0)}
  .mask.show{display:block}
  .menu-btn{display:flex}
  .content{padding:28px 20px 90px}
  .doc h1{font-size:25px}
  .doc h2{font-size:20px}
  .topbar .doc-name{display:none}
  .topbar .divider{display:none}
  .ver{display:none}
}