/* ------------------------------------------------------------------
 * syntax.css — Dark code blocks (Apple dev-docs treatment)
 * Dark surface even in light mode; whites/grays with subtle color accents.
 * ------------------------------------------------------------------ */

.highlight,
pre.highlight,
figure.highlight,
div.highlight {
  background: #272729;
  color: #f5f5f7;
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}

.highlight pre,
pre.highlight,
figure.highlight pre {
  margin: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
  overflow-x: visible;
  font: inherit;
  white-space: pre;
}

/* Inline code inside code blocks should be transparent */
.highlight code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
}

/* Token colors — muted blue/purple/green on dark gray */
.highlight .c,    /* Comment */
.highlight .c1,
.highlight .cm,
.highlight .cs    { color: #8e8e93; font-style: italic; }

.highlight .k,    /* Keyword */
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt    { color: #ff9f0a; }

.highlight .s,    /* String */
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss    { color: #32d74b; }

.highlight .mi,   /* Numbers */
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .mb    { color: #bf5af2; }

.highlight .na,   /* Name.Attribute */
.highlight .nt    { color: #64d2ff; }

.highlight .nf,   /* Function */
.highlight .nc    { color: #5ac8fa; }

.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi    { color: #ff9f0a; }

.highlight .o,
.highlight .ow    { color: #ff9f0a; }

.highlight .err   { color: #ff453a; background: transparent; }

.highlight .p     { color: #d1d1d6; }

/* Diff tokens */
.highlight .gi    { color: #32d74b; background: rgba(50, 215, 75, 0.08); }
.highlight .gd    { color: #ff453a; background: rgba(255, 69, 58, 0.08); }