/*
  SQLED skin. Zinc & Sky, applied over CodeMirror 5's default stylesheet.

  Colours carry meaning here, so they are the only thing in the query that is allowed to
  be decorative: keywords in the accent, strings and numbers warm, comments quiet enough
  to read past. A learner should be able to see the clauses of a query before reading it.

  Selectors are doubled up (.CodeMirror.CodeMirror) on purpose. CodeMirror's own
  stylesheet is fetched at runtime by sqled.js, so it lands in the document after this
  file and wins every tie on equal specificity. Doubling the class breaks the tie here
  rather than hanging !important off every rule.
*/
.CodeMirror.CodeMirror {
  height: auto;
  min-height: 280px;
  border: 1px solid var(--line, #E4E7EA);
  border-radius: 12px;
  background: var(--bg, #F5F7F8);
  color: var(--ink, #09090B);
  font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 8px 4px;
}
.CodeMirror.CodeMirror-focused { outline: 2px solid var(--accent, #0E7490); outline-offset: -1px; }
.CodeMirror .CodeMirror-scroll { min-height: 280px; }
.CodeMirror .CodeMirror-gutters { background: transparent; border-right: 1px solid var(--line, #E4E7EA); }
.CodeMirror .CodeMirror-linenumber { color: var(--muted, #52525B); opacity: .55; padding-right: 10px; }
.CodeMirror .CodeMirror-cursor { border-left: 2px solid var(--ink, #09090B); }
.CodeMirror .CodeMirror-selected { background: rgba(14, 116, 144, .16); }
.CodeMirror .CodeMirror-matchingbracket { color: var(--accent, #0E7490); font-weight: 700; }

.cm-s-default.cm-s-default .cm-keyword     { color: var(--accent, #0E7490); font-weight: 600; }
.cm-s-default.cm-s-default .cm-builtin     { color: var(--accent, #0E7490); }
.cm-s-default.cm-s-default .cm-string      { color: #9A3412; }
.cm-s-default.cm-s-default .cm-number      { color: #9A3412; }
.cm-s-default.cm-s-default .cm-comment     { color: var(--muted, #52525B); font-style: italic; }
.cm-s-default.cm-s-default .cm-operator    { color: var(--ink, #09090B); }
.cm-s-default.cm-s-default .cm-punctuation { color: var(--muted, #52525B); }
.cm-s-default.cm-s-default .cm-variable-2  { color: var(--ink, #09090B); }

/* Dark surface. The kits' SQL boxes sit inside a terminal that is always dark, in light
   mode too, so the editor follows the surface it is on rather than the page theme. */
.terminal-wrap .CodeMirror.CodeMirror {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--stone-100, #F4F4F5);
  min-height: 150px;
  padding: 6px 4px;
}
.terminal-wrap .CodeMirror.CodeMirror-focused { outline: none; }
.terminal-wrap .CodeMirror .CodeMirror-scroll { min-height: 150px; }
.terminal-wrap .CodeMirror .CodeMirror-gutters { border-right: 1px solid var(--stone-700, #3F3F46); }
.terminal-wrap .CodeMirror .CodeMirror-linenumber { color: var(--stone-400, #A1A1AA); }
.terminal-wrap .CodeMirror .CodeMirror-cursor { border-left: 2px solid var(--stone-100, #F4F4F5); }
.terminal-wrap .CodeMirror .CodeMirror-selected { background: rgba(148, 163, 184, .28); }
.terminal-wrap .cm-s-default.cm-s-default .cm-keyword  { color: #67E8F9; font-weight: 600; }
.terminal-wrap .cm-s-default.cm-s-default .cm-builtin  { color: #67E8F9; }
.terminal-wrap .cm-s-default.cm-s-default .cm-string   { color: #FDBA74; }
.terminal-wrap .cm-s-default.cm-s-default .cm-number   { color: #FDBA74; }
.terminal-wrap .cm-s-default.cm-s-default .cm-comment  { color: var(--stone-400, #A1A1AA); }
.terminal-wrap .cm-s-default.cm-s-default .cm-operator,
.terminal-wrap .cm-s-default.cm-s-default .cm-variable-2 { color: var(--stone-100, #F4F4F5); }
.terminal-wrap .cm-s-default.cm-s-default .cm-punctuation { color: var(--stone-400, #A1A1AA); }

/* The completion list. Wide enough for a real column name, and never taller than a
   glance: a list you have to scroll is a list you stop reading. */
.CodeMirror-hints.CodeMirror-hints {
  z-index: 60;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--card, #fff);
  border: 1px solid var(--line, #E4E7EA);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(9, 9, 11, .12);
  padding: 4px;
  max-height: 15em;
}
.CodeMirror-hints .CodeMirror-hint { padding: 5px 10px; border-radius: 7px; color: var(--ink, #09090B); }
.CodeMirror-hints li.CodeMirror-hint-active { background: var(--accent, #0E7490); color: #fff; }