/* Syntax highlighting styles for Thinking Machines blog */

/* Base syntax highlighting */
.highlight {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  margin: 2rem 0;
  overflow-x: auto;
  position: relative;
}

.highlight pre {
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'Chakra Petch', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  background: transparent;
  border: none;
  border-radius: 0;
}

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

/* Chroma syntax highlighting */
.chroma,
pre.chroma {
  background: #f8f9fa;
  color: #333;
  position: relative; /* For absolute-positioned copy button */
  padding: 0.9rem 1.5rem 0.9rem 0.9rem; /* Match .content pre padding */
}

/* Language labels unified in typography.css - no duplicate rules needed here */

.chroma .lnt {
  color: #999;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
}

.chroma .hl {
  background: #ffc;
  display: block;
  width: 100%;
  padding: 0.125em 0;
}

.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  overflow: auto;
  display: block;
}

.chroma .lntd:last-child {
  padding-right: 0.4em;
}

/* Python syntax highlighting */
.chroma .language-python .line {
  display: block;
  padding: 0.125em 0;
}

.chroma .language-python .cl {
  display: block;
  padding: 0.125em 0;
}

/* Token colors */
.chroma .c1 { color: #6a737d; font-style: italic; } /* Comment */
.chroma .cm { color: #6a737d; font-style: italic; } /* Comment.Multiline */
.chroma .cp { color: #6a737d; font-weight: bold; } /* Comment.Preproc */
.chroma .cs { color: #6a737d; font-style: italic; } /* Comment.Special */

.chroma .gd { color: #d73a49; background-color: #ffeef0; } /* Generic.Deleted */
.chroma .ge { font-style: italic; } /* Generic.Emph */
.chroma .gr { color: #d73a49; } /* Generic.Error */
.chroma .gh { color: #24292e; font-weight: bold; } /* Generic.Heading */
.chroma .gi { color: #28a745; background-color: #f0fff4; } /* Generic.Inserted */
.chroma .go { color: #6f42c1; } /* Generic.Output */
.chroma .gp { color: #005cc5; font-weight: bold; } /* Generic.Prompt */
.chroma .gs { font-weight: bold; } /* Generic.Strong */
.chroma .gu { color: #6f42c1; font-weight: bold; } /* Generic.Subheading */
.chroma .gt { color: #d73a49; } /* Generic.Traceback */

.chroma .kc { color: #005cc5; font-weight: bold; } /* Keyword.Constant */
.chroma .kd { color: #d73a49; font-weight: bold; } /* Keyword.Declaration */
.chroma .kn { color: #d73a49; font-weight: bold; } /* Keyword.Namespace */
.chroma .kp { color: #d73a49; font-weight: bold; } /* Keyword.Pseudo */
.chroma .kr { color: #d73a49; font-weight: bold; } /* Keyword.Reserved */
.chroma .kt { color: #d73a49; font-weight: bold; } /* Keyword.Type */
.chroma .k { color: #d73a49; font-weight: bold; } /* Keyword */

.chroma .l { color: #032f62; } /* Literal */
.chroma .ld { color: #032f62; } /* Literal.Date */
.chroma .m { color: #005cc5; } /* Literal.Number */
.chroma .mb { color: #005cc5; } /* Literal.Number.Bin */
.chroma .mf { color: #005cc5; } /* Literal.Number.Float */
.chroma .mh { color: #005cc5; } /* Literal.Number.Hex */
.chroma .mi { color: #005cc5; } /* Literal.Number.Integer */
.chroma .il { color: #005cc5; } /* Literal.Number.Integer.Long */
.chroma .mo { color: #005cc5; } /* Literal.Number.Oct */
.chroma .mx { color: #005cc5; } /* Literal.Number.Hex */
.chroma .s { color: #032f62; } /* Literal.String */
.chroma .sb { color: #032f62; } /* Literal.String.Backtick */
.chroma .sc { color: #032f62; } /* Literal.String.Char */
.chroma .sd { color: #6a737d; font-style: italic; } /* Literal.String.Doc */
.chroma .s2 { color: #032f62; } /* Literal.String.Double */
.chroma .se { color: #032f62; font-weight: bold; } /* Literal.String.Escape */
.chroma .sh { color: #032f62; } /* Literal.String.Heredoc */
.chroma .si { color: #032f62; font-style: italic; } /* Literal.String.Interpol */
.chroma .sx { color: #032f62; } /* Literal.String.Other */
.chroma .sr { color: #032f62; } /* Literal.String.Regex */
.chroma .s1 { color: #032f62; } /* Literal.String.Single */
.chroma .ss { color: #005cc5; } /* Literal.String.Symbol */

.chroma .bp { color: #005cc5; } /* Name.Builtin.Pseudo */
.chroma .vc { color: #6f42c1; } /* Name.Variable.Class */
.chroma .vg { color: #6f42c1; } /* Name.Variable.Global */
.chroma .vi { color: #6f42c1; } /* Name.Variable.Instance */
.chroma .vm { color: #6f42c1; } /* Name.Variable.Magic */
.chroma .il { color: #005cc5; } /* Literal.Number.Integer.Long */

.chroma .na { color: #6f42c1; } /* Name.Attribute */
.chroma .nb { color: #005cc5; } /* Name.Builtin */
.chroma .nc { color: #6f42c1; font-weight: bold; } /* Name.Class */
.chroma .no { color: #005cc5; } /* Name.Constant */
.chroma .nd { color: #6f42c1; font-weight: bold; } /* Name.Decorator */
.chroma .ni { color: #6f42c1; } /* Name.Entity */
.chroma .ne { color: #6f42c1; font-weight: bold; } /* Name.Exception */
.chroma .nf { color: #6f42c1; } /* Name.Function */
.chroma .nl { color: #6f42c1; } /* Name.Label */
.chroma .nn { color: #6f42c1; } /* Name.Namespace */
.chroma .nx { color: #6f42c1; } /* Name.Other */
.chroma .py { color: #6f42c1; } /* Name.Property */
.chroma .nt { color: #6f42c1; font-weight: bold; } /* Name.Tag */
.chroma .nv { color: #6f42c1; } /* Name.Variable */
.chroma .ow { color: #d73a49; font-weight: bold; } /* Operator.Word */
.chroma .w { color: #bbbbbb; } /* Text.Whitespace */

.chroma .err { color: #a61717; background-color: #e3d2d2; } /* Error */
/* .chroma .x - Other token type (no styling needed) */

/* Language-specific overrides */
.chroma .language-python .n { color: #6f42c1; } /* Name */
.chroma .language-python .o { color: #d73a49; font-weight: bold; } /* Operator */
.chroma .language-python .p { color: #333; } /* Punctuation */

/* Copy button - unified styling in typography.css */

/* Responsive code blocks */
@media (max-width: 768px) {
  .highlight {
    margin: 1rem -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .highlight pre {
    padding: 1rem;
    font-size: 0.8rem;
  }
}