.c-codeblock {
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line);
  font-size: var(--text-sm);
  line-height: var(--lh-code);
}
.c-codeblock__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--bw) solid var(--line);
  color: var(--text-dim); font-size: var(--text-xs);
}
.c-codeblock__copy { background: none; border: 0; color: var(--text-muted); cursor: pointer; }
.c-codeblock__copy:hover { color: var(--accent); }
.c-codeblock pre { padding: var(--space-sm) var(--space-md); overflow-x: auto; color: var(--text); }

/* Each class below is a TomlSyntax token kind, which DocsHelper#docs_toml turns into the span's
   class name, so a kind added there renders untoned until it is given a rule here. The tones are
   four steps of the theme rather than a syntax palette: the site reserves colour for live states,
   so the accent goes to the one thing a reader scans a pattern file for, the table header that
   opens a block, and the rest sit on the gray ramp — keys above the body tone, comments below it,
   and strings on it, these files' strings being the content. */
.c-codeblock__table { color: var(--accent); }
.c-codeblock__key { color: var(--text-bright); }
.c-codeblock__string { color: var(--text); }
.c-codeblock__literal { color: var(--warn); }
.c-codeblock__comment { color: var(--text-dim); }