/* Table styles */

table > thead:has(> tr > th:empty):not(:has(> tr > th:not(:empty))) {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

thead,
tbody {
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #5a9ad4;
  color: white;
  font-weight: bold;
}
tr:nth-child(odd) {
  background-color: #eaf4fc;
}
tr:nth-child(even) {
  background-color: #ffffff;
}
tr:hover {
  background-color: #d0e4f5;
}

.clean-table table {
  border-collapse: separate;
  border-spacing: 20px;
}

.clean-table td,
.clean-table tr,
.clean-table tr:hover,
.clean-table td:hover {
  padding: 0px;
  background: none;
  border: none;
}

.clean-table .sourceCode {
  margin: 0px;
}

/* Text styles */

.red {
  color: red;
}
.blue {
  color: blue;
}
.bold {
  font-weight: bold;
}

.indent {
  margin-left: 2em;
}

.indent2 {
  margin-left: 4em;
}

/* Color coded syntax and semantics */

.syntax-text {
  color: #743e3e;
  font-weight: bold;
}

.semantics-text {
  color: #b16213;
  font-weight: bold;
}

.type-checking-text {
  color: #00af4f; /* #aad857 */
  font-weight: bold;
}

.evaluation-text {
  color: cornflowerblue; /* #8baadb */
  font-weight: bold;
}

/* Code blocks */

/* type-checking-box */

:is([class*="type-checking-box"]) p code, /* inline */
:is([class*="type-checking-box"]) pre[class*="code-with-copy"] { /* block */
  background-color: #c8ee81;
}

:is([class*="type-checking-box"]) div[class="sourceCode"] { /* block */
  min-width: min-content;
  width: min-content;
}

/* definition-box */

:is([class*="definition-box"]) p code,
/* inline */
:is([class*="definition-box"]) pre[class*="code-with-copy"] {
  /* block */
  background-color: #ffed9b;
}

/* Panes */

.split-pane {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  /* Changed from flex-start to stretch */
  gap: 2em;
}

.left-pane,
.right-pane {
  display: flex;
  flex: 1;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

/* Direct children of panes will be full width */
.left-pane>*,
.right-pane>* {
  width: 100%;
}

.pane-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Added for horizontal centering */
  align-self: stretch;
  /* Makes separator stretch full height */
  color: #666;
  font-weight: bold;
  padding: 0 0.5em;
  /* Optional: adds some horizontal padding */
}