/* ============================================================
   S-EDV code-block theme for highlight.js.
   Replaces github.css (a light theme whose dark token colours were
   unreadable on our dark code surface). Brand-consistent: dark, square,
   high-contrast, muted palette. Token colours are LIGHT (for the dark bg).
   The container bg/padding/scroll come from public.css `.prose pre`;
   here we only fix colours + square the corners + style the copy button.
   ============================================================ */

/* Square corners (brand) + brand-exact dark surface. */
.prose pre { background: #0a0a0a; border-radius: 0; border: 1px solid #1a1a1a; }
.prose pre code,
code.hljs { color: #e5e5e5; background: none; }

/* Horizontal scrollbar inside code blocks */
.prose pre::-webkit-scrollbar { height: 6px; }
.prose pre::-webkit-scrollbar-track { background: #1a1a1a; }
.prose pre::-webkit-scrollbar-thumb { background: #444; }
.prose pre::-webkit-scrollbar-thumb:hover { background: #666; }

/* ── highlight.js token classes ── */

/* Keywords: sudo, function, return, if, class … */
.hljs-keyword,
.hljs-doctag,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ { color: #ff8a65; font-weight: 500; }

/* Strings + regex */
.hljs-string,
.hljs-regexp,
.hljs-meta .hljs-string { color: #c5e8b7; }

/* Comments */
.hljs-comment,
.hljs-code,
.hljs-formula { color: #888888; font-style: italic; }

/* Numbers + literals + meta */
.hljs-number,
.hljs-literal,
.hljs-meta { color: #f5d76e; }

/* Function / class titles */
.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-title.class_.inherited__ { color: #82d4ff; }

/* Variables, attributes, selectors */
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id { color: #82d4ff; }

/* Built-ins, sections, symbols */
.hljs-section,
.hljs-built_in,
.hljs-symbol { color: #d0a9f5; font-weight: 500; }

/* Tag names, quotes, selector tags */
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo { color: #ff8a65; }

/* Template-string substitutions */
.hljs-subst { color: #e5e5e5; }

/* Markup */
.hljs-bullet { color: #f5d76e; }
.hljs-emphasis { color: #e5e5e5; font-style: italic; }
.hljs-strong { color: #e5e5e5; font-weight: 700; }

/* Diffs */
.hljs-addition { color: #c5e8b7; background-color: rgba(197, 232, 183, 0.10); }
.hljs-deletion { color: #ff6b6b; background-color: rgba(255, 107, 107, 0.10); }

/* Default-coloured tokens */
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag { color: #e5e5e5; }

/* ── Language label (set by app.js on the <pre>) ── */
.prose pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 8px;
  right: 92px;
  font: 500 11px 'Inter', var(--font-sans), sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #666;
  pointer-events: none;
}

/* ── Copy button (created by app.js as .copy-code) ── */
.prose pre { position: relative; }
.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #1a1a1a;
  color: #e5e5e5;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  padding: 4px 10px;
  font: 500 11px 'Inter', var(--font-sans), sans-serif;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.copy-code:hover { background: #2a2a2a; border-color: #444; }

@media (max-width: 768px) {
  .prose pre code, code.hljs { font-size: 12px; }
  .copy-code { font-size: 10px; padding: 3px 8px; }
  .prose pre[data-language]::before { right: 78px; font-size: 10px; }
}