/* ── Code block enhancements ─────────────────────────────────────────── */
.code-block-wrapper {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-code-border);
  overflow: hidden;
}

.code-block-wrapper pre {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
}

.code-lang-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy-mid);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-sky-light);
  letter-spacing: 0.05em;
  user-select: none;
}

.code-lang-name {
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-3);
  background: rgba(56,189,248,0.15);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: var(--radius-sm);
  color: var(--color-sky-light);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  line-height: 1.6;
}

.copy-btn:hover {
  background: rgba(56,189,248,0.3);
  color: white;
  border-color: var(--color-sky);
}

.copy-btn.copied {
  background: rgba(34,197,94,0.2);
  border-color: rgba(34,197,94,0.5);
  color: #86efac;
}

/* Override prism to use our token colours on light bg */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6b7e99; }
.token.punctuation { color: var(--color-navy-soft); }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #0e7490; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: #0369a1; }
.token.operator, .token.entity, .token.url { color: #9a3412; }
.token.atrule, .token.attr-value, .token.keyword { color: var(--color-tangerine); font-weight: 600; }
.token.function, .token.class-name { color: #7c3aed; }
.token.regex, .token.important, .token.variable { color: var(--color-ocean); }