/*
 * PyScript Editor - Light theme with split layout
 *
 * NOTE: PyScript wraps CodeMirror in a shadow DOM, so .cm-* rules here
 * CANNOT reach inside the editor.  Internal editor styling is handled by
 * the JavaScript in overrides/main.html that injects a <style> into each
 * shadow root.  The rules below only target elements OUTSIDE the shadow
 * DOM (the wrapper divs and buttons that PyScript creates in the light DOM).
 */

/* ── Container: side-by-side split ─────────────────────────────── */
.py-editor-box {
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  overflow: hidden;
  min-height: 200px;
  padding: 0 !important;
}

/* Hide the "pyodide" environment label */
.py-editor-box::before,
.py-editor-box:before {
  content: "" !important;
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── Left pane: code editor ────────────────────────────────────── */
.py-editor-input {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  border-right: 1px solid #d0d7de;
  overflow: auto;
}

/* Shadow host: force light color-scheme so CanvasText resolves to
   dark even when the page uses color-scheme:dark (MkDocs slate).
   Outer !important beats the shadow DOM's :host { all: initial }. */
.py-editor-input > div {
  color-scheme: light !important;
  color: #1f2328 !important;
}

/* ── Right pane: output ────────────────────────────────────────── */
.py-editor-output {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0.75rem;
  background: #f6f8fa;
  color: #1f2328;
  font-family: "Roboto Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.85rem;
  overflow: auto;
  white-space: pre-wrap !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Run button: always visible, styled ────────────────────────── */
/* PyScript's core.css (loaded after this file via extrahead) sets
   bottom:.5rem and opacity:0.  Override both with !important. */
.py-editor-run-button {
  position: absolute;
  opacity: 1 !important;
  background: #2da44e !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 10 !important;
  top: 0.5rem !important;
  bottom: auto !important;
  right: 0.5rem !important;
  transition: background 0.2s;
}

.py-editor-run-button:hover {
  background: #218838 !important;
}

.py-editor-run-button.running {
  background: #dc3545 !important;
}

/* ── Responsive: stack vertically on narrow screens ────────────── */
@media (max-width: 768px) {
  .py-editor-box {
    flex-direction: column;
  }

  .py-editor-input {
    border-right: none;
    border-bottom: 1px solid #d0d7de;
  }

  .py-editor-output {
    min-height: 100px;
  }
}