/* Practice tab — code editor, run button, output area, solution + AI explanation. */
/* Solution Section */
.solution-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.solution-section-einops {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 18px;
}

.solution-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.solution-code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--code-font);
  font-size: 13px;
  color: var(--code-key);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  overflow-x: auto;
}

/* Code Editor.

   `.code-highlight` (the syntax-colour overlay `practice/code-highlight.js`
   paints BEHIND the textarea) shares this rule rather than restating it.
   The overlay only lines up while its font metrics and box model are
   identical to the textarea's, so the two must never be able to drift apart
   in a later edit — one rule is the only way to guarantee that. Anything
   that is genuinely per-layer (background, text colour, the caret) lives in
   styles/practice/code-highlight.css. */
.editor-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.code-editor,
.code-highlight {
  width: 100%;
  flex: 1;
  min-height: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--code-font);
  font-size: 13px;
  color: var(--white);
  line-height: 1.6;
  letter-spacing: normal;
  resize: none;
  tab-size: 4;
  outline: none;
  /* A textarea's own defaults, written down because the overlay is a <pre>
     and a <pre> does not wrap at all unless told to. Different wrapping on
     the two layers is a one-line-at-a-time drift down the whole cell. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  transition: border-color 0.15s;
}

.code-editor:focus {
  border-color: var(--accent-text);
}

.code-editor::placeholder {
  color: var(--muted);
}

/* Run Button */
.run-btn {
  width: auto;
  max-width: 160px;
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 10px 28px;
}

/* Output Area */
.output-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.output-area {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--code-font);
  font-size: 13px;
  color: var(--code-str);
  line-height: 1.6;
  min-height: 80px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.output-visual {
  margin-top: 12px;
}

.output-visual-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.output-visual-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.output-visual-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--img-mat);
}

/* `.question-visual-canvas` in question.css carries the same pair for the same
   reason — this one was missing it, so a blank canvas held its box under the
   output of every non-visual drill. */
.output-visual-canvas.hidden {
  display: none;
}

/* AI Explanation Section */
.ai-explanation-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 18px;
}

.ai-explanation-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ai-explanation-text {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--code-font);
  font-size: 13px;
  color: var(--code-err);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  overflow-x: auto;
}
/* Persistent in-app runtime controls. */
.editor-header-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.editor-header-row .editor-header { margin-bottom: 0; }
.runtime-controls { align-items: center; display: flex; gap: 8px; }
.runtime-status { color: var(--muted); font-size: 11px; }
.runtime-reset-btn { font-size: 11px; padding: 5px 9px; }