/* ==========================================================================
   VS Code Dark+ Theme – Exact Color Scheme
   Code blocks styled to match Visual Studio Code's default dark theme
   ========================================================================== */

/* ── Chroma – VS Code Dark+ colors ────────────────────────────────────────── */
.bg { color:#d4d4d4; background-color:#1e1e1e; }
.chroma { color:#d4d4d4; background-color:#1e1e1e; }
.chroma .lnlinks { outline:none; text-decoration:none; color:inherit; }
.chroma .lntd { vertical-align:top; padding:0; margin:0; border:0; }
.chroma .lntable { border-spacing:0; padding:0; margin:0; border:0; }
.chroma .hl { background-color:#264f78; }
.chroma .lnt { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em; color:#858585; }
.chroma .ln  { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em; color:#858585; }
.chroma .line { display:flex; }

/* Keywords – blue */
.chroma .k  { color:#569cd6; }
.chroma .kc { color:#569cd6; }
.chroma .kd { color:#569cd6; }
.chroma .kn { color:#c586c0; }   /* import/from – magenta/pink */
.chroma .kp { color:#569cd6; }
.chroma .kr { color:#569cd6; }
.chroma .kt { color:#4ec9b0; }   /* types – teal */

/* Names */
.chroma .na { color:#9cdcfe; }   /* attributes – light blue */
.chroma .nc { color:#4ec9b0; }   /* class names – teal */
.chroma .nl { color:#9cdcfe; }   /* labels – light blue */
.chroma .nt { color:#569cd6; }   /* tags (HTML/XML) – blue */
.chroma .nb { color:#dcdcaa; }   /* builtins – yellow */
.chroma .bp { color:#d4d4d4; }   /* builtin pseudo */
.chroma .nv { color:#9cdcfe; }   /* variables – light blue */
.chroma .vc { color:#9cdcfe; }
.chroma .vg { color:#9cdcfe; }
.chroma .vi { color:#9cdcfe; }
.chroma .vm { color:#9cdcfe; }

/* Functions – yellow */
.chroma .nf { color:#dcdcaa; }
.chroma .fm { color:#dcdcaa; }

/* Strings – orange/brown */
.chroma .s  { color:#ce9178; }
.chroma .sa { color:#ce9178; }
.chroma .sb { color:#ce9178; }
.chroma .sc { color:#ce9178; }
.chroma .dl { color:#ce9178; }
.chroma .sd { color:#ce9178; }
.chroma .s2 { color:#ce9178; }
.chroma .se { color:#d7ba7d; }   /* escape sequences – gold */
.chroma .sh { color:#ce9178; }
.chroma .si { color:#ce9178; }
.chroma .sx { color:#ce9178; }
.chroma .sr { color:#d16969; }   /* regex – red */
.chroma .s1 { color:#ce9178; }
.chroma .ss { color:#ce9178; }

/* Numbers – light green */
.chroma .m  { color:#b5cea8; }
.chroma .mb { color:#b5cea8; }
.chroma .mf { color:#b5cea8; }
.chroma .mh { color:#b5cea8; }
.chroma .mi { color:#b5cea8; }
.chroma .il { color:#b5cea8; }
.chroma .mo { color:#b5cea8; }

/* Operators */
.chroma .o  { color:#d4d4d4; }
.chroma .ow { color:#569cd6; }   /* operator words (and, or, not) – blue */

/* Comments – green */
.chroma .c  { color:#6a9955; }
.chroma .ch { color:#6a9955; }
.chroma .cm { color:#6a9955; }
.chroma .c1 { color:#6a9955; }
.chroma .cs { color:#6a9955; }
.chroma .cp { color:#c586c0; }   /* preprocessor – magenta */
.chroma .cpf{ color:#ce9178; }   /* preprocessor file – string color */

/* Generic */
.chroma .gd { color:#ce9178; background-color:rgba(206,45,45,0.15); }  /* deleted – red bg */
.chroma .ge { font-style:italic; }
.chroma .gh { color:#569cd6; font-weight:bold; }
.chroma .gi { color:#b5cea8; background-color:rgba(75,180,75,0.15); }  /* inserted – green bg */
.chroma .go { color:#858585; }
.chroma .gu { color:#569cd6; font-weight:bold; }
.chroma .gl { text-decoration:underline; }

/* ── Code block wrapper ──────────────────────────────────────────────────── */
.highlight {
  position: relative;
  margin: 1.75rem 0 1.25rem;
}

.highlight pre {
  background-color: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  padding: 1.5rem 1.2rem 1rem;
  overflow-x: auto;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  tab-size: 4;
  -moz-tab-size: 4;
}

.highlight pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
  color: inherit;
}

/* ── Language badge ──────────────────────────────────────────────────────── */
.highlight .code-lang {
  position: absolute;
  top: 0;
  left: 12px;
  background: #2d2d2d;
  color: #858585;
  font-size: 0.65rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 2px 10px;
  border-radius: 0 0 4px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  z-index: 2;
  border: 1px solid #3c3c3c;
  border-top: none;
}

/* ── Copy button ─────────────────────────────────────────────────────────── */
.highlight .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #858585;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  z-index: 3;
}

.highlight:hover .copy-btn {
  opacity: 1;
}

.highlight .copy-btn:hover {
  background: #2d2d2d;
  color: #d4d4d4;
}

.highlight .copy-btn.copied {
  color: #6a9955;
  border-color: #6a9955;
}

.highlight .copy-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Word-wrap toggle button ──────────────────────────────────────────────── */
.highlight .wrap-btn {
  position: absolute;
  top: 8px;
  right: 78px;
  background: transparent;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #858585;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  z-index: 3;
}

.highlight:hover .wrap-btn {
  opacity: 1;
}

.highlight .wrap-btn:hover {
  background: #2d2d2d;
  color: #d4d4d4;
}

.highlight .wrap-btn.active {
  color: #58a6ff;
  border-color: #58a6ff;
}

.highlight .wrap-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Wrapped state ───────────────────────────────────────────────────────── */
.highlight.is-wrapped pre {
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.highlight.is-wrapped pre code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Inline code ─────────────────────────────────────────────────────────── */
:not(pre) > code {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.88em;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
  border: 1px solid #3c3c3c;
}

/* ── Scrollbar for code blocks (VS Code style) ───────────────────────────── */
.highlight pre::-webkit-scrollbar {
  height: 10px;
}
.highlight pre::-webkit-scrollbar-track {
  background: #1e1e1e;
}
.highlight pre::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 0;
}
.highlight pre::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}
.highlight pre::-webkit-scrollbar-corner {
  background: #1e1e1e;
}