/* =====================================================================
   文章页共用设计系统（2026-10-08，Stitch「Autonomous Foundry」设计）
   —— 保持原有 class 名不变（避免改页面正文结构），用新视觉覆盖：
      暖调暗色（默认）/ 浅色双主题 + Plus Jakarta Sans + JetBrains Mono
   ===================================================================== */

/* ---- 旧变量名 → 新设计 token（页面原有样式块因此整体升新皮肤） ---- */
:root {
  --accent: #C96442;
  --accent-ink: #ffb59d;
  --accent-soft: #2B201B;
  --accent-line: #4A3226;
  --text: #F5F5F4;
  --text-2: #dcc1b8;
  --muted: #A8A29E;
  --faint: #78716C;
  --border: #2E2A27;
  --bg: #141312;
  --card: #1C1917;
  --surface-2: #211F1E;
  --border-strong: #3B3937;
  --nav-bg: rgba(12, 10, 9, .82);
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-hover: 0 14px 28px -12px rgba(0, 0, 0, .65);
  --radius: 12px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --accent: #C96442;
  --accent-ink: #9A4A2E;
  --accent-soft: #FBF1EC;
  --accent-line: #F0D9CE;
  --text: #1C1917;
  --text-2: #57534E;
  --muted: #78716C;
  --faint: #A8A29E;
  --border: #E7E5E4;
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --surface-2: #F6F3F0;
  --border-strong: #D6D3D1;
  --nav-bg: rgba(250, 250, 248, .86);
  --shadow: 0 1px 2px rgba(28, 25, 23, .05);
  --shadow-hover: 0 14px 28px -12px rgba(28, 25, 23, .18);
  color-scheme: light;
}

/* ---- 字体 ---- */
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.meta, .kicker, .badge, .st, .b-free, .b-beta, .b-buy, .b-soon, .st-sell, .st-ask, .st-int,
.tag-sell, .tag-ask, .tag-int, aside.toc .grp, .foot-meta, .n-step, code, .pay-steps b {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.logo { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: -.02em; }
.logo i { color: var(--accent); }

/* ---- 排版 ---- */
h1 { font-weight: 800; letter-spacing: -.03em; }
h2 { font-weight: 700; letter-spacing: -.02em; position: relative; padding-left: 14px; }
h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  border-radius: 2px; background: var(--accent);
}
h3 { font-weight: 600; letter-spacing: -.01em; }
p { color: var(--text-2); }
a { color: var(--accent-ink); }

/* ---- 导航（暗色玻璃） ---- */
.nav { background: var(--nav-bg); }
.nav-links a { font-weight: 500; }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-2); cursor: pointer; padding: 0; flex: 0 0 auto;
  transition: color .15s, border-color .15s;
}
.theme-btn:hover { color: var(--accent-ink); border-color: var(--faint); }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }

/* ---- 胶囊标签（kicker / badge / 状态） ---- */
.kicker {
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.badge { color: var(--accent-ink); }
.b-free { background: rgba(16, 185, 129, .14); color: #4edea3; border: 1px solid rgba(16, 185, 129, .35); }
.b-beta, .st-ask, .tag-ask { background: rgba(245, 158, 11, .12); color: #F59E0B; border: 1px solid rgba(245, 158, 11, .32); }
.b-soon, .st-int, .tag-int { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.st-sell, .tag-sell, .b-buy { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
:root[data-theme="light"] .b-free { background: #ECFDF5; color: #047857; border-color: #D1FAE5; }
:root[data-theme="light"] .b-beta, :root[data-theme="light"] .st-ask, :root[data-theme="light"] .tag-ask { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
:root[data-theme="light"] .b-soon, :root[data-theme="light"] .st-int, :root[data-theme="light"] .tag-int { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }

/* ---- 提示条（note / warn / blockquote） ---- */
.note { border-radius: 12px; }
.warn { background: rgba(245, 158, 11, .09); border: 1px solid rgba(245, 158, 11, .32); color: #E4B15E; border-radius: 12px; }
:root[data-theme="light"] .warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
blockquote { border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 12px 12px 0; }

/* ---- 表格（mono 数字、工程师感） ---- */
table { font-size: 14px; }
th {
  background: var(--surface-2);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
td { border-color: var(--border); color: var(--text-2); }
:root[data-theme="dark"] table td { border-color: #262220; }
th, td { border-color: var(--border); }

/* ---- 卡片（shot / diagram / cta） ---- */
figure.shot, .diagram, .frame, .card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.cta {
  background: linear-gradient(115deg, #231F1B, #141312 55%);
  border: 1px solid var(--accent-line); border-radius: 14px;
}
:root[data-theme="light"] .cta { background: linear-gradient(115deg, #2B2320, #1C1917 55%); }
.btn { border-radius: 10px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px rgba(201, 100, 66, .6); }
.btn-ghost { background: var(--card); color: var(--text-2); border: 1px solid var(--border); border-radius: 10px; }

/* ---- 侧栏目录 ---- */
aside.toc a { border-radius: 9px; }
aside.toc a.on { background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--accent); }
aside.toc a:hover { background: var(--accent-soft); color: var(--accent-ink); }
:root[data-theme="dark"] aside.toc a { color: var(--text-2); }
:root[data-theme="dark"] aside.toc a.sub { color: var(--muted); }

/* ---- 页脚 ---- */
footer { border-top: 1px solid var(--border); }
.foot-links a { color: var(--text-2); }
.foot-links a:hover { color: var(--accent-ink); }

/* ---- 文章内 SVG 流程图：深色下重配色（覆盖内联 fill/stroke） ---- */
:root[data-theme="dark"] [fill="#FFFFFF"] { fill: #23201C; }
:root[data-theme="dark"] [fill="#fff"] { fill: #23201C; }
:root[data-theme="dark"] [fill="#F6F3F0"] { fill: #272320; }
:root[data-theme="dark"] [fill="#FCF2F0"] { fill: #2C1F1B; }
:root[data-theme="dark"] [fill="#F0F7F2"] { fill: #17251E; }
:root[data-theme="dark"] [fill="#FBF1EC"] { fill: #2C211B; }
:root[data-theme="dark"] [fill="#F0F5F2"] { fill: #1C2723; }
:root[data-theme="dark"] [fill="#F1E4D8"] { fill: #2A221B; }
:root[data-theme="dark"] [fill="#F3DDD3"] { fill: #2E211C; }
:root[data-theme="dark"] [fill="#F6E7DC"] { fill: #2D221C; }
:root[data-theme="dark"] [fill="#DFEDE6"] { fill: #1B2A22; }
:root[data-theme="dark"] [fill="#FAF6F1"] { fill: #221E1A; }
:root[data-theme="dark"] [fill="#1C1917"] { fill: #ECE9E6; }
:root[data-theme="dark"] [fill="#111827"] { fill: #F2F0ED; }
:root[data-theme="dark"] [fill="#44403C"] { fill: #C9C3BC; }
:root[data-theme="dark"] [fill="#78716C"] { fill: #A09890; }
:root[data-theme="dark"] [fill="#8C837C"] { fill: #A09890; }
:root[data-theme="dark"] [fill="#A8A29E"] { fill: #8B847C; }
:root[data-theme="dark"] [fill="#B5AEA8"] { fill: #7E7770; }
:root[data-theme="dark"] [fill="#6B5B54"] { fill: #A89F96; }
:root[data-theme="dark"] [fill="#4C5B52"] { fill: #93A79B; }
:root[data-theme="dark"] [fill="#8A5A3B"] { fill: #CE9163; }
:root[data-theme="dark"] [fill="#9A4A2E"] { fill: #E5986F; }
:root[data-theme="dark"] [fill="#A33B26"] { fill: #E4735C; }
:root[data-theme="dark"] [fill="#2F6B4F"] { fill: #63C79A; }
:root[data-theme="dark"] [fill="#5E9377"] { fill: #7CC7A0; }
:root[data-theme="dark"] [fill="#7BAA8C"] { fill: #8FCCA9; }
:root[data-theme="dark"] [fill="#B06A4F"] { fill: #D98A6B; }
:root[data-theme="dark"] [fill="#D97B62"] { fill: #E8977F; }
:root[data-theme="dark"] [fill="#E8A08E"] { fill: #F0AC9B; }
:root[data-theme="dark"] [fill="#6B4A3A"] { fill: #D9A98C; }
:root[data-theme="dark"] [stroke="#E7E5E4"] { stroke: #3A3531; }
:root[data-theme="dark"] [stroke="#F0D9CE"] { stroke: #493226; }
:root[data-theme="dark"] [stroke="#F3D5CF"] { stroke: #4A2E26; }
:root[data-theme="dark"] [stroke="#CFE5D6"] { stroke: #2E4A3A; }
:root[data-theme="dark"] [stroke="#A9C4B2"] { stroke: #3E5C4A; }
:root[data-theme="dark"] [stroke="#D8E7DF"] { stroke: #2C4036; }
:root[data-theme="dark"] [stroke="#E4D5C8"] { stroke: #413528; }
:root[data-theme="dark"] [stroke="#EFD8CB"] { stroke: #45322A; }
:root[data-theme="dark"] [stroke="#EFE2D6"] { stroke: #3B322A; }
:root[data-theme="dark"] [stroke="#EDE9E5"] { stroke: #3A3531; }

/* ---- 布局补丁（原深色层移除后补回） ---- */
.nav-in { gap: 10px; }
.nav-links { margin-left: auto; }
@media (max-width: 640px) { .nav-in { gap: 8px; } .theme-btn { width: 30px; height: 30px; } }

/* ---- letters-design 专用 ---- */
.topbar { background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.topbar .cta { background: var(--accent); color: #fff; }
.hint a { border-bottom: 1px solid var(--accent-line); color: var(--accent-ink); }
#design.zoomed ~ * { }

/* =====================================================================
   阅读页设计语言 v2（Stitch「技术文章阅读页」设计稿，2026-10-08）
   —— 编号章节 / 顶栏面包屑 / 侧栏 CTA 卡 / 笔记卡强化
   ===================================================================== */

/* ---- 编号章节（01. 02. …，替代原来的左侧竖条） ---- */
article.post { counter-reset: secnum; }
h2 {
  counter-increment: secnum;
  position: static; padding-left: 0;
}
h2::before {
  content: counter(secnum, decimal-leading-zero) ".";
  position: static; inset: auto; width: auto; height: auto;
  border-radius: 0; background: none;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: .8em; font-weight: 700; letter-spacing: 0;
  margin-right: .5em;
}

/* ---- 顶栏面包屑（导航下的一条 mono 细栏） ---- */
.crumb-bar { border-bottom: 1px solid var(--border); background: rgba(20,19,18,.65); }
.crumb-in {
  max-width: 1040px; margin: 0 auto; padding: 9px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.crumb-path {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--muted); letter-spacing: .01em;
}
.crumb-path b { color: var(--text-2); font-weight: 600; }
.crumb-path i { font-style: normal; opacity: .38; margin: 0 7px; }
.crumb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.crumb-chips span {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .02em;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 10px;
}
:root[data-theme="light"] .crumb-bar { background: rgba(250,250,248,.75); }

/* ---- 侧栏 CTA 卡（工具包入口） ---- */
.side-cta {
  margin-top: 18px; padding: 15px; border: 1px solid var(--border);
  border-radius: 13px; background: var(--card);
}
.side-cta b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 6px; }
.side-cta p { margin: 0 0 11px; font-size: 12.3px; color: var(--muted); line-height: 1.65; }
.side-cta a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 9px; padding: 6px 12px;
  transition: border-color .15s, color .15s;
}
.side-cta a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- 目录编号（顶层项 00/01/02…，子项不编号） ---- */
aside.toc { counter-reset: tocnum; }
aside.toc a.toc-link:not(.sub)::before {
  counter-increment: tocnum;
  content: counter(tocnum, decimal-leading-zero) ".";
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 10.5px; color: var(--faint); margin-right: 7px; letter-spacing: 0;
}
aside.toc a.toc-link.on::before { color: var(--accent); }

/* ---- 导语/笔记卡：左侧强调边（TL;DR 观感） ---- */
.note { border-left: 3px solid var(--accent); }

/* ---- meta 行 mono 化（设计稿的等宽小字） ---- */
.meta { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12.3px; letter-spacing: .01em; }

/* ---- 标题加粗（与设计稿对齐） ---- */
h1 { font-weight: 800; }

@media (max-width: 1020px) {
  h2::before { margin-right: .4em; }
}

/* =====================================================================
   侧栏结构修复（2026-10-08）：目录区内部可滚、CTA 常驻底部
   问题：目录 + CTA 卡总高超出视口，CTA 被挤出且难以滚达
   ===================================================================== */
aside.toc {
  display: flex; flex-direction: column;
  overflow: hidden;                     /* 由 .toc-nav 承担滚动 */
  max-height: calc(100vh - 100px);
  padding-bottom: 14px;
}
nav.toc-nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
nav.toc-nav::-webkit-scrollbar { width: 5px; }
nav.toc-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
nav.toc-nav::-webkit-scrollbar-thumb:hover { background: var(--faint); }
nav.toc-nav::-webkit-scrollbar-track { background: transparent; }
.side-cta { flex: 0 0 auto; margin-top: 14px; }

/* 移动端抽屉同样生效（覆盖页面 media 查询里的 display:block） */
@media (max-width: 1020px) {
  aside.toc {
    display: flex; flex-direction: column;
    max-height: none; overflow: hidden;
    padding-bottom: 26px;
  }
  nav.toc-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .side-cta { flex: 0 0 auto; }
}

/* =====================================================================
   侧栏可读性优化 v2（2026-10-08）：紧凑 + 加宽 + 高亮项自动入视
   问题：长目录（如金鱼 20 项）在 820px 视口下 9 项被藏在滚动区外
   ===================================================================== */
@media (min-width: 1021px) {
  aside.toc { width: 226px; flex: 0 0 226px; padding-top: 38px; }
}
aside.toc { max-height: calc(100vh - 86px); }
nav.toc-nav a.toc-link { font-size: 12.9px; line-height: 1.42; padding: 3px 10px; margin: 0; }
nav.toc-nav a.toc-link.sub { font-size: 12.2px; padding-top: 2px; padding-bottom: 2px; }
aside.toc .grp { margin-bottom: 5px; }
.side-cta { margin-top: 11px; padding: 12px 13px; }
.side-cta b { font-size: 12.8px; margin-bottom: 4px; }
.side-cta p { font-size: 11.8px; margin: 0 0 8px; line-height: 1.55; }
.side-cta a { font-size: 12px; padding: 6px 11px; }