/* ocellio S4 — code blocks: Pygments token colours (class-based → CSP-clean,
   no inline styles) + a hover copy button. Tokenisation is server-side
   (web/markdown_render.py); only the colours + button chrome live here. Colours are
   theme-aware: keyword/comment reuse the theme vars; the fixed string/number/function
   hues get a lighter override under :root[data-theme="dark"] for the navy surface. */

/* layout: anchor the copy button; drop the inline-code chrome inside a <pre> */
.markdown-body pre { position: relative; }
.markdown-body pre.highlight code {
  background: none; padding: 0; border: 0; font-size: inherit; color: inherit;
}

/* copy button — hover-reveal + "Copied" flash (mirrors the share.js copy idiom).
   Scoped to .markdown-body pre: app.css uses the same class for always-visible
   inline copy buttons (webhooks register box) — an unscoped rule here would
   absolutely-position and opacity-0 them away. */
.markdown-body pre .copy-btn {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.72rem; font-weight: 500; line-height: 1;
  color: var(--muted); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px 9px; cursor: pointer; opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.markdown-body pre:hover .copy-btn,
.markdown-body pre .copy-btn:focus-visible { opacity: 1; }
.markdown-body pre .copy-btn:hover { color: var(--fg); border-color: var(--accent); }
.markdown-body pre .copy-btn.copied { color: var(--ok); border-color: var(--ok); opacity: 1; }

/* token colours — light / default */
.highlight :is(.c,.ch,.cm,.c1,.cs,.cp,.cpf) { color: var(--muted); font-style: italic; }
.highlight :is(.k,.kc,.kd,.kn,.kp,.kr,.kt,.ow,.nt,.nb,.bp) { color: var(--accent); font-weight: 600; }
.highlight :is(.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.ss) { color: #2b8a3e; }
.highlight :is(.m,.mb,.mf,.mh,.mi,.mo,.il) { color: #c2410c; }
.highlight :is(.nf,.fm,.nc,.nd) { color: #1864ab; }
.highlight :is(.nv,.vc,.vg,.vi,.na) { color: #0c8599; }
.highlight .gd { color: #c92a2a; }
.highlight .gi { color: #2b8a3e; }

/* token colours — dark theme overrides for the fixed hues */
:root[data-theme="dark"] .highlight :is(.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.ss) { color: #8ce99a; }
:root[data-theme="dark"] .highlight :is(.m,.mb,.mf,.mh,.mi,.mo,.il) { color: #ffc078; }
:root[data-theme="dark"] .highlight :is(.nf,.fm,.nc,.nd) { color: #74c0fc; }
:root[data-theme="dark"] .highlight :is(.nv,.vc,.vg,.vi,.na) { color: #66d9e8; }
:root[data-theme="dark"] .highlight .gd { color: #ff8787; }