/* =========================================================
   Wiki 公开站 · 正文排版与代码块
   代码块的终端外壳（信号灯 + 语言标注 + 折叠）纯靠 CSS，
   加在 <pre data-lang data-lines data-collapsible> 上，
   不需要脚本包裹 DOM；只有复制/展开两个按钮由 wiki.js 注入
   ========================================================= */

.doc-body {
  font-size: 16.5px;
  line-height: 1.75;
  word-wrap: break-word;
}

.doc-body > *:first-child { margin-top: 0; }
.doc-body > *:last-child { margin-bottom: 0; }

.doc-body h1, .doc-body h2, .doc-body h3,
.doc-body h4, .doc-body h5, .doc-body h6 {
  margin: 2em 0 0.6em;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}
.doc-body h1 { font-size: 28px; }
.doc-body h2 {
  font-size: 23px;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--w-border);
}
.doc-body h3 { font-size: 19px; }
.doc-body h4 { font-size: 17px; }
.doc-body h5, .doc-body h6 { font-size: 15px; color: var(--w-text-2); }

.doc-body p { margin: 0 0 1.1em; }

.doc-body ul, .doc-body ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.doc-body li { margin: 0.3em 0; }
.doc-body li > ul, .doc-body li > ol { margin: 0.3em 0; }

.doc-body a { text-decoration: underline; text-underline-offset: 2px; }

.doc-body blockquote {
  margin: 1.2em 0;
  padding: 0.2em 1.1em;
  color: var(--w-text-2);
  border-left: 3px solid var(--w-border-strong);
  background: var(--w-fill);
  border-radius: 0 var(--w-radius-sm) var(--w-radius-sm) 0;
}
.doc-body blockquote > *:last-child { margin-bottom: 0; }

.doc-body hr {
  height: 1px;
  margin: 2.2em 0;
  border: 0;
  background: var(--w-border);
}

.doc-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--w-radius-md);
  box-shadow: var(--w-shadow-card);
}

/* 行内代码 */
.doc-body code {
  padding: 0.15em 0.4em;
  font-family: var(--w-mono);
  font-size: 0.88em;
  background: var(--w-fill);
  border-radius: 6px;
}

.doc-body table {
  width: 100%;
  margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 15px;
}
.doc-body th, .doc-body td {
  padding: 9px 13px;
  text-align: left;
  border-bottom: 1px solid var(--w-border);
}
.doc-body th { font-weight: 600; background: var(--w-fill); }
.doc-body tr:last-child td { border-bottom: 0; }

.doc-body .footnotes {
  margin-top: 2.5em;
  padding-top: 1.2em;
  font-size: 14px;
  color: var(--w-text-2);
  border-top: 1px solid var(--w-border);
}

/* —— 代码块：macOS 终端外壳 —— */

.doc-body pre.code-block {
  position: relative;
  margin: 1.5em 0;
  padding: 46px 18px 16px;
  background: var(--w-code-body);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  overflow: hidden;
}

/* 标题栏与三个信号灯。用一张带三个圆点的背景图，
   避免为纯装饰再加三个 DOM 元素。 */
.doc-body pre.code-block::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 36px;
  background-color: var(--w-code-head);
  background-image:
    radial-gradient(circle 5px at 18px 18px, #ff5f57 99%, transparent 100%),
    radial-gradient(circle 5px at 37px 18px, #febc2e 99%, transparent 100%),
    radial-gradient(circle 5px at 56px 18px, #28c840 99%, transparent 100%);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--w-border);
}

/* 语言标注 */
.doc-body pre.code-block::after {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 76px;
  height: 36px;
  line-height: 36px;
  font-family: var(--w-mono);
  font-size: 12px;
  color: var(--w-text-3);
  pointer-events: none;
}

.doc-body pre.code-block code {
  display: block;
  padding: 0;
  font-family: var(--w-mono);
  font-size: 13.5px;
  line-height: 1.65;
  background: none;
  border-radius: 0;
  overflow-x: auto;
  tab-size: 2;
}

/* 超过若干行的代码块默认收起（阈值在服务端的渲染器里决定） */
.doc-body pre.code-block[data-collapsible='1']:not(.is-expanded) code {
  max-height: 220px;
  overflow-y: hidden;
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* 复制 / 展开按钮：由 wiki.js 注入到标题栏右侧 */
.doc-body pre.code-block .code-actions {
  position: absolute;
  top: 0;
  right: 12px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.doc-body pre.code-block .code-button {
  height: 24px;
  padding: 0 10px;
  font: inherit;
  font-family: var(--w-font);
  font-size: 12px;
  color: var(--w-text-2);
  background: transparent;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-pill);
  cursor: pointer;
  transition: background var(--w-dur) var(--w-ease), color var(--w-dur) var(--w-ease);
}
.doc-body pre.code-block .code-button:hover {
  color: var(--w-text);
  background: var(--w-fill);
}