/* ================================================================
   Markdown — Rendered content styles (Swiss typography).
   ================================================================ */

.markdown-content {
  font-family: var(--font-sans);
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
}

/* === Headings === */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-l1);
  line-height: var(--lh-l1);
  color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-sm) 0;
}

.markdown-content h1 { font-size: 20px; }
.markdown-content h2 { font-size: 18px; }
.markdown-content h3 { font-size: 16px; }
.markdown-content h4 { font-size: 15px; }

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child {
  margin-top: 0;
}

/* === Paragraphs === */
.markdown-content p {
  margin: var(--space-md) 0;
}

.markdown-content p:first-child {
  margin-top: 0;
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

/* === Lists === */
.markdown-content ul,
.markdown-content ol {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
}

.markdown-content li {
  margin-bottom: var(--space-xs);
}

.markdown-content li:last-child {
  margin-bottom: 0;
}

/* === Blockquotes === */
.markdown-content blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-lg);
  border-left: 2px solid var(--rule-strong);
  background: var(--surface-card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.markdown-content blockquote p {
  margin: var(--space-xs) 0;
  color: var(--text-secondary);
  font-size: var(--fs-l2);
}

/* === Tables === */
.markdown-content table,
.content-round-block table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-md) 0;
  font-size: var(--fs-l3);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
}

.markdown-content th,
.content-round-block th {
  font-weight: var(--fw-l1);
  font-size: var(--fs-l4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--rule-strong);
}

.markdown-content td,
.content-round-block td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.markdown-content tbody tr:last-child td,
.content-round-block tbody tr:last-child td {
  border-bottom: none;
}

/* === Horizontal rules === */
.markdown-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-xl) 0;
}

/* === Images === */
.markdown-content img {
  max-width: 100%;
  max-height: 70vh;            /* 长截图限高（max 约束下保持纵横比整体缩放） */
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface-secondary);   /* 加载中 / 透明图衬底 */
  margin: var(--space-sm) 0;
  vertical-align: middle;
  cursor: zoom-in;             /* 点击经图片灯箱放大（markdown.js） */
  transition: box-shadow 0.15s ease;
}

.markdown-content img:hover {
  box-shadow: var(--shadow-md);
}

/* 独占段落的图片：居中展示 + 更大呼吸感 */
.markdown-content p:has(> img:only-child) {
  text-align: center;
  margin: var(--space-md) 0;
}

/* 图注：图片段落后的斜体行（纯斜体或斜体链接 [*图注*](sourceUrl) 两种形态） */
.markdown-content p:has(> img:only-child) + p:has(> em:only-child) > em,
.markdown-content p:has(> img:only-child) + p:has(> a:only-child > em:only-child) > a {
  display: block;
  text-align: center;
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  text-decoration: none;
  margin-top: calc(-1 * var(--space-xs));
}

.markdown-content p:has(> img:only-child) + p:has(> a:only-child > em:only-child) > a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── 图片灯箱（markdown.js openImageLightbox）── */
.image-lightbox {
  z-index: 300;                /* 盖过一切弹层（modal-overlay 默认 100） */
  background: rgba(0, 0, 0, 0.85);   /* 压低透出度，避免背后原图透出成"重影" */
  cursor: zoom-out;
}

.image-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 92vw;
  max-height: 92vh;
}

.image-lightbox-figure img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.image-lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-l4);
  text-align: center;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* === Inline code === */
.markdown-content code {
  font-family: var(--font-mono);
  font-size: var(--fs-l5);
  font-weight: var(--fw-l5);
  background: var(--surface-card);
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* === Code blocks === */
.markdown-content pre {
  margin: var(--space-md) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--rule);
}

.markdown-content pre code {
  display: block;
  padding: var(--space-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-l5);
  font-weight: var(--fw-l5);
  line-height: var(--lh-l5);
  background: var(--surface-secondary);
  border: none;
  border-radius: 0;
  tab-size: 4;
  -moz-tab-size: 4;
}

/* === Code block header (language label + copy button) === */
.code-block-wrapper {
  position: relative;
  margin: var(--space-md) 0;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-primary);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.code-lang-label {
  font-size: var(--fs-l4);
  font-weight: var(--fw-l4);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.code-copy-btn {
  font-size: var(--fs-l4);
  font-weight: var(--fw-l4);
  color: var(--text-tertiary);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all var(--transition-fast);
}

.code-copy-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.code-copy-btn.copied {
  color: var(--success);
  animation: copy-pop 300ms var(--ease-winui);
}

.code-block-wrapper pre {
  margin: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* === Strong & emphasis === */
.markdown-content strong {
  font-weight: 600;
  color: var(--text-primary);
}

.markdown-content em {
  font-style: italic;
}

/* === Links in markdown === */
.markdown-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.markdown-content a:hover {
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* === Mermaid diagram containers === */
.mermaid-container {
  margin: var(--space-md) 0;
}

.mermaid-container .mermaid {
  padding: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-l5);
  line-height: var(--lh-l5);
  overflow-x: auto;
  background: var(--surface-secondary);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: border-color var(--transition-fast);
}

/* Rendered Mermaid SVG — remove monospace styling, center the diagram */
.mermaid-container .mermaid[data-processed="true"] {
  padding: var(--space-md);
  font-family: var(--font-sans);
  background: transparent;
  display: flex;
  justify-content: center;
}

.mermaid-container .mermaid[data-processed="true"] svg {
  max-width: 100%;
  height: auto;
}

/* Status badge in code-block-header */
.mermaid-render-badge {
  font-size: var(--fs-l4);
  font-weight: var(--fw-l4);
  color: var(--text-tertiary);
  margin-left: auto;
  margin-right: var(--space-sm);
}

.mermaid-render-badge.rendered {
  color: var(--success);
}

/* ================================================================
   ECharts interactive charts
   ================================================================ */

.echarts-container {
  margin: var(--space-md) 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

/* 图表 / 图形容器 hover 提亮边框 */
.echarts-container:hover,
.mermaid-container:hover .mermaid {
  border-color: var(--rule-strong);
}

.echarts-container .code-block-header {
  border-bottom: 1px solid var(--rule);
}

.echarts-view {
  width: 100%;
  height: 320px;
  background: transparent;
}

.echarts-render-badge {
  font-size: var(--fs-l4);
  font-weight: var(--fw-l4);
  color: var(--text-tertiary);
  margin-left: auto;
  margin-right: var(--space-sm);
}

.echarts-render-badge.rendered {
  color: var(--success);
}

/* ================================================================
   Callouts (> [!NOTE] / [!TIP] / [!WARNING] / [!IMPORTANT] / [!CAUTION])
   ================================================================ */

.callout {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--surface-secondary);
}

.callout-title {
  font-size: var(--fs-l4);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-xs);
  color: var(--accent);
}

.callout-body p:first-child { margin-top: 0; }
.callout-body p:last-child { margin-bottom: 0; }

.callout--tip { border-left-color: var(--success); }
.callout--tip .callout-title { color: var(--success); }

.callout--warning,
.callout--caution { border-left-color: var(--warning, #F7630C); }
.callout--warning .callout-title,
.callout--caution .callout-title { color: var(--warning, #F7630C); }

.callout--important { border-left-color: #8764B8; }
.callout--important .callout-title { color: #8764B8; }

/* ================================================================
   Dark-mode syntax highlighting（github.min.css 仅亮色，此处覆盖）
   对齐 GitHub Dark 配色，适配 Fluent 深色表面。
   ================================================================ */
:root[data-theme="dark"] .hljs {
  color: #E6EDF3;
  background: transparent;
}
:root[data-theme="dark"] .hljs-doctag,
:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-meta .hljs-keyword,
:root[data-theme="dark"] .hljs-template-tag,
:root[data-theme="dark"] .hljs-template-variable,
:root[data-theme="dark"] .hljs-type,
:root[data-theme="dark"] .hljs-variable.language_ { color: #FF7B72; }
:root[data-theme="dark"] .hljs-title,
:root[data-theme="dark"] .hljs-title.class_,
:root[data-theme="dark"] .hljs-title.class_.inherited__,
:root[data-theme="dark"] .hljs-title.function_ { color: #D2A8FF; }
:root[data-theme="dark"] .hljs-attr,
:root[data-theme="dark"] .hljs-attribute,
:root[data-theme="dark"] .hljs-literal,
:root[data-theme="dark"] .hljs-meta,
:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-operator,
:root[data-theme="dark"] .hljs-selector-attr,
:root[data-theme="dark"] .hljs-selector-class,
:root[data-theme="dark"] .hljs-selector-id,
:root[data-theme="dark"] .hljs-variable { color: #79C0FF; }
:root[data-theme="dark"] .hljs-meta .hljs-string,
:root[data-theme="dark"] .hljs-regexp,
:root[data-theme="dark"] .hljs-string { color: #A5D6FF; }
:root[data-theme="dark"] .hljs-built_in,
:root[data-theme="dark"] .hljs-symbol { color: #FFA657; }
:root[data-theme="dark"] .hljs-code,
:root[data-theme="dark"] .hljs-comment,
:root[data-theme="dark"] .hljs-formula { color: #8B949E; }
:root[data-theme="dark"] .hljs-name,
:root[data-theme="dark"] .hljs-quote,
:root[data-theme="dark"] .hljs-selector-pseudo,
:root[data-theme="dark"] .hljs-selector-tag { color: #7EE787; }
:root[data-theme="dark"] .hljs-subst { color: #E6EDF3; }
:root[data-theme="dark"] .hljs-section { color: #1F6FEB; font-weight: 700; }
:root[data-theme="dark"] .hljs-bullet { color: #F2CC60; }
:root[data-theme="dark"] .hljs-emphasis { color: #E6EDF3; font-style: italic; }
:root[data-theme="dark"] .hljs-strong { color: #E6EDF3; font-weight: 700; }
:root[data-theme="dark"] .hljs-addition { color: #AFF5B4; background-color: rgba(3, 58, 22, 0.5); }
:root[data-theme="dark"] .hljs-deletion { color: #FFDCD7; background-color: rgba(103, 18, 15, 0.5); }

/* 跟随系统（未显式设置 data-theme 时） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hljs { color: #E6EDF3; background: transparent; }
  :root:not([data-theme="light"]) .hljs-doctag,
  :root:not([data-theme="light"]) .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-meta .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-template-tag,
  :root:not([data-theme="light"]) .hljs-template-variable,
  :root:not([data-theme="light"]) .hljs-type,
  :root:not([data-theme="light"]) .hljs-variable.language_ { color: #FF7B72; }
  :root:not([data-theme="light"]) .hljs-title,
  :root:not([data-theme="light"]) .hljs-title.class_,
  :root:not([data-theme="light"]) .hljs-title.class_.inherited__,
  :root:not([data-theme="light"]) .hljs-title.function_ { color: #D2A8FF; }
  :root:not([data-theme="light"]) .hljs-attr,
  :root:not([data-theme="light"]) .hljs-attribute,
  :root:not([data-theme="light"]) .hljs-literal,
  :root:not([data-theme="light"]) .hljs-meta,
  :root:not([data-theme="light"]) .hljs-number,
  :root:not([data-theme="light"]) .hljs-operator,
  :root:not([data-theme="light"]) .hljs-selector-attr,
  :root:not([data-theme="light"]) .hljs-selector-class,
  :root:not([data-theme="light"]) .hljs-selector-id,
  :root:not([data-theme="light"]) .hljs-variable { color: #79C0FF; }
  :root:not([data-theme="light"]) .hljs-meta .hljs-string,
  :root:not([data-theme="light"]) .hljs-regexp,
  :root:not([data-theme="light"]) .hljs-string { color: #A5D6FF; }
  :root:not([data-theme="light"]) .hljs-built_in,
  :root:not([data-theme="light"]) .hljs-symbol { color: #FFA657; }
  :root:not([data-theme="light"]) .hljs-code,
  :root:not([data-theme="light"]) .hljs-comment,
  :root:not([data-theme="light"]) .hljs-formula { color: #8B949E; }
  :root:not([data-theme="light"]) .hljs-name,
  :root:not([data-theme="light"]) .hljs-quote,
  :root:not([data-theme="light"]) .hljs-selector-pseudo,
  :root:not([data-theme="light"]) .hljs-selector-tag { color: #7EE787; }
  :root:not([data-theme="light"]) .hljs-subst { color: #E6EDF3; }
  :root:not([data-theme="light"]) .hljs-section { color: #1F6FEB; font-weight: 700; }
  :root:not([data-theme="light"]) .hljs-bullet { color: #F2CC60; }
  :root:not([data-theme="light"]) .hljs-emphasis { color: #E6EDF3; font-style: italic; }
  :root:not([data-theme="light"]) .hljs-strong { color: #E6EDF3; font-weight: 700; }
  :root:not([data-theme="light"]) .hljs-addition { color: #AFF5B4; background-color: rgba(3, 58, 22, 0.5); }
  :root:not([data-theme="light"]) .hljs-deletion { color: #FFDCD7; background-color: rgba(103, 18, 15, 0.5); }
}