/* Published articles: readable code in both themes, including older posts. */
#article-markdown { color: var(--text-primary); }
#article-markdown h1,
#article-markdown h2,
#article-markdown h3 { color: var(--text-primary); }

/* Vditor ships white row fills by default; use the active site theme instead. */
.vditor-reset table {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

.vditor-reset table tr {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-top-color: var(--border-primary);
}

.vditor-reset table th,
.vditor-reset table td {
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* Vditor paints the individual cells white, which hides row backgrounds and
   makes the light foreground unreadable on dark pages. Set the cell surface. */
.vditor-reset table td {
    background-color: var(--bg-secondary);
}

.vditor-reset table th,
.vditor-reset table thead tr {
    background-color: var(--bg-tertiary);
}

.vditor-reset table tbody tr:nth-child(even) {
    background-color: var(--bg-tertiary);
}

.vditor-reset table tbody tr:nth-child(even) td {
    background-color: var(--bg-tertiary);
}

.vditor-reset table tbody tr:hover {
    background-color: var(--bg-primary);
}

.vditor-reset table tbody tr:hover td {
    background-color: var(--bg-primary);
}

/* Inline code should read like text, not a bright badge. Keep fenced blocks unchanged. */
#article-markdown.vditor-reset :not(pre) > code:not(.hljs):not(.highlight-chroma),
#article-markdown.markdown-preview :not(pre) > code:not(.hljs):not(.highlight-chroma) {
    padding: 0 .12em;
    border: 0;
    border-bottom: 1px solid rgba(31, 41, 55, .24);
    border-radius: 2px;
    color: inherit;
    background: rgba(31, 41, 55, .045);
    box-shadow: none;
}

[data-theme="dark"] #article-markdown.vditor-reset :not(pre) > code:not(.hljs):not(.highlight-chroma),
[data-theme="dark"] #article-markdown.markdown-preview :not(pre) > code:not(.hljs):not(.highlight-chroma) {
    border-bottom-color: rgba(225, 233, 244, .3);
    color: inherit;
    background: rgba(225, 233, 244, .055);
}

#article-markdown.vditor-reset pre,
#article-markdown.markdown-preview pre {
    max-height: none;
    padding: 0;
    overflow-x: auto;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #f6f8fa;
    scrollbar-color: #aab4bf transparent;
}

#article-markdown.vditor-reset pre > code,
#article-markdown.markdown-preview pre > code {
    display: block;
    width: max-content;
    min-width: 100%;
    max-height: none !important; /* Vditor adds an inline 860px limit. */
    padding: 18px 20px;
    overflow: visible;
    box-sizing: border-box;
    color: #24292f;
    background: #f6f8fa;
    background-image: none;
    border-radius: 0;
    font: 15.5px/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    white-space: pre;
    tab-size: 4;
}

#article-markdown .hljs-comment,
#article-markdown .hljs-quote { color: #57606a; }
#article-markdown .hljs-keyword,
#article-markdown .hljs-type { color: #b42318; }
#article-markdown .hljs-number,
#article-markdown .hljs-literal { color: #0550ae; }
#article-markdown .hljs-string { color: #0a3069; }

[data-theme="dark"] #article-markdown.vditor-reset pre,
[data-theme="dark"] #article-markdown.markdown-preview pre {
    border-color: #3d4959;
    background: #101823;
    scrollbar-color: #657387 transparent;
}

[data-theme="dark"] #article-markdown.vditor-reset pre > code,
[data-theme="dark"] #article-markdown.markdown-preview pre > code {
    color: #e6edf3;
    background: #101823;
    background-image: none;
}

[data-theme="dark"] #article-markdown .hljs-comment,
[data-theme="dark"] #article-markdown .hljs-quote { color: #a6b3c2; }
[data-theme="dark"] #article-markdown .hljs-keyword,
[data-theme="dark"] #article-markdown .hljs-type { color: #ff8e88; }
[data-theme="dark"] #article-markdown .hljs-number,
[data-theme="dark"] #article-markdown .hljs-literal { color: #8cc8ff; }
[data-theme="dark"] #article-markdown .hljs-string { color: #b9dcff; }

@media (max-width: 600px) {
    #article-markdown.vditor-reset pre > code,
    #article-markdown.markdown-preview pre > code {
        padding: 14px 16px;
        font-size: 14.5px;
    }
}