/* ==========================================================================
   Code blocks + Prism syntax colors (tokens from tokens.css)
   ========================================================================== */

.gh-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface-2);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

.gh-content pre {
    position: relative;
    background: var(--color-code-bg);
    color: var(--color-code-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4) var(--space-4);
    overflow-x: auto;           /* the block scrolls, the page never does */
    font-size: var(--text-sm);
    line-height: 1.6;
    tab-size: 2;
}

.gh-content pre code { background: none; padding: 0; font-size: inherit; }

/* Language label, set by main.js from class="language-xxx" */
.gh-content pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: var(--space-1);
    right: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-transform: lowercase;
}

.copy-btn {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    opacity: 0;
}
.gh-content pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }

/* Prism tokens */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--syn-comment); font-style: italic; }
.token.keyword, .token.boolean, .token.important, .token.atrule, .token.selector { color: var(--syn-keyword); }
.token.string, .token.char, .token.attr-value, .token.regex, .token.url { color: var(--syn-string); }
.token.number, .token.constant, .token.symbol { color: var(--syn-number); }
.token.function, .token.class-name, .token.builtin { color: var(--syn-function); }
.token.property, .token.key, .token.attr-name, .token.tag, .token.variable { color: var(--syn-property); }
.token.punctuation, .token.operator { color: var(--color-muted); }