/* Basic Shiki output styling — tweak to match your site */
.shiki {
  --shiki-bg: var(--bs-body-bg, #f6f8fa);
  --shiki-fg: var(--bs-body-color, #24292e);
  --shiki-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  --shiki-font-size: 0.95rem;

  background: var(--shiki-bg);
  color: var(--shiki-fg);
  padding: 0.9rem 1rem;
  border-radius: 8px;
  overflow: auto;
  font-family: var(--shiki-font-family);
  font-size: var(--shiki-font-size);
  line-height: 1.45;
  margin: 1rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}

/* Language id label (optional small badge in the top-right of the code block) */
.shiki .language-id {
  position: absolute;
  right: 0.6rem;
  top: 0.45rem;
  font-size: 0.7rem;
  opacity: 0.8;
  color: inherit;
  background: transparent;
  padding: 0 0.25rem;
}

/* Ensure code wraps sensibly on small screens but preserves preformatted layout */
.shiki code {
  white-space: pre; /* preserve formatting */
  display: block;
  min-width: 300px;
}

/* Token color variables (used by the runtime output) - fallback defaults */
:root {
  --shiki-color-text: #24292e;
  --shiki-color-background: #ffffff;
  --shiki-token-constant: #1f6feb;
  --shiki-token-string: #0f5132;
  --shiki-token-comment: #6a737d;
  --shiki-token-keyword: #cf222e;
  --shiki-token-parameter: #7d5f00;
  --shiki-token-function: #005cc5;
  --shiki-token-punctuation: #24292e;
  --shiki-token-link: #0366d6;
}

/* Dark theme tweaks */
html[data-theme*="dark"] .shiki {
  --shiki-bg: #0d1117;
  --shiki-fg: #c9d1d9;
  box-shadow: none;
}

/* Small accessibility tweak: increase contrast for token colors in dark mode */
html[data-theme*="dark"] {
  --shiki-token-comment: #8b949e;
}