.docs-container {
  /* padding-right: 0px !important; */
}

.code {
  font-family: inherit !important;
}

.code-editor-row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 0.75rem;
}

.code-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.code-editor-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}

.code-editor-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  background: rgb(15 23 42);
}

.dark .code-editor-shell {
  border-color: rgb(51 65 85);
}

.code-editor-shell .CodeMirror {
  width: 100%;
  height: auto;
}

.code-editor-shell .CodeMirror-scroll {
  min-height: 3rem;
  overflow: auto hidden;
}

.code-editor-row .myChart,
.code-editor-row .errorMsg,
.hint-content,
.solution-content {
  min-width: 0;
}

.code-editor-row .myChart:empty,
.code-editor-row .errorMsg:empty {
  display: none;
}

.code-editor-row .myChart > div,
.hint-content > *,
.solution-content > * {
  max-width: 100%;
}

.hint-content pre,
.solution-content pre,
.code-editor-row pre,
.code-editor-row .myChart,
.code-editor-row .myChart pre,
.course-static-code {
  max-width: 100%;
  overflow-x: auto;
}

.hint-content .CodeMirror,
.solution-content .CodeMirror {
  max-width: 100%;
}

.hint-content table,
.solution-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

button > * {
  pointer-events: none;
}

/* Collapse styling now lives in the shared Tailwind 4.2 stylesheet
   (`.ui-collapse-theme`) so all project accordions look consistent. */
#content .ui-collapse-theme {
  margin-top: 1.5rem;
}