/* ============================================
   Syntax Highlighting Theme
   Light: GitHub Light | Dark: GitHub Dark
   ============================================ */

/* Code block container - the single box */
.highlight {
  margin: 1.5em 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-block-bg);
  position: relative;
}

.highlight pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.highlight code {
  background: transparent;
  padding: 0;
}

/* Chroma wrapper */
.chroma {
  background: var(--code-block-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-x: auto;
  tab-size: 2;
}

/* Table layout for line numbers */
.chroma .lntable {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.chroma .lntable td {
  padding: 0;
  vertical-align: top;
  border: none;
}

/* Line number column */
.chroma .lntable .lntd:first-child {
  width: 1%;
  white-space: nowrap;
  user-select: none;
}

.chroma .lntable .lntd:first-child pre {
  padding: 10px 0 10px 12px;
}

/* Code column */
.chroma .lntable .lntd:last-child {
  width: 100%;
}

.chroma .lntable .lntd:last-child pre {
  padding: 10px 12px;
  overflow-x: auto;
}

/* Line numbers - subtle, no borders */
.chroma .lnt,
.chroma .ln {
  display: block;
  color: var(--code-line-number);
  padding-right: 12px;
  text-align: right;
  opacity: 0.4;
}

/* Code lines */
.chroma .line,
.chroma .cl {
  display: block;
}

/* Non-table fallback */
.chroma > pre {
  padding: 10px 12px;
}

/* ==========================================
   Light Theme Syntax Colors (GitHub Light)
   ========================================== */
:root {
  /* Base */
  .chroma { color: #24292f; background: #f6f8fa; }
  
  /* Error */
  .chroma .err { color: #cf222e; }
  
  /* Line Link */
  .chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
  
  /* Line Highlight */
  .chroma .hl { background-color: #fff8c5; display: block; }
  
  /* Line Number */
  .chroma .ln { color: #57606a; }
  .chroma .lnt { color: #57606a; }
  
  /* Keyword */
  .chroma .k { color: #cf222e; font-weight: 500; }
  .chroma .kc { color: #cf222e; font-weight: 500; }
  .chroma .kd { color: #cf222e; font-weight: 500; }
  .chroma .kn { color: #cf222e; font-weight: 500; }
  .chroma .kp { color: #cf222e; font-weight: 500; }
  .chroma .kr { color: #cf222e; font-weight: 500; }
  .chroma .kt { color: #953800; font-weight: 500; }
  
  /* Name */
  .chroma .n { color: #24292f; }
  .chroma .na { color: #0550ae; }
  .chroma .nb { color: #0550ae; }
  .chroma .bp { color: #0550ae; }
  .chroma .nc { color: #953800; font-weight: 500; }
  .chroma .no { color: #0550ae; }
  .chroma .nd { color: #8250df; }
  .chroma .ni { color: #24292f; }
  .chroma .ne { color: #953800; font-weight: 500; }
  .chroma .nf { color: #8250df; }
  .chroma .fm { color: #8250df; }
  .chroma .nl { color: #0550ae; }
  .chroma .nn { color: #953800; }
  .chroma .nx { color: #24292f; }
  .chroma .py { color: #0550ae; }
  .chroma .nt { color: #116329; }
  .chroma .nv { color: #0550ae; }
  .chroma .vc { color: #0550ae; }
  .chroma .vg { color: #0550ae; }
  .chroma .vi { color: #0550ae; }
  .chroma .vm { color: #0550ae; }
  
  /* Literal */
  .chroma .l { color: #0550ae; }
  .chroma .ld { color: #0a3069; }
  
  /* String */
  .chroma .s { color: #0a3069; }
  .chroma .sa { color: #0a3069; }
  .chroma .sb { color: #0a3069; }
  .chroma .sc { color: #0a3069; }
  .chroma .dl { color: #0a3069; }
  .chroma .sd { color: #0a3069; }
  .chroma .s2 { color: #0a3069; }
  .chroma .se { color: #0550ae; }
  .chroma .sh { color: #0a3069; }
  .chroma .si { color: #0a3069; }
  .chroma .sx { color: #0a3069; }
  .chroma .sr { color: #0a3069; }
  .chroma .s1 { color: #0a3069; }
  .chroma .ss { color: #0a3069; }
  
  /* Number */
  .chroma .m { color: #0550ae; }
  .chroma .mb { color: #0550ae; }
  .chroma .mf { color: #0550ae; }
  .chroma .mh { color: #0550ae; }
  .chroma .mi { color: #0550ae; }
  .chroma .il { color: #0550ae; }
  .chroma .mo { color: #0550ae; }
  
  /* Operator */
  .chroma .o { color: #cf222e; }
  .chroma .ow { color: #cf222e; font-weight: 500; }
  
  /* Punctuation */
  .chroma .p { color: #24292f; }
  
  /* Comment */
  .chroma .c { color: #6e7781; font-style: italic; }
  .chroma .ch { color: #6e7781; font-style: italic; }
  .chroma .cm { color: #6e7781; font-style: italic; }
  .chroma .c1 { color: #6e7781; font-style: italic; }
  .chroma .cs { color: #6e7781; font-style: italic; font-weight: 500; }
  .chroma .cp { color: #cf222e; font-weight: 500; }
  .chroma .cpf { color: #0a3069; }
  
  /* Generic */
  .chroma .g { color: #24292f; }
  .chroma .gd { color: #82071e; background-color: #ffebe9; }
  .chroma .ge { font-style: italic; }
  .chroma .gr { color: #cf222e; }
  .chroma .gh { color: #0550ae; font-weight: 600; }
  .chroma .gi { color: #116329; background-color: #dafbe1; }
  .chroma .go { color: #24292f; }
  .chroma .gp { color: #57606a; font-weight: 600; }
  .chroma .gs { font-weight: 600; }
  .chroma .gu { color: #0550ae; font-weight: 600; }
  .chroma .gt { color: #cf222e; }
  .chroma .gl { text-decoration: underline; }
  
  /* Text Whitespace */
  .chroma .w { color: #6e7781; }
}

/* ==========================================
   Dark Theme Syntax Colors (GitHub Dark)
   ========================================== */
[data-theme="dark"] {
  /* Base */
  .chroma { color: #e6edf3; background: #0d1117; }
  
  /* Error */
  .chroma .err { color: #f85149; }
  
  /* Line Highlight */
  .chroma .hl { background-color: #343942; display: block; }
  
  /* Line Number */
  .chroma .ln { color: #6e7681; }
  .chroma .lnt { color: #6e7681; }
  
  /* Keyword */
  .chroma .k { color: #ff7b72; font-weight: 500; }
  .chroma .kc { color: #79c0ff; font-weight: 500; }
  .chroma .kd { color: #ff7b72; font-weight: 500; }
  .chroma .kn { color: #ff7b72; font-weight: 500; }
  .chroma .kp { color: #ff7b72; font-weight: 500; }
  .chroma .kr { color: #ff7b72; font-weight: 500; }
  .chroma .kt { color: #ff7b72; font-weight: 500; }
  
  /* Name */
  .chroma .n { color: #e6edf3; }
  .chroma .na { color: #e6edf3; }
  .chroma .nb { color: #e6edf3; }
  .chroma .bp { color: #e6edf3; }
  .chroma .nc { color: #f0883e; font-weight: 500; }
  .chroma .no { color: #79c0ff; }
  .chroma .nd { color: #d2a8ff; }
  .chroma .ni { color: #e6edf3; }
  .chroma .ne { color: #f0883e; font-weight: 500; }
  .chroma .nf { color: #d2a8ff; }
  .chroma .fm { color: #d2a8ff; }
  .chroma .nl { color: #79c0ff; }
  .chroma .nn { color: #ffa657; }
  .chroma .nx { color: #e6edf3; }
  .chroma .py { color: #79c0ff; }
  .chroma .nt { color: #7ee787; }
  .chroma .nv { color: #79c0ff; }
  .chroma .vc { color: #79c0ff; }
  .chroma .vg { color: #79c0ff; }
  .chroma .vi { color: #79c0ff; }
  .chroma .vm { color: #79c0ff; }
  
  /* Literal */
  .chroma .l { color: #a5d6ff; }
  .chroma .ld { color: #a5d6ff; }
  
  /* String */
  .chroma .s { color: #a5d6ff; }
  .chroma .sa { color: #a5d6ff; }
  .chroma .sb { color: #a5d6ff; }
  .chroma .sc { color: #a5d6ff; }
  .chroma .dl { color: #a5d6ff; }
  .chroma .sd { color: #a5d6ff; }
  .chroma .s2 { color: #a5d6ff; }
  .chroma .se { color: #79c0ff; }
  .chroma .sh { color: #a5d6ff; }
  .chroma .si { color: #a5d6ff; }
  .chroma .sx { color: #a5d6ff; }
  .chroma .sr { color: #a5d6ff; }
  .chroma .s1 { color: #a5d6ff; }
  .chroma .ss { color: #a5d6ff; }
  
  /* Number */
  .chroma .m { color: #79c0ff; }
  .chroma .mb { color: #79c0ff; }
  .chroma .mf { color: #79c0ff; }
  .chroma .mh { color: #79c0ff; }
  .chroma .mi { color: #79c0ff; }
  .chroma .il { color: #79c0ff; }
  .chroma .mo { color: #79c0ff; }
  
  /* Operator */
  .chroma .o { color: #ff7b72; }
  .chroma .ow { color: #ff7b72; font-weight: 500; }
  
  /* Punctuation */
  .chroma .p { color: #e6edf3; }
  
  /* Comment */
  .chroma .c { color: #8b949e; font-style: italic; }
  .chroma .ch { color: #8b949e; font-style: italic; }
  .chroma .cm { color: #8b949e; font-style: italic; }
  .chroma .c1 { color: #8b949e; font-style: italic; }
  .chroma .cs { color: #8b949e; font-style: italic; font-weight: 500; }
  .chroma .cp { color: #ff7b72; font-weight: 500; }
  .chroma .cpf { color: #a5d6ff; }
  
  /* Generic */
  .chroma .g { color: #e6edf3; }
  .chroma .gd { color: #ffa198; background-color: #490202; }
  .chroma .ge { font-style: italic; }
  .chroma .gr { color: #f85149; }
  .chroma .gh { color: #79c0ff; font-weight: 600; }
  .chroma .gi { color: #7ee787; background-color: #04260f; }
  .chroma .go { color: #8b949e; }
  .chroma .gp { color: #8b949e; font-weight: 600; }
  .chroma .gs { font-weight: 600; }
  .chroma .gu { color: #79c0ff; font-weight: 600; }
  .chroma .gt { color: #f85149; }
  .chroma .gl { text-decoration: underline; }
  
  /* Text Whitespace */
  .chroma .w { color: #6e7681; }
}

/* ==========================================
   Responsive adjustments
   ========================================== */
@media (max-width: 768px) {
  .chroma {
    font-size: 0.75rem;
  }

  .chroma .lntable .lntd:first-child pre {
    padding: 8px 0 8px 8px;
  }

  .chroma .lntable .lntd:last-child pre {
    padding: 8px;
  }

  .chroma .lnt,
  .chroma .ln {
    padding-right: 8px;
  }
}