/* code.css — code-block chrome + highlight.js token colors.
   Public --code-* / --hl-* custom properties are THEME-owned: this file never
   defines them — only private, scheme-aware `--_*-d` defaults — so a theme's
   overrides win regardless of stylesheet load order. (A custom property must
   never reference itself: `--x: var(--x, d)` is a circular reference and
   invalidates the property.) */

/* ── private defaults (neutral palette; themes override the public vars) ── */
:root {
  --_code-bg-d:             #f3f4f6;
  --_code-border-d:         #d1d5db;
  --_code-accent-d:         #6b7280;
  --_code-label-bg-d:       rgba(0,0,0,0.04);
  --_code-label-fg-d:       #6b7280;
  --_code-copy-bg-d:        transparent;
  --_code-copy-fg-d:        #6b7280;
  --_code-copy-hover-bg-d:  rgba(0,0,0,0.06);
  --_code-copy-hover-fg-d:  #111827;
  --_code-copy-copied-fg-d: #059669;
  --_hl-keyword-d:     #7c3aed;
  --_hl-built-in-d:    #0e7490;
  --_hl-literal-d:     #b45309;
  --_hl-string-d:      #047857;
  --_hl-regexp-d:      #047857;
  --_hl-comment-d:     #9ca3af;
  --_hl-addition-d:    #047857;
  --_hl-deletion-d:    #b91c1c;
  --_hl-meta-d:        #6b7280;
  --_hl-punctuation-d: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --_code-bg-d:             #111318;
    --_code-border-d:         #2a2e37;
    --_code-accent-d:         #9ca3af;
    --_code-label-bg-d:       rgba(255,255,255,0.05);
    --_code-label-fg-d:       #9ca3af;
    --_code-copy-fg-d:        #9ca3af;
    --_code-copy-hover-bg-d:  rgba(255,255,255,0.08);
    --_code-copy-hover-fg-d:  #e5e7eb;
    --_code-copy-copied-fg-d: #34d399;
    --_hl-keyword-d:     #c084fc;
    --_hl-built-in-d:    #67e8f9;
    --_hl-literal-d:     #fbbf24;
    --_hl-string-d:      #34d399;
    --_hl-regexp-d:      #34d399;
    --_hl-comment-d:     #6b7280;
    --_hl-addition-d:    #34d399;
    --_hl-deletion-d:    #f87171;
    --_hl-meta-d:        #9ca3af;
    --_hl-punctuation-d: #9ca3af;
  }
}

.code-block {
  position: relative;
  margin: 0 0 22px;
  border: 1px solid var(--code-border, var(--_code-border-d));
  border-left: 2px solid var(--code-accent, var(--_code-accent-d));
  background: var(--code-bg, var(--_code-bg-d));
  overflow: hidden;
}

:is(article.post, article.page) .body .code-block pre {
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: none;
  overflow-x: auto;
}

:is(article.post, article.page) .body .code-block pre > code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  display: block;
  white-space: pre;
}

/* Suppress theme-generated corner decorations inside wrapped blocks */
:is(article.post, article.page) .body .code-block pre > code::before,
:is(article.post, article.page) .body .code-block pre > code::after {
  content: none;
}

/* Language label */
.code-block-lang {
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--code-label-fg, var(--_code-label-fg-d));
  background: var(--code-label-bg, var(--_code-label-bg-d));
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
  transition: opacity .15s;
  opacity: 1;
}

/* Copy button */
.code-block-copy {
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--code-copy-fg, var(--_code-copy-fg-d));
  background: var(--code-copy-bg, var(--_code-copy-bg-d));
  border: 1px solid var(--code-border, var(--_code-border-d));
  border-radius: 2px;
  padding: 2px 8px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
  z-index: 2;
  opacity: 0;
}
.code-block-copy:hover {
  color: var(--code-copy-hover-fg, var(--_code-copy-hover-fg-d));
  background: var(--code-copy-hover-bg, var(--_code-copy-hover-bg-d));
  border-color: var(--code-accent, var(--_code-accent-d));
}
.code-block-copy.copied {
  color: var(--code-copy-copied-fg, var(--_code-copy-copied-fg-d));
  border-color: var(--code-copy-copied-fg, var(--_code-copy-copied-fg-d));
}

/* Hover-swap: label rests, copy button appears on hover/focus */
.code-block:hover .code-block-copy,
.code-block-copy:focus-visible {
  opacity: 1;
}
.code-block:hover .code-block-lang,
.code-block:focus-within .code-block-lang {
  opacity: 0;
}

/* ── highlight.js token colors (private defaults declared above) ────────── */

.code-block .hljs-keyword,
.code-block .hljs-symbol,
.code-block .hljs-number,
.code-block .hljs-literal {
  color: var(--hl-literal, var(--_hl-literal-d));
}
.code-block .hljs-keyword {
  color: var(--hl-keyword, var(--_hl-keyword-d));
}
.code-block .hljs-built_in,
.code-block .hljs-type {
  color: var(--hl-built-in, var(--_hl-built-in-d));
}
.code-block .hljs-tag,
.code-block .hljs-name {
  color: var(--hl-keyword, var(--_hl-keyword-d));
}
.code-block .hljs-string {
  color: var(--hl-string, var(--_hl-string-d));
}
.code-block .hljs-title,
.code-block .hljs-section {
  color: var(--hl-keyword, var(--_hl-keyword-d));
}
.code-block .hljs-regexp,
.code-block .hljs-regexp_escaped {
  color: var(--hl-regexp, var(--_hl-regexp-d));
}
.code-block .hljs-comment {
  color: var(--hl-comment, var(--_hl-comment-d));
}
.code-block .hljs-quote,
.code-block .hljs-deletion {
  color: var(--hl-deletion, var(--_hl-deletion-d));
}
.code-block .hljs-addition {
  color: var(--hl-addition, var(--_hl-addition-d));
}
.code-block .hljs-meta {
  color: var(--hl-meta, var(--_hl-meta-d));
}
.code-block .hljs-meta .hljs-keyword,
.code-block .hljs-meta .hljs-string {
  color: var(--hl-meta, var(--_hl-meta-d));
}
.code-block .hljs-meta .hljs-keyword {
  color: var(--hl-keyword, var(--_hl-keyword-d));
}
.code-block .hljs-params {
  color: var(--hl-punctuation, var(--_hl-punctuation-d));
}
.code-block .hljs-template-tag {
  color: var(--hl-punctuation, var(--_hl-punctuation-d));
}
.code-block .hljs-template-variable,
.code-block .hljs-variable {
  color: var(--hl-literal, var(--_hl-literal-d));
}
.code-block .hljs-name,
.code-block .hljs-operator,
.code-block .hljs-operator.hljs-punctuation {
  color: var(--hl-keyword, var(--_hl-keyword-d));
}
.code-block .hljs-punctuation {
  color: var(--hl-punctuation, var(--_hl-punctuation-d));
}
.code-block .hljs-bullet,
.code-block .hljs-link,
.code-block .hljs-selector-id,
.code-block .hljs-selector-class,
.code-block .hljs-selector-attr,
.code-block .hljs-selector-pseudo {
  color: var(--hl-built-in, var(--_hl-built-in-d));
}
.code-block .hljs-type,
.code-block .hljs-selector-id {
  color: var(--hl-built-in, var(--_hl-built-in-d));
}
.code-block .hljs-strong {
  font-weight: bold;
}
.code-block .hljs-emphasis {
  font-style: italic;
}
.code-block .hljs-link {
  text-decoration: underline;
}