/* Live Lisp cell — styled to read as a normal code block that happens to
 * be runnable. No header chrome; controls live as subtle overlays.
 */

.lisp-cell {
  margin: 1.5em 0;
  max-width: 54rem;
  font-family: var(--font-mono);
}

.lc-body {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.lc-body:focus-within {
  border-color: var(--rule-strong);
}

/* Shared typography for the overlay pair — must match exactly */
.lc-editor { position: relative; }
.lc-highlight,
.lc-input {
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1.55;
  padding: 0.9rem 1rem;
  margin: 0;
  border: 0;
  tab-size: 2;
  white-space: pre;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
}

.lc-highlight {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: auto;
  pointer-events: none;
  color: var(--ink);
}
.lc-highlight code {
  font: inherit;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit;
}

.lc-input {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  resize: vertical;
  outline: 0;
  overflow: auto;
  min-height: 3em;
}
.lc-input::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); }
.lc-input::-moz-selection { background: color-mix(in oklch, var(--accent) 30%, transparent); }

/* Controls — floating top-right, muted by default, readable on hover */
.lc-actions {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  display: flex;
  gap: 0.25rem;
  opacity: 0.35;
  transition: opacity 120ms;
}
.lc-body:hover .lc-actions,
.lc-body:focus-within .lc-actions { opacity: 1; }

.lc-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1px 7px;
  cursor: pointer;
  line-height: 1.4;
  transition: color 100ms, background 100ms, border-color 100ms;
}
.lc-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.lc-btn.lc-run:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}
.lc-btn:disabled { opacity: 0.5; cursor: default; }

/* Output — a subtle strip beneath the code, no boxes */
.lc-output {
  margin-top: 0.25rem;
  padding: 0.4rem 1rem 0.55rem;
  border-left: 2px solid var(--accent);
  background: transparent;
}
.lc-out-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
}
.lc-out-label.lc-err { color: #c04030; border-left-color: #c04030; }
[data-theme="dark"] .lc-out-label.lc-err { color: #e87060; }
.lc-output:has(.lc-err) { border-left-color: #c04030; }
[data-theme="dark"] .lc-output:has(.lc-err) { border-left-color: #e87060; }

.lc-out-body {
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}