/* CodeTrace — the worked-code primitive (engine/primitives/codeTrace.js).

   Its own file for the same reason the per-domain sheets have theirs: it is
   additive, it is touched by one kind of change, and nothing else in the course
   uses this vocabulary. Every colour is a token, because tools/prim.html fails a
   primitive carrying literal hex and the stage is themed three ways.

   The vocabulary is the shared .prim one (.hid .on .bad .dim) plus a line band:
   a code line lights by acquiring a background, not by moving. */

.prim .cl .clbg{fill:none;transition:fill .3s}
.prim .cl.on  .clbg{fill:var(--teal-soft)}
.prim .cl.bad .clbg{fill:var(--pencil-soft)}
.prim .cl.dim{opacity:.3}

/* Ligatures off, deliberately. JetBrains Mono renders `!==` as one glyph and `=>`
   as an arrow, which is pleasant in an editor and wrong here: the learner is being
   shown an operator they have to recognise in their own code, and a listing that
   spells it differently from the API docs is a listing that teaches the wrong
   token. Found on s04b's `block.type !== "tool_use"`, which read as a single
   struck-through symbol. */
.prim text.cd{font-family:var(--f-mono);font-size:25px;fill:var(--ink-2);text-anchor:start;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0}
.prim .cl.on text.cd{fill:var(--ink)}

/* Four token classes, deliberately no more. Strings and numbers share one ink:
   in this course's listings they are the same kind of thing — a literal the
   narration is about to read out. */
.prim text.cd .kw{fill:var(--teal)}
.prim text.cd .str{fill:var(--amber)}
.prim text.cd .num{fill:var(--amber)}
.prim text.cd .com{fill:var(--ink-3)}
/* A line marked .bad is the anti-pattern being shown; it overrides the token
   colours so the whole line reads as one judgement rather than as syntax. */
.prim .cl.bad text.cd,.prim .cl.bad text.cd tspan{fill:var(--pencil)}

/* Panel rows sit between .ln (19px) and .sm (15px): the trace column is read at
   a glance beside code, not studied. */
.prim .ln.md{font-size:17px}
.prim .cdcard rect{fill:var(--plate);stroke:var(--rule);stroke-width:2}
.prim .cdrule{stroke:var(--rule-soft);stroke-width:1.5}