/* TOOLCHK3 (wave18): JavaScript and TypeScript Playground. The textarea sits on top of a mirror of the same text;
   the mirror shows the values after each line. Both must use the same font, size, padding and tab size. */
.jsv h3 { font-size: 15px; margin: 14px 0 6px; }
.jsv select { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.jsv #stop[hidden] { display: none; }
.jsed { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); height: min(62vh, 620px); min-height: 280px; }
.jsed:focus-within { border-color: var(--acc); }
.jsgut, .jsmirror, .jsv textarea { margin: 0; font: 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; padding: 10px 12px; white-space: pre; }
.jsgut { color: var(--zero); text-align: right; background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; user-select: none; min-width: 44px; padding-right: 8px; padding-left: 8px; }
.jsarea { position: relative; min-width: 0; }
.jsmirror { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.jsv textarea { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--fg); caret-color: var(--fg); overflow: auto; }
.jsmirror .jv { color: var(--mut); }
.jsmirror .jl { color: var(--acc); }
.jsmirror .je { color: var(--warn); }
.jsmirror.stale span { opacity: .5; }
#lineBox { min-height: 20px; margin: 6px 0; white-space: pre-wrap; word-break: break-word; }
#out td.k-error, #out td.k-warn { color: var(--warn); }
#out td.k-log, #out td.k-info { color: var(--acc); }
#out td:last-child { white-space: pre-wrap; word-break: break-word; max-width: 820px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 640px) { .jsed { height: 56vh; } .jsgut { min-width: 34px; } }