/* play.css - playground-only styles. Everything else (nav, footer, panels,
   buttons, colours, fonts) comes from site.css; this file adds the two-pane
   editor layout and the controls that sit inside a .code-bar. */

/* The playground fills the window exactly, so the editor is never scrolled to
   and the panes never slide under the sticky site footer. 52px nav + 101px
   footer are the two fixed chrome heights site.css establishes. */
#play {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 153px);
  padding-top: 1.4rem;
  padding-bottom: 1rem;
}
/* Every pixel spent above the panels comes straight out of the editor, so the
   masthead here is deliberately tighter than the one on the other pages. */
#play .section-label { margin-bottom: 0.4rem; }
#play .lib-h1 { margin-bottom: 0.4rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
#play .section-lead { margin-bottom: 0.9rem; max-width: 980px; line-height: 1.6; }

.play-grid {
  display: grid;
  /* Code lines run longer than output lines, and horizontal scrolling in an
     editor is far more disruptive than in a log. */
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;                /* a grid child may shrink below its content */
}

.play-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* let a long output line scroll, not stretch the grid */
  min-height: 0;
}

/* Below the two-column break there is no viewport worth filling: let the page
   scroll and give each pane a workable fixed height instead. */
@media (max-width: 900px) {
  #play { height: auto; }
  .play-grid { grid-template-columns: 1fr; }
  .play-panel { height: 60vh; }
}

/* Narrow phones: the filename, the example picker and two buttons do not fit
   on one row, so let the bar wrap instead of pushing the panel wider than the
   screen. */
@media (max-width: 560px) {
  .play-panel .code-bar { flex-wrap: wrap; row-gap: 0.5rem; }
  .play-panel .code-filename { margin-right: 0.75rem; }
  .play-select { flex: 1 1 auto; min-width: 0; }
}

/* The filename takes the slack so the controls sit hard right. */
.play-panel .code-filename { margin-right: auto; }

.play-btn {
  padding: 0.3em 0.9em;
  font-size: 0.72rem;
  border-radius: 2px;
}
.play-btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary.play-btn:disabled:hover { background: var(--amber); }
.btn-ghost.play-btn:disabled:hover { border-color: var(--border); color: var(--text-mid); }

.play-select {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.3em 0.5em;
  color: var(--text-mid);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}
.play-select:hover { border-color: var(--amber); color: var(--amber); }

.play-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.play-status.busy { color: var(--amber); }

/* Editor and output share pre's metrics so the two panes line up. */
.play-editor,
.play-output {
  flex: 1;
  margin: 0;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.8;
  tab-size: 4;
  background: var(--bg2);
  color: var(--text);
  overflow: auto;
}

.play-editor {
  border: 0;
  resize: none;
  outline: none;
  white-space: pre;             /* code must not reflow while being typed */
  caret-color: var(--amber);
}
.play-editor:focus { background: var(--bg2); }

.play-output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.play-output .e { color: var(--red); }
.play-output .w { color: var(--amber); }
.play-output .meta { color: var(--text-dim); }
.play-output:empty::before {
  content: "Press Run to compile and execute.";
  color: var(--text-dim);
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.1em 0.4em;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 2px;
}

/* ── PRELOADED LIBRARY LIST ── */
/* Generated by tools/gen_playground_libs.py from what `make wasm` actually
   staged, so the page cannot advertise a library the module does not carry. */

#libs { padding-top: 3rem; padding-bottom: 4rem; }
#libs .lib-h1 { margin-bottom: 1rem; }
.pl-lib-count { margin-bottom: 2rem; opacity: 1; color: var(--text-mid); }

.pl-libs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.pl-lib {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg2);
  min-width: 0;
}

.pl-lib-imp {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--amber);
  overflow-wrap: anywhere;   /* a six-export import line must fold, not overflow */
}
.pl-lib-desc { font-size: 0.78rem; color: var(--text-mid); }

/* ── HINTS + BUNDLED LIBRARY NAMES ── */

/* Side by side: stacked, these two cost the editor ~70px of height, and there
   is width going spare at this breakpoint. */
.play-notes {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.5rem;
  margin-top: 0.8rem;
}
@media (max-width: 900px) { .play-notes { grid-template-columns: 1fr; gap: 0.5rem; } }

.play-hints,
.play-bundled {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.play-hints code { color: var(--text); }
.play-bundled-head { color: var(--text); }

/* Names, not import lines: this is the "can I use X here?" answer, and the
   copy-pasteable form lives in the #libs section below. */
.pl-name {
  display: inline-block;
  line-height: 1.5;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--amber);
  opacity: 0.92;
}
.pl-name:not(:last-of-type)::after { content: " ·"; color: var(--text-dim); }
.play-bundled-more { color: var(--amber); white-space: nowrap; }

@media (max-width: 900px) {
  #play { height: auto; padding-top: 2rem; }
}