/* ── Code block wrapper ───────────────────────────────────────────────────── */
.prose pre,
pre[class*="language-"] {
  position: relative;
  background: var(--color-code-bg) !important;
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-lg);
  overflow-x: auto;
  margin: var(--space-lg) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  tab-size: 2;
}

/* Push code down when language badge is present */
.code-block-wrapper[data-language] > pre[class*="language-"] {
  padding-top: calc(var(--space-lg) + 1.6em);
}

/* ── Prism token overrides — Vintage Vibes ───────────────────────────────── */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--color-code-text) !important;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: #9c82a4;
}
.token.punctuation { color: #7b4a8c; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {
  color: #5c2d6e;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin {
  color: #a0522d;
}
.token.operator, .token.entity, .token.url,
.language-css .token.string, .style .token.string {
  color: #b07fa8;
}
.token.atrule, .token.attr-value, .token.keyword {
  color: #2e2e5e;
  font-weight: var(--font-weight-semibold);
}
.token.function { color: #8b3a7e; }
.token.regex, .token.important, .token.variable { color: #c4849b; }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }

/* ── Copy button ─────────────────────────────────────────────────────────── */
.code-block-wrapper {
  position: relative;
}

/* Language badge — populated via data-language attribute set by copy-button.js */
.code-block-wrapper[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.15em 0.6em;
  background: var(--color-plum);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-md) 0 var(--radius-sm) 0;
  line-height: 1.6;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.copy-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-plum);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  z-index: 2;
  white-space: nowrap;
}
.code-block-wrapper:hover .copy-btn,
.copy-btn:focus { opacity: 1; }
.copy-btn:hover { background: var(--color-plum-light); }
.copy-btn:active { transform: scale(0.95); }
.copy-btn.copied {
  background: #2d7a4f;
  opacity: 1;
}

/* ── Inline code ─────────────────────────────────────────────────────────── */
:not(pre) > code {
  background: rgba(240, 224, 236, 0.55);
  color: var(--color-plum-light);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.83em;
  font-weight: var(--font-weight-normal);
  /* no border — keep it subtle */
}