/* ============================ THE CODE PANE ============================ Syntax colour, the given program, the completion list, the caret band and the running line — the visual half of editor.js. ORDER MATTERS. This is file 6 of 10 and the cascade is the order pages/app.html links them in: base.css · layout.css · board.css · screens.css · home.css · editor.css · helper.css · panels.css · drill.css · class.css Later files override earlier ones on purpose. Moving a rule between files without keeping that order is how a Chinese override or a `won` state quietly stops applying. */ /* ---------- the code pane ---------- */ /* ---------- the given program ---------- A read-only copy of what the mission handed over, above the editor the child writes in. It is dim and it does not scroll with anything: it is a reference, not a second place to work. */ #given{flex:0 0 auto;max-height:34%;display:flex;flex-direction:column;gap:5px; padding:8px 10px 9px;border-radius:12px;background:var(--well); border:1.5px solid var(--line);min-height:0} #given[hidden]{display:none} .givenh{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto} .givenk{font:600 12px/1 var(--sans);color:var(--ink3)} #givenRun{color:var(--terracotta);font-size:11px;padding:2px 7px} #givenRun:hover{background:var(--terra-tint)} #givenCode{margin:0;overflow:auto;min-height:0; font:500 11.5px/1.5 var(--mono);color:var(--ink2)} /* one element per LINE. The highlighter already uses for tokens, so the line wrapper has to be something else or every token lands on its own row. */ #givenCode .gl{border-radius:4px;padding:0 3px} #givenCode i{font-style:normal} #givenCode u{display:inline-block;width:15px;text-decoration:none; color:var(--ink3);font-size:9.5px} #givenCode .gl.on{background:var(--terra-tint)} #givenCode .gl.bad{background:var(--terra-tint);color:var(--terra-deep)} #givenCode .gl.bad u{color:var(--terra-deep)} #editor{flex:1;min-height:0;display:flex;border-radius:12px;overflow:hidden; background:var(--card);border:1.5px solid var(--line);transition:.14s; --clh:22px;--cfs:14px} #editor:focus-within{border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terra-tint)} #gutter{flex:0 0 auto;width:36px;padding:11px 8px 11px 0;overflow:hidden; background:var(--well);border-right:1px solid var(--line);text-align:right} /* no transition: the number changes in the same frame as the #runline band. A fade here crossfaded two numbers and lagged the band on every step. */ #gutter b{display:block;font:400 12px/var(--clh) var(--mono);color:var(--ink3); border-radius:3px} /* the line the caret is on — a quiet anchor while typing, and it must lose to both run marks below, which are about what the program is doing */ #gutter b[data-cur]{color:var(--ink);font-weight:700} #gutter b.on{background:var(--terracotta);color:#fff;opacity:1;font-weight:700} #gutter b.err{background:rgba(214,92,62,.18);color:var(--terra-deep);opacity:1;font-weight:700} #codewrap{position:relative;flex:1;min-width:0} /* ---------- the completion list ---------- Shown only when there is an actual CHOICE — two or more words fit what has been typed. One candidate needs no list: the grey ghost already says it. That is the difference between `move("` (forward or backward — a choice a child cannot guess) and `mo` (one word, already visible). */ #acbox{position:absolute;z-index:6;min-width:132px;padding:4px;border-radius:9px; background:var(--card);border:1.5px solid var(--line); box-shadow:0 8px 22px rgba(90,60,45,.16);max-height:132px;overflow:auto} #acbox[hidden]{display:none} #acbox b{display:block;padding:5px 8px;border-radius:6px;cursor:pointer; font:500 var(--cfs)/1.5 var(--mono);color:var(--ink2);white-space:pre} #acbox b .m{color:var(--ink3)} #acbox b.on{background:var(--terra-tint);color:var(--terra-deep)} #acbox b.on .m{color:var(--terra-deep);opacity:.65} @media (hover:hover){ #acbox b:hover{background:var(--well)} } /* ---------- the caret's line ---------- The faint band every editor puts under the line you are on. Only while the editor has focus, and it comes before #runline in the markup, so the run band always paints over it. */ #curline{position:absolute;left:0;right:0;height:var(--clh);z-index:0;pointer-events:none; background:rgba(20,22,26,.04)} #editor:not(:focus-within) #curline{display:none} /* ---------- the running line ---------- The gutter number went orange while the code itself stayed flat, so the eye had to hop to the margin to find out where BOLTZ was in the program. The band puts the answer on the line itself. It sits BELOW the text (z-index 0 against #hl's 1) so the syntax colours are untouched, and it is moved by script rather than laid out, so it can track the scroll. No transition: the gutter number and the text jump, so the band jumps with them — a slide only ever showed as the band trailing a scroll. */ #runline{position:absolute;left:0;right:0;height:var(--clh);z-index:0;pointer-events:none; background:var(--terra-tint);box-shadow:inset 3px 0 0 var(--terracotta)} #runline[hidden]{display:none} #runline.err{background:rgba(214,92,62,.16);box-shadow:inset 3px 0 0 var(--terra-deep)} /* While a run is walking the program, it is the only line lit: the caret's grey band and bold number step aside (a Ctrl/⌘+Enter run keeps the caret in the editor). The red "stopped here" line keeps them — mission 4 edits there. */ #editor:has(#runline:not([hidden]):not(.err)) #curline{display:none} #editor:has(#runline:not([hidden]):not(.err)) #gutter b[data-cur]:not(.on){color:var(--ink3);font-weight:400} #hl,#program{position:absolute;inset:0;margin:0;padding:11px 12px;border:0; font:500 var(--cfs)/var(--clh) var(--mono);letter-spacing:0; white-space:pre;overflow:auto;tab-size:4} #hl{pointer-events:none;color:var(--ink);z-index:1} #program{background:transparent;color:transparent;caret-color:var(--terracotta); resize:none;outline:0;z-index:2} #program::placeholder{color:var(--ink3);font-family:var(--sans);font-size:11.5px} #hl i{font-style:normal} .c-kw{color:#8a5cc4;font-weight:700} .c-fn{color:#0f7c8a;font-weight:600} .c-str{color:var(--terra-deep)} .c-num{color:#c2762a;font-weight:600} .c-com{color:var(--ink3);font-style:italic} .c-ghost{opacity:.32} .c-ghost i{opacity:1} /* one four-space step of indent, with its guide down the left edge. Full line height, so the guides join into one unbroken rule down a block. */ .c-ind{display:inline-block;height:var(--clh);vertical-align:top; box-shadow:inset 1px 0 0 rgba(20,22,26,.14)} /* the Tab hint floats in the editor's corner rather than holding a row open */ #hintOK{position:absolute;right:10px;bottom:8px;z-index:3;pointer-events:none; padding:3px 7px;border-radius:6px;background:var(--well);font:500 11px/1.3 var(--mono);color:var(--ink3)} #hintOK:empty{display:none} /* ---------- the way out: game area, top-LEFT, mirroring .topright ---------- */ #btnMenu{position:absolute;left:14px;top:12px;z-index:45;padding:0 11px;gap:5px}