/* ==========================================================
   basics/ 目录共享样式
   只给科普文章用，主站 index.html 不引用这份文件。
   改这里的规则会同时影响 13 篇文章和索引页。
   ========================================================== */

:root{
    --ink:#0e1116;
    --ink-2:#414a5a;
    --ink-3:#7c8798;
    --line:#e9ecf1;
    --bg:#ffffff;
    --bg-soft:#f6f8fb;
    --accent:#2563eb;
    --accent-soft:#eef4ff;
    --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
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;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a{color:var(--accent)}
code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    font-size:.92em;background:var(--bg-soft);border:1px solid var(--line);
    border-radius:5px;padding:1px 6px;color:var(--ink);word-break:break-all;
}
.wrap{max-width:800px;margin:0 auto;padding:0 24px}

/* ---------- 顶部 ---------- */
.topbar{border-bottom:1px solid var(--line);background:#fff}
.topbar-inner{
    max-width:1060px;margin:0 auto;padding:0 24px;height:56px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    font-size:14px;
}
.topbar a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.topbar a:hover{color:var(--accent)}

/* ---------- 双栏骨架（文章页） ---------- */
.layout{
    max-width:1060px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:220px minmax(0,1fr);
    gap:56px;align-items:start;
}

/* ---------- 左侧文章列表 ---------- */
.side{position:sticky;top:24px;padding:44px 0}
/* 侧栏只有两级：分组标题（不可点）+ 文章链接（可点）。
   分组标题不缩进、加粗、字距大，与缩进的链接错开 11px —— 靠
   缩进/字重/字距/颜色四个信号区分，而不是只靠灰度 */
.side-group{margin-bottom:24px}
.side-group:last-child{margin-bottom:0}
.side-group > div{
    font-size:12.5px;color:var(--ink-3);letter-spacing:.12em;
    font-weight:600;margin-bottom:10px;padding-left:0;
}
.side-group ul{list-style:none}
.side-group li{margin-bottom:2px}
.side-group a{
    display:block;padding:6px 11px;border-radius:8px;
    font-size:14.5px;color:var(--ink-2);text-decoration:none;
    line-height:1.6;transition:background .18s,color .18s;
}
.side-group a:hover{background:var(--bg-soft);color:var(--ink)}
.side-group a[aria-current="page"]{
    background:var(--accent-soft);color:var(--accent);font-weight:600;
}

/* ---------- 右侧正文 ---------- */
.doc{max-width:600px;padding:44px 0 8px}
.kicker{font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:14px}
h1{
    font-size:clamp(24px,3.2vw,32px);line-height:1.4;font-weight:700;
    letter-spacing:-.015em;
}
.tl{
    margin-top:20px;font-size:clamp(17px,2.1vw,20px);font-weight:600;
    color:var(--ink);line-height:1.75;letter-spacing:-.005em;
}
.doc > p{color:var(--ink-2);font-size:16px;line-height:1.95;margin-top:20px}
.doc > p:first-of-type{margin-top:22px}
/* 索引页正文沿用 .doc，但要压过 .doc > p 的字号 */
.doc > p.lede{font-size:clamp(15.5px,1.6vw,17.5px);margin-top:22px}
.doc > p.note-price{font-size:14px;margin-top:20px}
.idx h1{font-size:clamp(26px,3.6vw,36px)}
.doc .cat > p{color:var(--ink-2);font-size:15.5px;line-height:1.95;margin-top:16px}
.doc strong,.doc b{color:var(--ink);font-weight:600}
h2{
    margin-top:34px;font-size:17px;font-weight:700;line-height:1.6;
    letter-spacing:-.005em;
}
h2 + p{margin-top:12px}
.doc ul{list-style:none;margin-top:14px}
.doc ul li{
    position:relative;padding-left:20px;color:var(--ink-2);
    font-size:15.5px;line-height:1.9;margin-bottom:10px;
}
/* 每档的投入·周期·源码一行，弱化显示 */
.doc > p.meta{
    margin-top:12px;font-size:13.5px;line-height:1.8;
    color:var(--ink-3);
}
.doc ul li::before{
    content:"";position:absolute;left:0;top:10px;width:2px;height:14px;
    background:var(--accent);border-radius:2px;
}
.doc ul li:last-child{margin-bottom:0}

/* ---------- 对比表 ---------- */
.tablewrap{
    margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;
}
table{width:100%;border-collapse:collapse;font-size:14.5px}
caption{
    caption-side:bottom;text-align:left;padding:12px 16px;
    font-size:13px;color:var(--ink-3);line-height:1.8;
}
th,td{padding:13px 16px;text-align:left;vertical-align:top;line-height:1.8}
thead th{
    background:var(--bg-soft);font-weight:600;color:var(--ink);
    font-size:14px;border-bottom:1px solid var(--line);
}
tbody th{font-weight:500;color:var(--ink-3);font-size:13.5px;width:26%}
tbody tr+tr th,tbody tr+tr td{border-top:1px solid var(--line)}
tbody td{color:var(--ink-2)}
.glossary tbody th{width:22%;color:var(--ink);font-weight:600;font-size:14.5px}

/* ---------- 接着看 / 底部一行 CTA ---------- */
.next{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.next-label{
    font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px;
}
.next-links{font-size:15px;line-height:2.1;color:var(--ink-3)}
.next-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.next-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.next-links span{color:var(--line);margin:0 8px}
.ask{margin-top:28px;padding-bottom:8px;font-size:15.5px}
.ask a{
    color:var(--ink-2);text-decoration:none;
    border-bottom:1px solid rgba(37,99,235,.3);transition:color .2s,border-color .2s;
}
.ask a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- 索引页 ---------- */
.head{padding:clamp(44px,6vw,72px) 0 0}
.lede{
    margin-top:22px;font-size:clamp(15.5px,1.6vw,17.5px);
    color:var(--ink-2);line-height:1.95;
}
.lede strong{color:var(--ink);font-weight:600}
.note-price{
    margin-top:20px;font-size:14px;color:var(--ink-3);
    padding-left:14px;border-left:2px solid var(--line);line-height:1.85;
}
.pick{
    margin-top:36px;padding:22px 26px;background:var(--bg-soft);
    border:1px solid var(--line);border-radius:var(--radius);
}
.pick-label{font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.pick ol{list-style:none;counter-reset:pick}
.pick li{counter-increment:pick;font-size:15.5px;line-height:2}
.pick li::before{
    content:counter(pick,decimal-leading-zero);color:var(--accent);
    font-size:12.5px;font-weight:600;margin-right:10px;
    font-variant-numeric:tabular-nums;
}
.pick a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.pick a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.cat{margin-top:clamp(44px,6vw,64px)}
.cat > h2{
    margin-top:0;font-size:clamp(19px,2.4vw,23px);font-weight:700;
    letter-spacing:-.01em;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.cat-list{list-style:none;margin-top:6px}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list li:last-child{border-bottom:none}
.cat-list a{
    display:block;padding:16px 4px;text-decoration:none;
    transition:padding-left .18s;
}
.cat-list a:hover{padding-left:12px}
.cat-list b{
    display:block;font-size:16.5px;font-weight:600;color:var(--ink);
    line-height:1.6;letter-spacing:-.005em;
}
.cat-list a:hover b{color:var(--accent)}
.cat-list span{display:block;margin-top:5px;font-size:14px;color:var(--ink-3);line-height:1.75}

/* ---------- 收尾 CTA（仅索引页） ---------- */
.end{
    margin-top:clamp(52px,6vw,76px);padding:clamp(38px,5vw,52px) clamp(28px,5vw,48px);
    background:#0b0e13;color:#fff;border-radius:20px;position:relative;overflow:hidden;
}
.end::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(620px 320px at 82% -10%, rgba(37,99,235,.30), transparent 66%);
}
.end-inner{position:relative}
.end h2{
    margin-top:0;font-size:clamp(19px,2.6vw,26px);font-weight:700;
    line-height:1.5;letter-spacing:-.01em;
}
.end p{margin-top:16px;color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.95;max-width:560px}
.end-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:13px 26px;border-radius:999px;font-size:15px;text-decoration:none;
    border:1px solid transparent;white-space:nowrap;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.btn-light{background:#fff;color:#0b0e13}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(255,255,255,.4)}
.btn-outline{border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px)}

/* ---------- 页脚 ---------- */
.foot{
    margin-top:56px;padding:28px 0 52px;border-top:1px solid var(--line);
    font-size:13.5px;color:var(--ink-3);
}
.foot .layout{padding-bottom:0}
.foot-nav{grid-column:2}
.foot a{color:var(--ink-3);text-decoration:none}
.foot a:hover{color:var(--accent)}

/* ---------- 手机：列表挪到正文后面 ---------- */
@media (max-width:900px){
    .layout{grid-template-columns:minmax(0,1fr);gap:0}
    .doc{order:1;max-width:none;padding-top:36px}
    .side{order:2;position:static;padding:0 0 8px;margin-top:44px}
    /* 分隔线原本挂在 .side-title 上，该元素已删；改挂到第一个分组标题 */
    .side-group:first-child > div{
        margin-top:0;padding-top:30px;border-top:1px solid var(--line);
    }
    .foot-nav{grid-column:1/-1}
}
@media (max-width:640px){
    .wrap{padding:0 20px}
    .topbar-inner{padding:0 20px}
    .layout{padding:0 20px}
    tbody th{width:32%}
    th,td{padding:11px 12px;font-size:14px}
    .end-actions .btn{flex:1 1 auto}
}