/* Code blocks: rendered as a dark "black box" on every surface that shows
   lesson or article content (lesson pages, the in-page course reader, and
   the admin editor preview). */

.lesson-body pre,
.article-body pre,
.selected-subtopic-content pre,
.topic-panel pre {
  position: relative;
  margin: 20px 0;
  padding: 18px 20px;
  background: #0A0F1D;
  color: #E2E8F0;
  border: 1px solid #1E293B;
  border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  overflow-x: auto;
  tab-size: 2;
}

/* Code inside the block inherits the box; never give it a second background. */
.lesson-body pre code,
.article-body pre code,
.selected-subtopic-content pre code,
.topic-panel pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  border: 0;
  white-space: pre;
}

/* Inline code: small light pill, clearly different from a block. */
.lesson-body :not(pre) > code,
.article-body :not(pre) > code,
.selected-subtopic-content :not(pre) > code,
.topic-panel :not(pre) > code {
  background: rgba(59, 130, 246, 0.1);
  color: #1D4ED8;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
  white-space: nowrap;
}

/* Keep the box from being broken by long unbroken strings (minified code). */
.lesson-body pre,
.article-body pre {
  word-break: normal;
  overflow-wrap: normal;
}

/* The copy button injected by course.js sits on the box. */
.code-block-wrapper { position: relative; }
.code-block-wrapper pre { margin-top: 0; }
.copy-code-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px is the minimum comfortable tap target. There is no hover on a touch
     screen, so the button is always visible there rather than fading in. */
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  color: #CBD5E1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.code-block-wrapper:hover .copy-code-btn,
.copy-code-btn:focus-visible { opacity: 1; }
.copy-code-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.copy-code-btn svg { width: 15px; height: 15px; fill: currentColor; }
.copy-code-btn.copied { color: #34D399; }

/* No hover on touch, so keep the copy button permanently visible. */
@media (hover: none) {
  .code-block-wrapper:hover .copy-code-btn,
  .copy-code-btn { opacity: 1; }
  .copy-code-btn svg { width: 17px; height: 17px; }
}