.output > *,
#editor .codeflask__flatten {
  padding: var(--gap);
}

#playground-container {
  display: flex;
  height: 100dvh;
}

#playground {
  display: flex;
  flex-direction: column;
  border: var(--color-divider);
  flex-grow: 1;
  min-height: 100%;
  width: 100%;
}

#playground-content {
  display: flex;
  flex-direction: column;
  border: var(--color-divider);
  background: var(--code-background);
  flex-grow: 1;
  height: 100%;
}

#tabs {
  display: flex;
  gap: var(--gap);
  border-bottom: 1px solid var(--color-accent-muted);
  align-items: end;
  height: fit-content;
}

.tab {
  padding: var(--gap);
  padding-bottom: calc(var(--gap) - 2px);
  cursor: pointer;
  height: fit-content;
  border-bottom: 2px solid transparent;
}

.tab:has(input[type="radio"]:checked) {
  border-bottom: 2px solid var(--color-accent-muted);
}

.tab > p {
  margin: 0;
}

#output-container,
#editor {
  border-top: 1px solid var(--color-accent-muted);
}

#editor {
  position: relative;
  overflow: clip;
  flex-grow: 1;
}

/* Hide the editor until the first type-coloured render lands, so users
   never glimpse the Prism overlay. JS adds .tokens-ready on the first
   successful applyTypeColors paint. */
#editor-target {
  visibility: hidden;
}

html.tokens-ready #editor-target {
  visibility: visible;
}

#output-container {
  height: 30dvh;
  background: var(--color-background-dim);
}

.output {
  /* Only display if radio is checked */
  display: none;
  max-height: calc(100% - 4 * var(--gap));
  overflow: auto;
}

.output > * {
  margin: 0;
  white-space: pre-wrap;
}

.output > pre {
  background: none !important;
}

#output-container:has(#output-radio:checked) > #output {
  display: block;
}

#output-container:has(#compiled-javascript-radio:checked)
  > #compiled-javascript {
  display: block;
}

#output-container:has(#compiled-erlang-radio:checked) > #compiled-erlang {
  display: block;
}

#share-button {
  padding: var(--gap-half) var(--gap);
  border: none;
  color: var(--color-text);
  background-color: var(--color-background);
  border-radius: 0.5rem;
  font-family: var(--font-family-normal);
  cursor: pointer;
  align-self: center;
  margin-left: auto;
  margin-right: var(--gap);
}

/* Larger than mobile */
@media (min-width: 768px) {
  #playground-content {
    border-left: 1px solid var(--color-accent-muted);
    flex-direction: row;
  }

  #editor {
    border: none;
  }

  #output-container {
    height: unset;
    width: 50%;
    overflow: auto;
    border: none;
    border-left: 1px solid var(--color-accent-muted);
  }
}

/* Larger than medium screen and has enough to height to not worry about losing vertical space */
@media (min-width: 1200px) and (min-height: 700px) {
  #playground-content {
    border-left: unset;
  }

  #output-container {
    width: 40%;
  }
}

.error,
.warning {
  border-style: solid;
  height: 100%;
}

.error {
  border-color: var(--brand-error);
}

.warning {
  border-color: var(--brand-warning);
}

.prev-next {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gap);
  gap: 0.5em;
}

.prev-next span {
  opacity: 0.5;
}

.mb-0 {
  margin-bottom: 0;
}

.echo-path {
  color: var(--code-token-comment);
}