/* Syntax highlighting (tok-*) and language tab icons, shared by every page. */
.tok-property { color: #7DD3FC; }
.tok-string { color: #86EFAC; }
.tok-keyword { color: #F0ABFC; }
.tok-comment { color: #64748B; font-style: italic; }
.tok-interp { color: #FCD34D; }

body[data-theme="light"] .tok-property { color: #0369A1; }
body[data-theme="light"] .tok-string { color: #15803D; }
body[data-theme="light"] .tok-keyword { color: #A21CAF; }
body[data-theme="light"] .tok-comment { color: #8A8374; }
body[data-theme="light"] .tok-interp { color: #B45309; }

.code-tab img,
.docs-tab img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Monochrome icons (terminal, browser, crystal, js) render as a mask
   filled with currentColor so they follow the tab's text color. */
.code-tab-icon-mask {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Copy button on article/docs code blocks (javascript/code-copy.js). */
.pre-copy-wrap { position: relative; width: 100%; }
.pre-copy-wrap pre { padding-right: 3.25rem; }
.pre-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-faint);
  cursor: pointer;
}
.pre-copy-btn:hover { color: var(--text); border-color: var(--border-hover); }
.pre-copy-btn svg { width: 15px; height: 15px; }
.pre-copy-btn .icon-check { display: none; }
.pre-copy-btn.copied { color: var(--ok); border-color: var(--ok); }
.pre-copy-btn.copied .icon-copy { display: none; }
.pre-copy-btn.copied .icon-check { display: block; }