/* Runnable Kongue code cells. Colors come from risotto's semantic theme variables. */
.kongue-cell {
  margin: 0 0 1.5rem;
  border: 1px solid var(--inner-bg);
  background: var(--inner-bg);
}

.kongue-cell__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.25rem;
  padding: 0 .75rem;
  background: var(--off-bg);
  border-bottom: 1px solid var(--inner-bg);
  color: var(--off-fg);
  font-size: .875rem;
}

.kongue-cell__tag {
  margin-right: auto;
  color: var(--muted);
}

.kongue-cell__run,
.kongue-cell__edit {
  padding: .15rem .6rem;
  border: 1px solid var(--muted);
  border-radius: 0;
  background: var(--inner-bg);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}

.kongue-cell__run:hover,
.kongue-cell__edit:hover {
  background: var(--highlight);
  border-color: var(--highlight);
  color: var(--bg);
}

.kongue-cell__run:disabled {
  cursor: default;
  opacity: .5;
}

.kongue-cell__status { color: var(--muted); }
.kongue-cell__status--err { color: var(--base08); }

.kongue-cell__code,
.kongue-cell__input,
.kongue-cell__out {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--font-monospace);
  font-size: .9rem;
  line-height: 1.5;
}

.kongue-cell__code {
  min-height: 3rem;
  background: var(--inner-bg) !important;
  color: var(--off-fg) !important;
}

.kongue-cell__code code {
  background: transparent !important;
  color: inherit !important;
}

.kongue-cell__input {
  display: block;
  min-height: 8rem;
  resize: vertical;
  border: 0;
  border-top: 1px solid var(--muted);
  border-radius: 0;
  outline: none;
  background: var(--off-bg) !important;
  color: var(--fg) !important;
}

/* The HTML hidden attribute must win over the editor's display rule. */
.kongue-cell__input[hidden],
.kongue-cell__out[hidden] {
  display: none;
}

.kongue-cell__out {
  border-top: 1px solid var(--muted);
  background: var(--off-bg) !important;
  color: var(--off-fg) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kongue-cell__out--err { color: var(--base08) !important; }

/* Kongue token colours, using the same palette as the rest of risotto. */
.k-kw  { color: var(--link); font-weight: 600; }
.k-str { color: var(--highlight); }
.k-var { color: var(--logo); }
.k-com { color: var(--off-fg); font-style: italic; }
.k-num { color: var(--hover); }