/* 1234.nu shared editor theme (public/_editor.js). CodeMirror 5 renders
   with theme "1234" (.cm-s-1234); everything here reads the site design
   tokens from public/style.css, so light and dark follow the theme toggle.
   Scoped to .ed-host / .cm-s-1234 so it never touches another editor. */

.ed-host { position: relative; }

.CodeMirror.cm-s-1234 {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  background: var(--bg-2);
  color: var(--text);
  border: 0;
  border-radius: 0;
}
.cm-s-1234 .CodeMirror-gutters { background: var(--bg-2); border-right: 1px solid var(--border); }
.cm-s-1234 .CodeMirror-linenumber { color: var(--text-3); padding: 0 0.5rem 0 0.4rem; }
.cm-s-1234 .CodeMirror-activeline-gutter .CodeMirror-linenumber { color: var(--text-2); }
.cm-s-1234 .CodeMirror-cursor { border-left: 2px solid var(--accent); }
.cm-s-1234 .CodeMirror-secondarycursor { border-left: 1px solid var(--accent-dim); }
.cm-s-1234 div.CodeMirror-selected { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cm-s-1234.CodeMirror-focused div.CodeMirror-selected { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.cm-s-1234 .CodeMirror-line::selection,
.cm-s-1234 .CodeMirror-line > span::selection,
.cm-s-1234 .CodeMirror-line > span > span::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.cm-s-1234 .CodeMirror-activeline-background { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cm-s-1234 .CodeMirror-matchingbracket { color: var(--accent) !important; outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.cm-s-1234 .CodeMirror-nonmatchingbracket { color: var(--error) !important; }
.cm-s-1234 .CodeMirror-matchingtag { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cm-s-1234 .cm-matchhighlight { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cm-s-1234 .cm-searching { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.cm-s-1234 .CodeMirror-search-match { background: var(--accent); opacity: 0.6; }
.cm-s-1234 .CodeMirror-placeholder { color: var(--text-3); }
.cm-s-1234 .CodeMirror-foldmarker { color: var(--accent); text-shadow: none; font-family: var(--mono); }
.cm-s-1234 .CodeMirror-foldgutter-open,
.cm-s-1234 .CodeMirror-foldgutter-folded { color: var(--text-3); cursor: pointer; }
.cm-s-1234 .CodeMirror-foldgutter-open::after { content: "\25BE"; }
.cm-s-1234 .CodeMirror-foldgutter-folded::after { content: "\25B8"; }
.cm-s-1234 .CodeMirror-scrollbar-filler,
.cm-s-1234 .CodeMirror-gutter-filler { background: var(--bg-2); }

/* Syntax: the shared --syn-* tokens (same palette as the .hljs rules). */
.cm-s-1234 .cm-comment { color: var(--syn-comment); font-style: italic; }
.cm-s-1234 .cm-keyword { color: var(--syn-key); }
.cm-s-1234 .cm-string,
.cm-s-1234 .cm-string-2 { color: var(--syn-str); }
.cm-s-1234 .cm-number,
.cm-s-1234 .cm-atom { color: var(--syn-num); }
.cm-s-1234 .cm-def,
.cm-s-1234 .cm-builtin { color: var(--syn-fn); }
.cm-s-1234 .cm-variable { color: var(--text); }
.cm-s-1234 .cm-variable-2 { color: var(--text); }
.cm-s-1234 .cm-variable-3,
.cm-s-1234 .cm-type,
.cm-s-1234 .cm-qualifier { color: var(--syn-type); }
.cm-s-1234 .cm-property,
.cm-s-1234 .cm-attribute { color: var(--syn-attr); }
.cm-s-1234 .cm-tag { color: var(--syn-tag); }
.cm-s-1234 .cm-meta { color: var(--syn-meta); }
.cm-s-1234 .cm-operator,
.cm-s-1234 .cm-bracket,
.cm-s-1234 .cm-punctuation { color: var(--text-2); }
.cm-s-1234 .cm-header { color: var(--accent); font-weight: 700; }
.cm-s-1234 .cm-link { color: var(--accent); text-decoration: underline; }
.cm-s-1234 .cm-url { color: var(--syn-str); }
.cm-s-1234 .cm-quote { color: var(--syn-comment); font-style: italic; }
.cm-s-1234 .cm-hr { color: var(--text-3); }
.cm-s-1234 .cm-strong { font-weight: 700; }
.cm-s-1234 .cm-em { font-style: italic; }
.cm-s-1234 .cm-positive { color: var(--success); }
.cm-s-1234 .cm-negative { color: var(--error); }
.cm-s-1234 .cm-error { color: var(--error); }
.cm-s-1234 .cm-invalidchar { color: var(--error); }

/* The find / replace / go-to-line dialog (addon/dialog). */
.cm-s-1234 .CodeMirror-dialog {
  background: var(--bg-3);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
}
.cm-s-1234 .CodeMirror-dialog-top { border-bottom: 1px solid var(--border); }
.cm-s-1234 .CodeMirror-dialog-bottom { border-top: 1px solid var(--border); }
.cm-s-1234 .CodeMirror-dialog input {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.15rem 0.4rem;
  width: 16em;
  min-height: 0;
  margin: 0 0.3rem;
}
.cm-s-1234 .CodeMirror-dialog button {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}
.cm-s-1234 .CodeMirror-search-hint { color: var(--text-3); }

/* Optional addons (Editor.load({ addons: ['hint', 'lint'] })) render on body. */
.CodeMirror-hints {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.82rem;
  z-index: 1200;
}
.CodeMirror-hint { color: var(--text); }
li.CodeMirror-hint-active { background: var(--accent); color: var(--bg); }
.CodeMirror-lint-tooltip {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.8rem;
  z-index: 1200;
}