/* Styles for the <terra-draw-editor> live editor widget. */

terra-draw-editor.tde {
  display: block;
  margin: 1em 0;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.75rem;

  /* Editor theme — VS Code "Light+". The dark counterpart is the
     [data-md-color-scheme="slate"] block below, so the code pane follows the
     site's palette toggle with no JavaScript. Syntax colours reach CodeMirror
     through the `tok-*` classes emitted by classHighlighter (see
     live-editor.js); never hardcode a colour in the .cm-* rules. */
  --tde-cm-bg: #ffffff;
  --tde-cm-fg: #1f1f1f;
  --tde-cm-gutter-bg: #ffffff;
  --tde-cm-gutter-fg: #237893;
  --tde-cm-active-line: #f2f6fc;
  --tde-cm-active-gutter-fg: #0b216f;
  --tde-cm-selection: #add6ff;
  --tde-cm-cursor: #000000;
  --tde-cm-panel-bg: #f3f3f3;
  --tde-cm-matching-bracket: rgba(0, 0, 0, 0.18);
  --tde-cm-keyword: #0000ff;
  --tde-cm-control: #af00db;
  --tde-cm-string: #a31515;
  --tde-cm-comment: #008000;
  --tde-cm-number: #098658;
  --tde-cm-type: #267f99;
  --tde-cm-function: #795e26;
  --tde-cm-variable: #001080;
  --tde-cm-property: #0451a5;
  --tde-cm-operator: #1f1f1f;
  --tde-cm-regexp: #811f3f;
  --tde-cm-invalid: #cd3131;
  /* Divider rails, readable against either pane background. */
  --tde-rail: rgba(0, 0, 0, 0.25);
}

/* VS Code "Dark+" for the site's slate palette. */
[data-md-color-scheme='slate'] terra-draw-editor.tde {
  --tde-cm-bg: #1e1e1e;
  --tde-cm-fg: #d4d4d4;
  --tde-cm-gutter-bg: #1e1e1e;
  --tde-cm-gutter-fg: #858585;
  --tde-cm-active-line: #282828;
  --tde-cm-active-gutter-fg: #c6c6c6;
  --tde-cm-selection: #264f78;
  --tde-cm-cursor: #aeafad;
  --tde-cm-panel-bg: #252526;
  --tde-cm-matching-bracket: rgba(255, 255, 255, 0.25);
  --tde-cm-keyword: #569cd6;
  --tde-cm-control: #c586c0;
  --tde-cm-string: #ce9178;
  --tde-cm-comment: #6a9955;
  --tde-cm-number: #b5cea8;
  --tde-cm-type: #4ec9b0;
  --tde-cm-function: #dcdcaa;
  --tde-cm-variable: #9cdcfe;
  --tde-cm-property: #9cdcfe;
  --tde-cm-operator: #d4d4d4;
  --tde-cm-regexp: #d16969;
  --tde-cm-invalid: #f14c4c;
  --tde-rail: rgba(255, 255, 255, 0.4);
}

.tde-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: var(--md-code-bg-color, #f5f5f5);
  border-bottom: 1px solid var(--md-default-fg-color--lightest, #ddd);
}

.tde-tabs {
  display: flex;
  gap: 4px;
}

.tde-tab {
  padding: 4px 14px;
  border: none;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: var(--md-default-fg-color--light, #555);
  cursor: pointer;
  font: inherit;
}

.tde-tab-active {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-typeset-color, #000);
  font-weight: 700;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
}

.tde-actions {
  display: flex;
  gap: 6px;
}

.tde-btn {
  padding: 4px 12px;
  border: 1px solid var(--md-default-fg-color--lighter, #bbb);
  border-radius: 4px;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-typeset-color, #000);
  cursor: pointer;
  font: inherit;
}

.tde-btn:hover {
  border-color: var(--md-accent-fg-color, #526cfe);
  color: var(--md-accent-fg-color, #526cfe);
}

.tde-run {
  border-color: var(--md-primary-fg-color, #3f51b5);
  background: var(--md-primary-fg-color, #3f51b5);
  color: var(--md-primary-bg-color, #fff);
}

.tde-run:hover {
  color: var(--md-primary-bg-color, #fff);
  opacity: 0.85;
}

.tde-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}

.tde-icon-btn svg {
  display: block;
}

.tde-body {
  display: flex;
}

/* Fullscreen: the whole widget fills the screen so there is more room to
   edit code. The toolbar stays at the top; the body takes the rest. */
terra-draw-editor.tde:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: var(--md-default-bg-color, #fff);
}

terra-draw-editor.tde:fullscreen .tde-body {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
}

.tde-editor {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--tde-cm-bg);
}

/* One pane per tab (exercise / answer); only the active one is shown. */
.tde-editor-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.tde-editor-pane.tde-hidden {
  display: none !important;
}

.tde-editor-pane .cm-editor {
  height: 100%;
  font-size: 0.7rem;
  background-color: var(--tde-cm-bg);
  color: var(--tde-cm-fg);
}

.tde-editor-pane .cm-editor.cm-focused {
  outline: none;
}

/* --- CodeMirror theme -----------------------------------------------------
   Every rule below is scoped under `.tde-editor-pane .cm-editor` so it beats
   CodeMirror's injected base theme (specificity 0,2,0) without !important.
   Colours come from the variables at the top of this file. */

.tde-editor-pane .cm-editor .cm-content {
  color: var(--tde-cm-fg);
  caret-color: var(--tde-cm-cursor);
}

.tde-editor-pane .cm-editor .cm-gutters {
  background-color: var(--tde-cm-gutter-bg);
  color: var(--tde-cm-gutter-fg);
  border-right: none;
}

.tde-editor-pane .cm-editor .cm-activeLine,
.tde-editor-pane .cm-editor .cm-activeLineGutter {
  background-color: var(--tde-cm-active-line);
}

.tde-editor-pane .cm-editor .cm-activeLineGutter {
  color: var(--tde-cm-active-gutter-fg);
}

.tde-editor-pane .cm-editor .cm-cursor,
.tde-editor-pane .cm-editor .cm-dropCursor {
  border-left-color: var(--tde-cm-cursor);
}

.tde-editor-pane .cm-editor .cm-selectionBackground,
.tde-editor-pane .cm-editor.cm-focused .cm-selectionBackground,
.tde-editor-pane .cm-editor .cm-content ::selection {
  background-color: var(--tde-cm-selection);
}

.tde-editor-pane .cm-editor .cm-matchingBracket,
.tde-editor-pane .cm-editor.cm-focused .cm-matchingBracket {
  background-color: var(--tde-cm-matching-bracket);
  outline: none;
}

.tde-editor-pane .cm-editor .cm-nonmatchingBracket {
  color: var(--tde-cm-invalid);
}

.tde-editor-pane .cm-editor .cm-foldPlaceholder {
  background-color: var(--tde-cm-panel-bg);
  color: var(--tde-cm-gutter-fg);
  border-color: var(--tde-cm-matching-bracket);
}

/* Search panel (Ctrl-F) and the autocomplete popup both ship with basicSetup
   and are light-only by default. */
.tde-editor-pane .cm-editor .cm-panels,
.tde-editor-pane .cm-editor .cm-tooltip {
  background-color: var(--tde-cm-panel-bg);
  color: var(--tde-cm-fg);
  border-color: var(--tde-cm-matching-bracket);
}

/* .cm-button paints a light gradient over its background-color, so the
   background-image has to be cleared as well. */
.tde-editor-pane .cm-editor .cm-panels input,
.tde-editor-pane .cm-editor .cm-panels select,
.tde-editor-pane .cm-editor .cm-textfield,
.tde-editor-pane .cm-editor .cm-button {
  background-color: var(--tde-cm-bg);
  background-image: none;
  color: var(--tde-cm-fg);
  border: 1px solid var(--tde-cm-matching-bracket);
}

.tde-editor-pane .cm-editor .cm-button:hover {
  background-color: var(--tde-cm-active-line);
}

.tde-editor-pane .cm-editor .cm-panel.cm-search label {
  color: var(--tde-cm-fg);
}

.tde-editor-pane .cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
  background-color: var(--tde-cm-selection);
  color: var(--tde-cm-fg);
}

/* --- Syntax tokens --------------------------------------------------------
   classHighlighter composes classes (a called function is
   `tok-variableName tok-function`), so the more specific modifiers are listed
   after the base tags and win on source order. */

.tde-editor-pane .cm-editor .tok-keyword {
  color: var(--tde-cm-keyword);
}

.tde-editor-pane .cm-editor .tok-controlKeyword,
.tde-editor-pane .cm-editor .tok-moduleKeyword {
  color: var(--tde-cm-control);
}

.tde-editor-pane .cm-editor .tok-string,
.tde-editor-pane .cm-editor .tok-special.tok-string {
  color: var(--tde-cm-string);
}

.tde-editor-pane .cm-editor .tok-comment,
.tde-editor-pane .cm-editor .tok-lineComment,
.tde-editor-pane .cm-editor .tok-blockComment,
.tde-editor-pane .cm-editor .tok-docComment {
  color: var(--tde-cm-comment);
}

.tde-editor-pane .cm-editor .tok-number,
.tde-editor-pane .cm-editor .tok-integer,
.tde-editor-pane .cm-editor .tok-float,
.tde-editor-pane .cm-editor .tok-literal {
  color: var(--tde-cm-number);
}

.tde-editor-pane .cm-editor .tok-bool,
.tde-editor-pane .cm-editor .tok-null,
.tde-editor-pane .cm-editor .tok-atom,
.tde-editor-pane .cm-editor .tok-self {
  color: var(--tde-cm-keyword);
}

.tde-editor-pane .cm-editor .tok-typeName,
.tde-editor-pane .cm-editor .tok-className,
.tde-editor-pane .cm-editor .tok-namespace,
.tde-editor-pane .cm-editor .tok-standard.tok-typeName {
  color: var(--tde-cm-type);
}

.tde-editor-pane .cm-editor .tok-variableName {
  color: var(--tde-cm-variable);
}

.tde-editor-pane .cm-editor .tok-propertyName {
  color: var(--tde-cm-property);
}

.tde-editor-pane .cm-editor .tok-function,
.tde-editor-pane .cm-editor .tok-variableName.tok-function,
.tde-editor-pane .cm-editor .tok-propertyName.tok-function,
.tde-editor-pane .cm-editor .tok-macroName {
  color: var(--tde-cm-function);
}

.tde-editor-pane .cm-editor .tok-operator,
.tde-editor-pane .cm-editor .tok-punctuation,
.tde-editor-pane .cm-editor .tok-bracket,
.tde-editor-pane .cm-editor .tok-separator,
.tde-editor-pane .cm-editor .tok-derefOperator {
  color: var(--tde-cm-operator);
}

.tde-editor-pane .cm-editor .tok-regexp,
.tde-editor-pane .cm-editor .tok-escape {
  color: var(--tde-cm-regexp);
}

.tde-editor-pane .cm-editor .tok-meta {
  color: var(--tde-cm-comment);
}

.tde-editor-pane .cm-editor .tok-invalid {
  color: var(--tde-cm-invalid);
}

/* Draggable divider between editor and preview */
.tde-splitter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 6px;
  cursor: col-resize;
  background-color: var(--md-default-fg-color--lightest, #ddd);
  /* Always-visible rails make it obvious this divider is draggable. */
  background-image:
    linear-gradient(
      to right,
      transparent calc(50% - 2px),
      var(--tde-rail) calc(50% - 2px),
      var(--tde-rail) calc(50% - 1px),
      transparent calc(50% - 1px)
    ),
    linear-gradient(
      to right,
      transparent calc(50% + 1px),
      var(--tde-rail) calc(50% + 1px),
      var(--tde-rail) calc(50% + 2px),
      transparent calc(50% + 2px)
    );
  touch-action: none;
}

.tde-splitter:hover {
  background: var(--md-accent-fg-color, #526cfe);
}

.tde-preview {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tde-frame-host {
  flex: 1;
  min-height: 0;
}

.tde-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.tde-console {
  margin: 0;
  padding: 8px;
  max-height: 160px;
  overflow: auto;
  border-top: 1px solid var(--md-default-fg-color--lightest, #ddd);
  background: #1e1e1e;
  color: #ddd;
  font-size: 0.65rem;
  white-space: pre-wrap;
}

.tde-console[hidden] {
  display: none !important;
}

.tde-console-error {
  color: #ff6b6b;
}

.tde-loading,
.tde-error {
  padding: 16px;
  color: var(--md-default-fg-color--light, #555);
}

.tde-error {
  color: #c62828;
}

/* Stack panes vertically on narrow screens */
@media (max-width: 900px) {
  .tde-body {
    flex-direction: column;
  }

  .tde-editor,
  .tde-preview {
    flex: 1 1 50%;
  }

  .tde-splitter {
    flex-basis: 6px;
    cursor: row-resize;
    background-image:
      linear-gradient(
        to bottom,
        transparent calc(50% - 2px),
        var(--tde-rail) calc(50% - 2px),
        var(--tde-rail) calc(50% - 1px),
        transparent calc(50% - 1px)
      ),
      linear-gradient(
        to bottom,
        transparent calc(50% + 1px),
        var(--tde-rail) calc(50% + 1px),
        var(--tde-rail) calc(50% + 2px),
        transparent calc(50% + 2px)
      );
  }

}