/*
 * re-frame2 docs/cljs playground styles (Phase 1, rf2-y99zt; Phase 3, rf2-00zvt).
 *
 * Styles the live-CLJS cells produced by playground.js. Uses Material theme
 * variables where possible so light/dark modes both look right. Built/copied
 * to docs/cljs/playground.css and wired via mkdocs `extra_css`. re-frame2
 * (cljs-rf2) render cells carry both .cljs-cell--render (the live-component
 * mount surface) and .cljs-cell--rf2.
 */

.cljs-cell {
  margin: 1rem 0;
}

.cljs-editor .cm-editor {
  border-radius: 4px;
}

/* Focused editor: Material accent ring. */
.cljs-editor .cm-editor.cm-focused {
  outline: 2px solid var(--md-accent-fg-color, #526cfe);
  outline-offset: 0;
}

.cljs-result {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--md-code-bg-color, #f4f7f4);
  font-family: var(--md-code-font, monospace);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.4em;
}

/* Render-cell mount surface (cljs-rf2 cells): holds a live reagent2
 * component, not pr-str'd text — drop the code styling, give it room. */
.cljs-mount {
  font-family: inherit;
  font-size: inherit;
  white-space: normal;
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
}

/* An error in a render cell falls back to the error styling (set by JS). */
.cljs-mount.cljs-result--err {
  font-family: var(--md-code-font, monospace);
  white-space: pre-wrap;
}

.cljs-result--err {
  background: var(--md-typeset-del-color, #fdecec);
  color: #a40000;
}

[data-md-color-scheme="slate"] .cljs-result--err {
  color: #ff8a8a;
}

.cljs-out {
  color: var(--md-default-fg-color--light, #555);
}

/* Result value (=> …). A fixed dark green — NOT --md-typeset-ins-color, which
 * is Material's CriticMarkup inserted-text HIGHLIGHT green (a light green meant
 * to sit on a tinted background) and renders low-contrast on the light-grey
 * result panel. #1a5e1a is 7.31:1 on --md-code-bg-color #f4f7f4 (WCAG AAA). */
.cljs-val {
  font-weight: 600;
  color: #1a5e1a;
}

[data-md-color-scheme="slate"] .cljs-val {
  color: #6ee36e;
}