/* ==========================================================================
   Code blocks — one dark code surface in both themes, restrained token palette,
   language badge, copy button, optional line numbers (Prism bundled locally).
   ========================================================================== */

:root {
    --code-bg: #1b2028;
    --code-fg: #d6dde6;
    --code-muted: #6b7684;
    --code-border: rgba(255, 255, 255, 0.06);
    --code-selection: rgba(122, 162, 247, 0.25);
    --tok-comment: #6b7684;
    --tok-punct: #9aa4b2;
    --tok-keyword: #82aaff;
    --tok-string: #c3e88d;
    --tok-number: #f78c6c;
    --tok-function: #ffcb6b;
    --tok-class: #ffcb6b;
    --tok-tag: #f07178;
    --tok-attr: #c792ea;
    --tok-property: #80cbc4;
    --tok-operator: #89ddff;
    --tok-inserted: #c3e88d;
    --tok-deleted: #f07178;
}
[data-theme="dark"] {
    --code-bg: #12161c;
    --code-border: rgba(255, 255, 255, 0.08);
}

/* Block container */
.post-content pre,
pre[class*="language-"] {
    position: relative;
    margin: 1.75em 0;
    padding: var(--spacing-lg) var(--spacing-lg);
    background: var(--code-bg);
    color: var(--code-fg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    tab-size: 4;
    text-shadow: none;
    scrollbar-width: thin;
}
.post-content pre code,
pre[class*="language-"] code {
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection { background: var(--code-selection); }

/* Inline code */
.post-content :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Language badge — derived from the class Ghost sets on the code card */
pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--code-muted);
    background: rgba(255, 255, 255, 0.04);
    border-left: 1px solid var(--code-border);
    border-bottom: 1px solid var(--code-border);
    border-radius: 0 var(--radius-md) 0 var(--radius-sm);
    pointer-events: none;
    transition: opacity var(--transition-fast);
}
pre[data-language]:hover::before { opacity: 0; }

/* Copy button (main.js) */
.copy-button {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--code-fg);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
pre:hover .copy-button,
.copy-button:focus-visible { opacity: 1; }
.copy-button:hover { background: rgba(255, 255, 255, 0.16); }
.copy-button.copied { color: var(--tok-string); border-color: currentColor; }

/* Line numbers (Prism plugin; enabled by the .line-numbers class on .post-content) */
pre.line-numbers,
.line-numbers pre[class*="language-"] {
    padding-left: 3.6em;
    counter-reset: linenumber;
}
.line-numbers .line-numbers-rows {
    position: absolute;
    top: var(--spacing-lg);
    left: 0;
    width: 2.8em;
    padding-right: 0.6em;
    font-size: 100%;
    letter-spacing: -1px;
    text-align: right;
    border-right: 1px solid var(--code-border);
    pointer-events: none;
    user-select: none;
}
.line-numbers .line-numbers-rows > span { display: block; counter-increment: linenumber; }
.line-numbers .line-numbers-rows > span::before {
    content: counter(linenumber);
    display: block;
    padding-right: 0.6em;
    color: var(--code-muted);
}

/* Tokens */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--tok-comment); font-style: italic; }
.token.punctuation { color: var(--tok-punct); }
.token.namespace { opacity: 0.7; }
.token.property, .token.symbol, .token.constant { color: var(--tok-property); }
.token.tag, .token.deleted { color: var(--tok-tag); }
.token.boolean, .token.number { color: var(--tok-number); }
.token.selector, .token.attr-name, .token.char, .token.builtin { color: var(--tok-attr); }
.token.string, .token.inserted, .token.attr-value, .token.template-string { color: var(--tok-string); }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--tok-operator); }
.token.atrule, .token.keyword { color: var(--tok-keyword); }
.token.function, .token.class-name, .token.maybe-class-name { color: var(--tok-function); }
.token.regex, .token.important, .token.variable { color: var(--tok-operator); }
.token.important, .token.bold { font-weight: 600; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff: whole-line tinting */
pre[class*="language-diff"] .token.deleted:not(.prefix) { background: rgba(240, 113, 120, 0.12); color: var(--tok-deleted); }
pre[class*="language-diff"] .token.inserted:not(.prefix) { background: rgba(195, 232, 141, 0.12); color: var(--tok-inserted); }

@media (max-width: 640px) {
    .post-content pre,
    pre[class*="language-"] { font-size: 0.8rem; padding: var(--spacing-md); }
    .line-numbers pre[class*="language-"] { padding-left: 3.2em; }
    .line-numbers .line-numbers-rows { top: var(--spacing-md); }
}