/* 06-components/_codeblock.css */
/* ── c-codeblock — a framed code/transcript block with prompt + copy */
.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); }

/* ── Syntax tones — the spans TomlSyntax marks up (ReferenceHelper#reference_toml)
   Highlighting here is four tones of the theme, not a palette: the site reserves colour for
   live states, so the accent goes to the one thing a reader scans a TOML file for — the table
   header that starts a block — and everything else is placed on the gray ramp. Keys sit above
   the body tone and comments below it, which is the ordering the eye needs; strings keep the
   body tone, because in these files the strings are 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); }