/* Code editor panel (CodeMirror) with its own dark/light toggle. */

#editor-panel {
  display: flex; flex-direction: column;
  background: #232931;              /* dark editor: night ink */
  overflow: hidden;
}

.editor-topbar,
.editor-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: #2b323b;
}
.editor-topbar { height: 42px; border-bottom: 1px solid #3b434e; }
.editor-footer { height: 56px; border-top: 1px solid #3b434e; }

.editor-fname {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: #b6bec9;
}
.editor-fname i { color: #f6d67f; }
.editor-actions { display: flex; align-items: center; gap: 10px; }

#editor-theme-toggle {
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 9px; border-radius: 3px;
  color: #b6bec9; border: 1px solid #4a5360;
  transition: color .15s, border-color .15s;
}
#editor-theme-toggle:hover { color: #fcfaf6; border-color: #b6bec9; }
#editor-panel .text-btn { color: #8f99a6; }
#editor-panel .text-btn:hover { color: #e59c84; }

.editor-area { flex: 1; overflow: hidden; }

.CodeMirror {
  height: 100% !important;
  font-family: var(--font-mono) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.CodeMirror-gutters { border-right: 1px solid #3b434e !important; }

/* Retint CodeMirror's stock themes to the notebook palette */
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { background: #232931 !important; color: #e4e8ed !important; }
.cm-s-dracula .CodeMirror-linenumber { color: #66707d !important; }
.cm-s-dracula .cm-keyword { color: #f0a98f !important; }
.cm-s-dracula .cm-def, .cm-s-dracula .cm-builtin { color: #9cc8e8 !important; }
.cm-s-dracula .cm-string { color: #9fd4b3 !important; }
.cm-s-dracula .cm-number { color: #edd28a !important; }
.cm-s-dracula .cm-comment { color: #7f8a96 !important; font-style: italic; }
.cm-s-dracula .cm-variable, .cm-s-dracula .cm-variable-2, .cm-s-dracula .cm-property,
.cm-s-dracula .cm-operator { color: #e4e8ed !important; }
.cm-s-dracula .CodeMirror-cursor { border-left: 2px solid #f6d67f !important; }
.cm-s-dracula .CodeMirror-selected, .cm-s-dracula .CodeMirror-line::selection { background: rgba(255, 216, 74, .2) !important; }
.cm-s-dracula .CodeMirror-activeline-background { background: #2b323b !important; }

.cm-s-eclipse.CodeMirror, .cm-s-eclipse .CodeMirror-gutters { background: var(--surface) !important; color: var(--text) !important; }
.cm-s-eclipse .CodeMirror-linenumber { color: var(--muted) !important; }
.cm-s-eclipse .cm-keyword { color: #a64c36 !important; font-weight: 500; }
.cm-s-eclipse .cm-def, .cm-s-eclipse .cm-builtin { color: #2d6a8a !important; }
.cm-s-eclipse .cm-string { color: #3d7650 !important; }
.cm-s-eclipse .cm-number { color: #8a6516 !important; }
.cm-s-eclipse .cm-comment { color: #6e747d !important; font-style: italic; }
.cm-s-eclipse .cm-variable, .cm-s-eclipse .cm-variable-2 { color: var(--text) !important; }
.cm-s-eclipse .CodeMirror-cursor { border-left: 2px solid var(--accent) !important; }
.cm-s-eclipse .CodeMirror-selected { background: color-mix(in srgb, var(--marker) 45%, transparent) !important; }

.editor-hint { font-family: var(--font-mono); font-size: 11.5px; color: #8f99a6; }
#editor-panel .kbd { background: #2f3640; color: #e3e8ee; border-color: #66707d; }

/* Run Tests: the one loud button on the page */
#run-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 20px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: #232931; background: #f6d67f;
  border: 2px solid #f6d67f;
  box-shadow: 3px 3px 0 #d9826a;
  transition: transform .12s, box-shadow .12s, opacity .15s;
}
#run-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #d9826a; }
#run-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #d9826a; }
#run-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Light editor (toggled by .editor-light, independent of the page theme) */
#editor-panel.editor-light { background: var(--surface); }
#editor-panel.editor-light .editor-topbar,
#editor-panel.editor-light .editor-footer { background: var(--sunken); border-color: var(--border); }
#editor-panel.editor-light .editor-fname { color: var(--faint); }
#editor-panel.editor-light .editor-fname i { color: var(--accent); }
#editor-panel.editor-light #editor-theme-toggle { color: var(--faint); border-color: var(--border); }
#editor-panel.editor-light .text-btn,
#editor-panel.editor-light .editor-hint { color: var(--muted); }
#editor-panel.editor-light .kbd { background: var(--surface); color: var(--text); border-color: var(--ink); }
#editor-panel.editor-light .CodeMirror-gutters { border-right-color: var(--border) !important; }
#editor-panel.editor-light #run-btn { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
#editor-panel.editor-light #run-btn:hover { box-shadow: 4px 4px 0 var(--ink); }

/* Shown after all tests pass */
.next-link {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 600;
  color: #8fcaa1; border: 2px solid #8fcaa1;
  transition: background .15s;
}
.next-link:hover { background: rgba(92, 194, 181, .14); }
#editor-panel.editor-light .next-link { color: var(--done); border-color: var(--done); }