/* ==================== Markdown 内容块共享样式 ====================
   由 lemon_share/blocks.py 的 MarkdownBlock 使用（题干/编程文章等处混排）。
   - token 颜色来自 pygments.css（作用域 .codehilite，default 浅色主题）；
   - 代码块行号用纯 CSS 计数器，不依赖 PrismJS 行号插件，
     与 wagtailcodeblock 的 pre.line-numbers（Prism 主题 + JS 行号）完全解耦。 */

.markdown-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    word-wrap: break-word;
}

.markdown-body > *:first-child {
    margin-top: 0;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    font-weight: 700;
    color: #333;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

.markdown-body h1 { font-size: 1.7rem; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.45rem; border-bottom: 1px solid #eee; padding-bottom: 0.25em; }
.markdown-body h3 { font-size: 1.25rem; }
.markdown-body h4 { font-size: 1.1rem; }

.markdown-body ul, .markdown-body ol {
    padding-left: 2em;
    margin: 1em 0;
}

.markdown-body li {
    margin: 0.3em 0;
}

.markdown-body blockquote {
    border-left: 4px solid #d0d7de;
    background: #f6f8fa;
    margin: 1.2em 0;
    padding: 10px 20px;
    color: #57606a;
}

.markdown-body a {
    color: #0969da;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid #eaecef;
    margin: 2em 0;
}

/* 表格：列宽按内容自适应
   - 表头 white-space: nowrap：短表头列（如"十进制"）拿到自身内容宽度，
     不会被折成两行；剩余宽度浏览器按各列内容长度分配，内容长的列自然更宽；
   - HTML 层的 .md-table-wrap 提供横向滚动：列多或表头很长时表格在容器内
     滚动，不会撑破页面布局。 */
.md-table-wrap {
    margin: 1.2em 0;
    overflow-x: auto;
}

.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
}

/* 表格已由 .md-table-wrap 承担外边距，避免双重间距 */
.markdown-body .md-table-wrap table {
    margin: 0;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid #d0d7de;
    padding: 8px 12px;
    text-align: left;
}

.markdown-body th {
    background: #f6f8fa;
    white-space: nowrap;
}

/* 代码块：服务端 Pygments 高亮（codehilite），default 浅色主题。
   结构：div.codehilite.md-code-block > pre > span.cl（每行）。 */
.markdown-body .md-code-block {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin: 1.2em 0;
    padding: 14px 0;
    overflow-x: auto;
}

.markdown-body .md-code-block pre {
    background: transparent;
    margin: 0;
    padding: 0 16px;
    color: #444;
    font-size: 0.9rem;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    white-space: pre;
    counter-reset: line;
    display: block;
}

/* 每行一个块级 span，行号由 ::before 生成 */
.markdown-body .md-code-block .cl {
    display: block;
    counter-increment: line;
}

.markdown-body .md-code-block .cl::before {
    content: counter(line);
    display: inline-block;
    width: 2.5em;
    margin-right: 1.2em;
    text-align: right;
    color: #aaaaaa;
    user-select: none;
    /* 横向滚动长代码行时行号固定在左侧，不随内容滚走 */
    position: sticky;
    left: 0;
    background: #f8f8f8; /* 与代码块背景一致，粘住时盖住底下滚过的代码 */
}

/* Pygments default 主题会给 Error token 加红框：
       .codehilite .err { border: 1px solid #F00 }
   当围栏标了 cpp/python 等语言、内容却是中英混排的「手算过程」时，
   ÷ → （ ） ： 。 等符号会被词法分析器判为 Error token，
   于是这些符号被红框包围（视觉上像一个个方框）。
   Markdown 内容里的伪代码不需要这种报错提示，统一去掉边框。 */
.codehilite .err {
    border: none;
}

/* 行内代码：灰底小标签 */
.markdown-body code {
    background: rgba(175, 184, 193, 0.2);
    color: #24292f;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
    font-family: Consolas, Monaco, 'Courier New', monospace;
}

/* 代码块内的 code 不吃行内代码的样式 */
.markdown-body .md-code-block pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.9rem;
}