/* cs.css - Brainlag Learn, computer science: code blocks in three styles and the lesson visualisations.
   Built on brainlag.css tokens, so light and dark follow the site. No gradients, pills or nested cards. */

/* ---------------------------------------------------------------- code */
.cs-code{margin:14px 0;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface);overflow:hidden}
.cs-cap{margin:10px 14px 0;color:var(--ink-3);font-size:14.5px}
.cs-langs{display:flex;gap:2px;padding:6px 6px 0;border-bottom:2px solid var(--rule)}
.cs-lang{font:600 14px var(--f-body);color:var(--ink-3);background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px 7px;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;min-height:40px}
.cs-lang:hover{color:var(--ink)}
.cs-pre{margin:0;padding:12px 14px;overflow-x:auto;font:500 15px/1.6 var(--f-mono);color:var(--ink);background:var(--surface);tab-size:4}
.cs-pre code,.lp-prose .cs-pre code{font:inherit;white-space:pre;background:none;padding:0;border-radius:0;color:inherit}
.cs-one{border:2px solid var(--rule-2);border-radius:14px;margin:14px 0}
.cs-code .cs-pre[data-lang]{display:none}
html:not([data-cslang]) .cs-code .cs-pre[data-lang="erl"],
html[data-cslang="erl"] .cs-code .cs-pre[data-lang="erl"],
html[data-cslang="aqa"] .cs-code .cs-pre[data-lang="aqa"],
html[data-cslang="py"] .cs-code .cs-pre[data-lang="py"]{display:block}
html:not([data-cslang]) .cs-lang[data-cslang="erl"],
html[data-cslang="erl"] .cs-lang[data-cslang="erl"],
html[data-cslang="aqa"] .cs-lang[data-cslang="aqa"],
html[data-cslang="py"] .cs-lang[data-cslang="py"]{color:var(--study-ink);border-bottom-color:var(--study)}
.lq-stem .cs-code,.lq-prompt .cs-code{margin:10px 0}
.lq-field.t-bin,.lq-field.t-hex{font-family:var(--f-mono);letter-spacing:.06em}
.lq-grid th{font-family:var(--f-mono);font-size:15px}
.lq-grid td{font-family:var(--f-mono)}
.lq-grid .lq-cell{width:72px;font-family:var(--f-mono)}
.lq-table.lq-grid th,.lq-table.lq-grid td{min-width:0;padding:4px 5px;white-space:nowrap}
@media (max-width:520px){.lq-grid .lq-cell{width:50px;min-height:42px;padding:6px 2px;font-size:16px}.lq-table.lq-grid th,.lq-table.lq-grid td{padding:3px;font-size:14.5px}}
.cs-kbd{font:500 .95em var(--f-mono);background:var(--sunk);border-radius:6px;padding:1px 5px}
.lp-prose,.lq-stem,.lq-prompt{max-width:100%}
table.cs-t{border-collapse:collapse;margin:10px 0;font-variant-numeric:tabular-nums;display:block;overflow-x:auto;max-width:100%}
table.cs-t th,table.cs-t td{border:2px solid var(--rule-2);padding:6px 9px;text-align:center;font-size:16px}
table.cs-t th{color:var(--ink-2);font-weight:600}
table.cs-t td{font-family:var(--f-mono)}
.cs-shapes svg{width:100%;max-width:640px;height:auto;color:var(--ink)}
.cs-shape{color:var(--ink);display:block;margin:8px 0}
.cs-steps{margin:8px 0;padding-left:1.4em}.cs-steps li{margin:3px 0}
.cs-list{font:500 16px var(--f-mono);letter-spacing:.02em}

/* ---------------------------------------------------------------- visualisations */
.cs-viz{margin:16px 0;padding:14px;border:2px solid var(--rule-2);border-radius:14px;background:var(--surface)}
.cs-vtitle{margin:0 0 10px;font:600 16px var(--f-body);color:var(--ink-2)}
.cs-row,.cs-groups,.cs-bits{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.cs-groups{gap:12px}
.cs-grp{display:inline-flex;gap:3px;padding:4px;border:2px solid var(--rule-2);border-radius:10px}
.cs-cell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;border:2px solid var(--rule-2);
  border-radius:10px;font:600 17px var(--f-mono);color:var(--ink);background:var(--paper);transition:background-color .2s,border-color .2s,opacity .2s;margin-bottom:18px}
.cs-grp .cs-cell{margin-bottom:0;min-width:38px;height:38px}
.cs-cell .cs-ix{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font:500 11.5px var(--f-mono);color:var(--ink-3)}
.cs-cell .cs-tag{position:absolute;top:-17px;left:-6px;right:-6px;text-align:center;font:700 10.5px var(--f-body);color:var(--study-ink)}
.cs-row:has(.cs-tag){margin-top:16px}
.cs-cell.hi{border-color:var(--study);background:var(--study-tint)}
.cs-cell.sw{border-color:var(--pink);background:var(--pink-tint)}
.cs-cell.ok{border-color:var(--ln-right,#13804f)}
.cs-cell.dim{opacity:.35}
.cs-msg{margin:6px 0 0;min-height:3em;color:var(--ink);font-size:16px;line-height:1.5}
.cs-stats{margin:0;color:var(--ink-3);font-size:14.5px}
.cs-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}
.cs-btn{font:600 15px var(--f-body);min-height:44px;padding:0 16px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(var(--ink-rgb),.1);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cs-btn.go{background:var(--study);border-color:var(--study);color:#fff;box-shadow:inset 0 -3px 0 var(--ln-lip,#08707a)}
.cs-btn.quiet{border-color:transparent;box-shadow:none;color:var(--study-ink)}
.cs-btn:disabled{opacity:.45;cursor:default}
.cs-btn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.cs-count{color:var(--ink-3);font-size:14px;margin-left:auto}
.cs-own{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0 0;padding:10px 0 0;border-top:2px solid var(--rule)}
.cs-ownl{font-size:14.5px;color:var(--ink-3)}
.cs-own .r{display:flex;align-items:center;gap:8px;flex:1 1 100%}
.cs-own input{font:500 16px var(--f-mono);color:var(--ink);background:var(--paper);border:2px solid var(--rule-2);border-radius:10px;padding:8px 10px;min-height:44px;flex:1 1 180px;min-width:0}
.cs-own input.cs-tg{flex:0 0 76px}
.cs-bit{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:6px 4px;border:2px solid var(--rule-2);border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cs-bit .w{font:500 12px var(--f-mono);color:var(--ink-3)}
.cs-bit .b{font:700 22px var(--f-mono)}
.cs-bit.on{border-color:var(--study);background:var(--study-tint)}
@media (max-width:520px){.cs-pre{font-size:14px;padding:10px 12px}.cs-bit{min-width:38px}.cs-bit .b{font-size:19px}.cs-cell{min-width:38px;height:40px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.cs-cell{transition:none}}
.cs-bitmap{display:block;margin:10px 0;max-width:100%;height:auto}
.cs-bitmap rect{stroke:var(--rule-2);stroke-width:1}
.cs-bitmap rect.on{fill:var(--ink)}
.cs-bitmap rect.off{fill:var(--surface)}
.cs-fde{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start}
.cs-fde table.cs-t{display:table;margin:0}
.cs-fde tr.hi td{background:var(--study-tint);border-color:var(--study)}
.cs-gate,.cs-circuit{display:block;margin:10px 0;max-width:100%;height:auto;color:var(--ink)}
.cs-circuit text.t{font:600 15px var(--f-mono);fill:var(--ink)}
.cs-board text.t{font:700 18px var(--f-mono);fill:var(--ink)}
.cs-board{display:block;width:100%;max-width:560px;height:auto;background:var(--paper);border:2px solid var(--rule);border-radius:12px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cs-board .w polyline{fill:none;stroke:var(--ink-3);stroke-width:2.5}
.cs-board .w polyline.on{stroke:var(--study)}
.cs-board .gate .body{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.cs-board .gate.sel .body{stroke:var(--study)}
.cs-board .gate{cursor:grab}
.cs-board .gl{font:700 9px var(--f-body);fill:var(--ink-3);pointer-events:none}
.cs-board .pin{fill:var(--surface);stroke:var(--ink-3);stroke-width:2;cursor:pointer}
.cs-board .pin.one{fill:var(--study)}
.cs-board .picked .pin.out,.cs-board .gate.picked .pin.out{fill:var(--gold);stroke:var(--gold-ink)}
.cs-board .bit{fill:var(--surface);stroke:var(--rule-2);stroke-width:2;cursor:pointer}
.cs-board .bit.one{fill:var(--study-tint);stroke:var(--study)}
.cs-board text.v{font:700 14px var(--f-mono);fill:var(--ink);cursor:pointer}
.cs-gtt table.cs-t{display:table}
.cs-stats.ok{color:var(--ln-right,#13804f);font-weight:600}
.cs-tree{display:block;margin:10px 0;max-width:100%;height:auto;color:var(--ink)}
.cs-tree .nd circle{fill:var(--surface);stroke:currentColor;stroke-width:2}
.cs-tree .nd text{font:600 14px var(--f-mono);fill:var(--ink)}