/* ============================================================================
 * main.css — harryliu.wiki 设计系统
 *
 * 这个站的定位是「工程笔记」，不是产品落地页。所有取舍都服务于一件事：
 * 让人愿意读完一篇长文（目标停留 10 分钟）。所以：
 *   - 没有滚动动画、渐变按钮、玻璃拟态。那是「这是推销页」的信号，
 *     读者看到会切进扫读模式，恰好和目标相反。
 *   - 暗色优先但跟随系统，可手动覆盖（存 localStorage）。
 *   - 正文无衬线（CJK 衬线在各平台渲染差异太大，长文风险高），
 *     等宽字体只出现在代码 / 数据 / 标注里 —— 全站等宽是扮酷，读 10 分钟眼睛会累。
 *   - 宽屏三栏：目录 | 正文 | 边注。边注是让密排版有呼吸感的关键。
 *
 * 以后加页面时复用同一份 CSS，所以这里的类名要保持稳定，别为了单页效果随手改名。
 * ========================================================================== */

/* ── 设计令牌 ──────────────────────────────────────────────────────────────
 * 亮色定义在裸 :root，暗色只覆盖需要变的那几个。
 * 两个暗色块：媒体查询那份带 :not([data-theme="light"]) 守卫，
 * 保证手动切亮色时不会被系统偏好盖回去。 */
:root {
  --bg:        #fbfaf8;
  --bg-soft:   #f4f2ee;
  --bg-code:   #f0ede7;
  --fg:        #1a1d21;
  --fg-soft:   #3d434c;
  --muted:     #6f7681;
  --faint:     #9aa1ac;
  --line:      #e3dfd8;
  --line-soft: #eeebe5;
  --accent:    #a8641b;
  --accent-bg: #f6ecdd;
  --sel:       #f7e3c4;

  --diag-fill:   #f4f2ee;
  --diag-stroke: #cfc9c0;
  --diag-accent: #a8641b;

  --w-text: 680px;
  --w-note: 250px;
  --w-toc:  210px;

  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
            Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0e1013;
    --bg-soft:   #16191e;
    --bg-code:   #171a20;
    --fg:        #dce0e6;
    --fg-soft:   #b6bcc6;
    --muted:     #868d99;
    --faint:     #5f6672;
    --line:      #252a32;
    --line-soft: #1d2128;
    --accent:    #d99a4e;
    --accent-bg: #241c11;
    --sel:       #3a2c16;

    --diag-fill:   #16191e;
    --diag-stroke: #333a45;
    --diag-accent: #d99a4e;
  }
}

:root[data-theme="dark"] {
  --bg:        #0e1013;
  --bg-soft:   #16191e;
  --bg-code:   #171a20;
  --fg:        #dce0e6;
  --fg-soft:   #b6bcc6;
  --muted:     #868d99;
  --faint:     #5f6672;
  --line:      #252a32;
  --line-soft: #1d2128;
  --accent:    #d99a4e;
  --accent-bg: #241c11;
  --sel:       #3a2c16;

  --diag-fill:   #16191e;
  --diag-stroke: #333a45;
  --diag-accent: #d99a4e;
}

/* ── 基础 ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 锚点跳转时给顶部留出进度条和呼吸空间 */
  scroll-padding-top: 2.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 16.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sel); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color .15s, background-color .15s;
}
a:hover {
  border-bottom-color: var(--accent);
  background: var(--accent-bg);
}

/* 站外链接尾部加一个极小的箭头标记，读者能预判是否离站 */
a[data-ext]::after {
  content: "↗";
  font-size: .75em;
  margin-left: .15em;
  color: var(--faint);
  vertical-align: .1em;
}

code, kbd, samp, pre { font-family: var(--f-mono); }

code {
  font-size: .875em;
  background: var(--bg-code);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: .1em .35em;
  word-break: break-word;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.7;
  margin: 1.6rem 0;
}
pre code { background: none; border: 0; padding: 0; font-size: 1em; }

/* ── 阅读进度条 ──────────────────────────────────────────────────────────── */

#progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 100;
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) { #progress { transition: none; } }

/* ── 布局：目录 | 正文 | 边注 ────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--w-toc) minmax(0, var(--w-text)) var(--w-note);
  gap: 0 2.75rem;
  justify-content: center;
  padding: 0 1.5rem 6rem;
}

/* position: relative 是边注绝对定位的参照系，见 site.js 的 layoutNotes */
.col-main { grid-column: 2; min-width: 0; position: relative; }

/* ── 目录 ────────────────────────────────────────────────────────────────── */

.toc {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 4.5rem 0 3rem;
  font-size: .8rem;
  line-height: 1.55;
  scrollbar-width: thin;
}
/* 目录标题有两份：宽屏用 .toc-label（常驻），窄屏用 <summary>（可折叠）。
 * 两者互斥显示，否则会并排出现两个「目录」。 */
.toc-label {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .9rem;
}
.toc summary { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: .55rem; }
.toc a {
  display: block;
  color: var(--muted);
  border: 0;
  padding-left: 1.6rem;
  position: relative;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--faint);
}
.toc a:hover { color: var(--fg); background: none; }
.toc a.active { color: var(--accent); }
.toc a.active::before { color: var(--accent); }

/* ── 边注 ──────────────────────────────────────────────────────────────────
 * 宽屏时用 JS 把 .note 平移到右栏；窄屏保持文档流内的块级样式。
 * 这样 HTML 里边注就写在它注释的那段旁边，源码可读性也保住了。 */

.note {
  font-size: .8rem;
  line-height: 1.7;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: .85rem;
  margin: 1.4rem 0;
}
.note code { font-size: .82em; }

/* 宽屏：JS 给 .col-main 加上 .notes-lifted，边注整体脱流挪到正文右侧。
 * 定位交给 JS（它按锚点段落的 offsetTop 对齐并避让重叠），
 * CSS 只负责「脱流 + 放到右边 + 宽度」这三件与布局无关的事。 */
@media (min-width: 1280px) {
  .col-main.notes-lifted .note {
    position: absolute;
    left: calc(100% + 2.75rem);
    width: var(--w-note);
    margin: 0;
    /* 脱流后 top 由 JS 写在 style 上；给个兜底避免 JS 失败时糊在一起 */
    top: 0;
  }
}

/* ── 页头 ────────────────────────────────────────────────────────────────── */

.masthead {
  padding: 5rem 0 0;
  margin-bottom: 3.5rem;
}
.masthead .kicker {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: 1.4rem;
}
.masthead h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}
.masthead .standfirst {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--fg-soft);
  margin: 0;
}

/* 顶部工具条：主题切换 + 外链 */
.topbar {
  position: fixed;
  top: 0; right: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .7rem 1rem;
  z-index: 50;
}
.topbar button, .topbar a {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .25rem .5rem;
  cursor: pointer;
  line-height: 1.4;
}
.topbar button:hover, .topbar a:hover {
  color: var(--fg);
  border-color: var(--line);
  background: var(--bg-soft);
}

/* ── 摘要卡 ──────────────────────────────────────────────────────────────── */

.tldr {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem 1.7rem;
  margin: 0 0 4rem;
}
.tldr h2 {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
}
.tldr ul { margin: 0; padding-left: 1.1rem; }
.tldr li { margin-bottom: .5rem; color: var(--fg-soft); font-size: .95rem; }
.tldr li:last-child { margin-bottom: 0; }

/* ── 章节与标题 ──────────────────────────────────────────────────────────── */

section { margin-bottom: 4.5rem; }

h2 {
  font-size: 1.42rem;
  line-height: 1.45;
  font-weight: 640;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  position: relative;
}
h3 {
  font-size: 1.06rem;
  font-weight: 640;
  margin: 2.6rem 0 .9rem;
  color: var(--fg);
}

/* 章节序号：贴在标题上方的等宽小字，比 "1. 标题" 更克制 */
h2 .num {
  display: block;
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--faint);
  margin-bottom: .5rem;
}

/* hover 时出现的 § 锚点，方便别人深链引用某一段 */
.anchor {
  position: absolute;
  left: -1.35rem;
  top: 1.4rem;
  color: var(--faint);
  border: 0;
  opacity: 0;
  font-weight: 400;
  transition: opacity .15s;
}
h2:hover .anchor { opacity: 1; }
.anchor:hover { color: var(--accent); background: none; }
@media (max-width: 900px) { .anchor { display: none; } }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 640; color: var(--fg); }

ul, ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
li { margin-bottom: .55rem; }
li > ul, li > ol { margin-top: .55rem; margin-bottom: .3rem; }

blockquote {
  margin: 1.8rem 0;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid var(--accent);
  color: var(--fg-soft);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ── 提要句：用来承载「可被引用」的那一两句判断 ────────────────────────── */

.pull {
  font-size: 1.18rem;
  line-height: 1.65;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -.008em;
  margin: 2.4rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
}

/* ── 表格 ────────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin: 1.9rem 0; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .875rem;
  line-height: 1.65;
}
th, td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
th {
  font-weight: 620;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { color: var(--fg-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ── 图 ──────────────────────────────────────────────────────────────────── */

figure { margin: 2.4rem 0; }
figure svg { display: block; width: 100%; height: auto; }
figcaption {
  font-size: .8rem;
  line-height: 1.65;
  color: var(--muted);
  margin-top: .9rem;
  padding-left: .1rem;
}
figcaption b { color: var(--fg-soft); font-weight: 600; }

/* SVG 内部统一用这几个 class，跟着主题令牌走 */
.d-box   { fill: var(--diag-fill); stroke: var(--diag-stroke); stroke-width: 1; }
.d-box-a { fill: var(--accent-bg); stroke: var(--diag-accent); stroke-width: 1; }
.d-line  { stroke: var(--diag-stroke); stroke-width: 1; fill: none; }
.d-line-a{ stroke: var(--diag-accent); stroke-width: 1.2; fill: none; }
.d-t     { fill: var(--fg-soft); font-family: var(--f-sans); font-size: 12px; }
.d-t-s   { fill: var(--muted); font-family: var(--f-mono); font-size: 10px; }
.d-t-a   { fill: var(--diag-accent); font-family: var(--f-sans); font-size: 12px; font-weight: 600; }
.d-t-h   { fill: var(--fg); font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; }

/* ── 开放问题清单 ────────────────────────────────────────────────────────── */

.openq { list-style: none; padding: 0; margin: 1.8rem 0 0; counter-reset: oq; }
.openq > li {
  counter-increment: oq;
  position: relative;
  padding: 0 0 1.4rem 2.4rem;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 1.4rem;
}
.openq > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.openq > li::before {
  content: "Q" counter(oq);
  position: absolute;
  left: 0; top: .12rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--accent);
}
.openq b { display: block; margin-bottom: .35rem; font-weight: 640; }
.openq p { font-size: .93rem; color: var(--fg-soft); margin: 0; }

/* ── 链接清单（去往各 Agent 系统 / XTeam）─────────────────────────────── */

.links { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.links li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  font-size: .92rem;
}
.links li:last-child { border-bottom: 0; }
.links .lk-name { font-weight: 600; }
.links .lk-say { color: var(--muted); }
@media (max-width: 620px) {
  .links li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ── 页脚 ────────────────────────────────────────────────────────────────── */

.colophon {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  font-size: .84rem;
  color: var(--muted);
}
.colophon p { margin-bottom: .7rem; }
.colophon .meta {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--faint);
  margin-top: 1.6rem;
}

/* ── 响应式 ──────────────────────────────────────────────────────────────── */

/* 断点是按内容实际宽度算出来的，不是拍脑袋的整数：
 *   三栏 = 210 + 44 + 680 + 44 + 250 + 48(padding) = 1276  → 断点 1280
 *   两栏 = 210 + 40 + 680 + 48(padding)            =  978  → 断点 1000
 * 早先按 1180 / 980 设，结果在断点附近正文会被挤出视口。 */

/* 1280 以下收掉边注栏，边注回到文档流 */
@media (max-width: 1279px) {
  .shell {
    grid-template-columns: var(--w-toc) minmax(0, var(--w-text));
    gap: 0 2.5rem;
  }
}

/* 1000 以下收掉目录栏，改成顶部可折叠。
 * 这里必须用 1fr 而不是 minmax(0, 680px)：后者的 max 是定值，
 * 在 390px 视口下轨道仍然占 680px，正文会被横向切掉。 */
@media (max-width: 999px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--w-text);
    margin: 0 auto;
    padding: 0 1.4rem 5rem;
  }
  .col-main { grid-column: 1; }
  .toc {
    grid-column: 1;
    position: static;
    max-height: none;
    padding: 3.5rem 0 0;
    margin-bottom: -1rem;
    border-bottom: 1px solid var(--line);
  }
  .toc details { padding-bottom: 1.2rem; }
  .toc-label { display: none; }
  .toc summary {
    display: list-item;
    cursor: pointer;
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    padding: .4rem 0;
  }
  .toc ol { columns: 2; column-gap: 1.5rem; padding-top: .8rem; }
  .toc li { break-inside: avoid; }
  .masthead { padding-top: 2.5rem; }
}

@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.8; }
  .toc ol { columns: 1; }
  .tldr { padding: 1.2rem 1.2rem; margin-bottom: 3rem; }
  section { margin-bottom: 3.5rem; }
  .pull { font-size: 1.06rem; }
}

/* ── 打印 ────────────────────────────────────────────────────────────────── */

@media print {
  .toc, .topbar, #progress { display: none; }
  .shell { display: block; max-width: none; padding: 0; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; border: 0; }
  .note { page-break-inside: avoid; }
  figure { page-break-inside: avoid; }
}