/* static/css/ide_layout.css */

/* Kill accidental horizontal page scroll */
html, body { overflow-x: hidden; }

/* Optional: a knob you can tune in base.html */
:root{
  --gutter: 10px;
  --panel-border: #d0d7de;
  --panel-bg: #fff;
}

/* The IDE is a fixed-height container; scrolling happens inside panes */
.ide{
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--panel-bg);
  overflow: hidden;

  display: flex;
  align-items: stretch;
  min-height: 520px;
}

/* SplitPanes.js sets an explicit height; this keeps flex math sane */
.ide.fit-viewport{
  min-height: 520px;
}

/* Common pane rules */
.ide .pane{
  min-width: 0;
  min-height: 0;
}

/* Left (prompt/steps) */
.pane-left{
  width: 380px;
  max-width: 55%;
  overflow: auto;              /* <-- critical: prompt can scroll */
  background: var(--panel-bg);
}

/* Right column (editor on top, output on bottom) */
.pane-right{
  flex: 1;
  display: flex;               /* <-- critical: stack top/bottom */
  flex-direction: column;
  overflow: hidden;            /* <-- keep scroll inside children */
  min-width: 0;
  min-height: 0;
}

/* Top (editor) and bottom (output) share the fixed right-column height */
#paneTop{
  flex: 2 1 0;                 /* default: 2/3 */
  overflow: hidden;
  min-height: 180px;
}
#paneBottom{
  flex: 1 1 0;                 /* default: 1/3 */
  overflow: hidden;
  min-height: 160px;
}

/* Gutters */
.gutter-h{
  width: var(--gutter);
  cursor: col-resize;
  background: rgba(0,0,0,.04);
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
}
.gutter-v{
  height: var(--gutter);
  cursor: row-resize;
  background: rgba(0,0,0,.04);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

/* Make py panels fill their pane so output never gets pushed off-screen */
.py-panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* CodeMirror must be allowed to scroll internally */
.CodeMirror{
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
}

/* Output must scroll internally */
.py-out{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Mobile: stack left above right */
@media (max-width: 980px){
  .ide{ flex-direction: column; }
  .pane-left{
    width: auto;
    max-width: none;
    border-bottom: 1px solid var(--panel-border);
  }
  .gutter-h{ display: none; }
}

/* --- Dark/light safe defaults for the description pane (left) --- */
.pane-left,
.pane-left .prompt,
.pane-left .doc {
  background: var(--panel-bg);
  color: var(--panel-text);
}

.pane-left .muted { color: var(--muted-text, rgba(127,127,127,.95)); }

/* Code blocks inside the description */
.pane-left .doc pre{
  background: var(--code-bg, rgba(127,127,127,.08));
  border: 1px solid var(--panel-border, #d0d7de);
  color: var(--panel-text);
}
.pane-left .doc code{
  background: var(--code-inline-bg, rgba(127,127,127,.12));
  color: var(--panel-text);
}

/* Submit box in the left pane */
.pane-left .submit-box{
  background: var(--warn-bg, rgba(255,165,0,.06));
  border-color: var(--warn-border, rgba(255,140,0,.45));
  color: var(--panel-text);
}