/*
 * Syntax highlighting for article code blocks.
 *
 * Hand-written against the site palette rather than shipping one of highlight.js's own themes, for two reasons: the
 * bundled themes assume their own background and would fight the prose surface, and none of them are aware of this
 * site's light/dark switch. Token colours follow GitHub's, which this audience reads all day.
 *
 * Loaded as a separate file rather than inlined so it caches independently of the HTML.
 */

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 0;
  background: none; /* the <pre> already carries the surface and border */
}

code.hljs {
  color: inherit;
}

/* ---- light ------------------------------------------------------------- */

html.silk-light .hljs-comment,
html.silk-light .hljs-quote { color: #6E7781; font-style: italic; }
html.silk-light .hljs-keyword,
html.silk-light .hljs-selector-tag,
html.silk-light .hljs-literal,
html.silk-light .hljs-doctag { color: #CF222E; }
html.silk-light .hljs-string,
html.silk-light .hljs-regexp { color: #0A3069; }
html.silk-light .hljs-number,
html.silk-light .hljs-variable,
html.silk-light .hljs-template-variable,
html.silk-light .hljs-attr { color: #0550AE; }
html.silk-light .hljs-title,
html.silk-light .hljs-title.function_,
html.silk-light .hljs-section { color: #8250DF; }
html.silk-light .hljs-type,
html.silk-light .hljs-title.class_,
html.silk-light .hljs-built_in,
html.silk-light .hljs-symbol { color: #953800; }
html.silk-light .hljs-meta { color: #116329; }

/* ---- dark -------------------------------------------------------------- */

html.silk-dark .hljs-comment,
html.silk-dark .hljs-quote { color: #8B949E; font-style: italic; }
html.silk-dark .hljs-keyword,
html.silk-dark .hljs-selector-tag,
html.silk-dark .hljs-literal,
html.silk-dark .hljs-doctag { color: #FF7B72; }
html.silk-dark .hljs-string,
html.silk-dark .hljs-regexp { color: #A5D6FF; }
html.silk-dark .hljs-number,
html.silk-dark .hljs-variable,
html.silk-dark .hljs-template-variable,
html.silk-dark .hljs-attr { color: #79C0FF; }
html.silk-dark .hljs-title,
html.silk-dark .hljs-title.function_,
html.silk-dark .hljs-section { color: #D2A8FF; }
html.silk-dark .hljs-type,
html.silk-dark .hljs-title.class_,
html.silk-dark .hljs-built_in,
html.silk-dark .hljs-symbol { color: #FFA657; }
html.silk-dark .hljs-meta { color: #7EE787; }

/* ---- diff -------------------------------------------------------------- */
/*
 * GitHub-style: the whole line gets tinted, not just the +/- character. highlight.js emits one span per line for the
 * diff language, so `display: block` plus a negative inline margin lets the tint bleed to the padding edge of the
 * <pre> the way it does in a real diff view.
 */

.hljs-addition,
.hljs-deletion {
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}

html.silk-light .hljs-addition { background: #E6FFEC; color: #1B1F1B; }
html.silk-light .hljs-deletion { background: #FFEBE9; color: #1B1F1B; }
html.silk-dark  .hljs-addition { background: rgba(46, 160, 67, 0.18); color: #E7EAE4; }
html.silk-dark  .hljs-deletion { background: rgba(248, 81, 73, 0.18); color: #E7EAE4; }

/* ---- copy button ------------------------------------------------------- */
/*
 * Sits inside the <pre>, which the prose styles already give a border and surface. Hidden until the block is hovered
 * or the button itself is focused - visible always would put a control in the corner of every code sample - but it
 * stays in the tab order, so keyboard users can still reach it.
 */

pre { position: relative; }

.copy-code {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font: 500 .78rem/1 Inter, system-ui, sans-serif;
  padding: .35rem .6rem;
  border-radius: .35rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

pre:hover .copy-code,
.copy-code:focus-visible { opacity: 1; }

.copy-code:active { transform: scale(0.94); }

html.silk-light .copy-code {
  background: #FAFAF7; color: #5F665D; border: 1px solid #E1E3DA;
}
html.silk-dark .copy-code {
  background: #111411; color: #98A094; border: 1px solid #2A312A;
}
html.silk-light .copy-code:hover { color: #1F7A4D; border-color: #1F7A4D; }
html.silk-dark  .copy-code:hover { color: #4ED88F; border-color: #4ED88F; }
html.silk-light .copy-code.copied { color: #1F7A4D; border-color: #1F7A4D; }
html.silk-dark  .copy-code.copied { color: #4ED88F; border-color: #4ED88F; }

/* ---- heading anchors --------------------------------------------------- */

.heading-anchor {
  margin-left: .4rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }

html.silk-light .heading-anchor { color: #1F7A4D; }
html.silk-dark  .heading-anchor { color: #4ED88F; }