/* Service Lab dark theme for embedded read-only CodeMirror 5 code blocks.
   The hosting <pre> keeps its site styling (background/border/padding come
   from index.css, including the mobile code color-scheme experiment), so the
   editor surface itself stays transparent and always sits on the site's dark
   panel. Everything CodeMirror would normally paint light (selection, gutter
   and scrollbar fillers) is overridden to the site palette here. */

.cm-s-servicelab.CodeMirror {
  height: auto;
  background: transparent;
  color: #eceaf2;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.cm-host .cm-s-servicelab.CodeMirror {
  font-size: 15px;
  line-height: 1.6;
}

.cm-host .cm-s-servicelab .CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

.cm-host .cm-s-servicelab .CodeMirror-lines {
  padding: 0;
}

.cm-host .cm-s-servicelab pre.CodeMirror-line,
.cm-host .cm-s-servicelab pre.CodeMirror-line-like {
  padding: 0;
}

.cm-host .cm-s-servicelab .CodeMirror-cursor {
  display: none;
}

/* selection in the site accent purple instead of CM's default light gray */
.cm-s-servicelab .CodeMirror-selected {
  background: rgba(150, 35, 255, 0.28);
}

.cm-s-servicelab.CodeMirror-focused .CodeMirror-selected {
  background: rgba(150, 35, 255, 0.4);
}

/* CM paints these white by default — keep them on the site's card color */
.cm-s-servicelab .CodeMirror-gutters,
.cm-s-servicelab .CodeMirror-scrollbar-filler,
.cm-s-servicelab .CodeMirror-gutter-filler {
  background: #18141c;
}

.cm-s-servicelab .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.04);
}

/* token colors */
.cm-s-servicelab .cm-keyword {
  color: #c792ea;
}

.cm-s-servicelab .cm-def {
  color: #82aaff;
}

.cm-s-servicelab .cm-builtin {
  color: #7fd1c8;
}

.cm-s-servicelab .cm-string {
  color: #a5d6a7;
}

.cm-s-servicelab .cm-number {
  color: #f2b374;
}

.cm-s-servicelab .cm-atom {
  color: #ef9b9b;
}

.cm-s-servicelab .cm-comment {
  color: #7c7484;
  font-style: italic;
}

.cm-s-servicelab .cm-meta {
  color: #f2d17c;
}

.cm-s-servicelab .cm-operator {
  color: #b8b2c4;
}

.cm-s-servicelab .cm-variable {
  color: #eceaf2;
}

.cm-s-servicelab .cm-variable-2 {
  color: #e6e1f0;
}

.cm-s-servicelab .cm-qualifier {
  color: #f2d17c;
}

@media (max-width: 767px) {
  .cm-host .cm-s-servicelab.CodeMirror {
    font-size: 12px;
  }
}