:root {
  --border: #d0d4da;
  --accent: #2b6cb0;
  --error-fg: #b3261e;
  --muted: #667;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0 1rem 0 0;
  font-size: 1.2rem;
  display: inline-block;
}

header p { display: inline; margin: 0; color: #444; }

#status {
  margin: 0;
  padding: 0.4rem 1rem;
  background: #fff6d8;
  border-bottom: 1px solid var(--border);
}

main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 24rem);
}

.pane {
  min-width: 0;
  min-height: 0;
}

/* --- REPL pane: log on top, input at the bottom ------------------------ */

#repl-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

#log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.6rem 1rem;
}

.entry {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0;
}

.entry pre {
  margin: 0.25rem 0;
  padding: 0.2rem 0.55rem;
  border-left: 3px solid var(--border);
  font-family: var(--mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The three parts of an entry are told apart by their left border,
   plus a marker: a shaded background on the echoed input, a small
   "stdout" label on printed output, and a "⇒" on the result value. */
.entry .echo { color: var(--muted); background: #f6f8fa; }

/* Syntax highlighting of echoed input (spans emitted from the wasm
   highlight() segments; unstyled text keeps the echo color). */
.hl-keyword { color: #8250df; }
.hl-literal { color: #0a7d33; }
.hl-ident { color: #24292f; }
.hl-comment { color: #6e7781; font-style: italic; }
.hl-punct { color: #57606a; }

.entry .stdout {
  color: #222;
  border-left-color: #0a7d33;
}
.entry .stdout::before {
  content: "stdout";
  display: block;
  color: #0a7d33;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}

.entry .result {
  color: var(--accent);
  border-left-color: var(--accent);
}
.entry .result::before { content: "⇒ "; user-select: none; }

/* Runtime errors already read "error: ..."; the red is the marker. */
.entry .error {
  color: var(--error-fg);
  border-left-color: var(--error-fg);
}

#input-area {
  border-top: 1px solid var(--border);
  padding: 0.6rem 1rem;
}

/* Overlay editor: #source-hl (highlighted text) behind a same-metrics
   #source textarea whose text is transparent. Any metric drift between
   the two misplaces the caret relative to the colors, so every property
   that affects text layout is set identically on both. */

#editor {
  position: relative;
  /* The height tracks the content (set from JS on every repaint),
     clamped here; past the max the textarea scrolls. */
  height: 8rem;
  min-height: 8rem;
  max-height: 60vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

#editor:focus-within {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

#source-hl,
#source {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  padding: 0.5rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre; /* no soft wrap (textarea wrap="off"); scroll instead */
  tab-size: 4;
  overflow: auto;
}

#source-hl {
  overflow: hidden; /* scroll is driven by the textarea via JS */
  color: #24292f;
}

#source {
  background: transparent;
  color: transparent;
  caret-color: #24292f;
  resize: none; /* the wrapper #editor auto-sizes to the content */
  outline: none;
}

#source::placeholder { color: var(--muted); }

#source::selection {
  background: #b3d7ff;
  color: transparent; /* keep the highlighted text behind visible */
}

#input-controls {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

#run {
  font: inherit;
  padding: 0.25rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

#run:disabled {
  background: #aab;
  border-color: #aab;
  cursor: default;
}

.hint { color: var(--muted); font-size: 0.8rem; }

#samples {
  margin-left: auto; /* park the dropdown at the right edge */
  font: inherit;
  font-size: 0.85rem;
  max-width: 14rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: inherit;
}

/* --- Globals pane ------------------------------------------------------ */

#globals-pane {
  overflow: auto;
  padding: 0.6rem 1rem;
}

#globals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.5rem;
}

#globals-pane h2 {
  margin: 0;
  font-size: 1rem;
}

#globals-close {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: none; /* shown only when the pane is a drawer (narrow screens) */
}

#globals-empty { color: var(--muted); font-size: 0.9rem; }

#globals {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.85rem;
}

#globals th, #globals td {
  text-align: left;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: break-word;
}

#globals th {
  font-family: system-ui, sans-serif;
  font-weight: 600;
  color: var(--muted);
}

/* The toggle lives in #input-controls but only matters on narrow
   screens; on wide ones the pane is always visible. */
#globals-toggle {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  display: none;
}

/* --- Narrow screens: single column, globals behind a toggle ------------ */

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #repl-pane { border-right: none; }
  #globals-toggle { display: inline-block; }
  #globals-close { display: inline-block; }

  /* Hidden by default; body.globals-open turns the pane into a
     right-side drawer above the REPL. */
  #globals-pane { display: none; }
  body.globals-open #globals-pane {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 10;
  }
}