/* ─────────────────────────────────────────────────────────────────────────────
   markdown.css — prose styles for rendered Markdown
   阅读区的视觉是平台的灵魂。坚持：宽留白、衬线标题、舒适行高、节制色彩。
   只在 .prose 容器内生效，不污染全站。
   ───────────────────────────────────────────────────────────────────────────── */

.prose {
  font-family: var(--ff-sans);
  font-size: 1.05rem;
  line-height: var(--lh-loose);
  color: var(--c-ink);
  max-width: var(--shell-prose);
  word-wrap: break-word;
}

/* Headings — serif, breathing room before, tighter after */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--ff-serif);
  letter-spacing: var(--tracking-tight);
  scroll-margin-top: 6rem; /* 锚点跳转时不被 sticky header 挡住 */
  text-wrap: balance;
}

.prose h1 {
  font-size: var(--fs-2);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.prose h2 {
  font-size: 1.65rem;
  font-weight: 600;
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-paper-edge);
  position: relative;
}
.prose h2::before {
  content: "";
  position: absolute;
  left: -0.6em; top: 0.3em; bottom: 0.3em;
  width: 2px;
  background: var(--c-brand);
  border-radius: 1px;
  opacity: 0.6;
}
.prose h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--c-ink);
}
.prose h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--c-ink-soft);
}
.prose h5, .prose h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-small);
  font-family: var(--ff-sans);
}

.prose p { margin: 0 0 var(--sp-4); }
.prose p + p { margin-top: 0; }

/* Lead paragraph */
.prose > p:first-of-type {
  font-size: 1.1rem;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* Lists */
.prose ul, .prose ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.4em;
}
.prose li { margin-bottom: 0.4em; }
.prose li > ul, .prose li > ol { margin-top: 0.3em; margin-bottom: 0; }
.prose ul { list-style-type: square; }
.prose ul ul { list-style-type: disc; }
.prose ul ul ul { list-style-type: circle; }
.prose ol { list-style: decimal; }
.prose ::marker { color: var(--c-ink-mute); }

/* Strong / em */
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose em { font-family: var(--ff-sans); font-style: normal; color: var(--c-ink-soft); }

/* Links */
.prose a {
  color: var(--c-brand);
  text-decoration-color: var(--c-line-strong);
}
.prose a:hover {
  text-decoration-color: var(--c-brand);
  background: var(--c-brand-glow);
  border-radius: 2px;
}

/* wikilinks: lighter, with a hint icon */
.prose a.wikilink {
  color: var(--c-brand-soft);
  text-decoration-style: dotted;
  position: relative;
}
.prose a.wikilink::before {
  content: "↪";
  margin-right: 0.18em;
  font-size: 0.85em;
  color: var(--c-ink-faint);
}

/* Inline code */
.prose code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--c-code-bg);
  color: var(--c-code-fg);
  padding: 0.12em 0.45em;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-code-line);
}
.prose pre code { padding: 0; background: transparent; border: 0; }

/* Code blocks */
.prose pre,
.prose .codehilite,
.prose .highlight {
  background: var(--c-code-bg);
  color: var(--c-code-fg);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--c-code-line);
  margin: var(--sp-5) 0;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.6;
  position: relative;
}
.prose pre::before,
.prose .codehilite::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line-strong), transparent);
  opacity: 0.4;
}

/* Blockquote */
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: 0 var(--sp-5);
  border-left: 2px solid var(--c-brand);
  color: var(--c-ink-soft);
  font-family: var(--ff-serif);
  font-size: 1.08em;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Tables */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.prose table th,
.prose table td {
  text-align: left;
  padding: 0.65em 0.8em;
  border-bottom: 1px solid var(--c-paper-edge);
  vertical-align: top;
}
.prose table th {
  font-family: var(--ff-sans);
  font-weight: 600;
  background: var(--c-paper-soft);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line-strong);
}
.prose table tr:hover td { background: var(--c-paper-soft); }

/* HR — 装饰性，不是粗实线 */
.prose hr {
  margin: var(--sp-7) 0;
  border: 0;
  height: 1px;
  background: var(--c-line);
  position: relative;
}
.prose hr::after {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--c-brand);
  border-radius: 999px;
}

/* Images: 居中、加底部 caption（如果 alt 有内容） */
.prose img {
  display: block;
  margin: var(--sp-5) auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-paper-edge);
  background: var(--c-paper-soft);
  max-width: 100%;
}
.prose figure {
  margin: var(--sp-6) 0;
  text-align: center;
}
.prose figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-ink-mute);
  font-family: var(--ff-serif);
}

/* Definition lists */
.prose dl { margin: var(--sp-4) 0; }
.prose dt { font-weight: 600; color: var(--c-ink); margin-top: var(--sp-3); }
.prose dd { margin-left: 1.5em; color: var(--c-ink-soft); }

/* Admonition (warning/note/tip) — Markdown 扩展产出 .admonition */
.prose .admonition {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-brand);
  background: var(--c-paper-soft);
}
.prose .admonition .admonition-title {
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--c-brand);
}
.prose .admonition.warning   { border-color: var(--c-warn); }
.prose .admonition.warning   .admonition-title { color: var(--c-warn); }
.prose .admonition.danger    { border-color: var(--c-danger); }
.prose .admonition.danger    .admonition-title { color: var(--c-danger); }
.prose .admonition.tip       { border-color: var(--c-success); }
.prose .admonition.tip       .admonition-title { color: var(--c-success); }
.prose .admonition.note      { border-color: var(--c-azure); }
.prose .admonition.note      .admonition-title { color: var(--c-azure); }

/* Task list */
.prose .task-list-item { list-style: none; }
.prose .task-list-item input { margin-right: 0.5em; vertical-align: -0.05em; }

/* KaTeX containers */
.prose .math.math-block {
  display: block;
  text-align: center;
  margin: var(--sp-4) 0;
  overflow-x: auto;
}
.prose .math.math-inline {
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 640px) {
  .prose .math.math-inline {
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
  }
}

/* Footnotes */
.prose .footnote, .prose .footnote-ref {
  font-size: 0.85em;
  color: var(--c-ink-mute);
}
.prose .footnote-ref {
  vertical-align: super;
  font-size: 0.7em;
  margin-inline: 0.1em;
  text-decoration: none;
  color: var(--c-brand);
}
.prose .footnote {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-paper-edge);
}
.prose .footnote ol {
  font-size: 0.92em;
  color: var(--c-ink-soft);
  padding-left: 1.2em;
}
.prose .footnote li { margin-bottom: 0.3em; }
.prose .footnote-backref {
  text-decoration: none;
  margin-left: 0.3em;
  color: var(--c-ink-faint);
}
.prose .footnote-backref:hover { color: var(--c-brand); }

/* Mark, sub, sup */
.prose mark { background: rgba(180, 138, 58, 0.18); color: inherit; padding: 0 0.2em; }
.prose sup { font-size: 0.7em; vertical-align: super; }
.prose sub { font-size: 0.7em; vertical-align: sub; }

/* ─── Pygments tokens — themed via tokens.css (paper / ink / auto).
   pymdownx.superfences wraps fenced code in .highlight; the codehilite
   extension uses .codehilite — cover BOTH so highlighting actually applies. ─── */
.prose .highlight .c, .prose .highlight .c1, .prose .highlight .cm,
.prose .highlight .cp, .prose .highlight .cs,
.prose .codehilite .c, .prose .codehilite .c1, .prose .codehilite .cm,
.prose .codehilite .cp, .prose .codehilite .cs { color: var(--code-comment); font-style: italic; } /* comment */
.prose .highlight .k, .prose .highlight .kc, .prose .highlight .kd,
.prose .highlight .kn, .prose .highlight .kp, .prose .highlight .kr, .prose .highlight .kt,
.prose .codehilite .k, .prose .codehilite .kc, .prose .codehilite .kd,
.prose .codehilite .kn, .prose .codehilite .kp, .prose .codehilite .kr,
.prose .codehilite .kt { color: var(--code-kw); font-weight: 600; } /* keyword */
.prose .highlight .s, .prose .highlight .s1, .prose .highlight .s2,
.prose .highlight .sd, .prose .highlight .se, .prose .highlight .sb, .prose .highlight .sh,
.prose .codehilite .s, .prose .codehilite .s1, .prose .codehilite .s2,
.prose .codehilite .sd, .prose .codehilite .se { color: var(--code-str); } /* string */
.prose .highlight .nb, .prose .highlight .bp,
.prose .codehilite .nb, .prose .codehilite .bp { color: var(--code-builtin); } /* builtin */
.prose .highlight .nf, .prose .highlight .nx,
.prose .codehilite .nf, .prose .codehilite .nx { color: var(--code-fn); } /* name.function */
.prose .highlight .nc, .prose .highlight .nn,
.prose .codehilite .nc { color: var(--code-class); font-weight: 600; }      /* name.class/namespace */
.prose .highlight .o, .prose .highlight .ow,
.prose .codehilite .o, .prose .codehilite .ow { color: var(--code-op); } /* operator */
.prose .highlight .mi, .prose .highlight .mf, .prose .highlight .mh, .prose .highlight .m,
.prose .codehilite .mi, .prose .codehilite .mf, .prose .codehilite .mh { color: var(--code-num); } /* number */
.prose .highlight .err,
.prose .codehilite .err { color: var(--code-str); background: rgba(142, 42, 31, 0.08); }

/* Document chrome: byline + meta strip above prose */
.doc-head {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-paper-edge);
}
.doc-head__title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 1.4rem + 1.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.doc-head__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-ink-mute);
  align-items: baseline;
}
.doc-head__meta .sep { color: var(--c-ink-faint); padding-inline: 0.4em; }

.doc-foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-paper-edge);
  display: flex; justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--c-ink-mute);
  flex-wrap: wrap;
  gap: var(--sp-3);
}