/* code.css — inline code and .code blocks with a copy button (12 §5). Same dark surface in both themes. */

code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-code); }

:not(pre) > code {
  padding: 1px var(--sp-1);
  border-radius: var(--r-sm);
  background: var(--code-inline-bg);
  color: var(--text-strong);
}

kbd {
  padding: 1px var(--sp-2);
  border: var(--border-w) solid var(--border-strong);
  border-bottom-width: var(--focus-w);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-strong);
}

.code {
  position: relative;
  border-radius: var(--r-md);
  background: var(--code-bg);
  color: var(--code-text);
}

.code pre {
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
  line-height: var(--lh-lead);
  tab-size: 4;
}

.code__lang {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--code-muted);
}

.code__lang + pre { padding-top: var(--sp-6); }

.code__copy {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-3);
  border: var(--border-w) solid var(--code-muted);
  border-radius: var(--r-sm);
  color: var(--code-text);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  opacity: .85;
}

.code__copy:hover, .code__copy:focus-visible { opacity: 1; }
.code__copy.is-copied { color: var(--brand-300); border-color: var(--brand-300); }