<!-- Loop 2.1 — Manual Flow Computer — build v.333 -->
<!--
  ═══════════════════════════════════════════════════════════════════════════
  LOOP 2.1 (L21)
  A manual flow computer simulator
  loop2.computer
  ═══════════════════════════════════════════════════════════════════════════

  Loop 2.1 is a manual flow computer simulator that runs entirely in this
  file. The operator routes data through a network of circular storage loops,
  triggers ALU operations, and manages bus transfers — in real time, by hand,
  on every tick. There is no stored program. The operator is the program.

  It started as a Minecraft redstone computer built for fun. The browser
  simulator followed, and grew into what you're looking at now.

  ───────────────────────────────────────────────────────────────────────────
  THE EIGHT TENETS
  ───────────────────────────────────────────────────────────────────────────

  1. The Operator Is the Program.
     No stored program exists. The human makes all routing, operational, and
     control-flow decisions in real time. The operator participates throughout
     execution — not just at setup.

  2. Explicit State — No Black Boxes.
     All data is visible at all times. All operations are observable. Nothing
     happens invisibly. Every effect has a traceable cause.

  3. Data as Physical Entity.
     Data has position, velocity, and trajectory. It moves at observable
     speeds, one bit per tick. It is conserved — it does not appear or
     disappear. Moving data costs time, and that cost is always visible.

  4. Circular Storage.
     Memory is circular, not indexed. Data flows past read points
     continuously. There is no absolute start or end — only circulation.
     This demands cyclical thinking rather than linear thinking.

  5. Manual Flow.
     The operator routes all data and triggers all operations. Flags inform
     the operator; they do not control execution. No automatic branching
     occurs.

  6. Bus as Programmable Structure.
     Buses connect components explicitly. Routing is configurable by the
     operator. Data paths are part of the computation, not infrastructure
     beneath it.

  7. Computation as Craft.
     Quality over speed. Understanding over efficiency. The operator is an
     artisan, not a user. Progress is measured by elegance — minimal waste,
     clear workflow, clean choreography of data movement.

  8. Operator-Scale Timing.
     The clock runs at human-observable speeds. The recommended operating
     speed is 24 Hz — fast enough to feel like real-time computation, slow
     enough to follow the data. Time is a resource for learning and for craft.

  ───────────────────────────────────────────────────────────────────────────
  HOW IT'S BUILT
  ───────────────────────────────────────────────────────────────────────────

  Everything you need to run L21 is in this single HTML file — no server,
  no build step, no dependencies. Open it in a browser and it works.

  The simulator is ~18,900 lines of vanilla JavaScript organized around a
  central state namespace (L21) and a synchronous tick engine that drives
  all components in lockstep. Rendering is DOM-based. The clock runs via
  setInterval, with a single-step mode for careful inspection.

  Notable subsystems:
  · Web Audio API — sound notifications and feedback tones
  · WebRTC (via PeerJS) — networked bus connections between operators
  · File System Access API — .loopscript annotation file writing
  · Session logging — every tick recorded to a structured .loop log format

  ───────────────────────────────────────────────────────────────────────────
  THE OPERATORS CLUB
  ───────────────────────────────────────────────────────────────────────────

  Operators who complete the club challenge receive a cryptographic
  completion code. Mailing a printed application with that code, $16 in
  two-dollar bills, and a pre-addressed stamped postcard to New Gloucester,
  Maine earns membership. Members receive a randomly-assigned member number
  and a newsletter at the discretion of the author.

  ───────────────────────────────────────────────────────────────────────────
  Created by Shea Gunther · loop2.computer · Built on nights and weekends over three weeks in March, 2026.
  ═══════════════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loop 2.1 — Manual Flow Computer</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ── Structure ── */
  --bg:      #e8eef4;
  --panel:   #f0f4f8;
  --panel2:  #edf1f5;
  --panel3:  #e4eaf0;
  --border:  #9ab0c4;
  --border2: #b0c4d4;
  --border3: #8aaac0;
  --dim:     #d8e4ec;

  /* ── Text / Foreground ── */
  --text:    #2a4050;
  --textbr:  #0a1820;
  --fg:      #000000;
  --fg-border: #000000;
  --fg-dim:  #507090;

  /* ── Signal accent colors ── */
  --amber:   #c07000;
  --green:   #007a40;
  --cyan:    #006890;
  --red:     #c02030;
  --purple:  #6030c0;

  /* ── Loop identity colors ── */
  --c-working: #1060b0;
  --c-alu:     #b06000;
  --c-memory:  #006830;
  --c-big:     #006888;
  --c-chall:   #b03070;   /* Challenges — magenta */
  --c-tg:      #7040b0;   /* Threshold Gates — violet */
  --c-net:     #4a68b8;   /* Networking / Chain — indigo */

  /* ── Dots / Bits ── */
  --dot-off:    #c8d8e8;
  --dot-border: #5a7890;

  /* ── Levers ── */
  --lever-slot:   #d0dce8;
  --lever-border: #7090b0;
  --lever-arm:    #5080b0;
  --pip:          #5878a8;
  --pip-border:   #5080a0;

  /* ── UI element backgrounds ── */
  --word-detail: #dde8f0;
  --el-bg:       #e8eef4;
  --btn-hover:   #d0e8f8;
  --ctr-bg:      #dce4ec;
  --alu-sel:     #f4e0b8;
  --answer-bg:   #e4f5ec;
  --wb-bg:       #c8e8d4;
  --pm-on-bg:    #c8e4f2;

  /* ── Canvas overlay alphas ── */
  --scanline-a:  rgba(0,0,0,0.028);
  --grid-a:      rgba(0,0,0,0.025);

  /* ── Font ── */
  --font: 'Courier New', 'Consolas', monospace;

  /* ── Component backgrounds (previously hardcoded) ── */
  --group-bg:         #f4f8fc;
  --group-title:      #507090;
  --cmp-bg:           #eaf0f6;
  --cmp-border:       #aabccc;
  --cmp-flag-bg:      #dce8e0;
  --cmp-flag-border:  #8abcac;
  --cmp-flag-lit-bg:  #bce8d0;
  --pm-lever-bg:      #ccd8e8;
  --pm-lever-arm-c:   #5080a0;
  --pm-pip-c:         #5070a0;
  --pm-pip-border:    #4a6890;
  --led-off:          #bcccd8;
  --led-off-border:   #4a6278;
  --placeholder-c:    #9ab0c4;
  --mem-sel-bg:       #d8f0e4;
  --mem-sel-border:   #007a40;
  --mem-act-bg:       #c8ecd8;
  --mem-act-border:   #006830;
  --loop-paused-hover:#f0d8a8;
  --gate-open-hover:  #b0e4cc;
  --gate-closed-hover:#f0c0cc;
  --cmp-wb-bg:        #cce8d8;
  --cmp-wb-border:    #7ab8a0;
  --alu-clr-bg:       #dde6ee;
  --alu-clr-border:   #e8c0cc;
  --mem-wb-border:    #8abcac;
  --mem-clr-border:   #e8c0cc;
  --destr-on-hover:   #f0c0cc;

  /* ── Bus identity colors — used by buttons, sections, borders ── */
  /* Bus A: purple */
  --bus-a-color: #6030c0;
  --bus-a-bg:    #ebe0f8;
  --bus-a-dim:   #d4c4ee;
  /* Bus B: magenta-violet, clearly distinct from A */
  --bus-b-color: #a818a8;
  --bus-b-bg:    #f8ddf6;
  --bus-b-dim:   #eec4ec;
  /* Bus C: teal, clearly distinct from both */
  --bus-c-color: #107860;
  --bus-c-bg:    #cff0e6;
  --bus-c-dim:   #b4e4d8;
  /* Bus D: amber-gold, distinct from A/B/C */
  --bus-d-color: #b86010;
  --bus-e-color:  #b01830;  /* External bus — crimson */
  --bus-e-in-color: #18a840; /* Inbound color — green */
  /* Bus F: indigo — P2P bus */
  --bus-f-color: #2050c0;
  --bus-f-in-color: #00a0b0;
  --bus-f-color:  #1868c0;  /* P2P left bus — electric blue */
  --bus-f-in-color: #18a0d8; /* P2P left inbound — cyan-blue */
  --bus-g-color:  #8020c0;  /* P2P right bus — violet */
  --bus-g-in-color: #c040e0; /* P2P right inbound — magenta */
  --bus-h-color:  #8080e0;  /* Challenge Bus — blue-violet, system layer */
  --bus-net0-color: #c87800;  /* Net0 bus — amber */
  --bus-net1-color: #60c020;  /* Net1 bus — lime */
  --bus-d-bg:    #fce8d0;
  --bus-d-dim:   #f0d4b8;
}
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font);
  font-weight: bold;
  display: flex; flex-direction: column; height: 100vh;
}

/* ── HEADER ── */
.header {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 7px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.logo-name { font-size: 14px; font-weight: bold; letter-spacing: 3px; color: var(--fg); }
.logo-sub  { font-size: 9px; letter-spacing: 2px; color: var(--fg); margin-top: 1px; }
.tick-label { font-size: 10px; letter-spacing: 1px; color: var(--fg); }
.tick-value { font-size: 18px; letter-spacing: 2px; color: var(--fg); font-weight: bold; text-align:right; }

/* ── CONTROLS ── */
.controls {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; background: var(--panel); border-bottom: 2px solid var(--border);
  position: relative;
  overflow: visible;
}
.btn {
  padding: 4px 12px; background: var(--dim); border: 1px solid var(--border);
  color: var(--fg); font-family: inherit; font-size: 11px; letter-spacing: 1px;
  cursor: pointer; text-transform: uppercase;
  transition: border-color 0.1s, color 0.1s, background 0.1s; user-select: none;
}
.btn:hover   { border-color: var(--fg); color: var(--fg); background: var(--btn-hover); }
.btn:active  { filter: brightness(1.3); }
.btn-run     { border-color: var(--fg);  color: var(--fg);  background: #c0e8d0; }
.btn-pause   { border-color: var(--fg);  color: #fff;  background: #c03030; }
.btn-load    { border-color: var(--fg);   color: var(--fg);   background: #c4e4f4; }
.btn-load:hover { background: var(--btn-hover); }
.btn-eject   { border-color: var(--fg);    color: var(--fg);    background: #f4c8d0; }
.btn-buson   { border-color: var(--fg); color: var(--fg); background: #d8d0e8; }
.btn-busoff  { border-color: var(--fg);  color: var(--fg);  background: var(--loop-paused-hover); }
/* Bus A — purple */
.btn-busa-on  { border-color: var(--bus-a-color); color: #ffffff; background: var(--bus-a-color); }
.btn-busa-off { border-color: var(--bus-a-color); color: var(--fg); background: var(--bus-a-dim); }
/* Bus B — magenta-violet */
.btn-busb-on  { border-color: var(--bus-b-color); color: #ffffff; background: var(--bus-b-color); }
.btn-busb-off { border-color: var(--bus-b-color); color: var(--fg); background: var(--bus-b-dim); }
/* Bus C — teal */
.btn-busc-on  { border-color: var(--bus-c-color); color: #ffffff; background: var(--bus-c-color); }
.btn-busc-off { border-color: var(--bus-c-color); color: var(--fg); background: var(--bus-c-dim); }
/* Bus D — amber-gold */
.btn-busd-on  { border-color: var(--bus-d-color); color: #ffffff; background: var(--bus-d-color); }
.btn-busd-off { border-color: var(--bus-d-color); color: var(--fg); background: var(--bus-d-dim); }
.btn-buse-on  { border-color: var(--bus-e-color); color: #ffffff; background: var(--bus-e-color); }
.btn-buse-off { border-color: var(--bus-e-color); color: var(--fg); background: transparent; }
.btn-busf-on  { border-color: var(--bus-f-color); color: #ffffff; background: var(--bus-f-color); }
.btn-busf-off { border-color: var(--bus-f-color); color: var(--fg); background: transparent; }
.divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.speed-group { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--fg); letter-spacing: 2px; }
.speed-group input[type=range] { width: 100px; accent-color: var(--fg); cursor: pointer; }
.speed-val { color: var(--fg); min-width: 44px; font-size: 11px; }
.op-count-group {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--fg); letter-spacing: 2px;
}
.op-count-input {
  width: 72px; padding: 2px 4px; font-family: inherit; font-size: 11px;
  background: var(--dim); border: 1px solid var(--border); color: var(--fg);
  text-align: center; letter-spacing: 1px;
  -moz-appearance: textfield;
}
.op-count-input::-webkit-outer-spin-button,
.op-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.op-count-input:focus { outline: none; border-color: var(--fg); }
.op-count-btn {
  padding: 2px 6px; font-family: inherit; font-size: 10px; letter-spacing: 1px;
  cursor: pointer; border: 1px solid var(--border); background: var(--dim);
  color: var(--fg); user-select: none; transition: background 0.1s, border-color 0.1s;
}
.op-count-btn:hover { border-color: var(--fg); background: var(--btn-hover); }
.op-count-btn.halted { background: #f04050; border-color: #a00010; color: #ffffff; }
.op-count-btn.linked { background: #e8c870; border-color: #a06020; color: var(--fg); }
.clock-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg); letter-spacing: 2px; }
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led-off); border: 1px solid var(--led-off-border);
  transition: background 0.05s, box-shadow 0.05s; flex-shrink: 0;
}
.led.on  { background: var(--green); box-shadow: 0 0 7px var(--green); border-color: var(--fg); }
.led.run { background: var(--amber); box-shadow: 0 0 7px var(--amber); border-color: var(--fg); }

/* ── BODY ── */
.body-row { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── INJECT ROW (switches + inject channel, above Working/ALU) ── */
.inject-row {
  flex-shrink: 0; height: 106px;
  display: flex;
  background: var(--panel3);
  border-bottom: 1px solid var(--border2);
}

/* Switch panel: sits above Working Loop (left half) */
.switch-panel {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 12px; gap: 8px;
  border-right: 1px solid var(--border2);
  position: relative;
}
.sw-title {
  font-size: 11px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase;
  align-self: flex-start; font-weight: bold;
}
.sw-bit-labels {
  display: flex; gap: 0; align-self: stretch; padding: 0 4px;
}
.sw-bit-label {
  flex: 1; text-align: center; font-size: 7px; color: var(--fg); letter-spacing: 0;
}

/* The 8 levers */
.levers-row {
  display: flex; gap: 6px; align-items: flex-end;
}

/* Individual lever */
.lever-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; user-select: none;
}
.lever-wrap:hover .lever-slot { border-color: var(--fg); }

/* Slot: the housing the lever sits in */
.lever-slot {
  width: 14px; height: 26px;
  background: var(--lever-slot);
  border: 1px solid var(--lever-border);
  border-radius: 3px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
/* Lever arm inside the slot */
.lever-arm {
  width: 5px; height: 16px;
  background: var(--lever-arm);
  border-radius: 3px;
  position: absolute;
  bottom: 3px;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 0.12s ease, background 0.12s;
}
.lever-wrap.on .lever-arm {
  transform: rotate(-38deg);
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}
/* LED pip at top of arm */
.lever-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pip); border: 1px solid var(--pip-border);
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.lever-wrap.on .lever-pip {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  border-color: var(--fg);
}
.lever-bit-num {
  font-size: 7px; color: var(--fg); letter-spacing: 0; line-height: 1;
}

/* Value display under levers */
.sw-val-row {
  display: flex; align-items: center; gap: 10px; font-size: 10px;
}
.sw-val { color: var(--fg); letter-spacing: 1px; white-space: nowrap; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.sw-val span { color: var(--fg); }
.sw-actions { display: flex; gap: 5px; }
.sw-actions .btn { padding: 4px 10px; font-size: 10px; letter-spacing: 1px; }

/* RNG panel */
.rng-panel {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 10px; gap: 6px;
  border-right: 1px solid var(--border2);
  position: relative;
}
.rng-title {
  font-size: 11px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase;
  align-self: flex-start; font-weight: bold;
}
.rng-history {
  font-size: 9px; letter-spacing: 0.5px; color: var(--fg-dim);
  margin-top: 4px; min-height: 14px;
}
.rng-actions { display: flex; gap: 5px; }
.rng-actions .btn { padding: 4px 8px; font-size: 10px; letter-spacing: 1px; }
.rng-range-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.rng-range-label {
  font-size: 9px; letter-spacing: 2px; color: var(--fg-dim); flex-shrink: 0; min-width: 28px;
}
.rng-range-input {
  width: 58px; font-family: var(--font); font-size: 10px; font-weight: bold;
  background: var(--el-bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 2px; padding: 2px 6px; text-align: center; letter-spacing: 1px;
  -moz-appearance: textfield;
}
.rng-range-input::-webkit-outer-spin-button,
.rng-range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rng-range-input:focus { outline: none; border-color: var(--fg-border); }
.rng-range-input.err { border-color: var(--red); color: var(--red); }

/* Inject channel: right half of inject row — above ALU, shows bits queued for inject */
.inject-channel-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 12px; gap: 5px;
}
.inj-title {
  font-size: 11px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase;
  align-self: flex-start; font-weight: bold;
}
.inject-channel-wrap canvas { display: block; }

/* ── LOOPS ROWS ── */
.loops-row {
  flex: 1; min-height: 0; display: flex; gap: 2px;
  background: var(--border2);
}
.bus-strip {
  flex-shrink: 0; height: 19px;
  background: var(--panel3);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  position: relative;
}
#canvas-bus { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── LOOP PANELS ── */
.loop-panel {
  flex: 1; background: var(--panel2);
  display: flex; flex-direction: column;
  padding: 4px 9px 1px; overflow: hidden; position: relative;
}
.loop-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-a) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-a) 1px, transparent 1px);
  background-size: 20px 20px; pointer-events: none;
}
.loop-header {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px; position: relative; z-index: 1;
}
.wscr-capture-led {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-working, #6030c0);
  margin-left: 6px; vertical-align: middle;
  opacity: 0; transition: opacity 0.2s;
}
.wscr-capture-led.active {
  opacity: 1;
  animation: wscr-pulse 1s ease-in-out infinite;
}
@keyframes wscr-pulse {
  0%, 100% { box-shadow: 0 0 2px var(--c-working, #6030c0); }
  50%       { box-shadow: 0 0 6px 2px var(--c-working, #6030c0); }
}
.loop-name { font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.loop-meta { font-size: 9px; color: var(--fg); letter-spacing: 1px; }
.canvas-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
canvas.lcanvas { display: block; max-width: 100%; max-height: 100%; }
.word-detail {
  flex-shrink: 0; height: 26px; display: flex; align-items: center; gap: 6px;
  padding: 0 5px; background: var(--word-detail); border: 1px solid var(--border2);
  margin-top: 2px; position: relative; z-index: 1;
}
.wd-label { font-size: 9px; letter-spacing: 2px; color: var(--fg); flex-shrink: 0; }
.bits { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.bit {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot-off); border: 1px solid var(--dot-border); flex-shrink: 0;
  transition: background 0.08s, box-shadow 0.06s, border-color 0.06s;
}
.bit.mk  { border-radius: 2px; }
.bit-gap { width: 3px; flex-shrink: 0; }
.wd-vals { font-size: 9px; color: var(--fg); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.wd-vals .v     { color: var(--fg); }
.wd-vals .empty { color: var(--fg); }
.wd-vals .wait  { color: var(--fg); font-style: italic; }

/* ── SIDEBAR ── */
.sidebar {
  width: 270px; flex-shrink: 0;
  background: var(--panel3); border-left: 2px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
}
.sb-section { padding: 10px 11px; border-bottom: 1px solid var(--border2); }
.sb-title {
  font-size: 10px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase;
  margin-bottom: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sb-title::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
.sb-collapse-btn {
  background: none; border: none; color: var(--fg); cursor: pointer;
  font-size: 9px; padding: 0 0 0 4px; line-height: 1; opacity: 0.6;
  flex-shrink: 0; transition: opacity 0.15s, transform 0.2s;
  font-family: inherit; letter-spacing: 0;
}
.sb-collapse-btn:hover { opacity: 1; }
.sb-section.sb-collapsed .sb-collapse-btn { transform: rotate(-90deg); }
.sb-section.sb-collapsed .sb-body {
  padding-top: 8px; display: none; }
.sb-section.sb-collapsed { padding-top: 6px; padding-bottom: 6px; }
/* ── Bus group wrapper ── */
.sb-bus-group .sb-title { cursor: default; display: flex; align-items: center; }
.sb-bus-group-body { display: block; margin-left: -8px; background: var(--sec-buses-group); }
.sb-bus-group.sb-bus-collapsed .sb-bus-group-body { display: none; }
.sb-bus-group.sb-bus-collapsed { padding-top: 6px; padding-bottom: 6px; }
.sb-bus-group.sb-bus-collapsed .sb-collapse-btn { transform: rotate(-90deg); }
/* ── Filter group wrapper ── */
.sb-filter-group .sb-title { cursor: default; display: flex; align-items: center; }
.sb-filter-group-body { display: block; margin-left: -8px; background: var(--sec-filters-group); }
.sb-filter-group.sb-filter-collapsed .sb-filter-group-body { display: none; }
.sb-filter-group.sb-filter-collapsed { padding-top: 6px; padding-bottom: 6px; }
.sb-filter-group.sb-filter-collapsed .sb-collapse-btn { transform: rotate(-90deg); }

.sb-chain-net-group .sb-title { cursor: default; display: flex; align-items: center; }
.sb-chain-net-group-body { display: block; margin-left: -8px; background: var(--sec-chain-net-group); }
.sb-chain-net-group.sb-chain-net-collapsed .sb-chain-net-group-body { display: none; }
.sb-chain-net-group.sb-chain-net-collapsed { padding-top: 6px; padding-bottom: 6px; }
.sb-chain-net-group.sb-chain-net-collapsed .sb-collapse-btn { transform: rotate(-90deg); }
/* ── Scripts group wrapper ── */
.sb-scripts-group .sb-title { cursor: default; display: flex; align-items: center; }
.sb-scripts-group-body { display: block; margin-left: -8px; background: var(--sec-scripts-group); }
.sb-scripts-group.sb-scripts-collapsed .sb-scripts-group-body { display: none; }
.sb-scripts-group.sb-scripts-collapsed { padding-top: 6px; padding-bottom: 6px; }
.sb-scripts-group.sb-scripts-collapsed .sb-collapse-btn { transform: rotate(-90deg); }

.lsel-label { font-size: 9px; color: var(--fg); letter-spacing: 1px; margin-bottom: 5px; }
.lsel { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 8px; }
.lbtn {
  padding: 4px 3px; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); font-family: inherit; font-size: 10px; letter-spacing: 1px;
  cursor: pointer; text-align: center; text-transform: uppercase;
  transition: all 0.1s; user-select: none;
}
.lbtn:hover { color: var(--fg); border-color: var(--border3); }
.lbtn.sel-src     { border-color: var(--sel-src-border); color: var(--fg); background: var(--sel-src-bg); }
.lbtn.sel-dst     { border-color: var(--sel-dst-border); color: var(--fg); background: var(--sel-dst-bg); }
.bus-toggle { margin-top: 4px; }
.bus-toggle .btn { width: 100%; padding: 6px; font-size: 11px; }

.status-log { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.status-title { font-size: 10px; letter-spacing: 1px; color: var(--fg); margin-bottom: 5px; text-transform: uppercase; }
.status-line { font-size: 10px; letter-spacing: 1px; color: var(--fg); line-height: 1.5; opacity: 0; }
.status-line.show { opacity: 1; }
.status-line.ok   { color: var(--log-ok,   var(--green)); }
.status-line.err  { color: var(--log-err,  var(--red)); }
.status-line.info { color: var(--log-info, var(--fg)); }
.status-line.bus  { color: var(--log-bus,  var(--purple)); }
.status-line.inj  { color: var(--log-inj,  var(--cyan)); }

.step-btn {
  font-family: var(--font);
  font-size: 9px; letter-spacing: 2px;
  padding: 2px 7px; cursor: pointer; border: 1px solid var(--border2);
  background: var(--dim); color: var(--fg); user-select: none;
  transition: all 0.12s; text-transform: uppercase;
}
.step-btn:hover { border-color: var(--fg-border); color: var(--fg); background: var(--btn-hover); }

.reset-tick-btn {
  font-family: var(--font);
  font-size: 8px; letter-spacing: 2px; padding: 2px 6px;
  background: var(--dim); border: 1px solid var(--border2); color: var(--fg);
  cursor: pointer; text-transform: uppercase;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.reset-tick-btn:hover { border-color: var(--fg-border); color: var(--fg); background: var(--btn-hover); }

.hw-test-btn {
  font-family: var(--font);
  font-size: 8px; letter-spacing: 2px; padding: 2px 8px;
  background: transparent; border: 1px solid var(--border2); color: var(--fg-dim);
  cursor: pointer; text-transform: uppercase;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.hw-test-btn:hover { border-color: var(--fg); color: var(--fg); background: var(--btn-hover); }

.pause-btn {
  font-family: var(--font);
  font-size: 9px; letter-spacing: 2px;
  padding: 2px 7px; cursor: pointer; border: 1px solid; user-select: none;
  transition: all 0.12s; text-transform: uppercase;
}
.loop-running { background: #c0e8d0; border-color: var(--fg); color: var(--fg); }
.loop-running:hover { border-color: var(--fg); color: var(--fg); background: var(--loop-paused-hover); }
.loop-paused  { background: #c03030; border-color: var(--fg); color: #fff; }
.loop-paused:hover  { background: #a02020; }

.gate-btn {
  font-family: var(--font);
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 7px; cursor: pointer; border: 1px solid; user-select: none;
  transition: all 0.12s; text-transform: uppercase;
}
.gate-open   { background: #c0e8d0; border-color: var(--fg); color: var(--fg); }
.gate-open:hover { background: var(--gate-open-hover); }
.gate-closed { background: #f4c8d0; border-color: var(--fg); color: var(--fg); }
.gate-closed:hover { background: var(--gate-closed-hover); }

/* ── ALU panel ── */
.alu-reg-block {
  margin-bottom: 5px;
}
.alu-reg-header {
  display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
}
.alu-reg-name {
  font-size: 11px; font-weight: bold; color: var(--fg);
  letter-spacing: 1px; width: 10px; flex-shrink: 0; text-align: center;
}
.alu-reg-bits {
  display: flex; gap: 1px; flex-shrink: 0;
}
.alu-bit {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot-off); border: 1px solid var(--dot-border); flex-shrink: 0;
  transition: background 0.12s, box-shadow 0.1s, border-color 0.1s;
}
.alu-bit.lit   { background: var(--amber); border-color: var(--fg); box-shadow: 0 0 4px var(--amber); }
.alu-bit.lit-g { background: var(--green); border-color: var(--fg); box-shadow: 0 0 4px var(--green); }
.alu-bit.dim   { opacity: 0.35; }
.alu-reg-val {
  flex: 1; font-size: 10px; color: var(--fg); letter-spacing: 1px;
  text-align: right; white-space: nowrap; overflow: hidden;
}
/* Capture bar: 9 mini slots showing bits travelling into the register */
.alu-capture-bar {
  display: flex; gap: 1px; align-items: center;
  height: 8px; padding: 0 0 0 16px;
}
.alu-cap-slot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dot-off); border: 1px solid var(--dot-border); flex-shrink: 0;
  transition: background 0.06s, box-shadow 0.06s;
}
.alu-cap-slot.lit { background: var(--amber); border-color: var(--fg); box-shadow: 0 0 4px var(--amber); }
/* Route selector */
.alu-route-row {
  display: flex; align-items: center; gap: 3px; margin: 6px 0;
}
.alu-route-label {
  font-size: 8px; letter-spacing: 2px; color: var(--fg); flex-shrink: 0;
}
.alu-route-btn {
  flex: 1; text-align: center; font-size: 8px; letter-spacing: 1px;
  padding: 3px 0; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); cursor: pointer; text-transform: uppercase;
  transition: all 0.1s; user-select: none;
}
.alu-route-btn:hover { border-color: var(--fg); color: var(--fg); }
.alu-route-btn.active { border-color: var(--sel-dst-border); color: var(--fg); background: var(--sel-dst-bg); }
.alu-route-btn#route-off.active { border-color: var(--border2); color: var(--fg); background: var(--el-bg); }

/* Operand source selector */
.alu-opsrc-block { margin: 2px 0; }
.alu-opsrc-row {
  display: flex; align-items: center; gap: 3px; margin-bottom: 3px;
}
.alu-opsrc-label {
  font-size: 8px; letter-spacing: 1px; color: var(--fg); flex-shrink: 0; width: 38px;
}
.alu-opsrc-btn {
  flex: 1; text-align: center; font-size: 9px; font-weight: bold;
  padding: 4px 0; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); cursor: pointer; text-transform: uppercase;
  transition: all 0.1s; user-select: none;
}
.alu-opsrc-btn:hover { border-color: var(--fg); }
.opa-sel-btn.active { border-color: var(--sel-src-border); background: var(--sel-src-bg); color: var(--fg); }
.opb-sel-btn.active { border-color: var(--sel-dst-border); background: var(--sel-dst-bg); color: var(--fg); }
/* Writeback */

.alu-reg-divider {
  height: 1px; background: var(--border2); margin: 5px 0;
}
/* ── Comparator ── */
.cmp-block {
  background: var(--cmp-bg); border: 1px solid var(--cmp-border);
  border-radius: 3px; padding: 6px 8px; margin-top: 6px;
}
.cmp-header {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.cmp-title {
  font-size:8px; letter-spacing:3px; color:var(--fg); text-transform:uppercase;
}
.cmp-subtitle {
  font-size:7px; letter-spacing:1px; color:var(--fg);
}
.cmp-flags-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-bottom:6px;
}
.cmp-flag {
  font-size:8px; letter-spacing:1px; text-align:center; padding:3px 2px;
  border:1px solid #8abcac; color:var(--fg); background:#dce8e0;
  border-radius:2px; transition:all 0.1s; user-select:none;
}
.cmp-flag.lit {
  border-color:var(--fg); color:var(--fg); background:#bce8d0;
  box-shadow: 0 0 6px #00d09044;
}
.cmp-result-row {
  display:flex; align-items:center; gap:6px; margin-bottom:5px;
}
.cmp-result-bits {
  display:flex; gap:2px;
}
.cmp-result-val {
  font-size:8px; color:var(--fg); letter-spacing:1px; flex:1;
}
.cmp-wb-btn {
  font-family:'Courier New',monospace; font-size:8px; letter-spacing:1px;
  padding:3px 6px; background:var(--cmp-wb-bg); border:1px solid var(--cmp-wb-border);
  color:var(--fg); cursor:pointer; text-transform:uppercase; transition:all 0.12s;
  width:100%;
}
.cmp-wb-btn:hover { border-color:var(--fg); color:var(--fg); background:#bce8d0; }

.alu-answer-block {
  border: 1px solid var(--green);
  background: var(--answer-bg);
  padding: 6px 7px 5px;
  margin-top: 2px;
}
.alu-answer-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.alu-answer-label {
  font-size: 9px; letter-spacing: 1px; color: var(--fg); text-transform: uppercase;
}
.alu-answer-op {
  font-size: 8px; letter-spacing: 2px; color: var(--fg);
}
.alu-answer-body {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.alu-answer-val {
  flex: 1; font-size: 12px; font-weight: bold; color: var(--fg);
  letter-spacing: 2px; text-align: right;
}
.alu-answer-block .alu-bit { border-color: var(--fg); background: #cce8d8; }
.alu-bit-mk { border-radius: 1px !important; }
.alu-answer-block .alu-bit.lit-g {
  background: var(--green); border-color: var(--fg);
  box-shadow: 0 0 5px var(--green);
}
.alu-wb-btn {
  width: 100%; font-family: var(--font); font-size: 8px;
  letter-spacing: 1px; padding: 4px 0; background: var(--wb-bg);
  border: 1px solid #7ab8a0; color: var(--fg);
  cursor: pointer; text-transform: uppercase;
  transition: all 0.15s;
}
.alu-wb-btn:hover { background: #b8e8cc; border-color: var(--fg); color: var(--fg); }
.alu-clr-btn {
  font-family: var(--font); font-size: 8px; letter-spacing: 1px;
  padding: 2px 5px; background: var(--alu-clr-bg); border: 1px solid var(--alu-clr-border);
  color: var(--fg); cursor: pointer; text-transform: uppercase; flex-shrink: 0;
  transition: all 0.1s;
}
.alu-clr-btn:hover { border-color: var(--fg); color: var(--fg); background: #f4c8d0; }
.alu-flags-row {
  display: flex; gap: 3px; margin-bottom: 7px;
}
.alu-flag {
  flex: 1; text-align: center; font-size: 9px; letter-spacing: 1px;
  padding: 2px 0; border: 1px solid var(--border2);
  color: var(--fg); background: var(--el-bg); transition: all 0.12s;
}
.alu-flag.lit {
  border-color: var(--fg); color: var(--fg); background: var(--alu-sel);
  box-shadow: 0 0 4px #f0a00044;
}
.alu-ops-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.alu-op {
  text-align: center; font-size: 9px; letter-spacing: 1px;
  padding: 4px 0; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); cursor: pointer; text-transform: uppercase;
  transition: all 0.1s; user-select: none;
}
.alu-op:hover { border-color: var(--fg); color: var(--fg); }
.alu-op.sel-op { border-color: var(--fg); color: var(--fg); background: var(--alu-sel); }

/* ── Pattern Matcher panel ── */
.tg-mode-btn {
  padding: 3px 8px; font-family: inherit; font-size: 10px; font-weight: bold;
  letter-spacing: 1px; cursor: pointer; border: 1px solid var(--border);
  background: var(--dim); color: var(--fg); user-select: none;
  transition: background 0.1s, border-color 0.1s;
}
.tg-mode-btn:hover { border-color: var(--fg); background: var(--btn-hover); }
.tg-mode-btn.active { background: #c8e4f2; border-color: var(--cyan); color: var(--fg); }

/* ── Networking Panel ── */
--net-color: var(--c-net);
.net-subsection {
  border: 1px solid var(--border3);
  margin-bottom: 6px;
  background: var(--el-bg);
}
.net-subsection-title {
  font-size: 9px; letter-spacing: 1px; font-weight: bold;
  color: var(--fg-dim); padding: 4px 7px;
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; user-select: none;
  border-bottom: 1px solid transparent;
}
.net-subsection-title:hover { color: var(--fg); }
.net-subsection-title.open { color: var(--fg); border-bottom-color: var(--border3); }
.net-subsection-body { padding: 6px 7px; display: none; }
.net-subsection-body.open { display: block; }
.net-subsection-caret { font-size: 8px; transition: transform 0.15s; }
.net-subsection-title.open .net-subsection-caret { transform: rotate(90deg); }
.chain-topology-badge {
  font-size: 8px; letter-spacing: 1px; padding: 3px 6px;
  background: var(--el-bg); border: 1px solid var(--border3);
  color: var(--fg); line-height: 1.5; min-height: 20px;
}
.net-member-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--border3);
}
.net-member-row:last-child { border-bottom: none; }
.net-member-handle { color: var(--fg); font-weight: bold; flex: 1; }
.net-member-pos { color: var(--fg-dim); font-family: var(--font); min-width: 32px; }
.net-member-role { color: var(--fg-dim); font-size: 7px; letter-spacing: 1px; }
.net-invite-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 0; border-bottom: 1px solid var(--border3);
  font-size: 8px;
}
.net-invite-row:last-child { border-bottom: none; }
.net-invite-check { width: 12px; height: 12px; accent-color: var(--bus-f-color); cursor: pointer; }
.net-invite-label { flex: 1; color: var(--fg); }
.net-invite-pos { color: var(--fg-dim); font-family: var(--font); }
.net-request-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0; border-bottom: 1px solid var(--border3);
  font-size: 8px;
}
.net-request-row:last-child { border-bottom: none; }
.net-request-info { flex: 1; color: var(--fg); }
.net-request-pos { color: var(--fg-dim); font-family: var(--font); font-size: 7px; }
.net-approve-btn { font-size: 7px; padding: 2px 5px; cursor: pointer;
  border: 1px solid var(--memory); color: var(--memory); background: transparent; }
.net-approve-btn:hover { background: var(--memory); color: #fff; }
.net-deny-btn { font-size: 7px; padding: 2px 5px; cursor: pointer;
  border: 1px solid #c03030; color: #c03030; background: transparent; }
.net-deny-btn:hover { background: #c03030; color: #fff; }
.net-badge {
  display: inline-block; font-size: 7px; letter-spacing: 1px;
  padding: 1px 4px; background: #4466aa; color: #fff; margin-left: 4px;
}
.net-badge.hub { background: #7744aa; }
.net-badge.member { background: #4488aa; }
.chain-status-line {
  font-size: 8px; letter-spacing: 1px; color: var(--fg-dim);
  padding: 2px 0; line-height: 1.4;
}
/* Chat unified panel */
.chat-peer-select {
  width: 100%; font-family: var(--font); font-size: 9px;
  background: var(--el-bg); border: 1px solid var(--border);
  color: var(--fg); padding: 3px 5px; margin-bottom: 5px; cursor: pointer;
}
.chat-log {
  width: 100%; height: 120px; overflow-y: auto;
  background: var(--el-bg); border: 1px solid var(--border);
  font-family: var(--font); font-size: 8px; color: var(--fg);
  padding: 4px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px;
}
.chat-msg { line-height: 1.4; word-break: break-word; }
.chat-msg .chat-who-you  { color: var(--bus-f-color); font-weight: bold; }
.chat-msg .chat-who-peer { color: var(--memory); font-weight: bold; }
.chat-msg .chat-time     { color: var(--fg-dim); margin-right: 4px; }
.chat-input-row { display: flex; gap: 4px; margin-top: 4px; }
.chat-input {
  flex: 1; font-family: var(--font); font-size: 9px;
  background: var(--el-bg); border: 1px solid var(--border);
  color: var(--fg); padding: 3px 5px;
}
.chat-input:focus { outline: 1px solid var(--bus-f-color); }
.chat-no-peers { font-size: 8px; color: var(--fg-dim); font-style: italic; padding: 4px 0; }

/* ── P2P Connection Panel ── */
.p2p-status { font-size: 9px; letter-spacing: 1px; padding: 3px 8px; border-radius: 2px; font-weight: bold; }
.p2p-status.disconnected { background: var(--dim); color: var(--fg-dim); }
.p2p-status.connecting   { background: #f0e0a0; color: #805000; }
.p2p-status.connected    { background: #c0e8d0; color: #006830; }
.p2p-textarea { width:100%; height:52px; font-family:var(--font); font-size:8px; background:var(--el-bg); border:1px solid var(--border); color:var(--fg); padding:4px; resize:vertical; word-break:break-all; }
.p2p-btn { padding:3px 8px; font-family:inherit; font-size:9px; letter-spacing:1px; cursor:pointer; border:1px solid var(--bus-f-color); background:transparent; color:var(--bus-f-color); }
.p2p-btn:hover { background:var(--bus-f-color); color:#fff; }
.p2p-btn.active { background:var(--bus-f-color); color:#fff; }
.p2p-latency { font-size:8px; color:var(--fg-dim); letter-spacing:1px; }

/* ── P2P Chat Panel ── */
.p2p-chat-panel { opacity:0.35; pointer-events:none; transition: opacity 0.2s; }
.p2p-chat-panel.p2p-chat-active { opacity:1; pointer-events:all; }
.p2p-chat-log {
  width:100%; height:110px; overflow-y:auto;
  background:var(--el-bg); border:1px solid var(--border);
  font-family:var(--font); font-size:8px; color:var(--fg);
  padding:4px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:3px;
}
.p2p-chat-msg { line-height:1.4; word-break:break-word; }
.p2p-chat-msg .chat-who-you  { color:var(--bus-f-color); font-weight:bold; }
.p2p-chat-msg .chat-who-peer { color:var(--memory);      font-weight:bold; }
.p2p-chat-msg .chat-time     { color:var(--fg-dim); margin-right:4px; }
.p2p-chat-input-row { display:flex; gap:4px; margin-top:4px; }
.p2p-chat-input {
  flex:1; font-family:var(--font); font-size:9px;
  background:var(--el-bg); border:1px solid var(--border);
  color:var(--fg); padding:3px 5px;
}
.p2p-chat-input:focus { outline:1px solid var(--bus-f-color); }
.p2p-chat-disconnected-note { font-size:8px; color:var(--fg-dim); font-style:italic; margin-top:4px; }

/* ── Notifications Panel ── */
.notif-section { margin-bottom:4px; }
.notif-group {
  margin-bottom:6px; padding:5px 6px;
  border:1px solid var(--border); background:var(--group-bg);
}
.notif-group-title {
  font-size:9px; letter-spacing: 1px; color:var(--group-title);
  margin-bottom:4px; text-transform:uppercase;
}
.notif-trig-btns { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:5px; }
.notif-trig-btn {
  padding:2px 5px; font-family:inherit; font-size:8px; letter-spacing:1px;
  cursor:pointer; border:1px solid var(--border); background:var(--dim);
  color:var(--fg-dim); user-select:none; transition:background 0.1s, border-color 0.1s, color 0.1s;
  text-transform:uppercase;
}
.notif-trig-btn:hover { border-color:var(--fg); color:var(--fg); background:var(--btn-hover); }
.notif-trig-btn.active { background:var(--pm-on-bg); border-color:var(--fg); color:var(--fg); }
.notif-sound-row { display:flex; align-items:center; gap:5px; }
.notif-sound-label { font-size:8px; color:var(--fg-dim); letter-spacing:1px; white-space:nowrap; }
.notif-sound-select {
  font-family:inherit; font-size:8px; background:var(--el-bg);
  border:1px solid var(--border); color:var(--fg); padding:1px 3px;
  cursor:pointer; flex:1;
}
.notif-preview-btn {
  padding:2px 5px; font-family:inherit; font-size:8px; letter-spacing:1px;
  cursor:pointer; border:1px solid var(--border); background:var(--dim);
  color:var(--fg-dim);
}
.notif-preview-btn:hover { border-color:var(--fg); color:var(--fg); background:var(--btn-hover); }
.notif-chat-group {
  margin-top:6px; padding:5px 6px;
  border:1px solid var(--border); background:var(--group-bg);
}
.pm-toggle-btn {
  flex:1; font-family:'Courier New',monospace; font-size:8px; letter-spacing:1px;
  padding:4px 0; cursor:pointer; text-transform:uppercase; border:1px solid;
  transition:all 0.15s;
}
.pm-off       { background:var(--ctr-bg); border-color:var(--fg-dim); color:var(--fg); }
.pm-off:hover { border-color:var(--fg); color:var(--fg); background:#d0e8f4; }
.pm-on        { background:#c8e4f2; border-color:var(--fg); color:var(--fg);
                animation:logpulse 1.4s infinite; }
.pm-destr-off       { background:var(--ctr-bg); border-color:var(--fg-dim); color:var(--fg); }
.pm-destr-off:hover { border-color:var(--fg); color:var(--fg); background:#f4e0b8; }
.pm-destr-on        { background:#f4d0b8; border-color:var(--fg); color:var(--fg); }
.pm-flag {
  font-size:10px; letter-spacing:2px; padding:3px 8px;
  border:1px solid #507090; color:var(--fg); background:var(--ctr-bg);
  transition:all 0.15s; user-select:none;
}
.pm-flag.lit {
  border-color:var(--fg); color:var(--fg); background:#bce0f0;
  box-shadow:0 0 8px var(--c-big)44;
}
.pm-count { font-size:9px; letter-spacing:1px; color:var(--fg); flex:1; }
.pm-clr-btn {
  font-family:'Courier New',monospace; font-size:8px; padding:2px 5px;
  background:transparent; border:1px solid #e8c0cc; color:var(--fg);
  cursor:pointer; text-transform:uppercase; transition:all 0.1s; flex-shrink:0;
}
.pm-clr-btn:hover { border-color:var(--fg); color:var(--fg); background:#f4c8d0; }
.pm-reg-label {
  font-size:9px; letter-spacing: 1px; color:var(--fg); margin-bottom:4px;
}
.pm-rewrite-label { color: var(--pm-rewrite-c); }
.pm-levers-row { display:flex; gap:2px; margin-bottom:3px; }
.pm-lever-wrap {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; user-select:none;
}
.pm-lever-slot {
  width:11px; height:30px; background:var(--pm-lever-bg);
  border:1px solid var(--pc, #507888); border-radius:2px;
  position:relative; display:flex; align-items:center; justify-content:center;
  transition:border-color 0.15s;
}
.pm-lever-wrap:hover .pm-lever-slot { border-color:var(--pc, var(--c-big)); filter:brightness(1.3); }
.pm-lever-arm {
  width:4px; height:22px; background:var(--pm-lever-arm-c); border-radius:2px;
  position:absolute; bottom:3px; transform-origin:bottom center;
  transform:rotate(0deg); transition:transform 0.12s ease, background 0.12s;
}
.pm-lever-wrap.on .pm-lever-arm {
  transform:rotate(-38deg); background:var(--pc,var(--c-big));
  box-shadow:0 0 5px var(--pc,var(--c-big));
}
.pm-lever-pip {
  width:6px; height:6px; border-radius:50%;
  background:var(--pm-pip-c); border:1px solid var(--pm-pip-border);
  transition:all 0.12s;
}
.pm-lever-wrap.on .pm-lever-pip {
  background:var(--pc,var(--c-big)); border-color:var(--pc,var(--c-big));
  box-shadow:0 0 5px var(--pc,var(--c-big));
}
.pm-lever-num { font-size:7px; color:var(--fg); line-height:1; }
.pm-val {
  font-size:9px; color:var(--fg); letter-spacing:1px; margin-bottom:2px;
}

/* ── Memory panel ── */
.mem-mode-row {
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.mem-mode-btn {
  flex: 1; text-align: center; font-size: 9px; letter-spacing: 1px;
  padding: 3px 0; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); cursor: pointer; text-transform: uppercase;
  transition: all 0.1s; user-select: none;
}
.mem-mode-btn:hover { border-color: var(--fg); color: var(--fg); }
.mem-mode-btn.active { border-color: var(--fg); color: var(--fg); background: #f4d0b8; }

.mem-addr-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.mem-addr-switches { display: flex; gap: 5px; }
.mem-addr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; user-select: none;
}
.mem-addr-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pip); border: 1px solid var(--pip-border);
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.mem-addr-wrap.on .mem-addr-pip {
  background: var(--c-memory); border-color: var(--fg); box-shadow: 0 0 5px var(--c-memory);
}
.mem-addr-slot {
  width: 14px; height: 32px; background: var(--lever-slot);
  border: 1px solid var(--lever-border); border-radius: 2px;
  position: relative; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.mem-addr-wrap:hover .mem-addr-slot { border-color: var(--fg); }
.mem-addr-arm {
  width: 5px; height: 22px; background: var(--lever-arm); border-radius: 2px;
  position: absolute; bottom: 3px; transform-origin: bottom center;
  transform: rotate(0deg); transition: transform 0.12s ease, background 0.12s;
}
.mem-addr-wrap.on .mem-addr-arm {
  transform: rotate(-38deg); background: var(--c-memory); box-shadow: 0 0 5px var(--c-memory);
}
.mem-addr-lbl { font-size: 7px; color: var(--fg); line-height: 1; }
.mem-addr-val {
  font-size: 11px; color: var(--fg); letter-spacing: 2px; font-weight: bold;
}

.mem-slots-grid {
  display: flex; flex-direction: column; gap: 2px;
}
.mem-slot {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 5px; background: var(--el-bg); border: 1px solid var(--border2);
  transition: border-color 0.15s, background 0.15s;
}
.mem-slot.selected { border-color: var(--mem-sel-border); background: var(--mem-sel-bg); }
.mem-slot.active   { border-color: var(--mem-act-border); background: var(--mem-act-bg);
  box-shadow: 0 0 6px var(--mem-act-border)44; }
.mem-slot-addr {
  font-size: 8px; color: var(--fg); letter-spacing: 1px; width: 14px; flex-shrink: 0;
}
.mem-slot.selected .mem-slot-addr { color: var(--fg); }
.mem-slot-bits { display: flex; gap: 1px; flex-shrink: 0; }
.mem-slot-bit {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dot-off); border: 1px solid var(--dot-border); flex-shrink: 0;
  transition: background 0.08s, box-shadow 0.06s;
}
.mem-slot-bit.mk { border-radius: 1px; }
.mem-slot-bit.lit { background: var(--c-memory); border-color: var(--fg); box-shadow: 0 0 3px var(--c-memory); }
.mem-slot-val {
  flex: 1; font-size: 8px; color: var(--fg); text-align: left;
  letter-spacing: 0; min-width: 0; overflow: hidden;
}
.mem-slot.active .mem-slot-val { color: var(--fg); }
.mem-slot-wb {
  font-family: var(--font); font-size: 7px; letter-spacing: 0;
  padding: 1px 4px; background: transparent; border: 1px solid var(--mem-wb-border);
  color: var(--fg); cursor: pointer; text-transform: uppercase; flex-shrink: 0;
  transition: all 0.1s;
}
.mem-slot-wb:hover { border-color: var(--fg); color: var(--fg); background: var(--wb-bg); }
.mem-slot-clr {
  font-family: var(--font); font-size: 7px; letter-spacing: 0;
  padding: 1px 4px; background: transparent; border: 1px solid var(--mem-clr-border);
  color: var(--fg); cursor: pointer; text-transform: uppercase; flex-shrink: 0;
  transition: all 0.1s;
}
.mem-slot-clr:hover { border-color: var(--fg); color: var(--fg); background: #f4c8d0; }
.mem-destr-btn {
  width: 100%; font-family: var(--font); font-size: 8px;
  letter-spacing: 1px; padding: 4px 0; cursor: pointer;
  text-transform: uppercase; margin-bottom: 7px; transition: all 0.15s;
  border: 1px solid; display: block;
}
.destr-off { background: #dde6ee; border-color: var(--fg); color: var(--fg); }
.destr-off:hover { border-color: var(--fg); color: var(--fg); background: var(--alu-sel); }
.destr-on  { background: #f4c8d0; border-color: var(--fg); color: var(--fg); }
.destr-on:hover  { background: var(--destr-on-hover); }
.mem-autoinc-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
}
.mem-autoinc-start-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0;
}
.mem-autoinc-input {
  width: 38px; background: var(--el-bg); border: 1px solid var(--border3);
  color: var(--fg); font-family: var(--font); font-size: 11px;
  text-align: center; padding: 2px 4px; letter-spacing: 1px;
  -moz-appearance: textfield;
}
.mem-autoinc-input::-webkit-outer-spin-button,
.mem-autoinc-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mem-autoinc-input:focus { outline: none; border-color: var(--fg); }

/* Capture bar for memory slots (reuse alu-cap-slot style) */
.mem-cap-bar {
  display: flex; gap: 1px; padding: 0 0 0 14px; height: 7px; margin-top: 2px;
}
.mem-cap-slot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dot-off); border: 1px solid var(--dot-border); flex-shrink: 0;
  transition: background 0.06s;
}
.mem-cap-slot.lit { background: var(--c-memory); border-color: var(--fg); box-shadow: 0 0 3px var(--c-memory); }

/* ── Bus B ── */
.sel-busb-src { border-color: var(--sel-src-border) !important; color: var(--fg) !important; background: var(--sel-src-bg) !important; }
.sel-busb-dst { border-color: var(--sel-dst-border) !important; color: var(--fg) !important; background: var(--sel-dst-bg) !important; }
.bus-b-strip { background: var(--panel3); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-busb  { position:absolute; inset:0; width:100%; height:100%; }

/* ── Bus C ── */
.sel-busc-src { border-color: var(--sel-src-border) !important; color: var(--fg) !important; background: var(--sel-src-bg) !important; }
.sel-busc-dst { border-color: var(--sel-dst-border) !important; color: var(--fg) !important; background: var(--sel-dst-bg) !important; }
.bus-c-strip { background: var(--panel3); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-busc  { position:absolute; inset:0; width:100%; height:100%; }

/* ── Bus D ── */
.sel-busd-src { border-color: var(--sel-src-border) !important; color: var(--fg) !important; background: var(--sel-src-bg) !important; }
.sel-busd-dst { border-color: var(--sel-dst-border) !important; color: var(--fg) !important; background: var(--sel-dst-bg) !important; }
.sel-buse-src    { border-color: var(--bus-e-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-e-color) 30%) !important; }
.sel-buse-dst    { border-color: var(--bus-e-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-e-color) 30%) !important; }
.sel-buse-extdst { border-color: var(--bus-e-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-e-color) 30%) !important; }
.sel-busf-src    { border-color: var(--bus-f-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-f-color) 30%) !important; }
.sel-busf-dst    { border-color: var(--bus-f-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-f-color) 30%) !important; }
.bus-d-strip { background: var(--panel3); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
.bus-e-strip { background: var(--panel3); border-top: 2px solid var(--bus-e-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-buse  { position:absolute; inset:0; width:100%; height:100%; }
.bus-f-strip { background: var(--panel3); border-top: 2px solid var(--bus-f-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-busf  { position:absolute; inset:0; width:100%; height:100%; }

/* ── Inline bus on/off buttons (right side of each bus strip) ── */
.bus-inline-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  z-index: 10; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 3px; border: 1px solid;
  font-family: monospace; font-size: 9px; font-weight: bold;
  letter-spacing: 1px; line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bus-inline-btn.off { background: transparent; }
.bus-inline-btn-a.off { border-color: var(--bus-a-color); color: var(--bus-a-color); opacity: 0.45; }
.bus-inline-btn-a.on  { border-color: var(--bus-a-color); color: #fff; background: var(--bus-a-color); opacity: 1; }
.bus-inline-btn-b.off { border-color: var(--bus-b-color); color: var(--bus-b-color); opacity: 0.45; }
.bus-inline-btn-b.on  { border-color: var(--bus-b-color); color: #fff; background: var(--bus-b-color); opacity: 1; }
.bus-inline-btn-c.off { border-color: var(--bus-c-color); color: var(--bus-c-color); opacity: 0.45; }
.bus-inline-btn-c.on  { border-color: var(--bus-c-color); color: #fff; background: var(--bus-c-color); opacity: 1; }
.bus-inline-btn-d.off { border-color: var(--bus-d-color); color: var(--bus-d-color); opacity: 0.45; }
.bus-inline-btn-d.on  { border-color: var(--bus-d-color); color: #fff; background: var(--bus-d-color); opacity: 1; }
.bus-inline-btn-e.off { border-color: var(--bus-e-color); color: var(--bus-e-color); opacity: 0.45; }
.bus-inline-btn-e.on  { border-color: var(--bus-e-color); color: #fff; background: var(--bus-e-color); opacity: 1; }
.bus-inline-btn-f.off { border-color: var(--bus-f-color); color: var(--bus-f-color); opacity: 0.45; }
.bus-inline-btn-f.on  { border-color: var(--bus-f-color); color: #fff; background: var(--bus-f-color); opacity: 1; }
.bus-f-strip { background: var(--panel3); border-top: 2px solid var(--bus-f-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-busf  { position:absolute; inset:0; width:100%; height:100%; }
.bus-inline-btn-g.off { border-color: var(--bus-g-color); color: var(--bus-g-color); opacity: 0.45; }
.bus-inline-btn-g.on  { border-color: var(--bus-g-color); color: #fff; background: var(--bus-g-color); opacity: 1; }
.bus-g-strip { background: var(--panel3); border-top: 2px solid var(--bus-g-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
.bus-h-strip { background: var(--panel3); border-top: 2px solid var(--bus-net0-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
.bus-i-strip { background: var(--panel3); border-top: 2px solid var(--bus-net1-color); border-bottom: 1px solid var(--border2); position:relative; flex-shrink:0; height:16px; }
#canvas-bush { position:absolute; inset:0; width:100%; height:100%; }
#canvas-busi { position:absolute; inset:0; width:100%; height:100%; }
#canvas-busg  { position:absolute; inset:0; width:100%; height:100%; }
.btn-busg-on  { border-color: var(--bus-g-color); color: #ffffff; background: var(--bus-g-color); }
.btn-busg-off { border-color: var(--bus-g-color); color: var(--fg); background: transparent; }
.sel-busg-src { border-color: var(--bus-g-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-g-color) 30%) !important; }
.sel-busg-dst { border-color: var(--bus-g-color) !important; color: var(--fg) !important; background: color-mix(in srgb, var(--el-bg) 70%, var(--bus-g-color) 30%) !important; }
#canvas-busd  { position:absolute; inset:0; width:100%; height:100%; }

/* ── Counter displays on loop panels ── */
.ctr-strip {
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 8px; background:var(--ctr-bg); border-top:1px solid var(--border2);
  flex-shrink:0; gap:6px;
}
.ctr-label  { font-size:7px; letter-spacing:2px; color:var(--fg); text-transform:uppercase; }
.ctr-val    { font-size:9px; color:var(--fg); letter-spacing:1px; flex:1; text-align:center; }
.ctr-btn {
  font-family:'Courier New',monospace; font-size:7px; padding:2px 5px;
  background:transparent; border:1px solid; cursor:pointer; text-transform:uppercase;
  transition:all 0.1s; flex-shrink:0; letter-spacing:1px;
}
.ctr-rst-btn  { border-color:var(--fg-dim); color:var(--fg); }
.ctr-rst-btn:hover  { border-color:var(--fg); color:var(--fg); }
.ctr-eject-btn { border-color:var(--fg-dim); color:var(--fg); }
.ctr-eject-btn:hover { border-color:var(--fg); color:var(--fg); }
.ctr-destr-off { border-color:var(--fg-dim); color:var(--fg); }
.ctr-destr-off:hover { border-color:var(--fg); color:var(--fg); }
.ctr-destr-on  { border-color:var(--fg); color:var(--fg); background:#f4c8d0; }

/* Counter trigger selector panel */
.ctr-triggers-section { margin-bottom: 4px; }
.ctr-trigger-group {
  margin-bottom: 6px; padding: 5px 6px;
  border: 1px solid var(--border); background: var(--group-bg);
}
.ctr-trigger-group-title {
  font-size: 9px; letter-spacing: 2px; color: var(--group-title);
  margin-bottom: 4px; text-transform: uppercase;
}
.ctr-trigger-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.ctr-trig-btn {
  padding: 2px 5px; font-family: inherit; font-size: 8px; letter-spacing: 1px;
  cursor: pointer; border: 1px solid var(--border); background: var(--dim);
  color: var(--fg-dim); user-select: none; transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-transform: uppercase;
}
.ctr-trig-btn:hover { border-color: var(--fg); color: var(--fg); background: var(--btn-hover); }
.ctr-trig-btn.active { background: var(--pm-on-bg); border-color: var(--fg); color: var(--fg); }

/* Global counter in sidebar */
.global-ctr-section { display:flex; flex-direction:column; gap:5px; }
.global-ctr-val { font-size:10px; color:var(--fg); letter-spacing:1px; }

/* ── Logger controls ── */
.log-ctrl-btn {
  flex: 1; font-family: var(--font); font-size: 8px;
  letter-spacing: 1px; padding: 4px 0; background: var(--el-bg);
  border: 1px solid #507888; color: var(--fg);
  cursor: pointer; text-transform: uppercase; transition: all 0.15s;
}
.log-ctrl-btn:hover:not([disabled]) { border-color: var(--fg); color: var(--fg); background: var(--wb-bg); }
.log-ctrl-btn.logging { border-color: var(--fg); color: var(--fg); background: #f4d0b8;
  animation: logpulse 1.2s infinite; }
@keyframes logpulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.log-dl-btn { border-color: var(--fg) !important; color: var(--fg) !important; }
.log-dl-btn:not([disabled]) { border-color: var(--fg) !important; color: var(--fg) !important; }
.log-dl-btn:not([disabled]):hover { background: var(--wb-bg) !important; }
.log-status-line {
  font-size: 8px; color: var(--fg); letter-spacing: 1px;
}

.handle-group {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding-right: 16px; border-right: 1px solid var(--border2);
}
.handle-label {
  font-size: 9px; letter-spacing: 3px; color: var(--fg); text-transform: uppercase;
}
.handle-input {
  font-family: var(--font);
  font-size: 13px; font-weight: bold; letter-spacing: 2px;
  background: var(--dim); border: 1px solid var(--border);
  color: var(--fg); padding: 3px 7px; width: 160px;
  text-transform: none !important; outline: none;
  transition: border-color 0.1s;
}
.handle-input:focus { border-color: var(--fg); }
.handle-input::placeholder { color: var(--placeholder-c); font-weight: normal; letter-spacing: 1px; }

/* ── Skin Selector ── */
.skin-group {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding-right: 16px; border-right: 1px solid var(--border2);
}
.skin-label {
  font-size: 9px; letter-spacing: 3px; color: var(--fg); text-transform: uppercase;
}
.skin-select {
  font-family: var(--font); font-size: 10px; letter-spacing: 2px;
  padding: 4px 28px 4px 8px;
  background: var(--dim); border: 1px solid var(--border2); color: var(--fg);
  cursor: pointer; text-transform: uppercase; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 90px;
}
.skin-select:hover { border-color: var(--fg-border); background-color: var(--btn-hover); }
.skin-select option { background: var(--panel); color: var(--fg); letter-spacing: 0; }

/* ── Sidebar section color-coding ── */
:root {
  --sec-global: #e8eef8;         /* timing / heartbeat — blue wash */
  --sec-ctr:    #e8eef8;
  --sec-chall:  #f8e6f0;         /* game mode — magenta wash */
  --sec-alu:    #f5ede0;         /* compute — amber wash */
  --sec-busa:   var(--bus-a-bg);
  --sec-busb:   var(--bus-b-bg);
  --sec-busc:   var(--bus-c-bg);
  --sec-busd:   var(--bus-d-bg);
  --sec-buse:   #f8e6e8;         /* challenge bus — crimson wash */
  --sec-busf:   #e4ecf8;         /* P2P left — blue wash */
  --sec-busg:   #ede6f8;         /* P2P right — violet wash */
  --sec-bush:   #f8f0e0;         /* net bus H — amber wash */
  --sec-busi:   #e8f5e0;         /* net bus I — lime wash */
  --sec-pm:     #e0f0ee;         /* pattern matching — teal wash */
  --sec-tg:     #ede8f8;         /* conditional gating — violet wash */
  --sec-mem:    #e6f5ec;         /* storage — green wash */
  --sec-net:    #eaeef8;         /* communications — indigo wash */
  --sec-buses-group:     #e6ebf4;  /* buses well */
  --sec-filters-group:   #ece8f5;  /* filters well — lavender between teal & violet */
  --sec-chain-net-group: #e8ecf6;  /* chain & net well — indigo wash */
  --sec-scripts-group:   #eef0f4;  /* scripts well — neutral cool */
  --c-skins:       #4080a0;        /* skins accent — steel blue */
  --sec-skins:     #e6eff4;        /* skins section — steel wash */
  --sec-cbx-local: #f8e6f0;        /* cbx local — magenta wash */
  --sec-cbx-net:   #e8edf8;        /* cbx networked — indigo wash */
  --sec-log:    var(--panel3);
}
.sb-sec-global { background: var(--sec-global); border-left: 3px solid var(--c-working)      !important; }
.sb-sec-ctr    { background: var(--sec-ctr);    border-left: 3px solid var(--c-working)      !important; }
.sb-sec-chall  { background: var(--sec-chall);  border-left: 3px solid var(--c-chall)        !important; }
.sb-sec-files  { background: var(--sec-mem);    border-left: 3px solid var(--c-memory)       !important; }
.sb-sec-netmon { background: var(--sec-net);    border-left: 3px solid var(--c-net)          !important; }
.sb-sec-net    { background: var(--sec-net);    border-left: 3px solid var(--c-net)          !important; }
.sb-sec-chat   { background: var(--sec-net);    border-left: 3px solid var(--c-net)          !important; }
.sb-sec-skins     { background: var(--sec-skins);     border-left: 3px solid var(--c-skins)   !important; }
.sb-sec-cbx-local { background: var(--sec-cbx-local); border-left: 3px solid var(--c-chall)   !important; }
.sb-sec-cbx-net   { background: var(--sec-cbx-net);   border-left: 3px solid var(--c-net)     !important; }
.netmon-entry {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 2px 4px; margin-bottom: 1px; cursor: pointer;
  border: 1px solid transparent; font-family: var(--font);
  font-size: 7px; letter-spacing: 1px; line-height: 1.5;
}
.netmon-entry:hover { border-color: var(--c-net); background: var(--el-bg); }
.netmon-entry.selected { border-color: var(--c-net); background: var(--el-bg); }
.netmon-dir-in  { color: #88ccff; flex-shrink: 0; width: 10px; }
.netmon-dir-out { color: #ffaa44; flex-shrink: 0; width: 10px; }
.netmon-type    { color: var(--c-net); flex-shrink: 0; min-width: 80px; }
.netmon-summary { color: var(--fg-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netmon-time    { color: var(--fg-faint); flex-shrink: 0; }
.netmon-field-row { display: flex; gap: 8px; margin-bottom: 2px; }
.netmon-field-key   { color: var(--fg-dim); min-width: 80px; flex-shrink: 0; }
.netmon-field-value { color: var(--fg); flex: 1; }
.netmon-field-input {
  font-family: var(--font); font-size: 8px; background: var(--el-bg);
  border: 1px solid var(--border3); color: var(--fg); padding: 1px 4px;
  letter-spacing: 1px; width: 80px;
}
.file-entry {
  display: flex; align-items: center; gap: 4px; margin-bottom: 3px;
  padding: 3px 5px; background: var(--el-bg); border: 1px solid var(--border3);
  cursor: pointer;
}
.file-entry:hover { border-color: var(--c-memory); }
.file-entry.selected { border-color: var(--c-memory); background: var(--el-bg-hi, var(--el-bg)); }
.file-entry-name {
  font-size: 8px; letter-spacing: 1px; color: var(--fg); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-entry-del {
  font-size: 7px; padding: 1px 4px; background: none; border: 1px solid var(--border3);
  color: var(--fg-dim); cursor: pointer; font-family: var(--font); letter-spacing: 1px;
  flex-shrink: 0;
}
.file-entry-del:hover { border-color: #ee4444; color: #ee4444; }
.file-entry-del.confirm-del { border-color: #ee4444; color: #ee4444; background: rgba(238,68,68,0.1); }
.sb-sec-alu    { background: var(--sec-alu);   border-left: 3px solid var(--c-alu)           !important; }
.sb-sec-busa   { background: var(--sec-busa);  border-left: 3px solid var(--bus-a-color)     !important; }
.sb-sec-busb   { background: var(--sec-busb);  border-left: 3px solid var(--bus-b-color)     !important; }
.sb-sec-busc   { background: var(--sec-busc);  border-left: 3px solid var(--bus-c-color)     !important; }
.sb-sec-busd   { background: var(--sec-busd);  border-left: 3px solid var(--bus-d-color)     !important; }
.sb-sec-buse   { background: var(--sec-buse);  border-left: 3px solid var(--bus-e-color)     !important; }
.sb-sec-busf   { background: var(--sec-busf);  border-left: 3px solid var(--bus-f-color)     !important; }
.sb-sec-busg   { background: var(--sec-busg);  border-left: 3px solid var(--bus-g-color)     !important; }
.sb-sec-bush   { background: var(--sec-bush);  border-left: 3px solid var(--bus-net0-color)  !important; }
.sb-sec-busi   { background: var(--sec-busi);  border-left: 3px solid var(--bus-net1-color)  !important; }
.sb-sec-pm     { background: var(--sec-pm);    border-left: 3px solid var(--c-big)           !important; }
.sb-sec-pm2    { background: var(--sec-pm);    border-left: 3px solid var(--c-big)           !important; }
.sb-sec-tg     { background: var(--sec-tg);    border-left: 3px solid var(--c-tg)            !important; }
.sb-sec-mem    { background: var(--sec-mem);   border-left: 3px solid var(--c-memory)        !important; }
.sb-sec-log    { background: var(--sec-log); }

/* ── Annotation System ── */
.anno-header {
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.anno-title {
  font-family: var(--font);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
}
.anno-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #557090; display: inline-block; margin: 0 3px 0 0;
}
.anno-status {
  font-family: var(--font); font-size: 7px;
  color: var(--fg-dim); display: flex; align-items: center;
}
.anno-control-btn {
  background: transparent; border: none; color: var(--fg-dim);
  cursor: pointer; font-size: 10px; padding: 0 3px;
}
.anno-control-btn:hover { color: var(--c-working); }
.anno-body {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; padding: 6px; gap: 6px;
}
.sb-section.sb-collapsed .anno-body { display: none; }
.anno-checkbox-row { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.anno-checkbox { width: 12px; height: 12px; cursor: pointer; accent-color: var(--c-working); }
.anno-checkbox-label {
  font-family: var(--font); font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg); cursor: pointer; user-select: none;
}
.anno-textarea {
  background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); font-family: var(--font); font-size: 9px;
  padding: 4px; resize: none; height: 50px; line-height: 1.3; flex-shrink: 0;
}
.anno-textarea:focus { outline: none; border-color: var(--c-working); }
.palette-section { flex-shrink: 0; }
.palette-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.palette-label {
  font-family: var(--font); font-size: 7px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--fg-dim); font-weight: bold;
}
.palette-clear-btn {
  font-family: var(--font); font-size: 6px; text-transform: uppercase;
  letter-spacing: 0.3px; background: transparent; border: none;
  color: var(--fg-dim); cursor: pointer; padding: 0;
}
.palette-clear-btn:hover { color: var(--c-working); }
.palette-drop-zone {
  background: var(--el-bg); border: 1px dashed var(--border2);
  min-height: 32px; padding: 3px; display: flex; flex-wrap: wrap;
  gap: 2px; align-content: flex-start; transition: border-color 0.1s, background 0.1s;
}
.palette-drop-zone.drag-over { border-color: var(--c-working); background: var(--panel2); }
.palette-drop-zone.empty::after {
  content: 'drag symbols here'; font-family: var(--font); font-size: 7px;
  color: var(--border2); padding: 4px 2px; letter-spacing: 0.3px; align-self: center;
}
.palette-item {
  position: relative; background: var(--panel); border: 1px solid var(--c-working);
  color: var(--fg); cursor: pointer; font-family: var(--font); font-size: 9px;
  padding: 4px 2px; text-align: center; min-width: 32px;
  line-height: 1.2; transition: all 0.1s;
}
.palette-item:hover { background: var(--panel2); color: var(--c-working); }
.palette-item:active { transform: scale(0.93); }
.palette-item small {
  display: block; font-size: 6px; letter-spacing: 0.2px; color: var(--fg-dim);
  margin-top: 1px; text-transform: uppercase; pointer-events: none;
}
.palette-remove {
  display: none; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; background: var(--border); border: 1px solid var(--border2);
  border-radius: 50%; font-size: 7px; line-height: 8px; text-align: center;
  color: var(--fg); cursor: pointer; z-index: 10; font-family: var(--font);
}
.palette-item:hover .palette-remove { display: block; }
.palette-remove:hover { background: #cc3333; border-color: #cc3333; color: #fff; }
.anno-buttons {
  display: flex; gap: 3px; flex-shrink: 0; width: 50%; align-self: flex-end;
}
.anno-btn {
  flex: 1; padding: 4px 6px; background: var(--el-bg); border: 1px solid var(--border2);
  color: var(--fg); cursor: pointer; font-family: var(--font); font-size: 8px;
  font-weight: bold; letter-spacing: 0.3px; text-transform: uppercase;
}
.anno-btn:hover { background: var(--panel2); border-color: var(--c-working); color: var(--c-working); }
.anno-btn.primary { background: var(--c-working); border-color: var(--c-working); color: #ffffff; }
.anno-btn.primary:hover { opacity: 0.85; }
.library-section {
  flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.library-header {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.library-label {
  font-family: var(--font); font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--fg); font-weight: bold; white-space: nowrap;
}
.library-header::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
.library-toggle {
  background: none; border: none; color: var(--fg); cursor: pointer;
  font-size: 9px; padding: 0; line-height: 1; opacity: 0.6; flex-shrink: 0;
  transition: opacity 0.15s, transform 0.2s;
}
.library-toggle:hover { opacity: 1; }
.library-collapsed .library-toggle { transform: rotate(-90deg); }
.library-body { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.library-body.collapsed { display: none; }
#library-collapsible.collapsed { display: none; }
.anno-tabs {
  display: flex; gap: 2px; flex-shrink: 0; border-bottom: 1px solid var(--border);
  background: var(--el-bg); padding: 2px;
}
.tab-btn {
  flex: 1; background: var(--panel); border: 1px solid var(--border2); color: var(--fg-dim);
  cursor: pointer; font-family: var(--font); font-size: 7px; padding: 3px 2px;
  text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.1s;
}
.tab-btn.active { background: var(--panel2); border-color: var(--c-working); color: var(--c-working); font-weight: bold; }
.tab-btn:hover { border-color: var(--c-working); }
.anno-symbol-panel { display: none; padding: 4px; gap: 3px; grid-template-columns: repeat(4, 1fr); align-content: start; overflow-y: auto; }
.anno-symbol-panel.active { display: grid; }
.symbol-btn {
  background: var(--panel); border: 1px solid var(--border2); color: var(--fg);
  cursor: grab; font-family: var(--font); font-size: 9px; padding: 4px 2px;
  text-align: center; transition: all 0.1s; line-height: 1.2; user-select: none;
}
.symbol-btn:hover { background: var(--panel2); border-color: var(--c-working); color: var(--c-working); }
.symbol-btn:active { transform: scale(0.93); cursor: grabbing; }
.symbol-btn.dragging { opacity: 0.4; }
.symbol-btn small {
  display: block; font-size: 6px; letter-spacing: 0.2px; color: var(--fg-dim);
  margin-top: 1px; text-transform: uppercase; pointer-events: none;
}
.anno-context {
  background: var(--el-bg); border: 1px solid var(--border2); padding: 4px 6px;
  font-family: var(--font); font-size: 8px; color: var(--fg-dim); line-height: 1.4; flex-shrink: 0;
}
.anno-context-row { display: flex; justify-content: space-between; }
.anno-context-label { font-weight: bold; }
.anno-context-value { color: var(--c-working); font-weight: bold; }
.file-status-row { flex-shrink: 0; }
.file-status-name {
  font-family: var(--font); font-size: 7px; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.file-status-name.open { color: var(--c-working); }
.file-status-name.error { color: #cc4444; }
.anno-recent { border-top: 1px solid var(--border); padding: 4px; overflow-y: auto; min-height: 0; }
.anno-recent-title {
  font-family: var(--font); font-size: 7px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 4px; font-weight: bold;
}
.anno-recent-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.anno-recent-item {
  background: var(--el-bg); border: 1px solid var(--border2); padding: 3px 4px;
  cursor: pointer; transition: all 0.1s; font-family: var(--font);
  font-size: 7px; line-height: 1.3;
}
.anno-recent-item:hover { background: var(--panel2); border-color: var(--c-working); }
.anno-recent-tick { color: var(--c-working); font-weight: bold; margin-right: 3px; }
.anno-recent-text { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Scanline overlay ── */
body::after {
  content: ''; position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
    var(--scanline-a) 3px, var(--scanline-a) 4px);
  pointer-events: none; z-index: 9999;
}

/* ════════════════════════════════════════════════════════════════
   SKIN: WINAMP  —  Mid-90s chunky bevel aesthetic
   Win95/98 raised buttons, sunken inputs, hard corners,
   compressed monospace, lime-on-charcoal palette.
   Bevel: light top-left highlight, dark bottom-right shadow.
   ════════════════════════════════════════════════════════════════ */
:root {
  --bv-hi:  rgba(100,170,100,0.60);
  --bv-lo:  rgba(0,0,0,0.80);
  --bv-in:  rgba(0,0,0,0.65);
  --bv-ini: rgba(70,130,70,0.40);
}

/* ── Hard corners everywhere ── */
.skin-winamp .btn,
.skin-winamp .lbtn,
.skin-winamp .alu-op,
.skin-winamp .alu-route-btn,
.skin-winamp .alu-opsrc-btn,
.skin-winamp .alu-wb-btn,
.skin-winamp .alu-clr-btn,
.skin-winamp .cmp-wb-btn,
.skin-winamp .mem-mode-btn,
.skin-winamp .mem-destr-btn,
.skin-winamp .mem-slot-wb,
.skin-winamp .mem-slot-clr,
.skin-winamp .ctr-btn,
.skin-winamp .ctr-trig-btn,
.skin-winamp .op-count-btn,
.skin-winamp .op-count-input,
.skin-winamp .gate-btn,
.skin-winamp .pause-btn,
.skin-winamp .step-btn,
.skin-winamp .reset-tick-btn,
.skin-winamp .handle-input,
.skin-winamp .log-ctrl-btn,
.skin-winamp .pm-toggle-btn,
.skin-winamp .pm-flag,
.skin-winamp .cmp-block,
.skin-winamp .cmp-flag,
.skin-winamp .alu-flag,
.skin-winamp .alu-answer-block,
.skin-winamp .ctr-trigger-group,
.skin-winamp .mem-slot,
.skin-winamp .word-detail,
.skin-winamp .lever-slot,
.skin-winamp .mem-addr-slot,
.skin-winamp .lever-arm,
.skin-winamp .mem-addr-arm,
.skin-winamp .alu-cap-slot,
.skin-winamp .mem-cap-slot,
.skin-winamp .alu-bit { border-radius: 0 !important; }

/* Round bits stay round — they're LEDs */
.skin-winamp .bit { border-radius: 1px !important; }
.skin-winamp .bit.mk { border-radius: 0 !important; }
.skin-winamp .led { border-radius: 50% !important; }
.skin-winamp .lever-pip,
.skin-winamp .mem-addr-pip { border-radius: 2px !important; }
.skin-winamp .pm-lever-pip { border-radius: 2px !important; }

/* ── Raised button bevel ── */
.skin-winamp .btn,
.skin-winamp .lbtn,
.skin-winamp .alu-op,
.skin-winamp .alu-route-btn,
.skin-winamp .alu-opsrc-btn,
.skin-winamp .mem-mode-btn,
.skin-winamp .ctr-trig-btn,
.skin-winamp .op-count-btn,
.skin-winamp .pm-toggle-btn,
.skin-winamp .log-ctrl-btn,
.skin-winamp .mem-slot-wb,
.skin-winamp .mem-slot-clr,
.skin-winamp .alu-wb-btn,
.skin-winamp .alu-clr-btn,
.skin-winamp .cmp-wb-btn,
.skin-winamp .mem-destr-btn,
.skin-winamp .ctr-btn,
.skin-winamp .gate-btn,
.skin-winamp .pause-btn,
.skin-winamp .step-btn,
.skin-winamp .reset-tick-btn {
  border: 2px solid rgba(0,0,0,0.6) !important;
  box-shadow:
    inset  1px  1px 0 var(--bv-hi),
    inset -1px -1px 0 var(--bv-lo) !important;
  transition: box-shadow 0.04s, background 0.04s, transform 0.04s !important;
}
.skin-winamp .btn:active,
.skin-winamp .lbtn:active,
.skin-winamp .alu-op:active,
.skin-winamp .ctr-trig-btn:active,
.skin-winamp .gate-btn:active,
.skin-winamp .step-btn:active,
.skin-winamp .reset-tick-btn:active {
  box-shadow:
    inset  1px  1px 0 var(--bv-lo),
    inset -1px -1px 0 var(--bv-hi) !important;
  transform: translateY(1px) !important;
}

/* ── Active/selected states: depressed ── */
.skin-winamp .alu-op.sel-op,
.skin-winamp .ctr-trig-btn.active,
.skin-winamp .pm-toggle-btn.pm-on,
.skin-winamp .lbtn.sel-src,
.skin-winamp .lbtn.sel-dst,
.skin-winamp .alu-route-btn.active,
.skin-winamp .opa-sel-btn.active,
.skin-winamp .opb-sel-btn.active {
  box-shadow:
    inset  1px  1px 0 var(--bv-lo),
    inset -1px -1px 0 var(--bv-hi) !important;
}

/* ── Sunken inputs ── */
.skin-winamp .op-count-input,
.skin-winamp .handle-input,
.skin-winamp .word-detail,
.skin-winamp .mem-autoinc-input {
  border: 2px solid rgba(0,0,0,0.5) !important;
  box-shadow:
    inset  1px  1px 0 var(--bv-in),
    inset -1px -1px 0 var(--bv-ini) !important;
}

/* ── Panels: inset panel effect ── */
.skin-winamp .alu-answer-block,
.skin-winamp .cmp-block,
.skin-winamp .ctr-trigger-group {
  border: 2px solid rgba(0,0,0,0.5) !important;
  box-shadow:
    inset 1px 1px 0 var(--bv-in),
    inset -1px -1px 0 var(--bv-ini) !important;
}

/* ── Typography: glowing lime title, chunky control bar ── */
.skin-winamp .logo-name {
  font-size: 16px;
  letter-spacing: 7px;
  text-shadow: 0 0 10px #00ff4488, 0 0 20px #00aa2244;
}
.skin-winamp .logo-sub {
  font-size: 8px;
  letter-spacing: 4px;
  text-shadow: 0 0 5px #00dd3344;
}
.skin-winamp .tick-value {
  font-size: 22px;
  letter-spacing: 8px;
  text-shadow: 0 0 10px #00ff4466;
  font-family: 'Courier New', monospace;
}
.skin-winamp .loop-name { letter-spacing: 1px; }
.skin-winamp .btn { font-size: 10px; letter-spacing: 1px; padding: 5px 11px; }

/* ── Structural chrome ── */
.skin-winamp .header {
  background: linear-gradient(180deg, #283428 0%, #1a231a 55%, #141414 100%);
  border-bottom: 3px solid #050505;
  box-shadow: 0 2px 0 #1a401a, 0 3px 0 #000000;
  padding: 8px 16px;
}
.skin-winamp .controls {
  background: linear-gradient(180deg, #222822 0%, #1a1a1a 100%);
  border-bottom: 3px solid #050505;
  box-shadow: inset 0 1px 0 #2a3a2a, 0 2px 0 #000000;
}
.skin-winamp .bus-strip,
.skin-winamp .bus-b-strip,
.skin-winamp .bus-c-strip,
.skin-winamp .bus-d-strip,
.skin-winamp .bus-e-strip {
  background: linear-gradient(180deg, #0e0e0e 0%, #181818 50%, #111 100%) !important;
  border-top: 2px solid #050505 !important;
  border-bottom: 2px solid #1a3020 !important;
  box-shadow: inset 0 1px 0 #001808 !important;
}
.skin-winamp .inject-row {
  background: #141414 !important;
  border-bottom: 2px solid #050505 !important;
  box-shadow: inset 0 1px 0 #1a301a !important;
}
.skin-winamp .sidebar {
  border-left: 3px solid #050505 !important;
  box-shadow: inset 2px 0 0 #1a3020 !important;
}
.skin-winamp .ctr-strip {
  border-top: 2px solid #000 !important;
  box-shadow: inset 0 1px 0 #001808 !important;
}
.skin-winamp .divider {
  width: 3px;
  background: #000;
  box-shadow: 1px 0 0 #1e3020;
}
.skin-winamp .sb-title::after {
  height: 2px;
  background: linear-gradient(90deg, #005020, transparent);
}
.skin-winamp .skin-group {
  border-right: 2px solid rgba(0,0,0,0.5);
  box-shadow: 1px 0 0 #1e3020;
}
.skin-winamp .skin-select {
  border: 2px solid rgba(0,0,0,0.6) !important;
  box-shadow: inset 1px 1px 0 var(--bv-in), inset -1px -1px 0 var(--bv-ini) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2333ff44'/%3E%3C/svg%3E");
}
/* Section accent stripes — left border in bus/component color */

.skin-winamp .sb-sec-alu   { border-left: 3px solid #ffaa00 !important; }
.skin-winamp .sb-sec-pm    { border-left: 3px solid #00ddcc !important; }
.skin-winamp .sb-sec-tg    { border-left: 3px solid #aa66ff !important; }
.skin-winamp .sb-sec-mem   { border-left: 3px solid #33ff44 !important; }
.skin-winamp .sb-sec-global,
.skin-winamp .sb-sec-ctr,
.skin-winamp .sb-sec-wscr  { border-left: 3px solid #44aaff !important; }
.skin-winamp .sb-sec-chall { border-left: 3px solid #ff44aa !important; }
.skin-winamp .sb-sec-net,
.skin-winamp .sb-sec-netmon,
.skin-winamp .sb-sec-chat  { border-left: 3px solid #6688ee !important; }

/* ── Winamp contrast fixes (B2) ── */
/* Challenge start button: red on dark needs higher contrast */
.skin-winamp .chall-start-btn { color: #ff6677 !important; border-color: #ff6677 !important; }
.skin-winamp .chall-start-btn:hover { background: #ff3355 !important; color: #fff !important; }
.skin-winamp .chall-start-btn.active { background: #ff3355 !important; color: #fff !important; }
.skin-winamp .chall-abort-btn { color: #ff8888 !important; border-color: #ff6666 !important; }
.skin-winamp .chall-abort-btn:hover { background: #cc4040 !important; color: #fff !important; }
/* Memory buttons (destructive/auto-inc/batch): ensure readable text on dark bg */
.skin-winamp .destr-off { background: #0c2818 !important; border-color: #33aa55 !important; color: #33ff44 !important; }
.skin-winamp .destr-off:hover { background: #143820 !important; }
.skin-winamp .destr-on  { background: #2a0810 !important; border-color: #ff6666 !important; color: #ff8888 !important; }
.skin-winamp .destr-on:hover  { background: #3a1018 !important; }
/* Dim text in Winamp needs to be brighter for readability */
.skin-winamp .handle-input { color: #33ff44 !important; }
.skin-winamp .handle-input::placeholder { color: #44885a !important; }


/* ── Challenges ── */
.chall-panel { display:flex; flex-direction:column; gap:6px; }
.chall-title-row { display:flex; align-items:center; justify-content:space-between; }
.chall-select-group { display:flex; flex-direction:column; gap:4px; }
.chall-select-label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fg); }
.chall-select { font-family:var(--font); font-size:9px; background:var(--el-bg);
  border:1px solid var(--border3); color:var(--fg); padding:3px 5px;
  letter-spacing:1px; width:100%; cursor:pointer; }
.chall-select:focus { outline:none; border-color:var(--fg); }
.chall-param-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.chall-param-label { font-size:8px; color:var(--fg); letter-spacing:1px; flex-shrink:0; }
.chall-param-select { font-family:var(--font); font-size:9px; background:var(--el-bg);
  border:1px solid var(--border3); color:var(--fg); padding:2px 4px;
  letter-spacing:1px; cursor:pointer; }
.chall-start-btn { width:100%; font-family:var(--font); font-size:9px; letter-spacing:2px;
  padding:5px 0; cursor:pointer; text-transform:uppercase; border:1px solid var(--bus-e-color);
  color:var(--bus-e-color); background:transparent; transition:all 0.15s; }
.chall-start-btn:hover { background:var(--bus-e-color); color:#fff; }
.chall-start-btn.active { background:var(--bus-e-color); color:#fff; letter-spacing:2px; }
.chall-abort-btn { width:100%; font-family:var(--font); font-size:8px; letter-spacing:2px;
  padding:3px 0; cursor:pointer; text-transform:uppercase; border:1px solid #cc4040;
  color:#cc4040; background:transparent; margin-top:2px; }
.chall-abort-btn:hover { background:#cc4040; color:#fff; }
.chall-mode-btn { font-family:var(--font); font-size:8px; letter-spacing:1px;
  padding:3px 8px; cursor:pointer; text-transform:uppercase;
  border:1px solid var(--border3); color:var(--fg); background:transparent;
  transition:all 0.15s; }
.chall-mode-btn:first-of-type { border-right:none; }
.chall-mode-btn:hover { border-color:var(--bus-e-color); color:var(--bus-e-color); }
.chall-mode-active { background:var(--bus-e-color); color:#fff; border-color:var(--bus-e-color); }

/* ── Chain challenge progress cells ── */
.chain-cell {
  width:14px; height:14px; border:1px solid var(--border3);
  font-family:var(--font); font-size:8px; display:flex;
  align-items:center; justify-content:center;
  transition: background 0.2s, border-color 0.2s;
}
.chain-cell.origin   { border-color:var(--bus-e-color); color:var(--bus-e-color); }
.chain-cell.pending  { background:var(--el-bg); color:var(--fg-dim); }
.chain-cell.verified { background:#44cc88; border-color:#44cc88; color:#fff; }
.chain-cell.failed   { background:#ee4444; border-color:#ee4444; color:#fff; }

/* ── CBX participating machine state display ── */
.cbx-role-display {
  background:var(--el-bg); border:1px solid var(--bus-h-color,#8080e0);
  padding:6px 8px; margin-bottom:6px; font-family:var(--font); font-size:9px;
  letter-spacing:1px; line-height:1.8;
}
.cbx-role-phase {
  font-size:10px; font-weight:bold; margin-bottom:4px;
  letter-spacing:2px; text-transform:uppercase;
}
.cbx-release-btn {
  width:100%; font-family:var(--font); font-size:9px; letter-spacing:2px;
  padding:5px 0; cursor:pointer; text-transform:uppercase;
  border:2px solid var(--bus-h-color,#8080e0);
  color:var(--bus-h-color,#8080e0); background:transparent;
  transition:all 0.15s; margin-top:4px;
}
.cbx-release-btn:hover:not([disabled]) { background:var(--bus-h-color,#8080e0); color:#fff; }
.cbx-release-btn.ready { border-color:#44cc88; color:#44cc88; }
.cbx-release-btn.ready:hover { background:#44cc88; color:#fff; }
.cbx-release-btn.locked { border-color:#ee4444; color:#ee4444; opacity:0.7; cursor:not-allowed; }
.cbx-release-btn[disabled] { opacity:0.4; cursor:not-allowed; }
.chall-status { font-size:9px; letter-spacing:1px; color:var(--fg);
  padding:4px 6px; background:var(--el-bg); border:1px solid var(--border2);
  border-left:3px solid var(--bus-e-color); min-height:24px; }
.chall-status.ok  { border-left-color:#44cc88; color:#44cc88; }
.chall-status.err { border-left-color:#ee4444; color:#ee4444; }
.chall-status.wait { border-left-color:#ffaa22; color:#ffaa22; }
.chall-stats { font-size:8px; letter-spacing:1px; color:var(--fg);
  display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.chall-stat-label { color:var(--fg); opacity:0.7; }
.chall-stat-val   { color:var(--fg); font-weight:bold; text-align:right; }
.chall-desc { font-size:8px; color:var(--fg); opacity:0.75; line-height:1.4; 
  padding:3px 0; border-top:1px solid var(--border2); margin-top:2px; }
.chall-spoiler-btn {
  font-family:var(--font); font-size:7px; letter-spacing:1px; padding:2px 6px;
  background:transparent; border:1px solid var(--border3); color:var(--fg-dim);
  cursor:pointer; text-transform:uppercase; margin-top:3px; width:100%;
  text-align:left; transition:color 0.1s, border-color 0.1s;
}
.chall-spoiler-btn:hover { color:var(--fg); border-color:var(--fg); }
.chall-spoiler-values {
  font-size:8px; letter-spacing:0; color:var(--fg-dim); line-height:1.6;
  padding:4px 6px; background:var(--el-bg); border:1px solid var(--border2);
  margin-top:2px; word-break:break-all;
}
.chall-history { font-size:7px; letter-spacing:0; color:var(--fg); opacity:0.65;
  max-height:48px; overflow-y:auto; line-height:1.5; border-top:1px solid var(--border2);
  padding-top:3px; margin-top:2px; }


/* ── ◈ ── */
#_ee0 {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%) translateY(100%);
  pointer-events: none; /* set to auto when visible */
  z-index: 100;
  transition: left 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
}
#_ee0.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0%);
  pointer-events: auto;
  cursor: pointer;
}
#_ee0.hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(100%);
}


/* ── Working Scratch Registers ── */
.sb-sec-wscr { background: var(--sec-working, var(--sec-global)); border-left: 3px solid var(--c-working) !important; }
.wscr-slot {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 0; border-bottom: 1px solid var(--border2);
}
.wscr-slot:last-child { border-bottom: none; }
.wscr-slot-lbl {
  font-size: 8px; letter-spacing: 1px; color: var(--fg); min-width: 16px; text-align: center;
}
.wscr-slot-bits { display: flex; gap: 1px; flex-shrink: 0; }
.wscr-slot-bit {
  width: 5px; height: 5px; background: var(--dot-off); border: 1px solid var(--border3);
  flex-shrink: 0; box-sizing: border-box;
}
.wscr-slot-bit.mk { border-radius: 1px; }
.wscr-slot-bit.lit { background: var(--c-working, #9966cc); border-color: var(--fg); box-shadow: 0 0 3px var(--c-working, #9966cc); }
.wscr-slot-val {
  font-size: 8px; letter-spacing: 0; color: var(--fg); min-width: 36px;
  text-align: left; flex: 1; overflow: hidden; white-space: nowrap;
}
.wscr-slot-wb {
  font-family: var(--font); font-size: 7px; letter-spacing: 1px;
  padding: 1px 4px; background: transparent;
  border: 1px solid var(--border3); color: var(--fg); cursor: pointer;
}
.wscr-slot-wb:hover { border-color: var(--fg); background: var(--btn-hover); }
.wscr-slot-clr {
  font-family: var(--font); font-size: 7px; letter-spacing: 1px;
  padding: 1px 4px; background: transparent;
  border: 1px solid var(--border3); color: var(--fg); cursor: pointer;
}
.wscr-slot-clr:hover { border-color: var(--fg); background: #f4c8d0; }
.wscr-mode-btn {
  font-family: var(--font); font-size: 8px; letter-spacing: 1px;
  padding: 3px 6px; background: transparent; width: 100%; margin-bottom: 5px;
  border: 1px solid var(--border3); color: var(--fg); cursor: pointer; text-transform: uppercase;
}
.wscr-mode-btn:hover { border-color: var(--fg); background: var(--btn-hover); }
.wscr-mode-btn.active { background: #f4d0b8; border-color: var(--fg); color: var(--fg); }


/* ── Winamp: fix illegible light-background buttons ── */
.skin-winamp .btn-run {
  background: #1a3a20 !important; color: #33ff44 !important;
  border-color: #33ff44 !important;
  text-shadow: 0 0 6px #33ff4466;
}
.skin-winamp .btn-pause {
  background: #3a1a1a !important; color: #ff4444 !important;
  border-color: #ff4444 !important;
}
.skin-winamp .btn-load {
  background: #1a2a38 !important; color: #44aaff !important;
  border-color: #44aaff !important;
}
.skin-winamp .btn-eject {
  background: #38201a !important; color: #ff8844 !important;
  border-color: #ff8844 !important;
}
.skin-winamp .loop-running {
  background: #1a3020 !important; color: #33ff44 !important;
  border-color: #33ff44 !important;
}
.skin-winamp .loop-paused {
  background: #3a1818 !important; color: #ff4444 !important;
  border-color: #ff4444 !important;
}
.skin-winamp .loop-paused:hover { background: #4a2020 !important; }
.skin-winamp .gate-open {
  background: #1a3020 !important; color: #33ff44 !important;
  border-color: #33ff44 !important;
}
.skin-winamp .gate-closed {
  background: #3a1818 !important; color: #ff6644 !important;
  border-color: #ff6644 !important;
}
.skin-winamp .btn-run:hover     { background: #224828 !important; }
.skin-winamp .btn-load:hover    { background: #1e3244 !important; }
.skin-winamp .btn-eject:hover   { background: #442820 !important; }
.skin-winamp .loop-running:hover { background: #223828 !important; }
.skin-winamp .gate-open:hover   { background: #223828 !important; }
.skin-winamp .gate-closed:hover { background: #442020 !important; }
/* ── Utility classes (extracted from repeated inline styles) ── */
.lbtn-dim  { color: var(--fg); border-color: var(--border2); }
.lbtn-ext  { color: var(--bus-e-color); border-color: var(--bus-e-color); }
.lbtn-mem  { color: var(--c-memory); border-color: var(--c-memory); }
.lbtn-busf { color: var(--bus-f-color); border-color: var(--bus-f-color); }
.lsel-wrap { flex-wrap: wrap; gap: 3px; }
.sb-action-half { flex: 1; font-size: 8px; }
.sb-action-sm   { flex: 1; font-size: 7px; }

/* ── Sidebar utility classes (extracted from inline styles) ── */
.sb-input { flex:1; font-size:8px; }
.sb-row { display:flex; gap:4px; }
.sb-row-mb { display:flex; gap:4px; margin-bottom:6px; }
.sb-status { font-size:8px; color:var(--fg-dim); letter-spacing:1px; min-height:14px; line-height:1.4; }
.sb-error { display:none; margin-bottom:6px; border:1px solid #ee4444; padding:6px 7px; }
.sb-info-box { display:none; margin-bottom:6px; border:1px solid var(--border3); padding:6px 7px; }
.sb-error-sm { display:none; margin-bottom:4px; padding:4px 6px; border:1px solid #ee4444; }
.sb-label { font-size:8px; letter-spacing:1px; color:var(--fg-dim); margin-bottom:4px; }
.sb-input-error { flex:1; font-size:8px; background:#ee4444; color:#fff; }
.sb-row-center { display:flex; align-items:center; gap:6px; }
</style>
</head>
<body>

<div class="header">
  <div>
    <div class="logo-name">LOOP 2.1</div>
    <div class="logo-sub">Manual Flow Computer</div>
    <div style="font-size:8px;color:var(--fg);letter-spacing:1px;margin-top:3px;">Prototype designed by <span title="shea@loopmmt.com" style="cursor:help;border-bottom:1px dotted var(--fg);">Shea Gunther</span>, code written by Claude AI</div>
  </div>
  <div style="display:flex;align-items:center;gap:16px;">
  <div style="display:flex;flex-direction:column;justify-content:center;gap:4px;padding-right:16px;border-right:1px solid var(--border2);">
    <span style="font-size:7px;letter-spacing:2px;color:var(--fg-dim);text-transform:uppercase;">Clock</span>
    <span id="perf-display" style="font-size:10px;letter-spacing:1px;color:var(--fg-dim);text-transform:uppercase;min-width:36px;">—</span>
  </div>
  <div style="display:flex;flex-direction:column;justify-content:center;gap:4px;padding-right:16px;border-right:1px solid var(--border2);">
    <span style="font-size:9px;letter-spacing:3px;color:var(--fg);text-transform:uppercase;">Build</span>
    <span id="app-version-display" style="font-size:10px;letter-spacing:2px;color:var(--fg);text-transform:uppercase;"></span>
  </div>
  <div class="skin-group">
    <span class="skin-label">Skin</span>
    <select class="skin-select" id="skin-select" onchange="applySkin(this.value)">
      <option value="og">OG</option>
      <option value="winamp">WINAMP</option>
      <option value="sunrise">SUNRISE</option>
    </select>
  </div>
  <div class="handle-group">
    <span class="handle-label">Operator Handle</span>
    <input class="handle-input" id="operator-handle" type="text"
           maxlength="24" placeholder="your handle"
           oninput="operatorHandle=this.value;"
           autocomplete="off" spellcheck="false">
  </div>
  <div class="handle-group">
    <span class="handle-label">Session Name</span>
    <input class="handle-input" id="session-name" type="text"
           maxlength="48" placeholder="session name"
           oninput="sessionName=this.value;"
           autocomplete="off" spellcheck="false">
  </div>
  <div>
    <div class="tick-label">MASTER CLOCK TICK</div>
    <div style="display:flex;align-items:baseline;gap:8px;">
      <div class="tick-value" id="tick-display">000000000</div>
      <button data-action="resetTickCount" class="reset-tick-btn">RESET</button>
    </div>
  </div>
  </div>
</div>

<div class="controls">
  <button class="btn btn-run" id="btn-run" data-action="toggleMasterClock">▶ START</button>
  <button class="btn" data-action="stepMachineOneTick">STEP</button>
  <div class="divider"></div>
  <div class="speed-group">
    <span>SPEED</span>
    <input type="range"  id="speed-slider" min="1" max="144" value="1" step="1" oninput="handleSpeedSliderChange(this.value)">
    <input type="number" id="speed-input"  min="0.1" max="144" value="1" step="0.1" style="width:48px;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:2px 4px;letter-spacing:1px;-moz-appearance:textfield;" oninput="handleSpeedNumberInputChange(this.value)" onchange="handleSpeedNumberInputChange(this.value)">
    <span class="speed-val" id="speed-label">1.0 Hz</span>
  </div>
  <div class="divider"></div>
  <div class="op-count-group">
    <span>OP COUNT</span>
    <input type="number" class="op-count-input" id="op-count-input"
      min="0" max="99999" value="0" oninput="onOpCountChange(this.value)">
    <button class="op-count-btn" id="op-count-btn-working" data-action="toggleOpCountLink" data-arg="working" title="Halt Working loop when counter matches">W</button>
    <button class="op-count-btn" id="op-count-btn-alu"     data-action="toggleOpCountLink" data-arg="alu"     title="Halt ALU loop when counter matches">A</button>
    <button class="op-count-btn" id="op-count-btn-memory"  data-action="toggleOpCountLink" data-arg="memory"  title="Halt Memory loop when counter matches">M</button>
    <button class="op-count-btn" id="op-count-btn-big"     data-action="toggleOpCountLink" data-arg="big"     title="Halt Big loop when counter matches">B</button>
    <button class="op-count-btn" id="op-count-btn-global"  data-action="toggleOpCountLink" data-arg="global"  title="Halt all loops when global counter matches">G</button>
  </div>
  <div class="divider"></div>
  <div class="clock-status">
    <div class="led" id="led-clock"></div><span>CLOCK</span>
    &nbsp;
    <div class="led" id="led-run"></div><span>RUNNING</span>
    &nbsp;
    <div class="led" id="led-bus"></div><span>BUS</span>
    &nbsp;
    <div class="led" id="led-inj"></div><span>INJECT</span>
    &nbsp;
    <div class="led" id="led-p2p"></div><span>P2P</span>
    &nbsp;&nbsp;
    <button class="hw-test-btn" data-action="setupHardwareTest" title="Configure machine for hardware integration test">TEST</button>
  </div>


  <div id="_ee0" data-action="_c0">
    <svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg"
         style="display:block;image-rendering:pixelated;">
      <!-- Head interior fill -->
      <rect x="2" y="1" width="7" height="5" fill="var(--panel)"/>
      <!-- Dome top row -->
      <rect x="2" y="0" width="7" height="1" fill="var(--fg)"/>
      <!-- Left side -->
      <rect x="1" y="1" width="1" height="5" fill="var(--fg)"/>
      <!-- Right side -->
      <rect x="9" y="1" width="1" height="5" fill="var(--fg)"/>
      <!-- Bottom of head — flush with wall line -->
      <rect x="1" y="6" width="9" height="1" fill="var(--fg)"/>
      <!-- Left fingers gripping (outside left of head) -->
      <rect x="0" y="5" width="1" height="2" fill="var(--fg)"/>
      <!-- Right fingers -->
      <rect x="10" y="5" width="1" height="2" fill="var(--fg)"/>
      <!-- Eyes -->
      <rect x="3" y="2" width="1" height="1" fill="var(--fg)"/>
      <rect x="7" y="2" width="1" height="1" fill="var(--fg)"/>
      <!-- Nose — small bump, stays on face -->
      <rect x="5" y="4" width="1" height="1" fill="var(--fg)"/>
    </svg>
  </div>

</div>

<div class="body-row">
  <div class="main-area">

    <!-- INJECT ROW: levers + inject channel -->
    <div class="inject-row">

      <!-- 8 lever switches -->
      <div class="switch-panel" id="switch-panel">
        <div class="sw-title">Operator Input</div>
        <div class="levers-row" id="levers-row">
          <!-- built by JS -->
        </div>
        <div class="sw-val-row">
          <div class="sw-val">DEC <span id="sw-dec">0</span> &nbsp; HEX <span id="sw-hex">0x0000</span></div>
          <div class="sw-actions">
            <button class="btn btn-load" data-action="injectSwitchValueIntoWorkingLoop">▼ SEND</button>
            <button class="btn btn-eject" data-action="clearAllInputSwitches">CLEAR INPUT</button>
          </div>
        </div>
      </div>

      <!-- RNG panel -->
      <div class="rng-panel" id="rng-panel">
        <div class="rng-title">RNG</div>
        <div class="rng-range-row">
          <span class="rng-range-label">MIN</span>
          <input class="rng-range-input" id="rng-min" type="number" min="0" max="65535" value="0" onchange="rngValidateRange()" />
          <span class="rng-range-label" style="min-width:28px;text-align:center;">MAX</span>
          <input class="rng-range-input" id="rng-max" type="number" min="0" max="65535" value="65535" onchange="rngValidateRange()" />
        </div>
        <div class="rng-actions">
          <button class="btn" style="width:100%;background:var(--alu-sel);" data-action="rngSend">▼ RANDOM</button>
        </div>
        <div id="rng-history" class="rng-history"></div>
      </div>

      <!-- Injection Channel canvas -->
      <div class="inject-channel-wrap">
        <div class="inj-title">Injection Channel &nbsp;→&nbsp; Working</div>
        <canvas id="canvas-inject"></canvas>
      </div>

    </div>

    <!-- TOP LOOPS: Working (left), ALU (right) -->
    <div class="loops-row" id="top-loops">
      <div class="loop-panel">
        <div class="loop-header">
          <div class="loop-name">◈ &nbsp;Working<span class="wscr-capture-led" id="wscr-led" title="Working Scratch capture active"></span></div>
          <div class="sb-row-center"><div class="loop-meta">12 W · 204 BITS</div><button class="gate-btn gate-open" id="gate-btn-working" data-action="toggleGate" data-arg="working">CLOSE GATE</button><button class="pause-btn loop-running" id="pause-btn-working" data-action="togglePause" data-arg="working">⏸</button></div>
        </div>
        <div class="canvas-wrap" id="wrap-working"><canvas class="lcanvas" id="canvas-working"></canvas></div>
        <div class="word-detail">
          <div class="wd-label">READ</div>
          <div class="bits" id="bits-working"></div>
          <div class="wd-vals" id="vals-working"></div>
        </div>
        <div class="ctr-strip">
          <div class="ctr-label">CTR</div>
          <div class="ctr-val" id="ctr-val-working">0 / 0x00</div>
          <button class="ctr-btn ctr-eject-btn" data-action="ctrEjectA" data-arg="working" title="Eject to Bus A">→A</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEject" data-arg="working" title="Eject to Bus B">→B</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectC" data-arg="working" title="Eject to Bus C">→C</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectD" data-arg="working" title="Eject to Bus D">→D</button>
          <button class="ctr-btn ctr-destr-off" id="ctr-destr-working" data-action="toggleCtrDestructive" data-arg="working">COPY</button>
          <button class="ctr-btn ctr-rst-btn" data-action="ctrReset" data-arg="working">RESET</button>
        </div>
      </div>
      <div class="loop-panel">
        <div class="loop-header">
          <div class="loop-name">◈ &nbsp;ALU</div>
          <div class="sb-row-center"><div class="loop-meta">16 W · 272 BITS</div><button class="gate-btn gate-open" id="gate-btn-alu" data-action="toggleGate" data-arg="alu">CLOSE GATE</button><button class="pause-btn loop-running" id="pause-btn-alu" data-action="togglePause" data-arg="alu">⏸</button></div>
        </div>
        <div class="canvas-wrap" id="wrap-alu"><canvas class="lcanvas" id="canvas-alu"></canvas></div>
        <div class="word-detail">
          <div class="wd-label">READ</div>
          <div class="bits" id="bits-alu"></div>
          <div class="wd-vals" id="vals-alu"></div>
        </div>
        <div class="ctr-strip">
          <div class="ctr-label">CTR</div>
          <div class="ctr-val" id="ctr-val-alu">0 / 0x00</div>
          <button class="ctr-btn ctr-eject-btn" data-action="ctrEjectA" data-arg="alu" title="Eject to Bus A">→A</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEject" data-arg="alu" title="Eject to Bus B">→B</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectC" data-arg="alu" title="Eject to Bus C">→C</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectD" data-arg="alu" title="Eject to Bus D">→D</button>
          <button class="ctr-btn ctr-destr-off" id="ctr-destr-alu" data-action="toggleCtrDestructive" data-arg="alu">COPY</button>
          <button class="ctr-btn ctr-rst-btn" data-action="ctrReset" data-arg="alu">RESET</button>
        </div>
      </div>
    </div>

    <!-- BUS STRIP -->
    <div class="bus-strip" id="bus-row" style="position:relative;">
      <canvas id="canvas-bus"></canvas>
      <button class="bus-inline-btn bus-inline-btn-a off" id="inline-btn-bus" data-action="toggleBus" title="Bus A on/off">▶ A</button>
    </div>

    <!-- BUS B STRIP -->
    <div class="bus-b-strip" id="busb-row">
      <canvas id="canvas-busb"></canvas>
      <button class="bus-inline-btn bus-inline-btn-b off" id="inline-btn-busb" data-action="toggleBusB" title="Bus B on/off">▶ B</button>
    </div>

    <!-- BUS C STRIP -->
    <div class="bus-c-strip" id="busc-row">
      <canvas id="canvas-busc"></canvas>
      <button class="bus-inline-btn bus-inline-btn-c off" id="inline-btn-busc" data-action="toggleBusC" title="Bus C on/off">▶ C</button>
    </div>

    <!-- BUS D STRIP -->
    <div class="bus-d-strip" id="busd-row">
      <canvas id="canvas-busd"></canvas>
      <button class="bus-inline-btn bus-inline-btn-d off" id="inline-btn-busd" data-action="toggleBusD" title="Bus D on/off">▶ D</button>
    </div>

    <!-- BUS E STRIP (External) -->
    <div class="bus-e-strip" id="buse-row">
      <canvas id="canvas-buse"></canvas>
      <button class="bus-inline-btn bus-inline-btn-e off" id="inline-btn-buse" data-action="toggleBusE" title="Bus E on/off">▶ E</button>
    </div>

    <!-- BUS F STRIP (P2P Left) -->
    <div class="bus-f-strip" id="busf-row">
      <canvas id="canvas-busf"></canvas>
      <button class="bus-inline-btn bus-inline-btn-f off" id="inline-btn-busf" data-action="toggleBusF" title="Bus F — P2P Left">▶ F</button>
    </div>

    <!-- BUS G STRIP (P2P Right) -->
    <div class="bus-g-strip" id="busg-row">
      <canvas id="canvas-busg"></canvas>
      <button class="bus-inline-btn bus-inline-btn-g off" id="inline-btn-busg" data-action="toggleBusG" title="Bus G — P2P Right">▶ G</button>
    </div>

    <!-- BUS H STRIP (Net0) -->
    <div class="bus-h-strip" id="bush-row">
      <canvas id="canvas-bush"></canvas>
      <button class="bus-inline-btn" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:1px;padding:2px 6px;background:transparent;border:1px solid var(--bus-net0-color);color:var(--bus-net0-color);cursor:pointer;z-index:10;" id="inline-btn-bush" data-action="toggleBusH" title="Bus H — Net0">▶ H</button>
    </div>

    <!-- BUS I STRIP (Net1) -->
    <div class="bus-i-strip" id="busi-row">
      <canvas id="canvas-busi"></canvas>
      <button class="bus-inline-btn" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:1px;padding:2px 6px;background:transparent;border:1px solid var(--bus-net1-color);color:var(--bus-net1-color);cursor:pointer;z-index:10;" id="inline-btn-busi" data-action="toggleBusI" title="Bus I — Net1">▶ I</button>
    </div>

    <!-- BOTTOM LOOPS: Memory (left), Big (right) -->
    <div class="loops-row" id="bottom-loops">
      <div class="loop-panel">
        <div class="loop-header">
          <div class="loop-name">◈ &nbsp;Memory</div>
          <div class="sb-row-center"><div class="loop-meta">16 W · 272 BITS</div><button class="gate-btn gate-open" id="gate-btn-memory" data-action="toggleGate" data-arg="memory">CLOSE GATE</button><button class="pause-btn loop-running" id="pause-btn-memory" data-action="togglePause" data-arg="memory">⏸</button></div>
        </div>
        <div class="canvas-wrap" id="wrap-memory"><canvas class="lcanvas" id="canvas-memory"></canvas></div>
        <div class="word-detail">
          <div class="wd-label">READ</div>
          <div class="bits" id="bits-memory"></div>
          <div class="wd-vals" id="vals-memory"></div>
        </div>
        <div class="ctr-strip">
          <div class="ctr-label">CTR</div>
          <div class="ctr-val" id="ctr-val-memory">0 / 0x00</div>
          <button class="ctr-btn ctr-eject-btn" data-action="ctrEjectA" data-arg="memory" title="Eject to Bus A">→A</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEject" data-arg="memory" title="Eject to Bus B">→B</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectC" data-arg="memory" title="Eject to Bus C">→C</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectD" data-arg="memory" title="Eject to Bus D">→D</button>
          <button class="ctr-btn ctr-destr-off" id="ctr-destr-memory" data-action="toggleCtrDestructive" data-arg="memory">COPY</button>
          <button class="ctr-btn ctr-rst-btn" data-action="ctrReset" data-arg="memory">RESET</button>
        </div>
      </div>
      <div class="loop-panel">
        <div class="loop-header">
          <div class="loop-name">◈ &nbsp;Big</div>
          <div class="sb-row-center"><div class="loop-meta">32 W · 544 BITS</div><button class="gate-btn gate-open" id="gate-btn-big" data-action="toggleGate" data-arg="big">CLOSE GATE</button><button class="pause-btn loop-running" id="pause-btn-big" data-action="togglePause" data-arg="big">⏸</button></div>
        </div>
        <div class="canvas-wrap" id="wrap-big"><canvas class="lcanvas" id="canvas-big"></canvas></div>
        <div class="word-detail">
          <div class="wd-label">READ</div>
          <div class="bits" id="bits-big"></div>
          <div class="wd-vals" id="vals-big"></div>
        </div>
        <div class="ctr-strip">
          <div class="ctr-label">CTR</div>
          <div class="ctr-val" id="ctr-val-big">0 / 0x00</div>
          <button class="ctr-btn ctr-eject-btn" data-action="ctrEjectA" data-arg="big" title="Eject to Bus A">→A</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEject" data-arg="big" title="Eject to Bus B">→B</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectC" data-arg="big" title="Eject to Bus C">→C</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectD" data-arg="big" title="Eject to Bus D">→D</button>
          <button class="ctr-btn ctr-destr-off" id="ctr-destr-big" data-action="toggleCtrDestructive" data-arg="big">COPY</button>
          <button class="ctr-btn ctr-rst-btn" data-action="ctrReset" data-arg="big">RESET</button>
        </div>
      </div>
    </div>

  </div><!-- /main-area -->

  <!-- SIDEBAR -->
  <div class="sidebar">
    <div style="display:flex;gap:4px;padding:4px 8px 3px;border-bottom:1px solid var(--border2);margin-bottom:2px;flex-shrink:0;">
      <button data-action="expandAllSidebarSections" style="flex:1;font-family:var(--font);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:2px 4px;background:var(--el-bg);border:1px solid var(--border2);color:var(--fg);cursor:pointer;line-height:1.2;" title="Expand all">EXPAND ALL</button>
      <button data-action="collapseAllSidebarSections" style="flex:1;font-family:var(--font);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:2px 4px;background:var(--el-bg);border:1px solid var(--border2);color:var(--fg);cursor:pointer;line-height:1.2;" title="Collapse all">COLLAPSE ALL</button>
    </div>

    <!-- Annotation System -->
    <div class="sb-section sb-collapsed" id="anno-section" style="padding:0;border-left:3px solid var(--c-working);">
      <div class="anno-header">
        <div style="display:flex;align-items:center;gap:2px;">
          <button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>
          <div class="anno-title">Annotate</div>
        </div>
        <span class="anno-status">
          <span class="anno-status-dot" id="anno-status-dot"></span>
          <span id="anno-status-text" style="font-size:7px;">OFF</span>
        </span>
      </div>
      <div class="anno-body">
        <div class="anno-checkbox-row">
          <input type="checkbox" id="recording-checkbox" class="anno-checkbox" onchange="annoHandleRecordToggle()">
          <label for="recording-checkbox" class="anno-checkbox-label">Record</label>
        </div>
        <textarea id="anno-textarea" class="anno-textarea" placeholder="Note..."></textarea>
        <div class="palette-section">
          <div class="palette-header">
            <span class="palette-label">My Palette</span>
            <button class="palette-clear-btn" onclick="annoClearPalette()">Clear</button>
          </div>
          <div class="palette-drop-zone empty" id="palette-zone"
            ondragover="annoHandleDragOver(event)"
            ondragleave="annoHandleDragLeave(event)"
            ondrop="annoHandleDrop(event)">
          </div>
        </div>
        <div class="anno-buttons">
          <button class="anno-btn" onclick="annoClearTextarea()">Clear</button>
          <button class="anno-btn primary" onclick="annoSaveAnnotation()">Take Note</button>
        </div>
        <div class="library-section" id="library-section">
          <div class="library-header" id="library-header" onclick="annoToggleLibrary()">
            <button class="library-toggle" id="library-toggle">▼</button>
            <span class="library-label">Symbol Library</span>
          </div>
          <div class="library-body" id="library-body">
            <div class="anno-tabs">
              <button class="tab-btn active" onclick="annoSwitchTab('action', this)">Act</button>
              <button class="tab-btn" onclick="annoSwitchTab('ctrl', this)">Ctrl</button>
              <button class="tab-btn" onclick="annoSwitchTab('comp', this)">Comp</button>
              <button class="tab-btn" onclick="annoSwitchTab('flag', this)">Flag</button>
              <button class="tab-btn" onclick="annoSwitchTab('alu', this)">ALU</button>
            </div>
            <!-- ACTION -->
            <div id="action-panel" class="anno-symbol-panel active">
              <button class="symbol-btn" draggable="true" data-symbol="→"  data-label="Rte"  ondragstart="annoStartDrag(event)" onclick="annoInsert('→')">→<small>Rte</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="←"  data-label="Inj"  ondragstart="annoStartDrag(event)" onclick="annoInsert('←')">←<small>Inj</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="↺"  data-label="Cir"  ondragstart="annoStartDrag(event)" onclick="annoInsert('↺')">↺<small>Cir</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="⇌"  data-label="Swp"  ondragstart="annoStartDrag(event)" onclick="annoInsert('⇌')">⇌<small>Swp</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="▶"  data-label="Run"  ondragstart="annoStartDrag(event)" onclick="annoInsert('▶')">▶<small>Run</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="■"  data-label="Stp"  ondragstart="annoStartDrag(event)" onclick="annoInsert('■')">■<small>Stp</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="W→" data-label="W→"   ondragstart="annoStartDrag(event)" onclick="annoInsert('W→')">W→<small>W→</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="→A" data-label="→A"   ondragstart="annoStartDrag(event)" onclick="annoInsert('→A')">→A<small>→A</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="?→" data-label="If"   ondragstart="annoStartDrag(event)" onclick="annoInsert('?→')">?→<small>If</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":→" data-label="Else" ondragstart="annoStartDrag(event)" onclick="annoInsert(':→')">:→<small>Else</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="⊗"  data-label="Cls"  ondragstart="annoStartDrag(event)" onclick="annoInsert('⊗')">⊗<small>Cls</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="⊙"  data-label="Opn"  ondragstart="annoStartDrag(event)" onclick="annoInsert('⊙')">⊙<small>Opn</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="∅"  data-label="Clr"  ondragstart="annoStartDrag(event)" onclick="annoInsert('∅')">∅<small>Clr</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="!"  data-label="Trg"  ondragstart="annoStartDrag(event)" onclick="annoInsert('!')">!<small>Trg</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="@"  data-label="Addr" ondragstart="annoStartDrag(event)" onclick="annoInsert('@')">@<small>Addr</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="·"  data-label="Then" ondragstart="annoStartDrag(event)" onclick="annoInsert('·')">·<small>Then</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="|"  data-label="Par"  ondragstart="annoStartDrag(event)" onclick="annoInsert('|')">|<small>Par</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":"  data-label="App"  ondragstart="annoStartDrag(event)" onclick="annoInsert(':')">:<small>App</small></button>
            </div>
            <!-- CONTROL -->
            <div id="ctrl-panel" class="anno-symbol-panel">
              <button class="symbol-btn" draggable="true" data-symbol="UNTIL()" data-label="Loop" ondragstart="annoStartDrag(event)" onclick="annoInsert('UNTIL()')">UNTIL<small>Loop</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="#N"       data-label="RepN" ondragstart="annoStartDrag(event)" onclick="annoInsert('#N')">#N<small>RepN</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="#CTR"     data-label="RepC" ondragstart="annoStartDrag(event)" onclick="annoInsert('#CTR')">#CTR<small>RepC</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="{ }"      data-label="Blk"  ondragstart="annoStartDrag(event)" onclick="annoInsert('{ }')">{ }<small>Blk</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="::LABEL"  data-label="Lbl"  ondragstart="annoStartDrag(event)" onclick="annoInsert('::LABEL')">::<small>Lbl</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="PASS"     data-label="NOP"  ondragstart="annoStartDrag(event)" onclick="annoInsert('PASS')">PASS<small>NOP</small></button>
            </div>
            <!-- COMPONENT -->
            <div id="comp-panel" class="anno-symbol-panel">
              <button class="symbol-btn" draggable="true" data-symbol="W"   data-label="Work" ondragstart="annoStartDrag(event)" onclick="annoInsert('W')">W<small>Work</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="A"   data-label="ALU"  ondragstart="annoStartDrag(event)" onclick="annoInsert('A')">A<small>ALU</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="M"   data-label="Mem"  ondragstart="annoStartDrag(event)" onclick="annoInsert('M')">M<small>Mem</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="B"   data-label="Big"  ondragstart="annoStartDrag(event)" onclick="annoInsert('B')">B<small>Big</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="PM1" data-label="PM1"  ondragstart="annoStartDrag(event)" onclick="annoInsert('PM1')">PM1<small>PM1</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="PM2" data-label="PM2"  ondragstart="annoStartDrag(event)" onclick="annoInsert('PM2')">PM2<small>PM2</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="TG1" data-label="TG1"  ondragstart="annoStartDrag(event)" onclick="annoInsert('TG1')">TG1<small>TG1</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="TG2" data-label="TG2"  ondragstart="annoStartDrag(event)" onclick="annoInsert('TG2')">TG2<small>TG2</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="INJ" data-label="Inj"  ondragstart="annoStartDrag(event)" onclick="annoInsert('INJ')">INJ<small>Inj</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="CTR" data-label="Ctr"  ondragstart="annoStartDrag(event)" onclick="annoInsert('CTR')">CTR<small>Ctr</small></button>
            </div>
            <!-- FLAG -->
            <div id="flag-panel" class="anno-symbol-panel">
              <button class="symbol-btn" draggable="true" data-symbol=".Z" data-label="Zero" ondragstart="annoStartDrag(event)" onclick="annoInsert('.Z')">.Z<small>Zero</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".C" data-label="Carr" ondragstart="annoStartDrag(event)" onclick="annoInsert('.C')">.C<small>Carr</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".V" data-label="Ovfl" ondragstart="annoStartDrag(event)" onclick="annoInsert('.V')">.V<small>Ovfl</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".S" data-label="Sign" ondragstart="annoStartDrag(event)" onclick="annoInsert('.S')">.S<small>Sign</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".P" data-label="Par"  ondragstart="annoStartDrag(event)" onclick="annoInsert('.P')">.P<small>Par</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".M" data-label="Mat"  ondragstart="annoStartDrag(event)" onclick="annoInsert('.M')">.M<small>Mat</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=".T" data-label="Trg"  ondragstart="annoStartDrag(event)" onclick="annoInsert('.T')">.T<small>Trg</small></button>
            </div>
            <!-- ALU -->
            <div id="alu-panel" class="anno-symbol-panel">
              <button class="symbol-btn" draggable="true" data-symbol=":+"  data-label="Add" ondragstart="annoStartDrag(event)" onclick="annoInsert(':+')">:+<small>Add</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":-"  data-label="Sub" ondragstart="annoStartDrag(event)" onclick="annoInsert(':-')">:-<small>Sub</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":*"  data-label="Mul" ondragstart="annoStartDrag(event)" onclick="annoInsert(':*')">:*<small>Mul</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":/"  data-label="Div" ondragstart="annoStartDrag(event)" onclick="annoInsert(':/')">:/<small>Div</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":&amp;" data-label="AND" ondragstart="annoStartDrag(event)" onclick="annoInsert(':&amp;')">:&amp;<small>AND</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":|"  data-label="OR"  ondragstart="annoStartDrag(event)" onclick="annoInsert(':|')">:|<small>OR</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":^"  data-label="XOR" ondragstart="annoStartDrag(event)" onclick="annoInsert(':^')">:^<small>XOR</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":~"  data-label="NOT" ondragstart="annoStartDrag(event)" onclick="annoInsert(':~')">:~<small>NOT</small></button>
              <button class="symbol-btn" draggable="true" data-symbol="::&lt;&lt;" data-label="SHL" ondragstart="annoStartDrag(event)" onclick="annoInsert(':&lt;&lt;')">:&lt;&lt;<small>SHL</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":&gt;&gt;" data-label="SHR" ondragstart="annoStartDrag(event)" onclick="annoInsert(':&gt;&gt;')">:&gt;&gt;<small>SHR</small></button>
              <button class="symbol-btn" draggable="true" data-symbol=":CMP" data-label="Cmp" ondragstart="annoStartDrag(event)" onclick="annoInsert(':CMP')">:CMP<small>Cmp</small></button>
            </div>
          </div><!-- /.library-body -->
        </div><!-- /.library-section -->
        <div id="library-collapsible">
          <div class="anno-context">
            <div class="anno-context-row">
              <span class="anno-context-label">T:</span>
              <span class="anno-context-value" id="anno-current-tick">0</span>
            </div>
            <div class="anno-context-row">
              <span class="anno-context-label">Op:</span>
              <span class="anno-context-value" id="anno-current-op" style="font-size:7px;">—</span>
            </div>
          </div>
          <div class="file-status-row">
            <span class="file-status-name" id="anno-file-status-name">no file open</span>
          </div>
          <div class="anno-recent">
            <div class="anno-recent-title">Recent</div>
            <ul class="anno-recent-list" id="anno-recent-list"></ul>
          </div>
        </div><!-- /#library-collapsible -->
      </div><!-- /.anno-body -->
    </div><!-- /#anno-section -->

    <!-- Global Counter -->
    <div class="sb-section sb-sec-global sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Global Counter</div>
      <div class="sb-body">
      <div class="global-ctr-section">
        <div class="global-ctr-val" id="ctr-val-global">0 / 0x0</div>
        <div style="display:flex;gap:5px;">
          <button class="ctr-btn ctr-eject-btn" data-action="ctrEjectA" data-arg="global" title="Eject to Bus A">→A</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEject" data-arg="global" title="Eject to Bus B">→B</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectC" data-arg="global" title="Eject to Bus C">→C</button><button class="ctr-btn ctr-eject-btn" data-action="ctrEjectD" data-arg="global" title="Eject to Bus D">→D</button>
          <button class="ctr-btn ctr-destr-off" id="ctr-destr-global" data-action="toggleCtrDestructive" data-arg="global">COPY</button>
          <button class="ctr-btn ctr-rst-btn" data-action="ctrReset" data-arg="global">RESET</button>
        </div>
      </div>
      </div>
    </div>

    <!-- Counter Triggers -->
    <div class="sb-section sb-sec-ctr sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Counter Triggers</div>
      <div class="sb-body">
      <div class="ctr-triggers-section" id="ctr-triggers-panel">
        <!-- built by JS -->
      </div>
      </div>
    </div>

    <!-- Challenge Module -->
    <div class="sb-section sb-sec-chall sb-collapsed" id="chall-section">
      <div class="sb-title" style="color:var(--c-chall);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Challenges</div>
      <div class="sb-body">
      <div class="chall-panel">
        <!-- Scoring mode toggle -->
        <div class="chall-param-row" style="margin-bottom:6px;display:flex;align-items:center;gap:0;">
          <span class="chall-param-label" style="margin-right:6px;">Scoring:</span>
          <button id="chall-mode-efficiency" class="chall-mode-btn chall-mode-active" data-action="challSetScoringMode" data-arg="efficiency" title="Score on ticks and operator actions only">Efficiency</button>
          <button id="chall-mode-speed" class="chall-mode-btn" data-action="challSetScoringMode" data-arg="speed" title="Score includes real-world elapsed time">Speed</button>
        </div>
        <div id="chall-mode-desc" class="chall-desc" style="margin-bottom:6px;font-style:italic;">Scored on ticks and operator actions only.</div>
        <!-- Challenge type selector — populated from registry at init -->
        <div class="chall-param-row" style="margin-bottom:4px;">
          <span class="chall-param-label">Type:</span>
          <select class="chall-param-select" id="chall-type" style="font-size:10px;padding:2px 6px;" onchange="challOnTypeChange()">
          </select>
        </div>
        <div class="chall-desc" id="chall-desc"></div>
        <!-- Dynamic params container — rendered from challenge definition -->
        <div id="chall-params-container" style="margin-bottom:4px;"></div>

        <!-- Chain Sum params (network challenge) -->
        <div id="chall-chain_sum-params" style="display:none;">
          <div class="chall-desc" style="margin-bottom:4px;font-style:italic;">Each machine in the network receives a value. Pass the running sum along the chain — add your value and submit to your local Challenge Box. Requires connected neighbors.</div>
          <button class="pm-toggle-btn pm-destr-off" data-action="cbxPingNetwork" style="width:100%;margin-bottom:4px;font-size:8px;">⬡ PING NETWORK</button>
          <div id="cbx-topology-display" style="font-size:8px;color:var(--fg);letter-spacing:1px;padding:4px 6px;background:var(--el-bg);border:1px solid var(--border3);min-height:20px;line-height:1.5;margin-bottom:4px;">No probe run yet.</div>
          <div id="chall-chain-network-status" style="font-size:8px;letter-spacing:1px;padding:4px 6px;background:var(--el-bg);border:1px solid var(--border3);margin-bottom:4px;">No network detected — run PING NETWORK first.</div>
        </div>

        <!-- Active chain challenge display for participating machines (visible when invited/active) -->
        <div id="cbx-chain-active-panel" style="display:none;margin-top:6px;">
          <div class="cbx-role-display">
            <div class="cbx-role-phase" id="cbx-chain-phase">WAITING</div>
            <div id="cbx-chain-role-desc" style="color:var(--fg-dim);font-size:8px;">—</div>
            <div id="cbx-chain-value-line" style="color:var(--fg);font-size:8px;display:none;">YOUR VALUE: <span id="cbx-chain-my-value" style="color:var(--bus-h-color,#8080e0);font-weight:bold;">—</span></div>
            <div id="cbx-chain-sum-line" style="color:var(--fg);font-size:8px;display:none;">INCOMING SUM: <span id="cbx-chain-incoming-sum" style="color:#44cc88;font-weight:bold;">—</span></div>
            <div id="cbx-chain-lockout-line" style="color:#ee4444;font-size:8px;display:none;">LOCKED: <span id="cbx-chain-lockout-timer">—</span>s</div>
          </div>
          <button class="cbx-release-btn" id="cbx-release-btn" data-action="cbxReleaseChainValue" disabled>RELEASE VALUE</button>
        </div>

        <div style="margin-top:10px;border-top:1px solid var(--border2);padding-top:8px;">
          <div style="font-size:7px;color:var(--fg-dim);letter-spacing:1px;line-height:1.5;">Manage challenge scripts in Scripts → CBX Local / CBX Networked.</div>
        </div>

        <!-- Chain progress display (shown during active chain challenges) -->
        <div id="chall-chain-progress" style="display:none;margin-bottom:4px;">
          <div class="chall-desc" style="margin-bottom:3px;font-style:normal;font-weight:bold;font-size:8px;letter-spacing:1px;">CHAIN PROGRESS</div>
          <div id="chall-chain-progress-cells" style="display:flex;gap:2px;flex-wrap:wrap;"></div>
          <div id="chall-chain-direction" style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-top:3px;"></div>
        </div>

        <button class="chall-start-btn" id="chall-start-btn" data-action="challStart">▶ NEW CHALLENGE</button>
        <button class="chall-abort-btn" id="chall-abort-btn" data-action="challAbort" style="display:none;">✕ ABORT</button>
        <div class="chall-status" id="chall-status">Ready — press New Challenge to begin.</div>
        <div class="chall-stats" id="chall-stats" style="display:none;">
          <div class="chall-stat-label">Elapsed</div><div class="chall-stat-val" id="cs-time">—</div>
          <div class="chall-stat-label">Ticks</div><div class="chall-stat-val" id="cs-ticks">0</div>
          <div class="chall-stat-label">Op Actions</div><div class="chall-stat-val" id="cs-ops">0</div>
          <div class="chall-stat-label">Waiting for</div><div class="chall-stat-val" id="cs-words-out">— answer</div>
          <div class="chall-stat-label">Score</div><div class="chall-stat-val" id="cs-score">—</div>
        </div>
        <!-- Operators Club completion code (shown on Bridge Crossing success) -->
        <div id="club-completion-panel" style="display:none;margin:8px 0;border:2px solid var(--accent, #6030c0);padding:8px 10px;background:var(--panel2);">
          <div style="font-size:8px;letter-spacing:2px;color:var(--accent, #6030c0);font-weight:bold;margin-bottom:6px;">★ OPERATORS CLUB — COMPLETION CODE</div>
          <div id="club-completion-code" style="font-family:var(--font);font-size:13px;letter-spacing:2px;color:var(--fg);font-weight:bold;margin-bottom:6px;word-break:break-all;line-height:1.8;user-select:all;"></div>
          <div id="club-copy-status" style="font-size:7px;letter-spacing:1px;color:var(--accent, #6030c0);margin-bottom:6px;"></div>
          <div style="font-size:7px;color:var(--fg-dim);letter-spacing:1px;line-height:1.5;">Write this code on your application. It cannot be regenerated.<br><a href="https://loop2.computer/club" target="_blank" style="color:var(--accent, #6030c0);text-decoration:underline;">loop2.computer/club</a> — Learn about the Operators Club</div>
        </div>
        <button class="chall-spoiler-btn" id="chall-spoiler-btn" data-action="challToggleSpoiler" style="display:none;">▶ Show values</button>
        <div class="chall-spoiler-values" id="chall-spoiler-values" style="display:none;"></div>
        <div class="chall-history" id="chall-history"></div>
      </div>
      </div>
    </div>


    <!-- Buses Group -->
    <div class="sb-section sb-bus-group sb-bus-collapsed" id="sb-bus-group">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleBusGroup" title="Collapse/expand">▼</button>Buses</div>
      <div class="sb-bus-group-body">
    <!-- Bus panels generated at init by generateBusSidebarPanels() -->

      </div>
    </div>

    <!-- Working Scratch Registers -->
    <div class="sb-section sb-sec-wscr sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Working Scratch</div>
      <div class="sb-body">
        <button class="wscr-mode-btn" id="wscr-capture-btn" data-action="toggleWorkingScratchCapture">CAPTURE: OFF</button>
        <div id="wscr-slots-grid">
          <!-- built by JS -->
        </div>
      </div>
    </div>

    <!-- ALU -->
    <div class="sb-section sb-sec-alu sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>ALU</div>
      <div class="sb-body">
      <div style="margin-bottom:6px;display:flex;gap:6px;align-items:center;">
        <button class="pm-toggle-btn pm-destr-off" id="alu-mode-btn" data-action="toggleAluMode">MODE: 16-BIT</button>
        <button class="pm-clr-btn" data-action="aluClearAll">CLEAR ALL</button>
      </div>

      <!-- Register A -->
      <div class="alu-reg-block" id="reg-block-a">
        <div class="alu-reg-header">
          <span class="alu-reg-name">A</span>
          <div class="alu-reg-bits" id="alu-bits-a"></div>
          <span class="alu-reg-val" id="alu-val-a">—</span>
          <button class="alu-clr-btn" data-action="aluClearReg" data-arg="a">CLEAR</button>
        </div>
        <div class="alu-capture-bar" id="alu-capture-a"></div>
        <button class="alu-wb-btn" style="width:100%;margin-top:3px;" data-action="aluWritebackReg" data-arg="a">SEND TO LOOP</button>
      </div>

      <!-- Register B -->
      <div class="alu-reg-block" id="reg-block-b">
        <div class="alu-reg-header">
          <span class="alu-reg-name">B</span>
          <div class="alu-reg-bits" id="alu-bits-b"></div>
          <span class="alu-reg-val" id="alu-val-b">—</span>
          <button class="alu-clr-btn" data-action="aluClearReg" data-arg="b">CLEAR</button>
        </div>
        <div class="alu-capture-bar" id="alu-capture-b"></div>
        <button class="alu-wb-btn" style="width:100%;margin-top:3px;" data-action="aluWritebackReg" data-arg="b">SEND TO LOOP</button>
      </div>

      <!-- Register C -->
      <div class="alu-reg-block" id="reg-block-c">
        <div class="alu-reg-header">
          <span class="alu-reg-name">C</span>
          <div class="alu-reg-bits" id="alu-bits-c"></div>
          <span class="alu-reg-val" id="alu-val-c">—</span>
          <button class="alu-clr-btn" data-action="aluClearReg" data-arg="c">CLEAR</button>
        </div>
        <div class="alu-capture-bar" id="alu-capture-c"></div>
        <button class="alu-wb-btn" style="width:100%;margin-top:3px;" data-action="aluWritebackReg" data-arg="c">SEND TO LOOP</button>
      </div>

      <!-- Register D -->
      <div class="alu-reg-block" id="reg-block-d">
        <div class="alu-reg-header">
          <span class="alu-reg-name">D</span>
          <div class="alu-reg-bits" id="alu-bits-d"></div>
          <span class="alu-reg-val" id="alu-val-d">—</span>
          <button class="alu-clr-btn" data-action="aluClearReg" data-arg="d">CLEAR</button>
        </div>
        <div class="alu-capture-bar" id="alu-capture-d"></div>
        <button class="alu-wb-btn" style="width:100%;margin-top:3px;" data-action="aluWritebackReg" data-arg="d">SEND TO LOOP</button>
      </div>

      <!-- Operand source selectors -->
      <div class="alu-reg-divider"></div>
      <div class="alu-opsrc-block">
        <div class="alu-opsrc-row">
          <span class="alu-opsrc-label">Op A ←</span>
          <div class="alu-opsrc-btn opa-sel-btn active" id="opa-sel-a" data-reg="a" data-action="setOpSrc" data-arg="a" data-arg2="a">A</div>
          <div class="alu-opsrc-btn opa-sel-btn"        id="opa-sel-b" data-reg="b" data-action="setOpSrc" data-arg="a" data-arg2="b">B</div>
          <div class="alu-opsrc-btn opa-sel-btn"        id="opa-sel-c" data-reg="c" data-action="setOpSrc" data-arg="a" data-arg2="c">C</div>
          <div class="alu-opsrc-btn opa-sel-btn"        id="opa-sel-d" data-reg="d" data-action="setOpSrc" data-arg="a" data-arg2="d">D</div>
        </div>
        <div class="alu-opsrc-row">
          <span class="alu-opsrc-label">Op B ←</span>
          <div class="alu-opsrc-btn opb-sel-btn"        id="opb-sel-a" data-reg="a" data-action="setOpSrc" data-arg="b" data-arg2="a">A</div>
          <div class="alu-opsrc-btn opb-sel-btn active"  id="opb-sel-b" data-reg="b" data-action="setOpSrc" data-arg="b" data-arg2="b">B</div>
          <div class="alu-opsrc-btn opb-sel-btn"        id="opb-sel-c" data-reg="c" data-action="setOpSrc" data-arg="b" data-arg2="c">C</div>
          <div class="alu-opsrc-btn opb-sel-btn"        id="opb-sel-d" data-reg="d" data-action="setOpSrc" data-arg="b" data-arg2="d">D</div>
        </div>
      </div>
      <div class="alu-reg-divider"></div>

      <!-- Route selector -->
      <div class="alu-route-row">
        <span class="alu-route-label">HEAD →</span>
        <div class="alu-route-btn active" id="route-off" data-action="setRoute" data-arg="null">OFF</div>
        <div class="alu-route-btn" id="route-a" data-action="setRoute" data-arg="a">A</div>
        <div class="alu-route-btn" id="route-b" data-action="setRoute" data-arg="b">B</div>
        <div class="alu-route-btn" id="route-c" data-action="setRoute" data-arg="c">C</div>
        <div class="alu-route-btn" id="route-d" data-action="setRoute" data-arg="d">D</div>
        <div class="alu-route-btn" id="route-hold-btn" data-action="toggleRouteHold" title="ADVANCE: head moves A→B→C→D after each capture&#10;HOLD: head stays on same register">ADVANCE</div>
      </div>

      <div class="alu-reg-divider"></div>

      <!-- Answer register -->
      <div class="alu-answer-block" id="reg-block-r">
        <div class="alu-answer-header">
          <span class="alu-answer-label">ANSWER</span>
          <div class="alu-answer-op" id="alu-answer-op">—</div>
        </div>
        <div class="alu-answer-body">
          <div class="alu-reg-bits" id="alu-bits-r"></div>
          <span class="alu-answer-val" id="alu-val-r">—</span>
        </div>
        <button class="alu-wb-btn" style="width:100%;" data-action="aluWriteback">SEND TO LOOP</button>
        <button class="pm-toggle-btn pm-destr-off" id="alu-auto-wb-btn" data-action="toggleAluAutoWriteback" style="width:100%;margin-top:3px;" title="When ON: answer is automatically sent to loop whenever the result changes">AUTO-SEND: OFF</button>
      </div>

      <!-- Flags -->
      <div class="alu-flags-row">
        <div class="alu-flag" id="flag-zero">ZRO</div>
        <div class="alu-flag" id="flag-carry">CRY</div>
        <div class="alu-flag" id="flag-overflow">OVF</div>
        <div class="alu-flag" id="flag-sign">SGN</div>
        <div class="alu-flag" id="flag-parity">PAR</div>
      </div>

      <!-- Comparator block (shares A/B operands with ALU) -->
      <div class="cmp-block">
        <div class="cmp-header">
          <span class="cmp-title">Comparator</span>
          <span class="cmp-subtitle">always on A vs B</span>
        </div>
        <div class="cmp-flags-grid">
          <div class="cmp-flag" id="cmp-flag-gt"  title="A > B">GT</div>
          <div class="cmp-flag" id="cmp-flag-lt"  title="A < B">LT</div>
          <div class="cmp-flag" id="cmp-flag-eq"  title="A = B">EQ</div>
          <div class="cmp-flag" id="cmp-flag-gte" title="A ≥ B">GTE</div>
          <div class="cmp-flag" id="cmp-flag-lte" title="A ≤ B">LTE</div>
          <div class="cmp-flag" id="cmp-flag-neq" title="A ≠ B">NEQ</div>
        </div>
        <div class="cmp-result-row">
          <div class="cmp-result-bits" id="cmp-result-bits"></div>
          <span class="cmp-result-val" id="cmp-result-val">—</span>
        </div>
        <button class="cmp-wb-btn" data-action="cmpWriteback">SEND TO LOOP</button>
      </div>

      <!-- Operation selector -->
      <div class="alu-ops-grid" id="alu-ops-grid">
        <div class="alu-op sel-op" data-op="ADD" data-action="selOp" data-arg="ADD">ADD</div>
        <div class="alu-op" data-op="SUB" data-action="selOp" data-arg="SUB">SUB</div>
        <div class="alu-op" data-op="AND" data-action="selOp" data-arg="AND">AND</div>
        <div class="alu-op" data-op="OR"  data-action="selOp" data-arg="OR">OR</div>
        <div class="alu-op" data-op="XOR" data-action="selOp" data-arg="XOR">XOR</div>
        <div class="alu-op" data-op="NOT" data-action="selOp" data-arg="NOT">NOT</div>
        <div class="alu-op" data-op="SHL" data-action="selOp" data-arg="SHL">SHL</div>
        <div class="alu-op" data-op="SHR" data-action="selOp" data-arg="SHR">SHR</div>
        <div class="alu-op" data-op="NEG" data-action="selOp" data-arg="NEG">NEG</div>
        <div class="alu-op" data-op="INC" data-action="selOp" data-arg="INC">INC</div>
        <div class="alu-op" data-op="DEC" data-action="selOp" data-arg="DEC">DEC</div>
        <div class="alu-op" data-op="MOD" data-action="selOp" data-arg="MOD">MOD</div>
        <div class="alu-op" data-op="ROR" data-action="selOp" data-arg="ROR">ROR</div>
        <div class="alu-op" data-op="ABS" data-action="selOp" data-arg="ABS">ABS</div>
        <div class="alu-op" data-op="NAND" data-action="selOp" data-arg="NAND">NAND</div>
        <div class="alu-op" data-op="NOR"  data-action="selOp" data-arg="NOR">NOR</div>
        <div class="alu-op" data-op="XNOR" data-action="selOp" data-arg="XNOR">XNOR</div>
      </div>


      </div>
    </div>

    <!-- Filters Group -->
    <div class="sb-section sb-filter-group sb-filter-collapsed" id="sb-filter-group">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleFilterGroup" title="Collapse/expand">▼</button>Filters</div>
      <div class="sb-filter-group-body">

      <div style="padding:4px 8px 8px;">
        <button class="pm-toggle-btn pm-destr-off" id="filter-order-btn" data-action="toggleFilterOrder" style="width:100%;font-size:8px;letter-spacing:1px;">FILTER ORDER: PM → TG</button>
      </div>

    <!-- Pattern Matcher 1 -->
    <div class="sb-section sb-sec-pm sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Pattern Matcher 1</div>
      <div class="sb-body">
      <div style="display:flex;gap:5px;margin-bottom:7px;">
        <button class="pm-toggle-btn pm-destr-off" id="pm-destr-btn" data-action="togglePMDestructive" style="flex:none;">OUTFLOW: COPY</button>
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
        <div class="pm-count" id="pm-count">matches: 0</div>
        <button class="pm-clr-btn" data-action="clearPMFlag">CLEAR MATCH COUNT</button>
        <div style="display:flex;gap:3px;margin-top:4px;">
          <button class="pm-clr-btn" data-action="sendPM1MatchCountToBus" data-arg="a" title="Send PM1 match count to Bus A">→A</button>
          <button class="pm-clr-btn" data-action="sendPM1MatchCountToBus" data-arg="b" title="Send PM1 match count to Bus B">→B</button>
          <button class="pm-clr-btn" data-action="sendPM1MatchCountToBus" data-arg="c" title="Send PM1 match count to Bus C">→C</button>
          <button class="pm-clr-btn" data-action="sendPM1MatchCountToBus" data-arg="d" title="Send PM1 match count to Bus D">→D</button>
          <span style="font-size:7px;color:var(--fg-dim);align-self:center;">SEND COUNT TO BUS</span>
        </div>
      </div>
      <div class="pm-reg-label">MATCH MASK</div>
      <div class="pm-levers-row" id="pm-mask-row"></div>
      <div class="pm-val" id="pm-mask-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">PATTERN</div>
      <div class="pm-levers-row" id="pm-match-row"></div>
      <div class="pm-val" id="pm-match-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">REWRITE MASK <span style="font-size:7px;">(which bits change)</span></div>
      <div class="pm-levers-row" id="pm-changemask-row"></div>
      <div class="pm-val" id="pm-changemask-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">REWRITE VALUE <span style="font-size:7px;">(new bit values)</span></div>
      <div class="pm-levers-row" id="pm-changeval-row"></div>
      <div class="pm-val" id="pm-changeval-val">0 / 0x00</div>
      </div>
    </div>

    <!-- Pattern Matcher 2 -->
    <div class="sb-section sb-sec-pm sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Pattern Matcher 2</div>
      <div class="sb-body">
      <div style="display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap;">
        <button class="pm-toggle-btn pm-destr-off" id="pm2-cascade-btn" data-action="toggleCascadeMode" style="flex:1;min-width:140px;">MODE: STANDALONE</button>
        <button class="pm-toggle-btn pm-destr-off" id="pm2-destr-btn" data-action="togglePMDestructive2" style="flex:none;">OUTFLOW: COPY</button>
      </div>
      <div style="font-size:8px;color:#7ab;margin-bottom:6px;line-height:1.4;" id="pm2-cascade-hint">
        STANDALONE: PM2 reads Big Loop independently.<br>
        CASCADE: PM2 evaluates PM1's matched words — outputs on PM2-Match / PM2-Reject bus sources.
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;">
        <div class="pm-count" id="pm2-count">matches: 0</div>
        <div class="pm-count" id="pm2-reject-count" style="color:#f87;">rejects: 0</div>
        <button class="pm-clr-btn" data-action="clearPMFlag2">CLEAR MATCH COUNT</button>
        <div style="display:flex;gap:3px;margin-top:4px;">
          <button class="pm-clr-btn" data-action="sendPM2MatchCountToBus" data-arg="a" title="Send PM2 match count to Bus A">→A</button>
          <button class="pm-clr-btn" data-action="sendPM2MatchCountToBus" data-arg="b" title="Send PM2 match count to Bus B">→B</button>
          <button class="pm-clr-btn" data-action="sendPM2MatchCountToBus" data-arg="c" title="Send PM2 match count to Bus C">→C</button>
          <button class="pm-clr-btn" data-action="sendPM2MatchCountToBus" data-arg="d" title="Send PM2 match count to Bus D">→D</button>
          <span style="font-size:7px;color:var(--fg-dim);align-self:center;">SEND COUNT TO BUS</span>
        </div>
      </div>
      <div class="pm-reg-label">MATCH MASK</div>
      <div class="pm-levers-row" id="pm2-mask-row"></div>
      <div class="pm-val" id="pm2-mask-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">PATTERN</div>
      <div class="pm-levers-row" id="pm2-match-row"></div>
      <div class="pm-val" id="pm2-match-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">REWRITE MASK <span style="font-size:7px;">(which bits change)</span></div>
      <div class="pm-levers-row" id="pm2-changemask-row"></div>
      <div class="pm-val" id="pm2-changemask-val">0 / 0x00</div>
      <div class="pm-reg-label" style="margin-top:6px;">REWRITE VALUE <span style="font-size:7px;">(new bit values)</span></div>
      <div class="pm-levers-row" id="pm2-changeval-row"></div>
      <div class="pm-val" id="pm2-changeval-val">0 / 0x00</div>
      </div>
    </div>

    <!-- Threshold Gate 1 -->
    <div class="sb-section sb-sec-tg sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Threshold Gate 1</div>
      <div class="sb-body">
      <div style="display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap;">
        <button class="pm-toggle-btn pm-destr-off" id="tg1-enable-btn" data-action="toggleTG1Enabled" style="flex:none;">TURN ON</button>
        <button class="pm-toggle-btn pm-destr-off" id="tg1-destr-btn" data-action="toggleTG1Destructive" style="flex:none;">OUTFLOW: COPY</button>
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
        <div class="pm-count" id="tg1-count">matches: 0</div>
        <button class="pm-clr-btn" data-action="clearTG1Flag">CLEAR</button>
        <div style="display:flex;gap:3px;margin-left:4px;">
          <button class="pm-clr-btn" data-action="sendTG1MatchCountToBus" data-arg="a" title="Send TG1 match count to Bus A">→A</button>
          <button class="pm-clr-btn" data-action="sendTG1MatchCountToBus" data-arg="b" title="Send TG1 match count to Bus B">→B</button>
          <button class="pm-clr-btn" data-action="sendTG1MatchCountToBus" data-arg="c" title="Send TG1 match count to Bus C">→C</button>
          <button class="pm-clr-btn" data-action="sendTG1MatchCountToBus" data-arg="d" title="Send TG1 match count to Bus D">→D</button>
        </div>
      </div>
      <div class="pm-reg-label">COMPARISON MODE</div>
      <div id="tg1-mode-sel" style="display:flex;gap:3px;margin-bottom:8px;">
        <button class="tg-mode-btn active" data-mode="gt" data-action="setTG1Mode" data-arg="gt">GT (&gt;)</button>
        <button class="tg-mode-btn" data-mode="lt" data-action="setTG1Mode" data-arg="lt">LT (&lt;)</button>
        <button class="tg-mode-btn" data-mode="gte" data-action="setTG1Mode" data-arg="gte">GTE (≥)</button>
        <button class="tg-mode-btn" data-mode="lte" data-action="setTG1Mode" data-arg="lte">LTE (≤)</button>
      </div>
      <div class="pm-reg-label">THRESHOLD VALUE</div>
      <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
        <input type="number" id="tg1-threshold-input" min="0" max="65535" value="0"
          class="mem-autoinc-input" style="width:80px;"
          oninput="setTG1Threshold(this.value)">
      </div>
      <div style="display:flex;gap:3px;margin-bottom:6px;">

      </div>
      <div class="pm-val" id="tg1-threshold-display">0 / 0x0000 (>)</div>
      <div style="margin-top:8px;">
        <button class="pm-toggle-btn pm-destr-off" id="tg1-clamp-btn" data-action="toggleTG1Clamp" style="width:100%;margin-bottom:5px;">CLAMP: OFF</button>
        <div id="tg1-clamp-row" style="display:none;">
          <div class="pm-reg-label">CLAMP VALUE (matched words rewritten to this)</div>
          <input type="number" id="tg1-clamp-input" min="0" max="65535" value="0"
            class="mem-autoinc-input" style="width:80px;"
            oninput="setTG1ClampValue(this.value)">
        </div>
      </div>
      </div>
    </div>

    <!-- Threshold Gate 2 -->
    <div class="sb-section sb-sec-tg sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Threshold Gate 2</div>
      <div class="sb-body">
      <div style="display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap;">
        <button class="pm-toggle-btn pm-destr-off" id="tg2-cascade-btn" data-action="toggleTG2CascadeMode" style="flex:1;min-width:140px;">MODE: STANDALONE</button>
        <button class="pm-toggle-btn pm-destr-off" id="tg2-enable-btn" data-action="toggleTG2Enabled" style="flex:none;">TURN ON</button>
        <button class="pm-toggle-btn pm-destr-off" id="tg2-destr-btn" data-action="toggleTG2Destructive" style="flex:none;">OUTFLOW: COPY</button>
      </div>
      <div style="font-size:8px;color:#7ab;margin-bottom:6px;line-height:1.4;" id="tg2-cascade-hint">
        STANDALONE: TG2 reads Big Loop independently.<br>
        CASCADE: TG2 evaluates TG1's matched words — outputs on TG2-Match / TG2-Reject bus sources.
      </div>
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;">
        <div class="pm-count" id="tg2-count">matches: 0</div>
        <div class="pm-count" id="tg2-reject-count" style="color:#f87;display:none;">rejects: 0</div>
        <button class="pm-clr-btn" data-action="clearTG2Flag">CLEAR</button>
        <div style="display:flex;gap:3px;margin-left:4px;">
          <button class="pm-clr-btn" data-action="sendTG2MatchCountToBus" data-arg="a" title="Send TG2 match count to Bus A">→A</button>
          <button class="pm-clr-btn" data-action="sendTG2MatchCountToBus" data-arg="b" title="Send TG2 match count to Bus B">→B</button>
          <button class="pm-clr-btn" data-action="sendTG2MatchCountToBus" data-arg="c" title="Send TG2 match count to Bus C">→C</button>
          <button class="pm-clr-btn" data-action="sendTG2MatchCountToBus" data-arg="d" title="Send TG2 match count to Bus D">→D</button>
        </div>
      </div>
      <div class="pm-reg-label">COMPARISON MODE</div>
      <div id="tg2-mode-sel" style="display:flex;gap:3px;margin-bottom:8px;">
        <button class="tg-mode-btn active" data-mode="gt" data-action="setTG2Mode" data-arg="gt">GT (&gt;)</button>
        <button class="tg-mode-btn" data-mode="lt" data-action="setTG2Mode" data-arg="lt">LT (&lt;)</button>
        <button class="tg-mode-btn" data-mode="gte" data-action="setTG2Mode" data-arg="gte">GTE (≥)</button>
        <button class="tg-mode-btn" data-mode="lte" data-action="setTG2Mode" data-arg="lte">LTE (≤)</button>
      </div>
      <div class="pm-reg-label">THRESHOLD VALUE</div>
      <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
        <input type="number" id="tg2-threshold-input" min="0" max="65535" value="0"
          class="mem-autoinc-input" style="width:80px;"
          oninput="setTG2Threshold(this.value)">
      </div>
      <div style="display:flex;gap:3px;margin-bottom:6px;">

      </div>
      <div class="pm-val" id="tg2-threshold-display">0 / 0x0000 (>)</div>
      <div style="margin-top:8px;">
        <button class="pm-toggle-btn pm-destr-off" id="tg2-clamp-btn" data-action="toggleTG2Clamp" style="width:100%;margin-bottom:5px;">CLAMP: OFF</button>
        <div id="tg2-clamp-row" style="display:none;">
          <div class="pm-reg-label">CLAMP VALUE (matched words rewritten to this)</div>
          <input type="number" id="tg2-clamp-input" min="0" max="65535" value="0"
            class="mem-autoinc-input" style="width:80px;"
            oninput="setTG2ClampValue(this.value)">
        </div>
      </div>
      </div>
    </div>

      </div>
    </div>

    <!-- Memory Slots -->
    <div class="sb-section sb-sec-mem sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Memory Slots</div>
      <div class="sb-body">

      <!-- Write to slots toggle -->
      <div class="mem-mode-row">
        <button class="mem-mode-btn" id="mem-write-slots-btn" data-action="toggleWriteToSlots">WRITE TO SLOTS: OFF</button>
        <button class="mem-mode-btn" id="mem-addr-read-btn" data-action="toggleAddrRead" title="First 3 bits of incoming word determine destination slot address">ADDR-READ: OFF</button>
      </div>

      <!-- Destructive read toggle -->
      <button class="mem-destr-btn destr-off" id="mem-destr-btn" data-action="toggleDestructive" style="width:auto;">TURN DESTRUCT ON</button>

      <!-- Auto-increment -->
      <div class="mem-autoinc-row">
        <button class="mem-destr-btn destr-off" id="mem-autoinc-btn" data-action="toggleAutoInc" style="margin:0;flex:1;">TURN AUTO-INC ON</button>
        <div class="mem-autoinc-start-wrap">
          <span class="lsel-label" style="margin:0;font-size:8px;">START</span>
          <input type="number" id="mem-autoinc-start" min="0" max="15" value="0"
            class="mem-autoinc-input"
            oninput="setAutoIncStart(this.value)">
        </div>
      </div>

      <!-- Batch write -->
      <button class="mem-destr-btn destr-off" id="mem-batch-btn" data-action="memBatchWrite" style="width:auto;">BATCH WRITE ALL</button>

      <!-- 4-bit address selector -->
      <div class="mem-addr-row">
        <span class="lsel-label" style="margin:0;">ADDR</span>
        <div class="mem-addr-switches">
          <div class="mem-addr-wrap" id="maddr-3" data-action="flipMemAddr" data-arg="3">
            <div class="mem-addr-pip"></div>
            <div class="mem-addr-slot"><div class="mem-addr-arm"></div></div>
            <div class="mem-addr-lbl">b3</div>
          </div>
          <div class="mem-addr-wrap" id="maddr-2" data-action="flipMemAddr" data-arg="2">
            <div class="mem-addr-pip"></div>
            <div class="mem-addr-slot"><div class="mem-addr-arm"></div></div>
            <div class="mem-addr-lbl">b2</div>
          </div>
          <div class="mem-addr-wrap" id="maddr-1" data-action="flipMemAddr" data-arg="1">
            <div class="mem-addr-pip"></div>
            <div class="mem-addr-slot"><div class="mem-addr-arm"></div></div>
            <div class="mem-addr-lbl">b1</div>
          </div>
          <div class="mem-addr-wrap" id="maddr-0" data-action="flipMemAddr" data-arg="0">
            <div class="mem-addr-pip"></div>
            <div class="mem-addr-slot"><div class="mem-addr-arm"></div></div>
            <div class="mem-addr-lbl">b0</div>
          </div>
        </div>
        <div class="mem-addr-val">→ <span id="mem-addr-display">0</span></div>
        <button class="pm-clr-btn" data-action="clearAllMemSlots" style="margin-left:6px;">CLEAR ALL</button>
      </div>

      <!-- 16 slot display -->
      <div class="mem-slots-grid" id="mem-slots-grid">
        <!-- built by JS -->
      </div>
      </div>
    </div>


    <!-- Files -->
    <div class="sb-section sb-sec-files sb-collapsed">
      <div class="sb-title" style="color:var(--c-memory);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Files</div>
      <div class="sb-body">

        <!-- Column headers for sort -->
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <span id="files-count" style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;flex:0 0 auto;margin-right:4px;">/local</span>
          <button id="files-sort-name-btn" data-action="filesSortBy" data-arg="name" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-dim);cursor:pointer;padding:0 4px 0 0;flex:1;text-align:left;">NAME ▲</button>
          <button id="files-sort-time-btn" data-action="filesSortBy" data-arg="time" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:0;text-align:right;">SAVED</button>
        </div>

        <!-- File list -->
        <div id="files-local-list" style="min-height:20px;margin-bottom:6px;">
          <div style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;">No files saved.</div>
        </div>

        <!-- Load setup warning — always visible -->
        <div style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;line-height:1.5;margin-bottom:6px;border-left:2px solid var(--border3);padding-left:5px;">
          To load: Memory loop running · Write to Slots on · Auto-Inc from slot 0
        </div>

        <!-- Action buttons -->
        <div class="sb-row-mb">
          <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="filesShowNewFile">NEW FILE</button>
          <button class="pm-toggle-btn pm-destr-off sb-action-half" id="files-load-btn" data-action="filesLoadSelected" disabled>LOAD</button>
        </div>

        <!-- SEND button -->
        <div style="margin-bottom:6px;">
          <button class="pm-toggle-btn pm-destr-off" id="files-send-btn" data-action="ftpShowSendDialog" style="width:100%;font-size:8px;" disabled>SEND TO PEER</button>
        </div>

        <!-- Archive buttons -->
        <div class="sb-row-mb">
          <button class="pm-toggle-btn pm-destr-off sb-action-sm" data-action="filesExportArchive">EXPORT .l21x</button>
          <button class="pm-toggle-btn pm-destr-off sb-action-sm" data-action="filesImportArchivePicker">IMPORT .l21x</button>
          <input type="file" id="files-import-input" accept=".l21x" style="display:none;" onchange="filesImportArchiveFile(this)">
        </div>

        <!-- FTP Send dialog -->
        <div id="ftp-send-dialog" style="display:none;margin-bottom:6px;border:1px solid var(--c-memory);padding:6px 7px;">
          <div style="font-size:8px;letter-spacing:1px;color:var(--c-memory);font-weight:bold;margin-bottom:4px;">SEND FILE TO PEER</div>
          <div id="ftp-send-filename" style="font-size:9px;color:var(--fg);letter-spacing:1px;margin-bottom:5px;font-weight:bold;"></div>
          <div style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-bottom:3px;">Select recipient:</div>
          <div id="ftp-peer-sel" style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;min-height:22px;"></div>
          <div class="sb-row">
            <button class="pm-toggle-btn pm-destr-on sb-action-half" id="ftp-confirm-btn" data-action="ftpConfirmSend" disabled>CONFIRM SEND</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="ftpHideSendDialog">CANCEL</button>
          </div>
        </div>

        <!-- FTP Inbound panel -->
        <div id="ftp-inbound-panel" style="display:none;margin-bottom:6px;border:1px solid #44aaff;padding:6px 7px;">
          <div style="font-size:8px;letter-spacing:1px;color:#44aaff;font-weight:bold;margin-bottom:4px;">INCOMING FILE</div>
          <div id="ftp-inbound-label" style="font-size:8px;color:var(--fg);letter-spacing:1px;margin-bottom:6px;line-height:1.5;"></div>
          <div id="ftp-overwrite-panel" style="display:none;border:1px solid #ee4444;padding:5px 6px;margin-bottom:6px;">
            <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">FOLDER FULL — choose file to replace:</div>
            <div id="ftp-overwrite-sel" style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px;"></div>
            <div class="sb-row">
              <button class="pm-toggle-btn pm-destr-on sb-action-half" id="ftp-overwrite-confirm-btn" data-action="ftpConfirmOverwrite" disabled>REPLACE &amp; ACCEPT</button>
              <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="ftpDecline">DECLINE</button>
            </div>
          </div>
          <div class="sb-row" id="ftp-accept-decline-btns">
            <button class="pm-toggle-btn pm-destr-on" data-action="ftpAccept" style="flex:1;font-size:8px;background:#44aaff;border-color:#44aaff;color:#fff;">ACCEPT</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="ftpDecline">DECLINE</button>
          </div>
        </div>

        <!-- New File dialog -->
        <div id="files-newfile-dialog" class="sb-info-box">
          <div class="sb-label">FILE NAME (A–Z 0–9 - _ · max 16)</div>
          <input type="text" id="files-save-name" maxlength="16"
            style="width:100%;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:3px 5px;letter-spacing:1px;margin-bottom:4px;box-sizing:border-box;"
            placeholder="MY-SNAPSHOT"
            oninput="this.value=this.value.replace(/[^A-Za-z0-9_-]/g,'').toUpperCase()"
            onkeydown="if(event.key==='Enter')filesSaveNameConfirm()">
          <!-- Overwrite confirm — shown inline if collision -->
          <div id="files-overwrite-dialog" class="sb-error-sm">
            <div style="font-size:8px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="files-overwrite-name" style="font-weight:bold;"></span>?</div>
            <div class="sb-row">
              <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="filesOverwriteConfirm">OVERWRITE</button>
              <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="filesOverwriteCancel">CANCEL</button>
            </div>
          </div>
          <div class="sb-row">
            <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="filesSaveNameConfirm">SAVE</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="filesHideNewFile">CANCEL</button>
          </div>
        </div>

        <!-- Armed / waiting for Batch Write All -->
        <div id="files-armed-panel" style="display:none;margin-bottom:6px;border:1px solid var(--c-memory);padding:6px 7px;">
          <div style="font-size:8px;letter-spacing:1px;color:var(--c-memory);font-weight:bold;margin-bottom:4px;">ARMED — WAITING FOR DATA</div>
          <div id="files-armed-label" style="font-size:8px;color:var(--fg-dim);margin-bottom:4px;letter-spacing:1px;"></div>
          <div id="files-armed-progress" style="font-size:8px;color:var(--fg);margin-bottom:4px;letter-spacing:1px;">Receiving… 0 / 16 words</div>
          <!-- Partial save — shown when stream stops early -->
          <div id="files-partial-panel" style="display:none;margin-bottom:4px;">
            <div id="files-partial-label" style="font-size:8px;color:#ffaa44;margin-bottom:4px;letter-spacing:1px;"></div>
            <div class="sb-row">
              <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="filesSavePartial">SAVE PARTIAL</button>
              <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="filesCancelSave">CANCEL</button>
            </div>
          </div>
          <button class="pm-toggle-btn pm-destr-off" id="files-cancel-save-btn" data-action="filesCancelSave" style="width:100%;font-size:8px;">CANCEL SAVE</button>
        </div>

        <!-- Delete confirmation -->
        <div id="files-delete-dialog" class="sb-error">
          <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">DELETE <span id="files-delete-name" style="font-weight:bold;"></span>?</div>
          <div class="sb-row">
            <button class="pm-toggle-btn pm-destr-on sb-input-error" data-action="filesDeleteConfirm">CONFIRM DELETE</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="filesDeleteCancel">CANCEL</button>
          </div>
        </div>

        <div id="files-status" class="sb-status"></div>
      </div>
    </div>

    <!-- Scripts Group -->
    <div class="sb-section sb-scripts-group sb-scripts-collapsed" id="sb-scripts-group">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleScriptsGroup" title="Collapse/expand">▼</button>Scripts</div>
      <div class="sb-scripts-group-body">
        <!-- Skins sub-section -->
        <div class="sb-section sb-sec-skins sb-collapsed" id="sb-sec-skins">
          <div class="sb-title" style="color:var(--c-skins);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Skins</div>
          <div class="sb-body">
            <!-- List view (default) -->
            <div id="scripts-skins-list-view">
              <div style="display:flex;align-items:center;margin-bottom:2px;">
                <span id="scripts-skins-count" style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;flex:0 0 auto;margin-right:4px;">0 / 16</span>
                <button id="scripts-skins-sort-name" data-action="scriptsSortBy" data-arg="skins" data-arg2="name" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-dim);cursor:pointer;padding:0 4px 0 0;flex:1;text-align:left;">NAME ▲</button>
                <button id="scripts-skins-sort-time" data-action="scriptsSortBy" data-arg="skins" data-arg2="time" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:0;text-align:right;">MODIFIED</button>
              </div>
              <div id="scripts-skins-list" style="min-height:20px;margin-bottom:6px;"></div>
              <div class="sb-row-mb">
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsNewScript" data-arg="skins">NEW SCRIPT</button>
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsUploadPicker" data-arg="skins">UPLOAD</button>
                <input type="file" id="scripts-skins-upload-input" accept=".l21skin" style="display:none;" onchange="scriptsUploadFile('skins', this)">
              </div>
              <!-- Upload collision dialog -->
              <div id="scripts-skins-collision-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-skins-collision-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsUploadOverwrite" data-arg="skins">OVERWRITE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadRename" data-arg="skins">RENAME</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadCancel" data-arg="skins">CANCEL</button>
                </div>
              </div>
              <!-- Naming dialog -->
              <div id="scripts-skins-naming-dialog" class="sb-info-box">
                <div class="sb-label">SCRIPT NAME (A–Z 0–9 - _ · max 16)</div>
                <input type="text" id="scripts-skins-name-input" maxlength="16"
                  style="width:100%;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:3px 5px;letter-spacing:1px;margin-bottom:4px;box-sizing:border-box;"
                  placeholder="MY-SKIN"
                  oninput="this.value=this.value.replace(/[^A-Za-z0-9_-]/g,'').toUpperCase()"
                  onkeydown="if(event.key==='Enter')scriptsSaveNameConfirm('skins')">
                <div id="scripts-skins-overwrite-dialog" class="sb-error-sm">
                  <div style="font-size:8px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-skins-overwrite-name" style="font-weight:bold;"></span>?</div>
                  <div class="sb-row">
                    <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsOverwriteConfirm" data-arg="skins">OVERWRITE</button>
                    <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsOverwriteCancel" data-arg="skins">CANCEL</button>
                  </div>
                </div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsSaveNameConfirm" data-arg="skins">SAVE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsHideNewScript" data-arg="skins">CANCEL</button>
                </div>
              </div>
              <!-- Delete dialog -->
              <div id="scripts-skins-delete-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">DELETE <span id="scripts-skins-delete-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input-error" data-action="scriptsDeleteConfirm" data-arg="skins">CONFIRM DELETE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsDeleteCancel" data-arg="skins">CANCEL</button>
                </div>
              </div>
              <div id="scripts-skins-status" class="sb-status"></div>
            </div>
            <!-- Editor view (navigate-into, initially hidden) -->
            <div id="scripts-skins-editor-view" style="display:none;">
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                <button class="pm-toggle-btn pm-destr-off" data-action="scriptsHideEditor" data-arg="skins" style="font-size:8px;padding:2px 6px;">← BACK</button>
                <span id="scripts-skins-editor-name" style="font-family:var(--font);font-size:9px;letter-spacing:1px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
                <span id="scripts-skins-lock-icon" style="display:none;font-size:7px;color:var(--fg-dim);letter-spacing:1px;">■ BUILT-IN</span>
              </div>
              <textarea id="scripts-skins-editor-textarea"
                style="width:100%;box-sizing:border-box;height:140px;resize:vertical;font-family:var(--font);font-size:11px;background:var(--el-bg);border:1px solid var(--border2);color:var(--fg);padding:6px;letter-spacing:0.5px;line-height:1.5;"
                oninput="scriptsEditorUpdateCharCount('skins')"
                spellcheck="false"></textarea>
              <div style="font-size:7px;color:var(--fg-dim);letter-spacing:1px;margin:2px 0 6px;">
                <span id="scripts-skins-char-count">0</span> / 50,000
              </div>
              <div id="scripts-skins-editor-custom-btns">
                <div style="display:flex;gap:4px;margin-bottom:4px;">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorSaveDraft" data-arg="skins">SAVE DRAFT</button>
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsEditorSaveAndVerify" data-arg="skins">SAVE &amp; VERIFY</button>
                </div>
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="skins">DOWNLOAD</button>
                  <button class="pm-toggle-btn pm-destr-off" id="scripts-skins-editor-delete-btn" data-action="scriptsEditorRequestDelete" data-arg="skins" style="flex:1;font-size:8px;color:#ee4444;border-color:#ee4444;">DELETE</button>
                </div>
              </div>
              <div id="scripts-skins-editor-readonly-btns" style="display:none;">
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="skins">DOWNLOAD</button>
                </div>
              </div>
              <div id="scripts-skins-verify-bar" style="display:none;height:4px;background:var(--border2);margin-bottom:6px;border-radius:2px;overflow:hidden;">
                <div id="scripts-skins-verify-fill" style="height:100%;width:0%;background:var(--c-skins);transition:width 0.15s;"></div>
              </div>
              <div id="scripts-skins-editor-status" class="sb-status"></div>
            </div>
          </div>
        </div>
        <!-- CBX Local sub-section -->
        <div class="sb-section sb-sec-cbx-local sb-collapsed" id="sb-sec-cbx-local">
          <div class="sb-title" style="color:var(--c-chall);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>CBX Local</div>
          <div class="sb-body">
            <div id="scripts-cbxLocal-list-view">
              <div style="display:flex;align-items:center;margin-bottom:2px;">
                <span id="scripts-cbxLocal-count" style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;flex:0 0 auto;margin-right:4px;">0 / 16</span>
                <button id="scripts-cbxLocal-sort-name" data-action="scriptsSortBy" data-arg="cbxLocal" data-arg2="name" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-dim);cursor:pointer;padding:0 4px 0 0;flex:1;text-align:left;">NAME ▲</button>
                <button id="scripts-cbxLocal-sort-time" data-action="scriptsSortBy" data-arg="cbxLocal" data-arg2="time" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:0;text-align:right;">MODIFIED</button>
              </div>
              <div id="scripts-cbxLocal-list" style="min-height:20px;margin-bottom:6px;"></div>
              <div class="sb-row-mb">
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsNewScript" data-arg="cbxLocal">NEW SCRIPT</button>
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsUploadPicker" data-arg="cbxLocal">UPLOAD</button>
                <input type="file" id="scripts-cbxLocal-upload-input" accept=".l21cbx" style="display:none;" onchange="scriptsUploadFile('cbxLocal', this)">
              </div>
              <div id="scripts-cbxLocal-collision-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-cbxLocal-collision-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsUploadOverwrite" data-arg="cbxLocal">OVERWRITE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadRename" data-arg="cbxLocal">RENAME</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadCancel" data-arg="cbxLocal">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxLocal-naming-dialog" class="sb-info-box">
                <div class="sb-label">SCRIPT NAME (A–Z 0–9 - _ · max 16)</div>
                <input type="text" id="scripts-cbxLocal-name-input" maxlength="16" style="width:100%;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:3px 5px;letter-spacing:1px;margin-bottom:4px;box-sizing:border-box;" placeholder="MY-CHALLENGE" oninput="this.value=this.value.replace(/[^A-Za-z0-9_-]/g,'').toUpperCase()" onkeydown="if(event.key==='Enter')scriptsSaveNameConfirm('cbxLocal')">
                <div id="scripts-cbxLocal-overwrite-dialog" class="sb-error-sm">
                  <div style="font-size:8px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-cbxLocal-overwrite-name" style="font-weight:bold;"></span>?</div>
                  <div class="sb-row">
                    <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsOverwriteConfirm" data-arg="cbxLocal">OVERWRITE</button>
                    <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsOverwriteCancel" data-arg="cbxLocal">CANCEL</button>
                  </div>
                </div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsSaveNameConfirm" data-arg="cbxLocal">SAVE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsHideNewScript" data-arg="cbxLocal">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxLocal-delete-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">DELETE <span id="scripts-cbxLocal-delete-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input-error" data-action="scriptsDeleteConfirm" data-arg="cbxLocal">CONFIRM DELETE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsDeleteCancel" data-arg="cbxLocal">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxLocal-status" class="sb-status"></div>
            </div>
            <div id="scripts-cbxLocal-editor-view" style="display:none;">
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                <button class="pm-toggle-btn pm-destr-off" data-action="scriptsHideEditor" data-arg="cbxLocal" style="font-size:8px;padding:2px 6px;">← BACK</button>
                <span id="scripts-cbxLocal-editor-name" style="font-family:var(--font);font-size:9px;letter-spacing:1px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
                <span id="scripts-cbxLocal-lock-icon" style="display:none;font-size:7px;color:var(--fg-dim);letter-spacing:1px;">■ BUILT-IN</span>
              </div>
              <textarea id="scripts-cbxLocal-editor-textarea" style="width:100%;box-sizing:border-box;height:140px;resize:vertical;font-family:var(--font);font-size:11px;background:var(--el-bg);border:1px solid var(--border2);color:var(--fg);padding:6px;letter-spacing:0.5px;line-height:1.5;" oninput="scriptsEditorUpdateCharCount('cbxLocal')" spellcheck="false"></textarea>
              <div style="font-size:7px;color:var(--fg-dim);letter-spacing:1px;margin:2px 0 6px;"><span id="scripts-cbxLocal-char-count">0</span> / 50,000</div>
              <div id="scripts-cbxLocal-editor-custom-btns">
                <div style="display:flex;gap:4px;margin-bottom:4px;">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorSaveDraft" data-arg="cbxLocal">SAVE DRAFT</button>
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsEditorSaveAndVerify" data-arg="cbxLocal">SAVE &amp; VERIFY</button>
                </div>
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="cbxLocal">DOWNLOAD</button>
                  <button class="pm-toggle-btn pm-destr-off" data-action="scriptsEditorRequestDelete" data-arg="cbxLocal" style="flex:1;font-size:8px;color:#ee4444;border-color:#ee4444;">DELETE</button>
                </div>
              </div>
              <div id="scripts-cbxLocal-editor-readonly-btns" style="display:none;">
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="cbxLocal">DOWNLOAD</button>
                </div>
              </div>
              <div id="scripts-cbxLocal-verify-bar" style="display:none;height:4px;background:var(--border2);margin-bottom:6px;border-radius:2px;overflow:hidden;">
                <div id="scripts-cbxLocal-verify-fill" style="height:100%;width:0%;background:var(--c-chall);transition:width 0.15s;"></div>
              </div>
              <div id="scripts-cbxLocal-editor-status" class="sb-status"></div>
            </div>
          </div>
        </div>
        <!-- CBX Networked sub-section -->
        <div class="sb-section sb-sec-cbx-net sb-collapsed" id="sb-sec-cbx-net">
          <div class="sb-title" style="color:var(--c-net);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>CBX Networked</div>
          <div class="sb-body">
            <div id="scripts-cbxNet-list-view">
              <div style="display:flex;align-items:center;margin-bottom:2px;">
                <span id="scripts-cbxNet-count" style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;flex:0 0 auto;margin-right:4px;">0 / 16</span>
                <button id="scripts-cbxNet-sort-name" data-action="scriptsSortBy" data-arg="cbxNet" data-arg2="name" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-dim);cursor:pointer;padding:0 4px 0 0;flex:1;text-align:left;">NAME ▲</button>
                <button id="scripts-cbxNet-sort-time" data-action="scriptsSortBy" data-arg="cbxNet" data-arg2="time" style="font-family:var(--font);font-size:7px;letter-spacing:1px;background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:0;text-align:right;">MODIFIED</button>
              </div>
              <div id="scripts-cbxNet-list" style="min-height:20px;margin-bottom:6px;"></div>
              <div class="sb-row-mb">
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsNewScript" data-arg="cbxNet">NEW SCRIPT</button>
                <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsUploadPicker" data-arg="cbxNet">UPLOAD</button>
                <input type="file" id="scripts-cbxNet-upload-input" accept=".l21cbx" style="display:none;" onchange="scriptsUploadFile('cbxNet', this)">
              </div>
              <div id="scripts-cbxNet-collision-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-cbxNet-collision-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsUploadOverwrite" data-arg="cbxNet">OVERWRITE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadRename" data-arg="cbxNet">RENAME</button>
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsUploadCancel" data-arg="cbxNet">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxNet-naming-dialog" class="sb-info-box">
                <div class="sb-label">SCRIPT NAME (A–Z 0–9 - _ · max 16)</div>
                <input type="text" id="scripts-cbxNet-name-input" maxlength="16" style="width:100%;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:3px 5px;letter-spacing:1px;margin-bottom:4px;box-sizing:border-box;" placeholder="MY-NET-CHALL" oninput="this.value=this.value.replace(/[^A-Za-z0-9_-]/g,'').toUpperCase()" onkeydown="if(event.key==='Enter')scriptsSaveNameConfirm('cbxNet')">
                <div id="scripts-cbxNet-overwrite-dialog" class="sb-error-sm">
                  <div style="font-size:8px;color:#ee4444;margin-bottom:4px;">OVERWRITE <span id="scripts-cbxNet-overwrite-name" style="font-weight:bold;"></span>?</div>
                  <div class="sb-row">
                    <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsOverwriteConfirm" data-arg="cbxNet">OVERWRITE</button>
                    <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsOverwriteCancel" data-arg="cbxNet">CANCEL</button>
                  </div>
                </div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-action-half" data-action="scriptsSaveNameConfirm" data-arg="cbxNet">SAVE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsHideNewScript" data-arg="cbxNet">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxNet-delete-dialog" class="sb-error">
                <div style="font-size:8px;letter-spacing:1px;color:#ee4444;margin-bottom:4px;">DELETE <span id="scripts-cbxNet-delete-name" style="font-weight:bold;"></span>?</div>
                <div class="sb-row">
                  <button class="pm-toggle-btn pm-destr-on sb-input-error" data-action="scriptsDeleteConfirm" data-arg="cbxNet">CONFIRM DELETE</button>
                  <button class="pm-toggle-btn pm-destr-off sb-action-half" data-action="scriptsDeleteCancel" data-arg="cbxNet">CANCEL</button>
                </div>
              </div>
              <div id="scripts-cbxNet-status" class="sb-status"></div>
            </div>
            <div id="scripts-cbxNet-editor-view" style="display:none;">
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                <button class="pm-toggle-btn pm-destr-off" data-action="scriptsHideEditor" data-arg="cbxNet" style="font-size:8px;padding:2px 6px;">← BACK</button>
                <span id="scripts-cbxNet-editor-name" style="font-family:var(--font);font-size:9px;letter-spacing:1px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
                <span id="scripts-cbxNet-lock-icon" style="display:none;font-size:7px;color:var(--fg-dim);letter-spacing:1px;">■ BUILT-IN</span>
              </div>
              <textarea id="scripts-cbxNet-editor-textarea" style="width:100%;box-sizing:border-box;height:140px;resize:vertical;font-family:var(--font);font-size:11px;background:var(--el-bg);border:1px solid var(--border2);color:var(--fg);padding:6px;letter-spacing:0.5px;line-height:1.5;" oninput="scriptsEditorUpdateCharCount('cbxNet')" spellcheck="false"></textarea>
              <div style="font-size:7px;color:var(--fg-dim);letter-spacing:1px;margin:2px 0 6px;"><span id="scripts-cbxNet-char-count">0</span> / 50,000</div>
              <div id="scripts-cbxNet-editor-custom-btns">
                <div style="display:flex;gap:4px;margin-bottom:4px;">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorSaveDraft" data-arg="cbxNet">SAVE DRAFT</button>
                  <button class="pm-toggle-btn pm-destr-on sb-input" data-action="scriptsEditorSaveAndVerify" data-arg="cbxNet">SAVE &amp; VERIFY</button>
                </div>
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="cbxNet">DOWNLOAD</button>
                  <button class="pm-toggle-btn pm-destr-off" data-action="scriptsEditorRequestDelete" data-arg="cbxNet" style="flex:1;font-size:8px;color:#ee4444;border-color:#ee4444;">DELETE</button>
                </div>
              </div>
              <div id="scripts-cbxNet-editor-readonly-btns" style="display:none;">
                <div class="sb-row-mb">
                  <button class="pm-toggle-btn pm-destr-off sb-input" data-action="scriptsEditorDownload" data-arg="cbxNet">DOWNLOAD</button>
                </div>
              </div>
              <div id="scripts-cbxNet-verify-bar" style="display:none;height:4px;background:var(--border2);margin-bottom:6px;border-radius:2px;overflow:hidden;">
                <div id="scripts-cbxNet-verify-fill" style="height:100%;width:0%;background:var(--c-net);transition:width 0.15s;"></div>
              </div>
              <div id="scripts-cbxNet-editor-status" class="sb-status"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Chain & Net Group -->
    <div class="sb-section sb-chain-net-group sb-chain-net-collapsed" id="sb-chain-net-group">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleChainNetGroup" title="Collapse/expand">▼</button>Chain &amp; Net</div>
      <div class="sb-chain-net-group-body">

    <!-- P2P Connection -->
    <div class="sb-section sb-sec-net sb-collapsed">
      <div class="sb-title" style="color:var(--c-net);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>P2P Connection</div>
      <div class="sb-body">
        <div style="font-size:8px;color:var(--fg-dim);margin-bottom:6px;letter-spacing:1px;">
          YOUR ID: <span id="p2p-machine-id" style="color:var(--fg);font-weight:bold;">----</span>
        </div>
        <div style="font-size:8px;color:var(--fg-dim);margin-bottom:8px;line-height:1.4;">
          Step 1: One operator clicks CREATE OFFER, copies the text, sends it to the other.<br>
          Step 2: The other pastes it and clicks ACCEPT — an answer appears. Send it back.<br>
          Step 3: First operator pastes the answer and clicks ACCEPT. Connection opens.
        </div>

        <!-- PL — Left connection (Bus F) -->
        <div style="border:1px solid var(--bus-f-color);padding:6px 7px;margin-bottom:8px;">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
            <span style="font-size:9px;letter-spacing:2px;color:var(--bus-f-color);font-weight:bold;">PL LEFT</span>
            <span class="p2p-status disconnected" id="p2p-status-l">DISCONNECTED</span>
            <span class="p2p-latency" id="p2p-latency-l"></span>
          </div>
          <div id="p2p-peer-name-line-l" style="font-size:8px;color:var(--fg-dim);margin-bottom:4px;letter-spacing:1px;display:none;">
            PEER: <span id="p2p-peer-name-l" style="color:var(--bus-f-color);font-weight:bold;"></span>
          </div>
          <div style="margin-bottom:4px;">
            <button class="p2p-btn" id="p2p-create-offer-btn-l" data-action="p2pCreateOffer" data-arg="l">CREATE OFFER</button>
          </div>
          <div style="margin-bottom:4px;">
            <div class="pm-reg-label">YOUR OFFER / ANSWER</div>
            <textarea class="p2p-textarea" id="p2p-local-sdp-l" autocomplete="off" readonly placeholder="Click CREATE OFFER…" data-action="selfSelect"></textarea>
            <button class="p2p-btn" data-action="p2pCopyLocal" data-arg="l" style="margin-top:2px;">COPY</button>
          </div>
          <div style="margin-bottom:4px;">
            <div class="pm-reg-label">PASTE PEER'S TEXT HERE</div>
            <textarea class="p2p-textarea" id="p2p-remote-sdp-l" autocomplete="off" placeholder="Paste peer's text…"></textarea>
            <button class="p2p-btn" data-action="p2pAcceptRemote" data-arg="l">ACCEPT</button>
          </div>
          <button class="p2p-btn" data-action="p2pDisconnect" data-arg="l" style="border-color:#c02030;color:#c02030;margin-top:4px;">DISCONNECT</button>
          <div style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-top:5px;">
            BUF: <span id="p2p-buf-count-l" style="color:var(--bus-f-color);font-weight:bold;">0</span> words
          </div>
        </div>

        <!-- PR — Right connection (Bus G) -->
        <div style="border:1px solid var(--bus-g-color);padding:6px 7px;">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
            <span style="font-size:9px;letter-spacing:2px;color:var(--bus-g-color);font-weight:bold;">PR RIGHT</span>
            <span class="p2p-status disconnected" id="p2p-status-r">DISCONNECTED</span>
            <span class="p2p-latency" id="p2p-latency-r"></span>
          </div>
          <div id="p2p-peer-name-line-r" style="font-size:8px;color:var(--fg-dim);margin-bottom:4px;letter-spacing:1px;display:none;">
            PEER: <span id="p2p-peer-name-r" style="color:var(--bus-g-color);font-weight:bold;"></span>
          </div>
          <div style="margin-bottom:4px;">
            <button class="p2p-btn" id="p2p-create-offer-btn-r" data-action="p2pCreateOffer" data-arg="r" style="border-color:var(--bus-g-color);color:var(--bus-g-color);">CREATE OFFER</button>
          </div>
          <div style="margin-bottom:4px;">
            <div class="pm-reg-label">YOUR OFFER / ANSWER</div>
            <textarea class="p2p-textarea" id="p2p-local-sdp-r" autocomplete="off" readonly placeholder="Click CREATE OFFER…" data-action="selfSelect"></textarea>
            <button class="p2p-btn" data-action="p2pCopyLocal" data-arg="r" style="margin-top:2px;border-color:var(--bus-g-color);color:var(--bus-g-color);">COPY</button>
          </div>
          <div style="margin-bottom:4px;">
            <div class="pm-reg-label">PASTE PEER'S TEXT HERE</div>
            <textarea class="p2p-textarea" id="p2p-remote-sdp-r" autocomplete="off" placeholder="Paste peer's text…"></textarea>
            <button class="p2p-btn" data-action="p2pAcceptRemote" data-arg="r" style="border-color:var(--bus-g-color);color:var(--bus-g-color);">ACCEPT</button>
          </div>
          <button class="p2p-btn" data-action="p2pDisconnect" data-arg="r" style="border-color:#c02030;color:#c02030;margin-top:4px;">DISCONNECT</button>
          <div style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-top:5px;">
            BUF: <span id="p2p-buf-count-r" style="color:var(--bus-g-color);font-weight:bold;">0</span> words
          </div>
        </div>

      </div>
    </div>

    <!-- ══ NETWORKING ══ -->
    <div class="sb-section sb-sec-net sb-collapsed" id="chain-section">
      <div class="sb-title" style="color:var(--c-net);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Networking</div>
      <div class="sb-body">

        <!-- Topology summary -->
        <div style="margin-bottom:6px;">
          <div class="chain-topology-badge" id="chain-topology-badge">Scanning… <span id="chain-topo-text" style="color:var(--fg-dim);">connecting to neighbors</span></div>
          <button class="pm-toggle-btn pm-destr-off" data-action="chainScan" style="width:100%;margin-top:4px;" id="chain-scan-btn">⬡ SCAN NETWORK</button>
          <div id="chain-latency-display" style="margin-top:6px;font-size:8px;letter-spacing:1px;color:var(--fg-dim);">
            <div style="font-size:8px;letter-spacing:2px;color:var(--fg);margin-bottom:3px;text-transform:uppercase;">Latency</div>
            <div style="display:flex;gap:10px;">
              <span>◀ Left: <span id="chain-latency-l-val">—</span></span>
              <span>Right: <span id="chain-latency-r-val">—</span> ▶</span>
            </div>
          </div>
        </div>

        <!-- My Networks sub-section -->
        <div class="net-subsection">
          <div class="net-subsection-title" data-action="netToggleSubsection" data-arg="my-networks">
            MY NETWORKS <span id="net-my-count" style="color:var(--fg-dim);font-size:7px;"></span>
            <span class="net-subsection-caret">▶</span>
          </div>
          <div class="net-subsection-body" id="net-sub-my-nets">
            <div id="net-my-nets-list">
              <div class="chain-status-line">Not a member of any named network.</div>
            </div>
          </div>
        </div>

        <!-- Join Requests sub-section (hub only) -->
        <div class="net-subsection" id="net-requests-section" style="display:none;">
          <div class="net-subsection-title" data-action="netToggleSubsection" data-arg="requests">
            JOIN REQUESTS <span id="net-req-count" style="color:#c84020;font-size:7px;"></span>
            <span class="net-subsection-caret">▶</span>
          </div>
          <div class="net-subsection-body" id="net-sub-requests">
            <div id="net-requests-list"></div>
          </div>
        </div>

        <!-- Available Networks sub-section -->
        <div class="net-subsection">
          <div class="net-subsection-title" data-action="netToggleSubsection" data-arg="available">
            AVAILABLE NETWORKS
            <span class="net-subsection-caret">▶</span>
          </div>
          <div class="net-subsection-body" id="net-sub-available">
            <div id="net-available-list">
              <div class="chain-status-line">Run a scan to discover networks.</div>
            </div>
          </div>
        </div>

        <!-- Create Network sub-section -->
        <div class="net-subsection">
          <div class="net-subsection-title" data-action="netToggleSubsection" data-arg="create">
            CREATE NETWORK
            <span class="net-subsection-caret">▶</span>
          </div>
          <div class="net-subsection-body" id="net-sub-create">
            <div style="margin-bottom:5px;">
              <div class="pm-reg-label">NETWORK NAME (max 24 chars)</div>
              <input type="text" id="net-name-input" maxlength="24"
                placeholder="My Network…"
                style="width:100%;font-family:var(--font);font-size:9px;background:var(--el-bg);border:1px solid var(--border);color:var(--fg);padding:3px 5px;">
            </div>
            <div style="margin-bottom:5px;">
              <div class="pm-reg-label">INVITE MEMBERS (select from detected machines)</div>
              <div id="net-invite-list">
                <div class="chain-status-line">Run SCAN NETWORK to see available machines.</div>
              </div>
            </div>
            <button class="pm-toggle-btn pm-destr-on" data-action="netCreate" style="width:100%;">⬡ CREATE NETWORK</button>
            <div id="net-create-status" class="chain-status-line" style="margin-top:4px;"></div>
          </div>
        </div>

        <!-- Incoming invitation panel -->
        <div id="net-invitation-panel" style="display:none;border:1px solid var(--c-net);padding:6px 7px;margin-top:4px;">
          <div style="font-size:8px;letter-spacing:1px;color:var(--c-net);font-weight:bold;margin-bottom:4px;">NETWORK INVITATION</div>
          <div id="net-invitation-desc" style="font-size:8px;color:var(--fg);margin-bottom:6px;line-height:1.4;">—</div>
          <div class="sb-row">
            <button class="pm-toggle-btn pm-destr-on sb-action-sm" data-action="netAcceptInvitation">ACCEPT</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-sm" data-action="netDeclineInvitation">DECLINE</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Network Monitor -->
    <div class="sb-section sb-sec-netmon sb-collapsed">
      <div class="sb-title" style="color:var(--c-net);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Network Monitor</div>
      <div class="sb-body">

        <!-- ON/OFF toggle -->
        <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px;">
          <button class="pm-toggle-btn pm-destr-off sb-action-half" id="netmon-toggle-btn" data-action="netmonToggle">MONITOR: OFF</button>
          <button class="pm-toggle-btn pm-destr-off" id="netmon-clear-btn" data-action="netmonClear" style="font-size:7px;padding:2px 6px;">CLEAR</button>
        </div>

        <!-- Packet stream -->
        <div style="font-family:var(--font);font-size:8px;letter-spacing:1px;color:var(--fg-dim);margin-bottom:4px;">PACKET STREAM <span id="netmon-count" style="color:var(--fg-faint);"></span></div>
        <div id="netmon-stream" style="max-height:160px;overflow-y:auto;margin-bottom:6px;"></div>

        <!-- Detail / staging area -->
        <div id="netmon-detail" style="display:none;border:1px solid var(--c-net);padding:6px 7px;margin-bottom:6px;">
          <div style="display:flex;align-items:center;gap:4px;margin-bottom:4px;">
            <span id="netmon-detail-type" style="font-size:8px;letter-spacing:1px;color:var(--c-net);font-weight:bold;flex:1;"></span>
            <button class="pm-toggle-btn pm-destr-off" data-action="netmonCapture" style="font-size:7px;padding:1px 5px;">CAPTURE</button>
            <button class="pm-toggle-btn pm-destr-off" data-action="netmonCloseDetail" style="font-size:7px;padding:1px 5px;">✕</button>
          </div>
          <div id="netmon-detail-fields" style="font-size:8px;letter-spacing:1px;line-height:1.8;color:var(--fg);"></div>
        </div>

        <!-- Staging area -->
        <div id="netmon-staging" style="display:none;border:1px solid #ffaa44;padding:6px 7px;">
          <div style="font-size:8px;letter-spacing:1px;color:#ffaa44;font-weight:bold;margin-bottom:4px;">STAGED — EDIT &amp; INJECT</div>
          <div id="netmon-staging-fields" style="font-size:8px;letter-spacing:1px;line-height:1.8;"></div>
          <div style="display:flex;gap:4px;margin-top:6px;">
            <button class="pm-toggle-btn pm-destr-on sb-action-sm" data-action="netmonInject">INJECT</button>
            <button class="pm-toggle-btn pm-destr-off sb-action-sm" data-action="netmonDiscardStaged">DISCARD</button>
          </div>
          <div id="netmon-inject-status" style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-top:4px;min-height:12px;"></div>
        </div>

        <div style="font-size:7px;color:var(--fg-faint);letter-spacing:1px;margin-top:4px;line-height:1.5;">
          CBX challenge · chain sum · chat · last 20 packets
        </div>
      </div>
    </div>

      </div>
    </div>

    <!-- Chat (unified: P2P neighbors + network members) -->
    <div class="sb-section sb-sec-chat sb-collapsed">
      <div class="sb-title" style="color:var(--c-net);"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Chat</div>
      <div class="sb-body">
        <div id="chat-no-peers" class="chat-no-peers">No connections yet. Connect P2P neighbors to chat.</div>
        <div id="chat-ui" style="display:none;">
          <select class="chat-peer-select" id="chat-peer-select" onchange="chatSelectPeer(this.value)">
          </select>
          <div class="chat-log" id="chat-log"></div>
          <div class="chat-input-row">
            <input class="chat-input" id="chat-input" type="text" maxlength="200"
              placeholder="Type a message…"
              onkeydown="if(event.key==='Enter')chatSendMessage()">
            <button class="p2p-btn" data-action="chatSendMessage">SEND</button>
          </div>
          <div style="margin-top:5px;">
            <button class="pm-clr-btn" style="width:auto;" data-action="chatDownloadLog">↓ DOWNLOAD CHAT LOG</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Notifications -->
    <div class="sb-section sb-collapsed">
      <div class="sb-title"><button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">▼</button>Notifications</div>
      <div class="sb-body">
        <div class="notif-section" id="notif-loops-panel">
          <!-- built by JS -->
        </div>
        <div class="notif-chat-group" id="notif-files-group">
          <div class="notif-group-title" style="color:var(--c-memory);">Files</div>
          <div class="notif-trig-btns">
            <button class="notif-trig-btn" id="notif-file-offer-btn"    data-action="notifToggleFileOffer">FILE OFFER</button>
            <button class="notif-trig-btn" id="notif-file-received-btn" data-action="notifToggleFileReceived">FILE RECEIVED</button>
            <button class="notif-trig-btn" id="notif-file-declined-btn" data-action="notifToggleFileDeclined">FILE DECLINED</button>
          </div>
          <div class="notif-sound-row">
            <span class="notif-sound-label">Sound</span>
            <select class="notif-sound-select" id="notif-file-sound-select" onchange="notifSetFileSound(this.value)">
            </select>
            <button class="notif-preview-btn" data-action="notifPreviewSound" data-source-id="notif-file-sound-select">▶</button>
          </div>
        </div>
        <div class="notif-chat-group" id="notif-challenges-group">
          <div class="notif-group-title" style="color:#cc4488;">Challenges</div>
          <div style="margin-bottom:5px;display:flex;flex-wrap:wrap;gap:3px;">
            <button class="notif-trig-btn" id="notif-chall-invite-btn" data-action="notifToggleChallInvite">CHALLENGE INVITE</button>
            <button class="notif-trig-btn" id="notif-chall-start-btn" data-action="notifToggleChallStart">CHALLENGE START</button>
            <button class="notif-trig-btn" id="notif-chall-fail-btn" data-action="notifToggleChallFail">CHALLENGE FAIL</button>
            <button class="notif-trig-btn" id="notif-chall-win-btn" data-action="notifToggleChallWin">CHALLENGE WIN</button>
          </div>
          <div class="notif-sound-row">
            <span class="notif-sound-label">SOUND</span>
            <select class="notif-sound-select" id="notif-chall-sound-select" onchange="notifSetChallSound(this.value)">
              <!-- built by JS -->
            </select>
            <button class="notif-preview-btn" data-action="notifPreviewSound" data-source-id="notif-chall-sound-select">▶</button>
          </div>
        </div>
        <div class="notif-chat-group" id="notif-chat-group">
          <div class="notif-group-title" style="color:var(--bus-f-color);">Networking</div>
          <div style="margin-bottom:5px;display:flex;flex-wrap:wrap;gap:3px;">
            <button class="notif-trig-btn" id="notif-chat-btn" data-action="notifToggleChat">CHAT MESSAGE</button>
            <button class="notif-trig-btn" id="notif-net-invite-btn" data-action="notifToggleNetInvite">NETWORK INVITE</button>
            <button class="notif-trig-btn" id="notif-net-join-btn" data-action="notifToggleNetJoin">MEMBER JOINED</button>
            <button class="notif-trig-btn" id="notif-net-drop-btn" data-action="notifToggleNetDrop">MEMBER DROPPED</button>
          </div>
          <div class="notif-sound-row">
            <span class="notif-sound-label">SOUND</span>
            <select class="notif-sound-select" id="notif-chat-sound-select" onchange="notifSetChatSound(this.value)">
              <!-- built by JS -->
            </select>
            <button class="notif-preview-btn" data-action="notifPreviewSound" data-source-id="notif-chat-sound-select">▶</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Session Log -->
    <div class="sb-section sb-sec-log" style="padding:8px 11px;">
      <div class="sb-title">Session Log</div>
      <div style="display:flex;gap:5px;margin-bottom:5px;">
        <button class="log-ctrl-btn" id="logger-toggle-btn" data-action="loggerToggle">● BEGIN SESSION LOG</button>
        <button class="log-ctrl-btn log-dl-btn" id="logger-dl-btn" data-action="loggerDownload" disabled>↓ DOWNLOAD LOG</button>
      </div>
      <div class="log-status-line" id="logger-status">Log inactive</div>
      <div style="margin-top:8px;">
        <div style="font-size:9px;letter-spacing:2px;color:var(--fg);text-transform:uppercase;margin-bottom:4px;">Operator Notes</div>
        <textarea id="operator-notes"
          placeholder="Add session notes here before ending the log…"
          style="width:100%;box-sizing:border-box;min-height:80px;resize:vertical;
                 background:var(--panel2);color:var(--fg);border:1px solid var(--border2);
                 border-radius:3px;padding:6px 8px;font-family:monospace;font-size:11px;
                 line-height:1.5;outline:none;"></textarea>
      </div>
    </div>

    <!-- Status -->
    <div class="status-log">
      <div class="status-title">Status</div>
      <div class="status-line" id="log0"></div>
      <div class="status-line" id="log1"></div>
      <div class="status-line" id="log2"></div>
      <div class="status-line" id="log3"></div>
      <div class="status-line" id="log4"></div>
      <div class="status-line" id="log5"></div>
    </div>

  </div>
</div>

<script>
// ================================================================
//  LOOP 2.1 — Manual Flow Computer
//  https://loop2.computer
//
//  A browser-based simulator of a manual flow computer — a machine
//  where the human operator IS the program. There is no stored
//  program, no automatic branching, no hidden state. The operator
//  makes every routing, operational, and control-flow decision in
//  real time. Data moves at observable speeds through circular
//  storage loops, and every bit is visible at every moment.
//
//  The project started because building a computer in Minecraft
//  redstone was fun, and the question "what if you could actually
//  operate one of these?" led here. Loop 2.1 augments and
//  illuminates real computers — it offers a different vantage point
//  on computation, not a critique of modern computing.
//
//  Eight tenets define what Loop 2.1 is:
//
//    1. The Operator Is the Program — no stored program exists;
//       the human makes all decisions in real time.
//    2. Explicit State, No Black Boxes — all data visible at all
//       times; nothing happens invisibly.
//    3. Data as Physical Entity — data has position, velocity, and
//       trajectory; it is conserved and moves one bit per tick.
//    4. Circular Storage — memory is circular, not indexed; data
//       flows past read points continuously.
//    5. Manual Flow — the operator routes all data and triggers
//       all operations; flags inform, they do not control.
//    6. Bus as Programmable Structure — buses connect components
//       explicitly; routing is configurable and visible.
//    7. Computation as Craft — quality over speed, understanding
//       over efficiency; the operator is an artisan.
//    8. Operator-Scale Timing — the clock runs at human-observable
//       speeds; time is a resource for learning and for craft.
//
//  Single-file architecture: no build step, no framework, no npm,
//  no external dependencies beyond Google STUN servers for WebRTC.
//
//  Created by Shea Gunther. Code and technical writing by Claude
//  (Anthropic) under Shea's direction.
// ================================================================

// ================================================================
//  ARCHITECTURE OVERVIEW
//
//  THE MACHINE
//  Four circular bit-array loops hold data:
//    Working (18 words) — operator's primary workspace
//    ALU     (24 words) — arithmetic/logic unit input/output
//    Memory  (24 words) — addressable 16-slot storage
//    Big     (48 words) — large-capacity loop with filter peripherals
//
//  Each loop is a flat array of bits that rotates one position per
//  tick. A "word" is 17 bits: 1 marker bit + 16 data bits (BPW=17).
//  Three fixed head positions on each loop — Read (R), Gate (G),
//  and Write (W) — are where data is observed, gated, and injected.
//
//  Nine buses (A–I) copy bits between loops and external endpoints.
//  Buses A–D are unidirectional (configurable source → destination).
//  Bus E connects to an external endpoint (challenge system, files).
//  Buses F–G are P2P (WebRTC) links to neighboring machines.
//  Buses H–I are network-routable buses for multi-machine networks.
//
//  The ALU performs 11 operations (ADD SUB AND OR XOR NOT SHL SHR
//  NEG INC DEC) on captured operands. The comparator provides
//  relational flags. Working Scratch Registers (WSCR) offer 4 slots
//  of fast temporary storage on the Working Loop.
//
//  BIG LOOP PERIPHERALS
//  Two Pattern Matchers (PM1, PM2) and two Threshold Gates (TG1,
//  TG2) attach to the Big Loop. Each can operate standalone or in
//  cascade mode (PM1→PM2, TG1→TG2) for multi-stage filtering.
//  PMs match bit patterns with mask/value pairs and optional rewrite.
//  TGs compare word values against numeric thresholds with optional
//  clamping.
//
//  THE TICK ENGINE
//  The simulation runs in discrete ticks driven by a master clock
//  (default 1 Hz, adjustable 0.1–144 Hz). Each tick has phases:
//    Preamble    — auto-writeback, clock accuracy, counter updates
//    Sample      — read source bits from all active buses
//    Read        — capture words at read heads, advance inject channel
//    Gate        — kill gate-head bits on closed loops
//    Rotate      — shift all unpaused loops one bit position
//    Write       — deliver sampled bits to destinations, run PM/TG
//
//  STATE ORGANIZATION
//  All mutable simulation state lives in the L21 namespace object.
//  Const aliases (e.g. const alu = L21.alu) provide short access
//  names throughout the codebase. UI-only state (DOM refs, canvas
//  contexts, skin colors) is intentionally kept outside L21.
//
//  CHALLENGE SYSTEM (CBX)
//  Challenges generate initial loop contents and check operator
//  answers. Local challenges run on one machine. Networked (chain)
//  challenges coordinate across P2P-connected machines via the CBX
//  protocol layer.
//
//  NETWORKING
//  WebRTC data channels connect machines peer-to-peer. The networking
//  system supports scanning, network creation, hub election, chat,
//  file transfer (FTP), and chain challenges. Buses F–I carry data
//  between connected machines during operation.
// ================================================================

// ================================================================
//  TABLE OF CONTENTS
//
//  CSS ............................................... ~9
//  HTML / Markup ..................................... ~1987
//  JavaScript ........................................ ~3665
//
//  JS SECTIONS (approximate line numbers):
//  Skin System (source strings + parser) ............. ~3795
//  L21 Central State Namespace ....................... ~4700
//  Bus H/I Net + Bus F/G P2P ........................ ~5010
//  Operator Count (halt-on-match) .................... ~5260
//  Loop Definitions + Bus Endpoint Resolution ........ ~5360
//  Input Switches + Inject ........................... ~5490
//  Bus Configuration Table ........................... ~5600
//  Bus Sidebar Panel Generation ...................... ~5700
//  Bus Flow Direction + Selection + Toggle ........... ~5920
//  Bus Tick Functions (unidirectional + dual) ......... ~5990
//  DOM Element Cache ................................. ~6115
//  Clock + Speed Controls ............................ ~6175
//  CBX Protocol Layer ................................ ~6245
//  Custom Challenge System ........................... ~6700
//  Local File System (.l21 snapshots) ................ ~6995
//  Catalog Engine .................................... ~7320
//  FTP (File Transfer Protocol) ...................... ~7885
//  Scripts (Skins / CBX panels) ...................... ~8265
//  Network Monitor ................................... ~9150
//  CBX Chain Challenge (Chain Sum) ................... ~9615
//  Operators Club (completion codes) ................. ~10450
//  Challenge Module (CHALL state + evaluate) ......... ~10350
//  Built-In Challenge Definitions .................... ~10600
//  Working Scratch Registers (WSCR) .................. ~11270
//  Tick Engine (preamble → write phases) ............. ~11490
//  Main Loop (requestAnimationFrame driver) .......... ~11780
//  ALU + Comparator .................................. ~11940
//  Memory System ..................................... ~12400
//  Session Logger .................................... ~13040
//  Hardware Test Setup ............................... ~13150
//  Snapshot Save/Restore ............................. ~13570
//  Notification Sound System ......................... ~13915
//  Machine ID + Operator Identity .................... ~14110
//  Unified Chat System ............................... ~14315
//  Networking System (P2P + multi-machine) ........... ~14510
//  Pattern Matchers (PM1 + PM2) ...................... ~15820
//  Threshold Gates (TG1 + TG2) ....................... ~16250
//  Counter System (triggers + eject + drain) ......... ~16680
//  Canvas Rendering (loops, buses, inject) ........... ~16940
//  Word Detail Strips ................................ ~17670
//  Resize Handling ................................... ~17720
//  Init .............................................. ~17900
//  Sidebar Section Collapse .......................... ~17960
//  Event Delegation .................................. ~18350
//  Keyboard / Chord System ........................... ~18450
// ================================================================

//  SKIN SYSTEM
//  Each skin defined as a source string (authoritative representation).
//  Parsed at init into the SKINS runtime object.
//  SK = live canvas color object, updated on skin change.
// ================================================================

// ── Source string: OG ───────────────────────────────────────────
const SKIN_SOURCE_OG = `{
  name: 'OG',
  cssVars: {},
  canvas: {
    loopTrackOuter:  '#c0ccd8',  loopTrackInner:  '#d8e4ee',
    busATrackOuter:  '#c4d4e0',  busATrackBorder: '#5a7890',  busATrackInner:  '#d8e4ee',
    busBTrackOuter:  '#ddd8ec',  busBTrackBorder: '#6030a0',  busBTrackInner:  '#e8e4f4',
    busCTrackOuter:  '#d4e0dc',  busCTrackBorder: '#108060',  busCTrackInner:  '#e4f0ec',
    injTrackOuter:   '#c4d4e0',  injTrackInner:   '#d8e4ee',
    injActive:       '#4a90d9',  injInactive:     '#4a90d966',
    dotOff:          [180,200,216],
    labelText:       '#000000cc',
    busADot:         '#a060ff',  busADotRgb:      [160,96,255],
    busBDot:         '#d050f0',  busBDotRgb:      [208,80,240],
    busCDot:         '#20c8a0',  busCDotRgb:      [32,200,160],
    busDTrackOuter:  '#f0d4b0',  busDTrackBorder: '#c08040',  busDTrackInner:  '#fce8cc',
    busDDot:         '#e07020',  busDDotRgb:      [224,112,32],
    busEOutDot:      '#e02040',  busEOutDotRgb:   [224,32,64],
    busEInDot:       '#20c040',  busEInDotRgb:    [32,192,64],
    busETrackOuter:  '#e8d0d8',  busETrackInner:  '#f4e4ea',  busETrackBorder: '#b01830',
    busFOutDot:      '#2060d0',  busFOutDotRgb:   [32,96,208],
    busGOutDot:      '#9040e0',  busGOutDotRgb:   [144,64,224],
    busFInDot:       '#00a0b0',  busFInDotRgb:    [0,160,176],
    busGInDot:       '#d060f0',  busGInDotRgb:    [208,96,240],
    busFTrackOuter:  '#d0d8e8',  busFTrackInner:  '#e4eaf4',  busFTrackBorder: '#2050c0',
    busGTrackOuter:  '#e0d4f0',  busGTrackInner:  '#f0eafc',  busGTrackBorder: '#7020c0',
    pmBridgeDot:     '#00b8e0',  pmBridgeRgb:     [0,184,224],
    pmEjectColor:    '#ff4050',
    gateOpenColor:   '#60c060dd',
    gateClosedColor: '#ff4050dd',
  }
}`;

// ── Source string: WINAMP ────────────────────────────────────────
const SKIN_SOURCE_WINAMP = `{
  name: 'WINAMP',
  cssVars: {
    /* ── Backgrounds: warm dark charcoal, not pure black ── */
    '--bg':        '#1e1e1e',
    '--panel':     '#252525',
    '--panel2':    '#202020',
    '--panel3':    '#1c1c1c',
    /* ── Borders: enough green to be legible ── */
    '--border':    '#1e4c28',
    '--border2':   '#163c20',
    '--border3':   '#286a38',
    /* ── Element fill: dark warm surface ── */
    '--dim':       '#112018',
    /* ── Text: classic Winamp lime green, full brightness ── */
    '--fg':        '#33ff44',
    '--fg-border': '#33ff44',
    '--fg-dim':    '#33ff44',
    '--text':      '#33ff44',
    '--textbr':    '#88ff88',
    /* ── Signal accent colors ── */
    '--amber':     '#ffaa00',
    '--green':     '#33ff44',
    '--cyan':      '#00ddff',
    '--red':       '#ff2233',
    '--purple':    '#cc88ff',
    /* ── Loop identity: vivid on dark ── */
    '--c-working': '#44aaff',
    '--c-alu':     '#ffaa00',
    '--c-memory':  '#33ff44',
    '--c-big':     '#00ddff',
    /* ── Inactive dots: very dark, barely visible ── */
    '--dot-off':    '#0c1e10',
    '--dot-border': '#183828',
    /* ── Levers ── */
    '--lever-slot':   '#0c1c10',
    '--lever-border': '#1c4828',
    '--lever-arm':    '#007738',
    '--pip':          '#005828',
    '--pip-border':   '#003c1c',
    /* ── UI element surfaces ── */
    '--word-detail':  '#091408',
    '--el-bg':        '#112018',
    '--btn-hover':    '#1a3c24',
    '--ctr-bg':       '#0c1a10',
    '--alu-sel':      '#2a1a00',
    '--answer-bg':    '#071208',
    '--wb-bg':        '#091c10',
    '--pm-on-bg':     '#001226',
    /* ── Scanline: green tint ── */
    '--scanline-a':   'rgba(0,255,60,0.018)',
    '--grid-a':       'rgba(0,255,60,0.014)',
    /* ── Log lines ── */
    '--log-ok':    '#33ff44',
    '--log-err':   '#ff2233',
    '--log-info':  '#00ddff',
    '--log-bus':   '#cc88ff',
    '--log-inj':   '#ffaa00',
    /* ── Component surfaces ── */
    '--group-bg':          '#0c1c10',
    '--group-title':       '#33ff44',
    '--cmp-bg':            '#091408',
    '--cmp-border':        '#1c4828',
    '--cmp-flag-bg':       '#0c1c10',
    '--cmp-flag-border':   '#1e5030',
    '--cmp-flag-lit-bg':   '#083818',
    '--pm-lever-bg':       '#0a1a0c',
    '--pm-lever-arm-c':    '#007738',
    '--pm-pip-c':          '#005828',
    '--pm-pip-border':     '#003c1c',
    '--led-off':           '#0c1c10',
    '--led-off-border':    '#183828',
    '--placeholder-c':     '#55aa66',
    '--mem-sel-bg':        '#081c0c',
    '--mem-sel-border':    '#33ff44',
    '--mem-act-bg':        '#0a2412',
    '--mem-act-border':    '#33ff44',
    '--loop-paused-hover': '#261800',
    '--gate-open-hover':   '#081e0e',
    '--gate-closed-hover': '#260810',
    '--cmp-wb-bg':         '#081c0c',
    '--cmp-wb-border':     '#1c4828',
    '--alu-clr-bg':        '#181c16',
    '--alu-clr-border':    '#361e1e',
    '--mem-wb-border':     '#1c4828',
    '--mem-clr-border':    '#361e1e',
    '--destr-on-hover':    '#260810',
    '--sel-src-bg':        '#082012',
    '--sel-src-border':    '#33ff44',
    '--sel-dst-bg':        '#261800',
    '--sel-dst-border':    '#ffaa00',
    '--pm-rewrite-c':      '#ffaa00',
    /* ── Bus identity colors ── */
    '--bus-a-color': '#9955ff',
    '--bus-a-bg':    '#130b2e',
    '--bus-a-dim':   '#1e1040',
    '--bus-b-color': '#ee44cc',
    '--bus-b-bg':    '#260920',
    '--bus-b-dim':   '#360d2c',
    '--bus-c-color': '#11ddaa',
    '--bus-c-bg':    '#071e18',
    '--bus-c-dim':   '#0d2a22',
    '--bus-d-color': '#ff9922',
    '--bus-d-bg':    '#1e1006',
    '--bus-d-dim':   '#2a1808',
    /* ── Sidebar section tints ── */
    '--sec-global': '#0e1828',
    '--sec-ctr':    '#0e1828',
    '--sec-chall':  '#200818',
    '--sec-alu':    '#1e1808',
    '--sec-buse':   '#200808',
    '--sec-busf':   '#080e20',
    '--sec-busg':   '#120820',
    '--sec-bush':   '#1e1400',
    '--sec-busi':   '#081400',
    '--sec-pm':     '#071818',
    '--sec-tg':     '#100820',
    '--sec-mem':    '#0d1c10',
    '--sec-net':    '#0c1220',
    '--sec-log':    '#181818',
    '--sec-buses-group':     '#0a1018',
    '--sec-filters-group':   '#100c1e',
    '--sec-chain-net-group': '#0c1020',
    '--sec-scripts-group':   '#0c1218',
    '--c-skins':       '#44aacc',
    '--sec-skins':     '#081820',
    '--sec-cbx-local': '#200818',
    '--sec-cbx-net':   '#0c1220',
  },
  canvas: {
    loopTrackOuter:  '#0a1c0e',  loopTrackInner:  '#060e08',
    busATrackOuter:  '#120e28',  busATrackBorder: '#261648',  busATrackInner:  '#0a0618',
    busBTrackOuter:  '#160826',  busBTrackBorder: '#34085a',  busBTrackInner:  '#0e0618',
    busCTrackOuter:  '#061418',  busCTrackBorder: '#082c38',  busCTrackInner:  '#040c10',
    injTrackOuter:   '#091808',  injTrackInner:   '#050c06',
    injActive:       '#33ff44',  injInactive:     '#33ff4466',
    dotOff:          [10, 28, 14],
    labelText:       '#33ff44cc',
    busADot:         '#9955ff',  busADotRgb:      [153,85,255],
    busBDot:         '#dd44ee',  busBDotRgb:      [221,68,238],
    busCDot:         '#11ddaa',  busCDotRgb:      [17,221,170],
    busDTrackOuter:  '#1a0e04',  busDTrackBorder: '#4a2a08',  busDTrackInner:  '#100800',
    busDDot:         '#ff9922',  busDDotRgb:      [255,153,34],
    busEOutDot:      '#ff3355',  busEOutDotRgb:   [255,51,85],
    busEInDot:       '#33ff66',  busEInDotRgb:    [51,255,102],
    busETrackOuter:  '#200a10',  busETrackInner:  '#160608',  busETrackBorder: '#882030',
    busFOutDot:      '#4488ff',  busFOutDotRgb:   [68,136,255],
    busGOutDot:      '#bb66ff',  busGOutDotRgb:   [187,102,255],
    busFInDot:       '#00ddee',  busFInDotRgb:    [0,221,238],
    busGInDot:       '#ee44ff',  busGInDotRgb:    [238,68,255],
    busFTrackOuter:  '#0a1020',  busFTrackInner:  '#060810',  busFTrackBorder: '#204088',
    busGTrackOuter:  '#150a20',  busGTrackInner:  '#0d0618',  busGTrackBorder: '#602090',
    pmBridgeDot:     '#00ddff',  pmBridgeRgb:     [0,221,255],
    pmEjectColor:    '#ff2233',
    gateOpenColor:   '#33ff44dd',
    gateClosedColor: '#ff2233dd',
  }
}`;

// ── Source string: SUNRISE ───────────────────────────────────────
const SKIN_SOURCE_SUNRISE = `{
  name: 'SUNRISE',
  cssVars: {
    '--bg':        '#fff8ec',
    '--panel':     '#ffffff',
    '--panel2':    '#fffcf5',
    '--panel3':    '#fff4e0',
    '--border':    '#e8b030',
    '--border2':   '#d8a020',
    '--border3':   '#c89010',
    '--dim':       '#ffeabc',
    '--fg':        '#000000',
    '--fg-border': '#000000',
    '--fg-dim':    '#000000',
    '--text':      '#000000',
    '--textbr':    '#000000',
    '--amber':     '#c06000',
    '--green':     '#007030',
    '--cyan':      '#006880',
    '--red':       '#cc1030',
    '--purple':    '#6820a8',
    '--c-working': '#0060c0',
    '--c-alu':     '#c06000',
    '--c-memory':  '#007030',
    '--c-big':     '#007898',
    '--dot-off':    '#ffd890',
    '--dot-border': '#c08020',
    '--lever-slot':   '#ffe8c0',
    '--lever-border': '#c08020',
    '--lever-arm':    '#b05010',
    '--pip':          '#d08010',
    '--pip-border':   '#b06010',
    '--word-detail':  '#ffe8c0',
    '--el-bg':        '#ffffff',
    '--btn-hover':    '#ffd060',
    '--ctr-bg':       '#ffe0a0',
    '--alu-sel':      '#ffe080',
    '--answer-bg':    '#e8fff0',
    '--wb-bg':        '#b0ead0',
    '--pm-on-bg':     '#b8d8f8',
    '--scanline-a':   'rgba(160,60,0,0.018)',
    '--grid-a':       'rgba(160,60,0,0.015)',
    '--log-ok':       '#005820',
    '--log-err':      '#cc1030',
    '--log-info':     '#000000',
    '--log-bus':      '#6820a8',
    '--log-inj':      '#c06000',
    '--group-bg':       '#fff0cc',
    '--group-title':    '#000000',
    '--cmp-bg':         '#fff4e0',
    '--cmp-border':     '#d8a020',
    '--cmp-flag-bg':    '#ffeac8',
    '--cmp-flag-border':'#c09030',
    '--cmp-flag-lit-bg':'#ffd880',
    '--pm-lever-bg':    '#ffe8c0',
    '--pm-lever-arm-c': '#b05010',
    '--pm-pip-c':       '#d08010',
    '--pm-pip-border':  '#b06010',
    '--led-off':        '#ffd890',
    '--led-off-border': '#c08020',
    '--placeholder-c':  '#c09040',
    '--mem-sel-bg':     '#e0f8ec',
    '--mem-sel-border': '#007030',
    '--mem-act-bg':     '#c8f0dc',
    '--mem-act-border': '#007030',
    '--loop-paused-hover': '#ffc860',
    '--gate-open-hover':   '#a8e8c8',
    '--gate-closed-hover': '#f8b8c0',
    '--cmp-wb-bg':      '#b8e8cc',
    '--cmp-wb-border':  '#60a880',
    '--alu-clr-bg':     '#ffe8d0',
    '--alu-clr-border': '#e8a090',
    '--mem-wb-border':  '#60a880',
    '--mem-clr-border': '#e8a090',
    '--destr-on-hover': '#f8c0c0',
    '--sel-src-bg':     '#d0f0e0',
    '--sel-src-border': '#007030',
    '--sel-dst-bg':     '#fff0c0',
    '--sel-dst-border': '#c06000',
    '--pm-rewrite-c':   '#c06000',
    /* ── Bus identity colors ── */
    '--bus-a-color': '#5828b0',
    '--bus-a-bg':    '#ecdeff',
    '--bus-a-dim':   '#d8c4f8',
    '--bus-b-color': '#a010a0',
    '--bus-b-bg':    '#ffe0fa',
    '--bus-b-dim':   '#f4c4f0',
    '--bus-c-color': '#0c7858',
    '--bus-c-bg':    '#c8f5e8',
    '--bus-c-dim':   '#b0e8d8',
    '--bus-d-color': '#a84010',
    '--bus-d-bg':    '#ffe8cc',
    '--bus-d-dim':   '#ffd4a8',
    /* ── Sidebar section tints ── */
    '--sec-global': '#e8f0fc',
    '--sec-ctr':    '#e8f0fc',
    '--sec-chall':  '#fce8f2',
    '--sec-alu':    '#fff4e0',
    '--sec-buse':   '#fce8ea',
    '--sec-busf':   '#e8eeff',
    '--sec-busg':   '#f0e8ff',
    '--sec-bush':   '#fff4e0',
    '--sec-busi':   '#eefce8',
    '--sec-pm':     '#e4f5f0',
    '--sec-tg':     '#f0ecff',
    '--sec-mem':    '#e8fff2',
    '--sec-net':    '#eaeffb',
    '--sec-log':    '#fff8ec',
    '--sec-buses-group':     '#edf2fc',
    '--sec-filters-group':   '#f0ecff',
    '--sec-chain-net-group': '#eaeffc',
    '--sec-scripts-group':   '#f0f2f8',
    '--c-skins':       '#3878a0',
    '--sec-skins':     '#e8f0f6',
    '--sec-cbx-local': '#fce8f2',
    '--sec-cbx-net':   '#eaeffb',
  },
  canvas: {
    loopTrackOuter:  '#ffe4a0',  loopTrackInner:  '#fff0cc',
    busATrackOuter:  '#ecdcf8',  busATrackBorder: '#c090e0',  busATrackInner:  '#f8f0ff',
    busBTrackOuter:  '#f0d8f8',  busBTrackBorder: '#c878e8',  busBTrackInner:  '#f8eeff',
    busCTrackOuter:  '#d0f0e8',  busCTrackBorder: '#60c0a0',  busCTrackInner:  '#e8fff8',
    injTrackOuter:   '#ffe4a0',  injTrackInner:   '#fff0cc',
    injActive:       '#e08020',  injInactive:     '#e0802066',
    dotOff:          [255,220,150],
    labelText:       '#000000cc',
    busADot:         '#9040e0',  busADotRgb:      [144,64,224],
    busBDot:         '#c030d0',  busBDotRgb:      [192,48,208],
    busCDot:         '#10a880',  busCDotRgb:      [16,168,128],
    busDTrackOuter:  '#f8d0a0',  busDTrackBorder: '#d08040',  busDTrackInner:  '#ffecd0',
    busDDot:         '#d06010',  busDDotRgb:      [208,96,16],
    busEOutDot:      '#c01828',  busEOutDotRgb:   [192,24,40],
    busEInDot:       '#18a030',  busEInDotRgb:    [24,160,48],
    busETrackOuter:  '#f0d4d8',  busETrackInner:  '#fce8ec',  busETrackBorder: '#c01828',
    busFOutDot:      '#1848b0',  busFOutDotRgb:   [24,72,176],
    busGOutDot:      '#7018a0',  busGOutDotRgb:   [112,24,160],
    busFInDot:       '#008898',  busFInDotRgb:    [0,136,152],
    busGInDot:       '#b030d0',  busGInDotRgb:    [176,48,208],
    busFTrackOuter:  '#d4d8f0',  busFTrackInner:  '#e8ecfc',  busFTrackBorder: '#1848b0',
    busGTrackOuter:  '#dcd4f0',  busGTrackInner:  '#eee8fc',  busGTrackBorder: '#6018a0',
    pmBridgeDot:     '#0090b0',  pmBridgeRgb:     [0,144,176],
    pmEjectColor:    '#e02040',
    gateOpenColor:   '#00a050dd',
    gateClosedColor: '#e02040dd',
  }
}`;

// ── Skin parser ─────────────────────────────────────────────────
function parseSkinSource(sourceText) {
  return (new Function('return (' + sourceText + ')'))();
}

// ── Runtime SKINS object (populated from source strings at init) ─
const SKINS = {};
SKINS.og      = parseSkinSource(SKIN_SOURCE_OG);
SKINS.winamp  = parseSkinSource(SKIN_SOURCE_WINAMP);
SKINS.sunrise = parseSkinSource(SKIN_SOURCE_SUNRISE);

// Valid CSS variable names — derived from Winamp (defines every var it overrides)
const VALID_CSS_VARS = new Set(Object.keys(SKINS.winamp.cssVars));
// Valid canvas property names — derived from OG (defines every canvas property)
const VALID_CANVAS_KEYS = new Set(Object.keys(SKINS.og.canvas));
// Foundational skin IDs that custom skins cannot collide with
const FOUNDATIONAL_SKIN_IDS = new Set(['og', 'winamp', 'sunrise']);

const FOUNDATIONAL_SKIN_SOURCES = {
  og:      SKIN_SOURCE_OG,
  winamp:  SKIN_SOURCE_WINAMP,
  sunrise: SKIN_SOURCE_SUNRISE,
};

// ── Built-in challenge source strings (display-only) ─────────────
// These are readable representations of the built-in challenge definitions.
// Shown in the read-only editor so operators can study and copy them.
// The actual runtime objects are in BUILTIN_CHALLENGE_DEFINITIONS.
const FOUNDATIONAL_CBX_SOURCES = {

  add: `{
  // Add X Numbers — sum all incoming values
  id: 'add',
  name: 'Add X Numbers',
  description: 'Values will arrive via Bus E inbound. Add them all and send the sum back via Bus E outbound.',

  generate: function(params) {
    // Create N random values that sum to at most 65535
    const n = params.count;
    const vals = [];
    let remaining = 65535;
    for (let i = 0; i < n; i++) {
      const maxVal = Math.min(32767, Math.floor(remaining - (n - i - 1)));
      const v = Math.max(1, _ri(1, Math.max(1, maxVal)));
      vals.push(v);
      remaining -= v;
    }
    const total = vals.reduce((a, b) => a + b, 0);
    return {
      values: vals,
      expected: total & 0xFFFF,
      answerCount: 1,
      label: n + ' values — sum = ?',
    };
  },

  par: function(result, params) {
    const n = result.values.length;
    // Each value: read (41t) + add (36t) = 77t per value, plus setup
    return { ticks: 77 * n + 5, ops: 3 * n + 4 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Values to add', default: 2,
      options: [2,3,4,5,6,8,10,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  multiply: `{
  // Multiply Two Numbers — compute A × B using repeated addition
  id: 'multiply',
  name: 'Multiply Two Numbers',
  description: 'Two numbers will arrive via Bus E inbound. Multiply them and send the product back via Bus E outbound.',

  generate: function(params) {
    const maxA = Math.min(64, Math.max(1, params.max_a));
    const a = _ri(1, maxA);
    const b = _ri(1, Math.floor(65535 / a));
    return {
      values: [a, b],
      expected: a * b,
      answerCount: 1,
      label: a + ' × ' + b + ' = ?',
    };
  },

  par: function(result) {
    // Optimal: add smaller value repeatedly
    const a = result.values[0], b = result.values[1];
    const m = Math.min(a, b);
    return { ticks: 36 * (m - 1) + 82, ops: 3 * m + 5 };
  },

  params: [
    { type: 'number', id: 'max_a', label: 'Max for A (2–64)', min: 2, max: 64, default: 64 },
  ],
}`,

  transform_nth: `{
  // Transform Every Nth Value — apply a random ALU op to every Nth value
  id: 'transform_nth',
  name: 'Transform Every Nth Value',
  description: 'A stream of values arrives via Bus E. Apply the revealed operation to every Nth value. Return only the transformed values via Bus E outbound.',

  generate: function(params) {
    const stride = params.stride, totalCount = params.total;
    // Pick a random operation
    const ops = [
      { name: 'INC', label: 'increment (+1)', fn: v => (v + 1) & 0xFFFF },
      { name: 'DEC', label: 'decrement (−1)', fn: v => ((v - 1) + 0x10000) & 0xFFFF },
      { name: 'SHL', label: 'double (SHL)',   fn: v => (v << 1) & 0xFFFF },
      { name: 'SHR', label: 'halve (SHR)',    fn: v => (v >> 1) & 0xFFFF },
      { name: 'NOT', label: 'bitwise NOT',    fn: v => (~v) & 0xFFFF },
    ];
    const op = ops[_ri(0, ops.length - 1)];
    const maxVal = op.name === 'SHL' ? 32767 : 65534;
    const vals = Array.from({ length: totalCount }, () => _ri(1, maxVal));
    // Apply operation to every Nth value
    const expectedValues = vals.filter((v, i) => (i + 1) % stride === 0).map(v => op.fn(v));
    return {
      values: vals,
      expectedValues: expectedValues,
      answerCount: expectedValues.length,
      label: totalCount + ' values — apply ' + op.label + ' to every ' + stride + 'th',
    };
  },

  par: function(result, params) {
    const n = result.values.length, tc = result.answerCount;
    return { ticks: 41 * n + 123 * tc, ops: n + 4 * tc };
  },

  params: [
    { type: 'select', id: 'stride', label: 'Every Nth (stride)', default: 4,
      options: [2,3,4,5,6,8].map(v => ({ value: v, label: v + 'th' })) },
    { type: 'select', id: 'total', label: 'Total values', default: 16,
      options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  filter: `{
  // Filter — return only values matching a randomly-chosen condition
  id: 'filter',
  name: 'Filter: Pass Back Matching Values',
  description: 'A stream of values arrives via Bus E. Identify those matching the condition revealed at start. Return only the matching values via Bus E outbound.',

  generate: function(params) {
    const totalCount = params.count;
    // Choose a random condition
    const baseConditions = [
      { label: 'odd (b0 = 1)',          test: v => (v & 1) === 1 },
      { label: 'divisible by 3',        test: v => v % 3 === 0 },
      { label: 'divisible by 4',        test: v => v % 4 === 0 },
      { label: 'top bit set (≥ 32768)', test: v => (v & 0x8000) !== 0 },
      { label: 'even AND ≥ 128',        test: v => (v & 1) === 0 && v >= 128 },
    ];
    let condition;
    if (Math.random() < 0.4) {
      // Threshold-based condition
      if (Math.random() < 0.5) {
        const thresh = _ri(45000, 52000);
        condition = { label: '≥ ' + thresh, test: v => v >= thresh };
      } else {
        const thresh = _ri(12000, 20000);
        condition = { label: '< ' + thresh, test: v => v < thresh };
      }
    } else {
      condition = baseConditions[_ri(0, baseConditions.length - 1)];
    }
    // Generate values with ~25-33% matches
    const targetMatches = Math.round(totalCount * (0.25 + Math.random() * 0.08));
    const vals = [];
    let added = 0, attempts = 0;
    while (added < targetMatches && attempts++ < targetMatches * 200) {
      const v = _ri(1, 65534);
      if (condition.test(v)) { vals.push(v); added++; }
    }
    attempts = 0;
    while (vals.length < totalCount && attempts++ < totalCount * 200) {
      const v = _ri(1, 65534);
      if (!condition.test(v)) vals.push(v);
    }
    // Shuffle
    for (let i = vals.length - 1; i > 0; i--) {
      const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
    }
    const expectedValues = vals.filter(v => condition.test(v));
    return {
      values: vals,
      expectedValues: expectedValues,
      answerCount: expectedValues.length,
      label: totalCount + ' values — return all where: ' + condition.label,
    };
  },

  par: function(result) {
    const n = result.values.length, m = result.answerCount;
    return { ticks: 41 * n + 18 * m, ops: n + m };
  },

  params: [
    { type: 'select', id: 'count', label: 'Stream length', default: 16,
      options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  sort: `{
  // Sort Values — return all values in ascending order
  id: 'sort',
  name: 'Sort Values (Low → High)',
  description: 'A set of values arrives via Bus E. Sort them from lowest to highest and return all values in sorted order via Bus E outbound.',

  generate: function(params) {
    const n = params.count;
    // Generate N unique random values
    const valSet = new Set();
    while (valSet.size < n) valSet.add(_ri(1, 65534));
    const vals = Array.from(valSet);
    // Shuffle
    for (let i = vals.length - 1; i > 0; i--) {
      const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
    }
    const sorted = vals.slice().sort((a, b) => a - b);
    return {
      values: vals,
      expectedValues: sorted,
      answerCount: n,
      label: n + ' values — sort low to high',
    };
  },

  par: function(result) {
    // Bubble sort par: O(n²) comparisons
    const n = result.values.length;
    const c = n * (n - 1) / 2;
    return { ticks: n * 41 + c * 80 + n * 41, ops: n * 3 + c * 4 + n * 2 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Values to sort', default: 4,
      options: [4,6,8,10,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  find_max: `{
  // Find the Maximum — return the single largest value
  id: 'find_max',
  name: 'Find the Maximum',
  description: 'A stream of values arrives via Bus E. Find the single largest value and return it via Bus E outbound.',

  generate: function(params) {
    const n = params.count;
    const vals = Array.from({ length: n }, () => _ri(1, 65534));
    const maxVal = Math.max(...vals);
    return {
      values: vals,
      expected: maxVal,
      answerCount: 1,
      label: n + ' values — find the largest',
    };
  },

  par: function(result) {
    const n = result.values.length;
    // Each value: read + compare + possible swap
    return { ticks: n * 82 + 41, ops: n * 3 + 4 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Values in stream', default: 8,
      options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  xor_checksum: `{
  // XOR Checksum — XOR all values together
  id: 'xor_checksum',
  name: 'XOR Checksum',
  description: 'A set of values arrives via Bus E. XOR all of them together and return the single result via Bus E outbound.',

  generate: function(params) {
    const n = params.count;
    const vals = Array.from({ length: n }, () => _ri(1, 65534));
    const xorResult = vals.reduce((a, b) => a ^ b, 0);
    return {
      values: vals,
      expected: xorResult,
      answerCount: 1,
      label: n + ' values — XOR all = ?',
    };
  },

  par: function(result) {
    const n = result.values.length;
    // Same structure as Add: read + XOR per value
    return { ticks: 77 * n + 5, ops: 3 * n + 4 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Values to XOR', default: 4,
      options: [4,6,8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  count_matches: `{
  // Count Matches — count how many values match a condition
  id: 'count_matches',
  name: 'Count Matches',
  description: 'A stream of values arrives via Bus E. Count how many match the condition revealed at start. Return the count (a single number) via Bus E outbound.',

  generate: function(params) {
    const totalCount = params.count;
    const conditions = [
      { label: 'even (b0 = 0)',         test: v => (v & 1) === 0 },
      { label: 'odd (b0 = 1)',          test: v => (v & 1) === 1 },
      { label: 'divisible by 3',        test: v => v % 3 === 0 },
      { label: 'divisible by 4',        test: v => v % 4 === 0 },
      { label: 'top bit set (≥ 32768)', test: v => (v & 0x8000) !== 0 },
    ];
    const condition = conditions[_ri(0, conditions.length - 1)];
    // Generate values with ~25-33% matches
    const targetMatches = Math.round(totalCount * (0.25 + Math.random() * 0.08));
    const vals = [];
    let added = 0;
    while (added < targetMatches) {
      const v = _ri(1, 65534);
      if (condition.test(v)) { vals.push(v); added++; }
    }
    while (vals.length < totalCount) {
      const v = _ri(1, 65534);
      if (!condition.test(v)) vals.push(v);
    }
    // Shuffle
    for (let i = vals.length - 1; i > 0; i--) {
      const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
    }
    const matchCount = vals.filter(v => condition.test(v)).length;
    return {
      values: vals,
      expected: matchCount,
      answerCount: 1,
      label: totalCount + ' values — count those that are ' + condition.label,
    };
  },

  par: function(result) {
    const n = result.values.length;
    // Read each value + test + conditional increment
    return { ticks: n * 41 + 544 + 41, ops: n + 8 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Stream length', default: 16,
      options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  accumulate: `{
  // Accumulate to Threshold — running sum until it meets/exceeds a target
  id: 'accumulate',
  name: 'Accumulate to Threshold',
  description: 'Values arrive via Bus E. Keep a running sum. A threshold is revealed at start. Return the running sum the moment it meets or exceeds the threshold.',

  generate: function(params) {
    const n = params.count;
    const vals = Array.from({ length: n }, () => _ri(100, 4000));
    // Compute prefix sums to find where threshold is crossed
    let runSum = 0;
    const prefixSums = vals.map(v => (runSum += v));
    // Pick a threshold that crosses ~75% through the stream
    const hitIndex = Math.min(n - 1,
      Math.floor(n * 0.75) + _ri(0, Math.max(0, Math.ceil(n * 0.15) - 1)));
    const prevSum = hitIndex > 0 ? prefixSums[hitIndex - 1] : 0;
    let threshold = prevSum + 1 + _ri(0, Math.max(0, prefixSums[hitIndex] - prevSum - 1));
    let expectedAnswer = prefixSums[hitIndex];
    // Scale down if overflow
    if (threshold > 65535 || expectedAnswer > 65535) {
      const scale = 60000 / runSum;
      for (let i = 0; i < n; i++) vals[i] = Math.max(1, Math.round(vals[i] * scale));
      let rs2 = 0;
      const ps2 = vals.map(v => (rs2 += v));
      const pv2 = hitIndex > 0 ? ps2[hitIndex - 1] : 0;
      threshold = pv2 + 1 + _ri(0, Math.max(0, ps2[hitIndex] - pv2 - 1));
      expectedAnswer = ps2[hitIndex];
    }
    return {
      values: [threshold, ...vals],
      expected: expectedAnswer,
      answerCount: 1,
      label: 'Threshold: ' + threshold + ' — sum ' + n + ' values',
    };
  },

  par: function(result, params) {
    const n = params.count;
    // Each value: read + add + compare
    return { ticks: 82 * n + 41, ops: 3 * n + 6 };
  },

  params: [
    { type: 'select', id: 'count', label: 'Values in stream', default: 8,
      options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
  ],
}`,

  chain_sum: `{
  // Chain Sum (Network) — multi-machine running sum
  // This challenge runs via startChainSumChallenge() — generate() and
  // par() are stubs since the CBX protocol handles the actual flow.
  id: 'chain_sum',
  name: 'Chain Sum',
  network: true,
  description: 'Each machine in the network receives a unique value. Pass the running sum along the chain — add your value and submit to your Challenge Box. The origin verifies each step.',

  generate: function() {
    return { values: [0], expected: 0, answerCount: 1, label: 'Chain Sum' };
  },

  par: function() {
    return { ticks: 1, ops: 1 };
  },

  params: [],
}`,

  bridge_crossing: `{
  // Bridge Crossing — Operators Club Initiation Challenge
  // Compute ((C + D) XOR A) + B where A and B must pass through Memory.
  // Tests inter-loop data movement: Working → Memory, Working → ALU, Memory → ALU.
  id: 'bridge_crossing',
  name: '★ Bridge Crossing',
  club: true,
  description: 'OPERATORS CLUB INITIATION — Four values arrive via Bus E: A, B, C, D. Compute: ((C + D) XOR A) + B. A and B must be stored in Memory before reaching ALU. Return the answer via Bus E outbound.',

  generate: function() {
    const A = _ri(1, 65534);
    const C = _ri(1, 32767);
    const D = _ri(1, 65535 - C);
    const partial = ((C + D) ^ A) & 0xFFFF;
    const maxB = 65535 - partial;
    const B = _ri(1, Math.max(1, maxB));
    const answer = (partial + B) & 0xFFFF;
    return {
      values: [A, B, C, D],
      expected: answer,
      answerCount: 1,
      label: 'Bridge Crossing — A=' + A + ' B=' + B + ' C=' + C + ' D=' + D,
    };
  },

  par: function() {
    return { ticks: 612, ops: 24 };
  },

  params: [],
}`,

};

let currentSkinId = 'og';
// SK = live canvas color reference (mutated in place so draw fns always see current)
const SK = Object.assign({}, SKINS.og.canvas);

// Apply a skin by id — updates CSS variables on :root and canvas color object (SK)
function applySkin(id) {
  const skin = SKINS[id];
  if (!skin) return;
  currentSkinId = id;
  const root = document.documentElement.style;
  // Reset all skin vars back to empty (CSS :root defaults = OG)
  const allVarNames = new Set();
  Object.values(SKINS).forEach(s => Object.keys(s.cssVars || {}).forEach(k => allVarNames.add(k)));
  allVarNames.forEach(k => root.removeProperty(k));
  // Apply this skin's overrides
  Object.entries(skin.cssVars || {}).forEach(([k,v]) => root.setProperty(k, v));
  // Update live canvas color object
  Object.assign(SK, SKINS.og.canvas, skin.canvas);
  // Update DEFS loop colors from CSS vars
  const cs = getComputedStyle(document.documentElement);
  const loopVarMap = { working: '--c-working', alu: '--c-alu', memory: '--c-memory', big: '--c-big' };
  DEFS.forEach(def => {
    const hex = cs.getPropertyValue(loopVarMap[def.id]).trim();
    if (hex) {
      def.color = hex;
      const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
      if (!isNaN(r)) def.rgb = [r,g,b];
    }
  });
  // Toggle body skin class
  document.body.className = id === 'og' ? '' : `skin-${id}`;
  // Sync skin dropdown
  const skinSel = document.getElementById('skin-select');
  if (skinSel) skinSel.value = id;
  // Log skin change to session if active
  if (typeof logger !== 'undefined' && logger.active) {
    const ts = (typeof clock.tickCount !== 'undefined') ? clock.tickCount : 0;
    logOp(`OP.SKIN ${id.toUpperCase()} TICK=${ts}`, `Operator switched to ${id.toUpperCase()} skin at tick ${ts}`);
  }
  // Persist skin preference
  try { localStorage.setItem('loop21_skin', id); } catch(e) {}
  // Redraw
  requestAnimationFrame(() => { DEFS.forEach(def=>{renderLoop(def);}); renderBusA(); renderBusB(); renderBusC(); renderBusD(); renderInjectChannel(); });
}

// Apply the default skin at startup (reads localStorage preference)
function applyInitialSkin() {
  let pref = 'og';
  try { pref = localStorage.getItem('loop21_skin') || 'og'; } catch(e) {}
  if (!SKINS[pref]) pref = 'og';
  applySkin(pref);
}

const BPW   = 17;  // 1 marker + 16 data bits
const BUS_N = 24;  // word + 4-bit padding each side
const INJ_N = 17;  // inject channel length (slots)

// ================================================================
//  COUNTER TRIGGER DEFINITIONS
// ================================================================

// Trigger definitions per loop
const CTR_TRIGGERS = {
  working: ['wordWritten','wordRead','bitsWritten','bitsRead','fullCycle','scratchBitsWritten','scratchBitsRead','scratchWordWritten','scratchWordRead'],
  alu:     ['wordWritten','wordRead','bitsWritten','bitsRead','fullCycle','regSent','aluAnswerSent','cmpAnswerSent'],
  memory:  ['wordWritten','wordRead','bitsWritten','bitsRead','fullCycle','writeToSlot','readFromSlot'],
  big:     ['wordWritten','wordRead','bitsWritten','bitsRead','fullCycle','pm1Match','pm1Rewrite','pm1Eject','pm2Match','pm2Rewrite','pm2Eject','tg1Match','tg1Eject','tg2Match','tg2Eject'],
};

const CTR_TRIGGER_LABELS = {
  wordWritten:    'Word Written',
  wordRead:       'Word Read',
  bitsWritten:    'Bits Written',
  bitsRead:       'Bits Read',
  fullCycle:      'Full Cycle',
  scratchBitsWritten: 'Scr Bits Written',
  scratchBitsRead:    'Scr Bits Read',
  scratchWordWritten: 'Scr Word Written',
  scratchWordRead:    'Scr Word Read',
  regSent:        'Reg Sent',
  aluAnswerSent:  'Answer Sent',
  cmpAnswerSent:  'Cmp Sent',
  writeToSlot:    'Write to Slot',
  readFromSlot:   'Read from Slot',
  pm1Match:       'PM1 Match',
  pm1Rewrite:     'PM1 Rewrite',
  pm1Eject:       'PM1 Eject',
  pm2Match:       'PM2 Match',
  pm2Rewrite:     'PM2 Rewrite',
  pm2Eject:       'PM2 Eject',
  tg1Match:       'TG1 Match',
  tg1Eject:       'TG1 Eject',
  tg2Match:       'TG2 Match',
  tg2Eject:       'TG2 Eject',
};

// Build the default trigger enable/disable state for a loop counter
function makeTriggers(id) {
  const t = {};
  for(const k of CTR_TRIGGERS[id]) t[k] = false;
  return t;
}

// ── State factory functions ─────────────────────────────────────────────────
// Define state shapes in one place; used by initialization and restoreFromSnapshot.

// Create default state for a unidirectional bus (A-D)
function makeUnidirectionalBus(src, dst) {
  return { bits: new Array(BUS_N).fill(0), liveBitCount: 0, active: false,
    src, dst, flash: 0, transferBitsRemaining: 0,
    counterCapture: { active: false, target: null, buf: [] },
    tgCapture: { active: false, target: null, buf: [] } };
}

// Create default state for a dual-channel bus (E-I); extras adds bus-specific fields
function makeDualChannelBus(src, dst, extras) {
  return Object.assign({ outBits: new Array(BUS_N).fill(0), inBits: new Array(BUS_N).fill(0),
    active: false, src, dst, outFlash: 0, inFlash: 0,
    outTransfer: 0, inTransfer: 0 }, extras);
}

// Create default state for a loop counter (working/alu/memory/big)
function makeCounter(id) {
  return { val: 0, rot: 0, readPos: -1, outBuf: [], outBufA: [], outBufC: [], outBufD: [],
    destructive: false, triggers: makeTriggers(id) };
}

// Create default state for a pattern matcher (PM1/PM2); extras adds cascade fields for PM2
function makePatternMatcher(extras) {
  return Object.assign({
    maskBits: new Array(16).fill(0), matchBits: new Array(16).fill(0),
    changeMaskBits: new Array(16).fill(0), changeValBits: new Array(16).fill(0),
    enabled: false, destructive: false, matchFlag: false, matchCount: 0,
    outBuf: [], bridge: new Array(1).fill(0), bridgeFlash: 0.0, cooldown: 0,
  }, extras);
}

// Create default state for a threshold gate (TG1/TG2); extras adds cascade fields for TG2
function makeThresholdGate(extras) {
  return Object.assign({
    threshold: 0, mode: 'gt', enabled: false, destructive: false,
    clampEnabled: false, clampValue: 0,
    matchFlag: false, matchCount: 0, outBuf: [],
    bridge: [0], bridgeFlash: 0.0, cooldown: 0,
    captureNext: false, capPos: -1, capBuf: [],
  }, extras);
}

// ================================================================
//  L21 — CENTRAL STATE NAMESPACE
//
//  All mutable simulation state lives here. This enables:
//    - Serialization (save/load/replay)
//    - Isolated testing (construct state, run ticks, assert results)
//    - Clear separation of simulation vs. UI vs. network state
//
//  Const aliases (e.g. const alu = L21.alu) provide short access
//  names throughout the codebase — see each alias declaration below.
// ================================================================
const L21 = {
  // ── Loop state ──
  loops: {},

  // ── Bus state ──
  buses: {
    a: makeUnidirectionalBus('working', 'alu'),
    b: makeUnidirectionalBus('working', 'memory'),
    c: makeUnidirectionalBus('working', 'big'),
    d: makeUnidirectionalBus('working', 'challenge'),
    e: makeDualChannelBus('working', 'working', { extDst: 'challenge', counterCapture: { active: false, target: null, buf: [] } }),
    f: makeDualChannelBus('working', 'working', { wordBuf: [], inQueue: [], outBuf: [] }),
    g: makeDualChannelBus('working', 'working', { wordBuf: [], inQueue: [], outBuf: [] }),
    h: makeDualChannelBus('working', 'working', { peerTarget: null, wordBuf: [], inQueue: [], outBuf: [] }),
    i: makeDualChannelBus('working', 'working', { peerTarget: null, wordBuf: [], inQueue: [], outBuf: [] }),
  },

  // ── ALU state ──
  alu: {
    a: null, b: null, c: null, d: null, result: null,
    op: 'ADD',
    opASrc: 'a', opBSrc: 'b',
    route: null, routeHold: false,
    autoWriteback: false, autoWritebackPrevResult: null, _autoWbPending: false,
    wbBuf: new Array(BPW).fill(0), wbPos: -1,
    capBuf: new Array(BPW).fill(0), capTarget: null, capPos: 0,
    ignore3: false,
    flags: { zero: false, carry: false, overflow: false, sign: false, parity: false },
    displayNeedsRefresh: true,
  },

  // ── Comparator state ──
  cmp: {
    flags: { gt: false, lt: false, eq: false, gte: false, lte: false, ne: false },
    packed: 0,
    wbPos: -1,
    wbBuf: new Array(BPW).fill(0),
  },

  // ── CTR state ──
  ctr: {
  working: makeCounter('working'),
  alu:     makeCounter('alu'),
  memory:  makeCounter('memory'),
  big:     makeCounter('big'),
  global:  { val:0, outBuf:[], outBufA:[], outBufC:[], outBufD:[], destructive:false },
},

  // ── WSCR state ──
  wscr: {
  slots:      [null, null, null, null],   // stored values (16-bit) or null
  capture:    false,          // when true, next complete word at Working R-head is captured
  capAddr:    0,              // which slot to capture into (auto-increments 0→1→2→3→0)
  capPos:     -1,             // bit position in current capture (-1 = idle)
  capBuf:     [],             // incoming bits
  wbPos:      [-1, -1, -1, -1],       // writeback pipeline position per slot
  wbBuf:      [[], [], [], []],       // writeback bit buffers per slot
},

  // ── MEM state ──
  mem: {
  writeToSlots: false, // when true, words passing the read head are saved to slots
  addrRead: false,     // when true, first 3 bits of word determine destination slot address
  addrBits: [0,0,0,0], // 4-bit address, addrBits[0]=b3, [1]=b2, [2]=b1, [3]=b0
  slots: new Array(16).fill(null), // 16 × 16-bit values (null = empty)
  capBuf: new Array(BPW).fill(0),
  capPos: -1,          // -1 = idle
  capAddr: -1,         // which slot is being written
  wbPos: -1,           // writeback pipeline position (-1 = idle)
  wbBuf: new Array(BPW).fill(0),
  destructive: false,  // if true, slot is zeroed after writeback completes
  wbSrcAddr: -1,       // which slot is being sent (for destructive clear)
  autoInc: false,      // auto-increment mode
  autoIncStart: 0,     // starting address
  autoIncCount: 0,     // how many slots filled so far in this run
  autoIncActive: false,// currently running an auto-inc sequence
  batchQueue:    [],     // slots remaining in batch write (indices 0-7 in order)
  _batchRunning: false,  // true while batch is in progress
  _fileLoadQueue: null,  // non-null while a file load stream is active
  _fileLoadName:  null,
  _fileLoadTotal: 0,
  _fileLoadSent:  0,
  displayNeedsRefresh: true,
},

  // ── Injection channel state ──
  inj: {
    buffer:  new Array(INJ_N).fill(0), // [0]=input end (left), [N-1]=output end (right→loop)
    pending: [],                        // bits queued to enter the inject channel
    flash:   0,
    active:  false,                     // true when bits are in flight
    wbPos:   -1,                        // position within exiting word (-1=idle, 0=marker, 1-16=data bits)
  },

  // ── Clock / tick engine state ──
  clock: {
    running:          false,
    tickCount:        0,
    hz:               1.0,
    lastTick:         0,
    lastFrame:        0,
    ledFlash:         0,       // decays in mainLoop; drives CLOCK LED
    accuracySamples:  [],      // ring buffer of recent actual tick intervals (ms)
    lastTimestamp:     0,      // performance.now() of last tick
  },

  // ── Operator input switches ──
  switchBits: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // 16 bits: indices 0-3 = bits 15-12, indices 4-15 = bits 11-0

  // ── External bus E buffers ──
  ext: {
    outBuf:   [],   // bits accumulated for delivery to external endpoint
    inQueue:  [],   // bits queued for delivery INTO the inbound bus
  },

  // ── Operator action counter ──
  operatorActionCount: 0,

  // ── Filter order: 'pm_first' (default) or 'tg_first' ──
  filterOrder: 'pm_first',

  // ── PM state ──
  pm: makePatternMatcher(),

  // ── PM2 state ──
  pm2: makePatternMatcher({
    cascadeMode: false, cascadeInBuf: [],
    matchOutBuf: [], rejectOutBuf: [],
    matchBridge: [0], rejectBridge: [0],
    matchBridgeFlash: 0.0, rejectBridgeFlash: 0.0,
  }),

  // ── TG1 state ──
  tg1: makeThresholdGate(),

  // ── TG2 state ──
  tg2: makeThresholdGate({
    rejectCount: 0,
    cascadeMode: false, cascadeInBuf: [],
    matchOutBuf: [], rejectOutBuf: [],
    matchBridge: [0], rejectBridge: [0],
    matchBridgeFlash: 0.0, rejectBridgeFlash: 0.0,
  }),


  // ── Session logger ──
  logger: {
  active: false,
  lines: [],
  tickCount: 0,
  startTime: null,
  sessionStartTime: 0,  // performance.now() at session start, for wall-clock tracking
  lastSnapshot: null,
},

  // ── Session statistics ──
  stats: {
  operatorActions:  0,
  wordsTransferred: 0,
  aluOpsExecuted:   0,
  busActivations:   0,
  gateToggles:      0,
  injects:          0,
  memSlotWrites:    0,
  memSlotReads:     0,
  clockChanges:     0,
  aluWritebacks:     0,
  pmRewrites:        0,
  ctrEjects:         0,
  batchWrites:       0,
  pauseMs:           0,   // wall-clock ms spent with clock stopped during session
  _pauseStart:       0,   // internal: performance.now() when clock was stopped
},

  // State organization is complete. All simulation state lives in L21 sub-objects.
  // Const aliases provide short access names (see each alias declaration).
};

// ================================================================
//  UI STATE (not in L21 — display-only, not part of simulation)
//
//  These variables control rendering and user interaction.
//  They are intentionally kept separate from L21 because they:
//    - Cannot be serialized (DOM refs, canvas contexts, ResizeObserver)
//    - Don't participate in simulation logic
//    - Are specific to this rendering implementation
//
//  UI state locations (intentionally outside L21 — not serializable):
//    const EL = {}                     — cached DOM element refs
//    const SK = {...}                  — active skin canvas colors
//    let currentSkinId                 — active skin name
//    const loopGeometryCache = {}      — canvas layout calculations
//    const loopHeadBitElements = {}    — cached head display DOM refs
//    const loopHeadWordLastDisplayed   — dirty-check cache
//    const counterDisplayElements = {} — cached counter DOM refs
//    const counterLastDisplayedValue   — dirty-check cache
//    const _drag = {...}               — drag-to-set interaction state
//    const ro = ResizeObserver         — canvas resize handler
// ================================================================

// Short alias for L21.loops — used throughout the codebase
const loops = L21.loops;


// Counter state — short alias for L21.ctr
const ctr = L21.ctr;

// Increment a loop counter by 1 if the named trigger is enabled for it
function ctrFire(id, trigger) {
  if(!ctr[id].triggers[trigger]) return;
  ctr[id].val = ctr[id].val + 1;
  refreshCounterDisplay(id);
  haltLoopsWhenCountersMatch();
}

// Bulk increment — fires a trigger N times but only refreshes display and checks halt once
function ctrFireBulk(id, trigger, count) {
  if(!ctr[id].triggers[trigger]) return;
  ctr[id].val = ctr[id].val + count;
  refreshCounterDisplay(id);
  haltLoopsWhenCountersMatch();
}

// ── Bus state moved to L21.buses ──

// Bus rendering constants (not state — used by canvas draw functions)
const BUS_B_COLOR  = '#d050f0';
const BUS_B_RGB    = [208,80,240];
const BUS_C_COLOR = '#20c8a0';
const BUS_C_RGB   = [32,200,160];

// P2P word buffer limit
const P2P_BUFFER_MAX_WORDS = 2048;

// ── Bus H peer + source/destination selectors ──────────────────────────────
function selBusHPeer(machineId) {
  L21.buses.h.peerTarget = machineId || null;
  document.querySelectorAll('#bush-peer-sel .lbtn').forEach(el =>
    el.classList.toggle('sel-bush-peer', el.dataset.id === machineId));
  logSetup(`OP.BUSH.PEER ${(machineId||'none').toUpperCase()}`, `Operator sets Bus H peer to ${machineId||'none'}`);
}

// ── Bus I peer + source/destination selectors ──────────────────────────────
function selBusIPeer(machineId) {
  L21.buses.i.peerTarget = machineId || null;
  document.querySelectorAll('#busi-peer-sel .lbtn').forEach(el =>
    el.classList.toggle('sel-busi-peer', el.dataset.id === machineId));
  logSetup(`OP.BUSI.PEER ${(machineId||'none').toUpperCase()}`, `Operator sets Bus I peer to ${machineId||'none'}`);
}

// ── Net bus outbound word assembly ─────────────────────────────────────────
// Assembles bits into a 16-bit word and routes it via chainForward.
// If no peer target or no route, drops silently with a log entry.
function deliverBitToNetBusEndpoint(exitBit, xfer, busId) {
  const bus = L21.buses[busId];
  const outBuf = bus.outBuf;
  if (xfer === 0 && exitBit !== 1) return 0;
  if (xfer === 0 && exitBit === 1) xfer = BPW;
  outBuf.push(exitBit);
  const remaining = xfer - 1;
  if (remaining === 0) {
    let data = 0;
    for (let i = 1; i < outBuf.length; i++) data = (data << 1) | outBuf[i];
    data &= 0xFFFF;
    outBuf.length = 0;
    const target = bus.peerTarget;
    if (!target) {
      log(`Bus ${busId.toUpperCase()} — no peer target, word dropped`, 'err');
      return 0;
    }
    const msgType = NET_MSG['BUS_WORD_' + busId.toUpperCase()];
    const packet = { type: msgType, netType: msgType,
                     destId: target, srcId: _p2pMachineId,
                     value: data, ttl: NET_TTL_MAX };
    chainForward(target, packet, null);
    log(`Bus ${busId.toUpperCase()} → ${target.substring(0,6)} : ${data}`, 'bus');
    if (logger.active) logOp(`BUS.${busId.toUpperCase()}.SEND ${data} DEST=${target}`,
                              `Bus ${busId.toUpperCase()} sent ${data} to ${target}`);
  }
  return remaining;
}

// ── Net bus inbound drain ──────────────────────────────────────────────────
function netBusFlushWordBufferToQueue(busId) {
  const bus = L21.buses[busId];
  if (bus.wordBuf.length === 0 || bus.inQueue.length > 0) return;
  const lp = loops[bus.dst];
  if (!lp || lp.paused || opCount.halted[bus.dst]) return;
  const word = bus.wordBuf.shift();
  bus.inQueue.push(1);
  for (let b = 15; b >= 0; b--) bus.inQueue.push((word >> b) & 1);
}

// Pull the next inbound bit from a network bus queue (returns 0 if empty)
function pullNextNetBusInboundBit(busId) {
  const q = L21.buses[busId].inQueue;
  return q.length > 0 ? q.shift() : 0;
}

// ── Net bus receive — called from chainReceiveMessage ─────────────────────
function netBusReceiveWord(busId, msg) {
  if (msg.destId === _p2pMachineId) {
    const buf = L21.buses[busId].wordBuf;
    if (buf.length < P2P_BUFFER_MAX_WORDS) {
      buf.push(msg.value & 0xFFFF);
      log(`Bus ${busId.toUpperCase()} ← ${(msg.srcId||'?').substring(0,6)} : ${msg.value}`, 'bus');
      if (logger.active) logOp(`BUS.${busId.toUpperCase()}.RECV ${msg.value} SRC=${msg.srcId||'?'}`,
                                `Bus ${busId.toUpperCase()} received ${msg.value}`);
    }
    return;
  }
  // Not for us — forward toward the destination
  chainForward(msg.destId, msg, null);
}

// ── Peer selector UI ──────────────────────────────────────────────────────
// Rebuilds the peer target selector for one bus after a scan or connection change.
function buildNetBusPeerOptions(busId) {
  const selId = 'bus' + busId + '-peer-sel';
  const sel = document.getElementById(selId);
  if (!sel) return;
  sel.innerHTML = '';
  const peers = new Map();
  // Direct neighbors
  ['l', 'r'].forEach(side => {
    const s = p2pSide(side);
    if (s.dataChannel && s.dataChannel.readyState === 'open') {
      const id = s.peerId || ('p2p-' + side);
      const handle = s.peerName || id.substring(0, 6);
      peers.set(id, handle + (side === 'l' ? ' ◀' : ' ▶'));
    }
  });
  // Scan topology (deduplicated)
  chainState.topology.detectedMachines.forEach(m => {
    if (m.id !== _p2pMachineId && !peers.has(m.id))
      peers.set(m.id, m.handle || m.id.substring(0, 6));
  });
  if (peers.size === 0) {
    const empty = document.createElement('div');
    empty.style.cssText = 'font-size:9px;color:var(--fg-dim);letter-spacing:1px;padding:3px 0;';
    empty.textContent = 'NO PEERS — RUN PING NETWORK';
    sel.appendChild(empty);
    return;
  }
  const peerSelectFn = busId === 'h' ? selBusHPeer : selBusIPeer;
  const currentTarget = L21.buses[busId].peerTarget;
  peers.forEach((handle, machineId) => {
    const btn = document.createElement('div');
    btn.className = 'lbtn' + (machineId === currentTarget ? (' sel-bush-peer') : '');
    btn.dataset.id = machineId;
    btn.style.cssText = 'font-size:9px;letter-spacing:1px;padding:2px 5px;overflow:hidden;max-width:80px;white-space:nowrap;text-overflow:ellipsis;';
    btn.title = machineId;
    btn.textContent = handle.substring(0, 14).toUpperCase();
    btn.onclick = () => peerSelectFn(machineId);
    sel.appendChild(btn);
  });
}

// Rebuild the peer-target dropdowns for Buses H and I
function refreshNetBusPeerSelectors() {
  buildNetBusPeerOptions('h');
  buildNetBusPeerOptions('i');
}

// Return the number of words buffered on a P2P bus side
function p2pWordBufCount(side) {
  return L21.buses[side === 'r' ? 'g' : 'f'].wordBuf.length;
}

// Update the buffer count display for a P2P bus side
function p2pUpdateBufferDisplay(side) {
  const count = p2pWordBufCount(side);
  const el = document.getElementById('p2p-buf-count-' + side);
  if (el) el.textContent = count > P2P_BUFFER_MAX_WORDS ? '2048+' : String(count);
  // Update LED — on if either buffer has words
  const led = document.getElementById('led-p2p');
  if (led) led.classList.toggle('on', L21.buses.f.wordBuf.length > 0 || L21.buses.g.wordBuf.length > 0);
}

// Flush buffered words into the bit queue whenever the destination loop is ready
function p2pFlushWordBufferToQueue(side) {
  const bus = L21.buses[side === 'r' ? 'g' : 'f'];
  if (bus.wordBuf.length === 0) return;
  const lp = loops[bus.dst];
  if (!lp) return;
  if (lp.paused) return;
  if (opCount.halted[bus.dst]) return;
  if (bus.inQueue.length === 0) {
    const word = bus.wordBuf.shift();
    bus.inQueue.push(1); // marker bit
    for (let b = 15; b >= 0; b--) bus.inQueue.push((word >> b) & 1);
    p2pUpdateBufferDisplay(side);
  }
}

// Select the external endpoint for Bus E inbound delivery
function selEExtDst(id) {
  L21.buses.e.extDst = id;
  document.querySelectorAll('#buse-extdst-sel .lbtn').forEach(el=>{
    el.classList.toggle('sel-buse-extdst', el.dataset.id===id);
  });
  logSetup(`OP.BUSE.EXT ${id.toUpperCase()}`, `Operator sets Bus E external endpoint to ${id}`);
  renderAllComponents();
}

// ── P2P delivery functions — side: 'l' = Bus F/Left, 'r' = Bus G/Right
function deliverBitToP2PEndpoint(exitBit, xfer, side) {
  const bus = L21.buses[side === 'r' ? 'g' : 'f'];
  if(xfer === 0 && exitBit !== 1) return 0;
  if(xfer === 0 && exitBit === 1) xfer = BPW;
  bus.outBuf.push(exitBit);
  const remaining = xfer - 1;
  if(remaining === 0) {
    let data = 0;
    for(let i = 1; i < bus.outBuf.length; i++) data = (data << 1) | bus.outBuf[i];
    data &= 0xFFFF;
    bus.outBuf.length = 0;
    p2pSendWord(data, side);
  }
  return remaining;
}

// Pull the next inbound bit from a P2P bus queue (returns 0 if empty)
function pullNextP2PInboundBit(side) {
  const q = L21.buses[side === 'r' ? 'g' : 'f'].inQueue;
  return q.length > 0 ? q.shift() : 0;
}

// Enqueue a 16-bit word as individual bits into a P2P bus inbound queue
function p2pQueueInboundWord(val, side) {
  val &= 0xFFFF;

  // CBX chain sum uses a two-word marker+value protocol on the P2P wire.
  // cbxCheckIncomingChainWord intercepts 0xCB00 markers and the values
  // that follow them, returning true if the word was consumed.
  if (cbxCheckIncomingChainWord(side, val)) return;

  const buf = L21.buses[side === 'r' ? 'g' : 'f'].wordBuf;
  if (buf.length >= P2P_BUFFER_MAX_WORDS) return;
  buf.push(val);
  p2pUpdateBufferDisplay(side);
}


// ── Operator Count — halt linked loops when their counter matches this value
const opCount = {
  val: 0,
  linked: { working: false, alu: false, memory: false, big: false, global: false },
  halted: { working: false, alu: false, memory: false, big: false, global: false },
};

// Return true if a loop counter has reached the operator count target
function operatorCountMatchesTarget(id) {
  if(id === 'global') return opCount.linked.global && ctr.global.val === opCount.val;
  return opCount.linked[id] && ctr[id].val === opCount.val;
}

// Update the operator count UI elements for all loops
function refreshOperatorCountDisplay() {
  for(const id of ['working','alu','memory','big','global']) {
    const btn = document.getElementById('op-count-btn-'+id);
    if(!btn) continue;
    if(opCount.halted[id]) {
      btn.className = 'op-count-btn halted';
    } else if(opCount.linked[id]) {
      btn.className = 'op-count-btn linked';
    } else {
      btn.className = 'op-count-btn';
    }
  }
}

// Handle operator count target value change from the input field
function onOpCountChange(v) {
  opCount.val = Math.max(0, Math.min(99999, parseInt(v)||0));
  // Release any halts that no longer match
  for(const id of ['working','alu','memory','big','global']) {
    if(opCount.halted[id] && !operatorCountMatchesTarget(id)) {
      opCount.halted[id] = false;
      if(id === 'global') {
        // Release all four loop halts that were caused by global
        for(const lid of ['working','alu','memory','big']) opCount.halted[lid] = false;
        log('All loops released — global op-count halt released', 'info');
      } else {
        log(`${id.toUpperCase()} op-count halt released`, 'info');
      }
    }
  }
  refreshOperatorCountDisplay();
  if(logger.active) logSetup(`OP.OPCOUNT_VAL ${opCount.val}`, `Operator sets op-count to ${opCount.val}`);
}

// Toggle the halt-on-match link for a loop in the operator count system
function toggleOpCountLink(id) {
  opCount.linked[id] = !opCount.linked[id];
  if(!opCount.linked[id]) {
    opCount.halted[id] = false;
    if(id === 'global') {
      for(const lid of ['working','alu','memory','big']) opCount.halted[lid] = false;
    }
  } else if(operatorCountMatchesTarget(id)) {
    if(id === 'global') {
      opCount.halted.global = true;
      for(const lid of ['working','alu','memory','big']) opCount.halted[lid] = true;
      log(`ALL loops halted immediately — global counter already matches op-count ${opCount.val}`, 'err');
    } else {
      opCount.halted[id] = true;
      log(`${id.toUpperCase()} halted immediately — counter already matches op-count ${opCount.val}`, 'err');
    }
  }
  refreshOperatorCountDisplay();
  renderAllComponents();
  if(logger.active) logSetup(
    `OP.OPCOUNT_LINK ${id.toUpperCase()} ${opCount.linked[id]?'ON':'OFF'}`,
    `Operator ${opCount.linked[id]?'links':'unlinks'} ${id} to op-count`
  );
}

// Pause all loops whose counters have reached their operator count targets
function haltLoopsWhenCountersMatch() {
  // Check four loop counters
  for(const id of ['working','alu','memory','big']) {
    if(opCount.linked[id] && !opCount.halted[id] && ctr[id].val === opCount.val) {
      opCount.halted[id] = true;
      log(`${id.toUpperCase()} HALTED — counter reached op-count ${opCount.val}`, 'err');
      if(logger.active) logOp(
        `OPCOUNT.HALT ${id.toUpperCase()} CTR=${ctr[id].val} OPCOUNT=${opCount.val}`,
        `${id} loop halted: counter ${ctr[id].val} matches op-count`
      );
      refreshOperatorCountDisplay();
    }
  }
  // Check global counter — halts all four loops
  if(opCount.linked.global && !opCount.halted.global && ctr.global.val === opCount.val) {
    opCount.halted.global = true;
    for(const lid of ['working','alu','memory','big']) opCount.halted[lid] = true;
    log(`ALL loops HALTED — global counter reached op-count ${opCount.val}`, 'err');
    if(logger.active) logOp(
      `OPCOUNT.HALT GLOBAL CTR=${ctr.global.val} OPCOUNT=${opCount.val}`,
      `All loops halted: global counter ${ctr.global.val} matches op-count`
    );
    refreshOperatorCountDisplay();
  }
}

const DEFS = [
  { id:'working', wordCap:18, headPos:'top',    color:'#4a90d9', rgb:[74,  144,217], fill:0, letter:'W' },
  { id:'alu',     wordCap:24, headPos:'top',    color:'#f0a000', rgb:[240, 160,0  ], fill:0, letter:'A' },
  { id:'memory',  wordCap:24, headPos:'top',    color:'#00c864', rgb:[0,   200,100], fill:0, letter:'M' },
  { id:'big',     wordCap:48, headPos:'top',    color:'#00b8e0', rgb:[0,   184,224], fill:0, letter:'B' },
];
// Working: headPos='top' means R/W bracket faces UPWARD (toward inject row)
// ALU:     headPos='bottom' faces downward (toward bus)
// Memory/Big: headPos='top' faces upward (toward bus, which is ABOVE them)

const COL = {
  working:'left', alu:'right', memory:'left', big:'right',
  pm1:'right', pm2:'right', pm2match:'right', pm2reject:'right',
  tg1:'right', tg2:'right', tg2match:'right', tg2reject:'right',
  'tg1-threshold':'right', 'tg2-threshold':'right',
  ext:'right', challenge:'right', network:'right',
};

// Resolve any bus source/destination ID to a display name, color, and column
function resolveBusEndpoint(id) {
  const def = DEFS.find(d => d.id === id);
  if (def) return { name: def.id.toUpperCase(), abbrev: def.id.charAt(0).toUpperCase(), color: def.color, col: COL[id] || 'left' };
  // Non-loop endpoints: name, abbrev, color, col
  const EP = {
    pm1:             { name: 'PM1',   abbrev: 'P1',  color: '#b03070', col: 'right' },
    pm2:             { name: 'PM2',   abbrev: 'P2',  color: '#b03070', col: 'right' },
    pm2match:        { name: 'PM2·M', abbrev: 'P2M', color: '#b03070', col: 'right' },
    pm2reject:       { name: 'PM2·R', abbrev: 'P2R', color: '#b03070', col: 'right' },
    tg1:             { name: 'TG1',   abbrev: 'T1',  color: '#7060c0', col: 'right' },
    tg2:             { name: 'TG2',   abbrev: 'T2',  color: '#7060c0', col: 'right' },
    tg2match:        { name: 'TG2·M', abbrev: 'T2M', color: '#7060c0', col: 'right' },
    tg2reject:       { name: 'TG2·R', abbrev: 'T2R', color: '#7060c0', col: 'right' },
    'tg1-threshold': { name: 'TG1·T', abbrev: 'T1T', color: '#7060c0', col: 'right' },
    'tg2-threshold': { name: 'TG2·T', abbrev: 'T2T', color: '#7060c0', col: 'right' },
    'tg1-clamp':     { name: 'TG1·C', abbrev: 'T1C', color: '#7060c0', col: 'right' },
    'tg2-clamp':     { name: 'TG2·C', abbrev: 'T2C', color: '#7060c0', col: 'right' },
    ext:             { name: 'EXT',   abbrev: 'EX',  color: '#7090b0', col: 'right' },
    challenge:       { name: 'CHALL', abbrev: 'CH',  color: '#b03070', col: 'right' },
    network:         { name: 'NET',   abbrev: 'NT',  color: '#4a68b8', col: 'right' },
    'file-save':     { name: 'FILE',  abbrev: 'FS',  color: '#7090b0', col: 'right' },
  };
  if (EP[id]) return Object.assign({}, EP[id]);
  if (id && id.startsWith('ctr-')) {
    const ctrId = id.replace('ctr-', '');
    const ctrDef = DEFS.find(d => d.id === ctrId);
    const abbrevMap = { working: 'CW', alu: 'CA', memory: 'CM', big: 'CB', global: 'CG' };
    return { name: 'CTR·' + ctrId.charAt(0).toUpperCase(), abbrev: abbrevMap[ctrId] || ('C' + ctrId.charAt(0).toUpperCase()), color: ctrDef ? ctrDef.color : '#7090b0', col: 'left' };
  }
  return { name: id ? id.toUpperCase() : '?', abbrev: id ? id.charAt(0).toUpperCase() : '?', color: '#7090b0', col: 'left' };
}

// ── Loop state (loops object is defined in L21.loops, aliased above)
function generateEmptyBitArray(wordCap, fill) {
  const bits = [];
  for (let w=0;w<wordCap;w++) {
    const has = Math.random()<fill;
    bits.push(has?1:0);
    if(has){const d=Math.floor(Math.random()*65536);for(let b=15;b>=0;b--)bits.push((d>>b)&1);}
    else{for(let i=0;i<16;i++)bits.push(0);}
  }
  return bits;
}
// Extract the 16-bit data value from a word starting at the given offset
function extractWordAtReadHead(bits, off=0) {
  if(bits[off]!==1) return null;
  let data=0; for(let b=0;b<16;b++) data=(data<<1)|(bits[off+1+b]&1);
  return {marker:1,data};
}
// R/G/W head positions are ALWAYS bits[2]=R, bits[1]=G, bits[0]=W for every loop.
// Rotate is push(shift()): bits flow HIGH→LOW, wrapping 0→N-1.
// So a bit written at W=bits[0] takes N-2 ticks to reach R=bits[2] (full loop). ✓
// headPos only controls which edge the visual bracket appears on, not bit indices.
function readHeadBitIndex(id) { return 2; }
// Return the fixed bit index of the gate head (always 1)
function gateHeadBitIndex(id) { return 1; }

// Write one exit bit from a bus into a destination loop's W dot (bits[0]).
// Only writes during an active 12-bit word transfer (marker starts it).
// Between words, bits[0] is left alone so circulating data isn't clobbered.
// Returns updated xfer counter.
function deliverBitToLoop(exitB, destId, xfer) {
  // FILE SAVE intercept — words directed here feed the armed save stream
  if (destId === 'file-save') {
    return fileSaveReceiveBit(exitB, xfer);
  }
  if(xfer === 0 && exitB !== 1) return 0;  // no transfer active, no marker — skip
  if(xfer === 0 && exitB === 1) {
    xfer = BPW;
    if(!opCount.halted[destId]) ctrFire(destId, 'wordWritten');  // don't count into halted loops
  }
  const lp = loops[destId];
  lp.bits[0] = exitB;
  if(exitB) lp.flash = 1.0;
  // Only update lastWord when the marker bit arrives (start of a new word)
  if(xfer === BPW) lp.lastWord = extractWordAtReadHead(lp.bits);
  if(!opCount.halted[destId]) ctrFire(destId, 'bitsWritten');  // don't count into halted loops
  const remaining = xfer - 1; if(remaining === 0 && logger.active) stats.wordsTransferred++; return remaining;
}
DEFS.forEach(def=>{
  const bits=generateEmptyBitArray(def.wordCap,def.fill);
  const lp={def,bits,flash:0,lastWord:null};
  for(let i=0;i<bits.length;i+=BPW) if(bits[i]===1){lp.lastWord=extractWordAtReadHead(bits.slice(i));break;}
  lp.gateOpen = true;
  lp.paused = false;
  loops[def.id]=lp;
});

// Inject channel state — short alias for L21.inj
const inj = L21.inj;
// ── Bus A state moved to L21.buses.a ──

// Read the pre-rotate bit from whichever source a bus is currently pointed at.
// Called once per bus per tick, before loop rotation, so the value reflects the
// state of the source at the start of this tick — not after it has been modified.
// Counter sources return 0 here; their drain functions inject directly into the bus array.
function sampleBusSourceBit(sourceId) {
  if(sourceId === 'pm1')       return pm.bridge[0];
  if(sourceId === 'pm2')       return pm2.bridge[0];
  if(sourceId === 'pm2match')  return pm2.matchBridge[0];
  if(sourceId === 'pm2reject') return pm2.rejectBridge[0];
  if(sourceId === 'tg1')       return tg1.bridge[0];
  if(sourceId === 'tg2')       return tg2.bridge[0];
  if(sourceId === 'tg2match')  return tg2.matchBridge[0];
  if(sourceId === 'tg2reject') return tg2.rejectBridge[0];
  if(sourceId === 'ext')       return L21.buses.e.inBits[2];
  if(sourceId.startsWith('ctr-')) return 0;
  return opCount.halted[sourceId] ? 0 : loops[sourceId].bits[readHeadBitIndex(sourceId)];
}

// ── Switch state — lives in L21.switchBits (16 bits, [0]=bit15 MSB, [15]=bit0 LSB)
const switchBits = L21.switchBits;

// Read the 16 input switch bits as a single unsigned integer (MSB-first)
function readInputSwitchValue() {
  return switchBits.reduce((acc,b,i) => acc|(b<<(15-i)), 0);
}

// Toggle a single input switch bit and update the display
function flipSwitch(idx) {
  if(_drag.handled) return; // drag already applied this toggle
  // log after toggle
  switchBits[idx] ^= 1;
  const wrap = document.getElementById('sw-'+idx);
  wrap.classList.toggle('on', switchBits[idx]===1);
  refreshInputSwitchDisplay();
}

// Reset all 16 input switches to 0
function clearAllInputSwitches() {
  switchBits.fill(0);
  for(let i=0;i<16;i++) document.getElementById('sw-'+i).classList.remove('on');
  refreshInputSwitchDisplay();
}

// Update the CSS classes on all input switch lever elements
function refreshInputSwitchDisplay() {
  const v=readInputSwitchValue();
  document.getElementById('sw-dec').textContent=v;
  document.getElementById('sw-hex').textContent='0x'+v.toString(16).toUpperCase().padStart(4,'0');
}

// ── Build 8 levers in DOM
function buildInputSwitchLevers() {
  const row=document.getElementById('levers-row');
  for(let i=0;i<16;i++){
    const bit=15-i; // bit 15 on left, bit 0 on right
    // Insert visual gap between bit 12 (i=3) and bit 11 (i=4) — top 4 address bits
    if(i===4){const sp=document.createElement('div');sp.style.cssText='width:4px;flex-shrink:0;';row.appendChild(sp);}
    const wrap=document.createElement('div');
    wrap.className='lever-wrap';
    wrap.id='sw-'+i;
    wrap.title=`Bit ${bit}`;
    wrap.dataset.action='flipSwitch';
    wrap.dataset.arg=String(i);
    wrap.innerHTML=`
      <div class="lever-pip"></div>
      <div class="lever-slot"><div class="lever-arm"></div></div>
      <div class="lever-bit-num">b${bit}</div>
    `;
    row.appendChild(wrap);
  }
}

// ── Inject: push 17-bit word into inject channel

function injectSwitchValueIntoWorkingLoop() {
  if(inj.pending.length>0||inj.buffer.some(b=>b!==0)){
    log('Inject busy — wait for channel to clear','err'); return;
  }
  const val = readInputSwitchValue();
  // 17 bits: marker first, then data MSB→LSB (16 bits)
  const word = [1];
  for(let b=15;b>=0;b--) word.push((val>>b)&1);
  inj.pending = word; // will feed into channel on each tick
  inj.active = true;
  if(logger.active) stats.injects++;
  logSetup(`OP.INJECT ${formatWordAsBinary(val|0x10000)}`, `Operator injects ${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')}) into Injection Channel → Working Loop`);
  document.getElementById('led-inj').classList.add('on');
  log(`INJECT ${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')}) → Working`,'inj');
  renderAllComponents();
}

// Inject a specific value directly into the Working Loop — used by CBX chain release
// so the assigned chain value enters the loop without touching the input switches.
function injectValue(val) {
  val &= 0xFFFF;
  if(inj.pending.length>0||inj.buffer.some(b=>b!==0)){
    log('Inject busy — chain value queued for next available tick','info');
    // Retry once the channel clears — simple approach: try again in 100ms
    setTimeout(() => injectValue(val), 100);
    return;
  }
  const word = [1];
  for(let b=15;b>=0;b--) word.push((val>>b)&1);
  inj.pending = word;
  inj.active  = true;
  if(logger.active) stats.injects++;
  logOp(`CBX.INJECT ${val}`, `CBX chain: injected assigned value ${val} into Working Loop`);
  document.getElementById('led-inj').classList.add('on');
  log(`CBX INJECT ${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')}) → Working`, 'inj');
  renderAllComponents();
}

// ── Clock
// Clock / tick engine state — short alias for L21.clock
const clock = L21.clock;

// ── Pre-built lookup structures for hot-path performance
const LOOP_IDS_SET = new Set(['working','alu','memory','big']);
const BRIDGE_SOURCE_IDS = new Set(['pm1','pm2','pm2match','pm2reject','tg1','tg2','tg2match','tg2reject']);
const DEF_BY_ID = {};  // populated after DEFS is defined
// Populate DEF_BY_ID and other lookup structures used in hot paths
function initializeLookupTables() {
  DEFS.forEach(def => { DEF_BY_ID[def.id] = def; });
}
const UNARY_OPS = new Set(['NOT','SHL','SHR','NEG','INC','DEC','ROR','ABS']);
const CARRY_OPS = new Set(['NEG','INC','DEC','ROR','ABS','MOD']);

// ── Bus Configuration Table ──────────────────────────────────────────────────
// Central data for all 9 buses. Unidirectional (A-D) have single bit array;
// dual-channel (E-I) have outBits/inBits. This table drives selection handlers,
// flow direction, toggle functions, and (future) rendering + tick generics.
const BUS_CONFIGS = {
  a: {
    id: 'a', label: 'Bus A', type: 'unidirectional',
    sidebarSectionId: 'bus-src-sel',   dstSectionId: 'bus-dst-sel',
    selSrcClass: 'sel-src',            selDstClass: 'sel-dst',
    toggleBtnId: 'btn-bus',            inlineBtnId: 'inline-btn-bus',
    ledId: 'led-bus',
    onClass: 'btn btn-busa-off',       offClass: 'btn btn-busa-on',
    logPrefix: 'BUSA',
    rowId: 'bus-row',                  canvasId: 'canvas-bus',
    flashProps: ['flash'],
  },
  b: {
    id: 'b', label: 'Bus B', type: 'unidirectional',
    sidebarSectionId: 'busb-src-sel',  dstSectionId: 'busb-dst-sel',
    selSrcClass: 'sel-busb-src',       selDstClass: 'sel-busb-dst',
    toggleBtnId: 'btn-busb',           inlineBtnId: 'inline-btn-busb',
    onClass: 'btn btn-busb-off',       offClass: 'btn btn-busb-on',
    logPrefix: 'BUSB',
    rowId: 'busb-row',                 canvasId: 'canvas-busb',
    flashProps: ['flash'],
  },
  c: {
    id: 'c', label: 'Bus C', type: 'unidirectional',
    sidebarSectionId: 'busc-src-sel',  dstSectionId: 'busc-dst-sel',
    selSrcClass: 'sel-busc-src',       selDstClass: 'sel-busc-dst',
    toggleBtnId: 'btn-busc',           inlineBtnId: 'inline-btn-busc',
    onClass: 'btn btn-busc-off',       offClass: 'btn btn-busc-on',
    logPrefix: 'BUSC',
    rowId: 'busc-row',                 canvasId: 'canvas-busc',
    flashProps: ['flash'],
  },
  d: {
    id: 'd', label: 'Bus D', type: 'unidirectional',
    sidebarSectionId: 'busd-src-sel',  dstSectionId: 'busd-dst-sel',
    selSrcClass: 'sel-busd-src',       selDstClass: 'sel-busd-dst',
    toggleBtnId: 'btn-busd',           inlineBtnId: 'inline-btn-busd',
    onClass: 'btn btn-busd-off',       offClass: 'btn btn-busd-on',
    logPrefix: 'BUSD',
    rowId: 'busd-row',                 canvasId: 'canvas-busd',
    flashProps: ['flash'],
  },
  e: {
    id: 'e', label: 'Bus E', type: 'dual',
    sidebarSectionId: 'buse-src-sel',  dstSectionId: 'buse-dst-sel',
    selSrcClass: 'sel-buse-src',       selDstClass: 'sel-buse-dst',
    toggleBtnId: 'btn-buse',           inlineBtnId: 'inline-btn-buse',
    onClass: 'btn btn-buse-on',        offClass: 'btn btn-buse-off',
    logPrefix: 'BUSE',
    rowId: 'buse-row',                 canvasId: 'canvas-buse',
    flashProps: ['outFlash', 'inFlash'],
  },
  f: {
    id: 'f', label: 'Bus F', type: 'dual',
    sidebarSectionId: 'busf-src-sel',  dstSectionId: 'busf-dst-sel',
    selSrcClass: 'sel-busf-src',       selDstClass: 'sel-busf-dst',
    toggleBtnId: 'btn-busf',           inlineBtnId: 'inline-btn-busf',
    onClass: 'btn btn-busf-on',        offClass: 'btn btn-busf-off',
    logPrefix: 'BUSF',
    rowId: 'busf-row',                 canvasId: 'canvas-busf',
    flashProps: ['outFlash', 'inFlash'],
  },
  g: {
    id: 'g', label: 'Bus G', type: 'dual',
    sidebarSectionId: 'busg-src-sel',  dstSectionId: 'busg-dst-sel',
    selSrcClass: 'sel-busg-src',       selDstClass: 'sel-busg-dst',
    toggleBtnId: 'btn-busg',           inlineBtnId: 'inline-btn-busg',
    onClass: 'btn btn-busg-on',        offClass: 'btn btn-busg-off',
    logPrefix: 'BUSG',
    rowId: 'busg-row',                 canvasId: 'canvas-busg',
    flashProps: ['outFlash', 'inFlash'],
  },
  h: {
    id: 'h', label: 'Bus H', type: 'dual',
    sidebarSectionId: 'bush-src-sel',  dstSectionId: 'bush-dst-sel',
    selSrcClass: 'sel-bush-src',       selDstClass: 'sel-bush-dst',
    toggleBtnId: 'btn-bush',           inlineBtnId: 'inline-btn-bush',
    onClass: 'btn btn-buse-on',        offClass: 'btn btn-buse-off',
    logPrefix: 'BUSH',
    rowId: 'bush-row',                 canvasId: 'canvas-bush',
    renderColors: { trackOuter:'#f0e0c0', trackInner:'#f8f0e0', trackBorder:'#a06000', outDot:'#c87800', inDot:'#e8a820' },
    flashProps: ['outFlash', 'inFlash'],
  },
  i: {
    id: 'i', label: 'Bus I', type: 'dual',
    sidebarSectionId: 'busi-src-sel',  dstSectionId: 'busi-dst-sel',
    selSrcClass: 'sel-busi-src',       selDstClass: 'sel-busi-dst',
    toggleBtnId: 'btn-busi',           inlineBtnId: 'inline-btn-busi',
    onClass: 'btn btn-buse-on',        offClass: 'btn btn-buse-off',
    logPrefix: 'BUSI',
    rowId: 'busi-row',                 canvasId: 'canvas-busi',
    renderColors: { trackOuter:'#d8f0c0', trackInner:'#ecf8e0', trackBorder:'#409010', outDot:'#60c020', inDot:'#90e040' },
    flashProps: ['outFlash', 'inFlash'],
  },
};

// ── Bus sidebar panel endpoint definitions ───────────────────────────────────
// Each entry: [data-id, display label, extra CSS class or '']
const UNIDI_SRC_ENDPOINTS = [
  ['working','Working',''], ['alu','ALU',''], ['memory','Memory',''], ['big','Big',''],
  ['ext','Ext','lbtn-ext'],
  ['pm1','PM1',''], ['pm2','PM2',''],
  ['pm2match','PM2\u00B7Match','lbtn-dim'], ['pm2reject','PM2\u00B7Reject','lbtn-dim'],
  ['tg1','TG1',''], ['tg2','TG2',''],
  ['tg2match','TG2\u00B7Match','lbtn-dim'], ['tg2reject','TG2\u00B7Reject','lbtn-dim'],
  ['ctr-working','Ctr\u00B7W','lbtn-dim'], ['ctr-alu','Ctr\u00B7A','lbtn-dim'],
  ['ctr-memory','Ctr\u00B7M','lbtn-dim'], ['ctr-big','Ctr\u00B7B','lbtn-dim'],
  ['ctr-global','Ctr\u00B7GLB','lbtn-dim'],
];
const UNIDI_DST_ENDPOINTS = [
  ['working','Working',''], ['alu','ALU',''], ['memory','Memory',''], ['big','Big',''],
  ['challenge','Challenge','lbtn-ext'], ['network','Network','lbtn-ext'],
  ['ctr-working','Ctr\u00B7W','lbtn-dim'], ['ctr-alu','Ctr\u00B7A','lbtn-dim'],
  ['ctr-memory','Ctr\u00B7M','lbtn-dim'], ['ctr-big','Ctr\u00B7B','lbtn-dim'],
  ['ctr-global','Ctr\u00B7GLB','lbtn-dim'],
  ['tg1-threshold','TG1\u00B7Thresh','lbtn-dim'], ['tg2-threshold','TG2\u00B7Thresh','lbtn-dim'],
  ['file-save','File Save','lbtn-mem'],
];
const DUAL_LOOP_ENDPOINTS = [
  ['working','Working',''], ['alu','ALU',''], ['memory','Memory',''], ['big','Big',''],
];

// Build all 9 bus sidebar panels (src/dst grids, controls) from BUS_CONFIGS
function generateBusSidebarPanels() {
  const container = document.querySelector('.sb-bus-group-body');
  if(!container) return;

  // Build a grid of endpoint selection buttons inside a sidebar container
  function makeButtonGrid(endpoints, containerId, selClass, clickFn, defaultId) {
    const wrap = document.createElement('div');
    wrap.className = 'lsel lsel-wrap';
    wrap.id = containerId;
    for(const [epId, label, extraClass] of endpoints) {
      const btn = document.createElement('div');
      btn.className = 'lbtn' + (extraClass ? ' ' + extraClass : '') + (epId === defaultId ? ' ' + selClass : '');
      btn.dataset.id = epId;
      btn.onclick = () => clickFn(epId);
      btn.textContent = label;
      wrap.appendChild(btn);
    }
    return wrap;
  }

  for(const busId of ['a','b','c','d','e','f','g','h','i']) {
    const cfg = BUS_CONFIGS[busId];
    const bus = L21.buses[busId];
    const X = busId.toUpperCase();

    // Section wrapper
    const section = document.createElement('div');
    const sectionClass = 'sb-section sb-collapsed';
    if(busId <= 'd') {
      section.className = sectionClass + ' sb-sec-bus' + busId;
    } else if(busId === 'e') {
      section.className = sectionClass + ' sb-sec-buse';
    } else if(busId === 'f') {
      section.className = sectionClass + ' sb-sec-busf';
    } else if(busId === 'g') {
      section.className = sectionClass + ' sb-sec-busg';
    } else if(busId === 'h') {
      section.className = sectionClass + ' sb-sec-bush';
    } else if(busId === 'i') {
      section.className = sectionClass + ' sb-sec-busi';
    } else {
      section.className = sectionClass;
    }
    if(busId === 'h') section.id = 'sb-sec-bush';
    if(busId === 'i') section.id = 'sb-sec-busi';

    // Title
    const title = document.createElement('div');
    title.className = 'sb-title';
    if(busId >= 'e') {
      const colorVar = (busId === 'h') ? 'var(--bus-net0-color)' : (busId === 'i') ? 'var(--bus-net1-color)' : 'var(--bus-' + busId + '-color)';
      title.style.color = colorVar;
    }
    title.innerHTML = '<button class="sb-collapse-btn" data-action="toggleSidebarSection" title="Collapse/expand">\u25BC</button>Bus ' + X;
    section.appendChild(title);

    // Body
    const body = document.createElement('div');
    body.className = 'sb-body';

    if(busId <= 'd') {
      // ── Unidirectional bus: full src/dst grids
      const srcLabel = document.createElement('div');
      srcLabel.className = 'lsel-label';
      srcLabel.textContent = 'Source (FROM)';
      body.appendChild(srcLabel);

      const srcClickFn = (epId) => selBusSrc(busId, epId);
      body.appendChild(makeButtonGrid(UNIDI_SRC_ENDPOINTS, cfg.sidebarSectionId, cfg.selSrcClass, srcClickFn, bus.src));

      const dstLabel = document.createElement('div');
      dstLabel.className = 'lsel-label';
      dstLabel.textContent = 'Destination (TO)';
      body.appendChild(dstLabel);

      const dstClickFn = (epId) => selBusDst(busId, epId);
      body.appendChild(makeButtonGrid(UNIDI_DST_ENDPOINTS, cfg.dstSectionId, cfg.selDstClass, dstClickFn, bus.dst));

      const toggleDiv = document.createElement('div');
      toggleDiv.className = 'bus-toggle';
      const toggleFnName = busId === 'a' ? 'toggleBus' : 'toggleBus' + X;
      toggleDiv.innerHTML = '<button class="' + cfg.offClass + '" id="' + cfg.toggleBtnId + '" data-action="' + toggleFnName + '">\u22B3 TURN BUS ' + X + ' ON</button>';
      body.appendChild(toggleDiv);

    } else if(busId === 'e') {
      // ── Bus E: external endpoint + loop-only src/dst
      const extLabel = document.createElement('div');
      extLabel.className = 'lsel-label';
      extLabel.style.cssText = 'font-size:8px;color:var(--fg);margin-bottom:2px;';
      extLabel.textContent = 'External Endpoint (TO / FROM)';
      body.appendChild(extLabel);

      const extWrap = document.createElement('div');
      extWrap.className = 'lsel';
      extWrap.id = 'buse-extdst-sel';
      extWrap.style.cssText = 'flex-wrap:wrap;gap:3px;margin-bottom:6px;';
      for(const [epId, label] of [['challenge','Challenge'],['network','Network']]) {
        const btn = document.createElement('div');
        btn.className = 'lbtn lbtn-ext' + (epId === bus.extDst ? ' sel-buse-extdst' : '');
        btn.dataset.id = epId;
        btn.onclick = () => selEExtDst(epId);
        btn.textContent = label;
        extWrap.appendChild(btn);
      }
      body.appendChild(extWrap);

      const srcLabel = document.createElement('div');
      srcLabel.className = 'lsel-label';
      srcLabel.textContent = 'Outbound Source (Loop \u2192 Ext)';
      body.appendChild(srcLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.sidebarSectionId, cfg.selSrcClass, (epId) => selBusSrc('e', epId), bus.src));

      const dstLabel = document.createElement('div');
      dstLabel.className = 'lsel-label';
      dstLabel.textContent = 'Inbound Destination (Ext \u2192 Loop)';
      body.appendChild(dstLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.dstSectionId, cfg.selDstClass, (epId) => selBusDst('e', epId), bus.dst));

      const toggleDiv = document.createElement('div');
      toggleDiv.className = 'bus-toggle';
      toggleDiv.innerHTML = '<button class="' + cfg.offClass + '" id="' + cfg.toggleBtnId + '" data-action="toggleBusE">\u22B3 TURN BUS E ON</button>';
      body.appendChild(toggleDiv);

    } else if(busId === 'f' || busId === 'g') {
      // ── Bus F/G: P2P Left/Right
      const side = busId === 'f' ? 'Left' : 'Right';
      const desc = document.createElement('div');
      desc.style.cssText = 'font-size:8px;color:var(--fg-dim);letter-spacing:1px;margin-bottom:6px;';
      desc.textContent = 'P2P ' + side + ' \u2014 direct ' + side.toLowerCase() + ' neighbor';
      body.appendChild(desc);

      const selSrcFn = (epId) => selBusSrc(busId, epId);
      const selDstFn = (epId) => selBusDst(busId, epId);

      const srcLabel = document.createElement('div');
      srcLabel.className = 'lsel-label';
      srcLabel.textContent = 'Outbound Source (Loop \u2192 ' + side + ' Peer)';
      body.appendChild(srcLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.sidebarSectionId, cfg.selSrcClass, selSrcFn, bus.src));

      const dstLabel = document.createElement('div');
      dstLabel.className = 'lsel-label';
      dstLabel.textContent = 'Inbound Destination (' + side + ' Peer \u2192 Loop)';
      body.appendChild(dstLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.dstSectionId, cfg.selDstClass, selDstFn, bus.dst));

      const toggleDiv = document.createElement('div');
      toggleDiv.className = 'bus-toggle';
      toggleDiv.innerHTML = '<button class="' + cfg.offClass + '" id="' + cfg.toggleBtnId + '" data-action="toggleBus' + X + '">\u22B3 TURN BUS ' + X + ' ON</button>';
      body.appendChild(toggleDiv);

    } else {
      // ── Bus H/I: Net routable
      const peerLabel = document.createElement('div');
      peerLabel.className = 'lsel-label';
      peerLabel.style.cssText = 'font-size:8px;color:var(--fg);margin-bottom:3px;';
      peerLabel.textContent = 'Peer Target';
      body.appendChild(peerLabel);

      const peerWrap = document.createElement('div');
      peerWrap.className = 'lsel';
      peerWrap.id = 'bus' + busId + '-peer-sel';
      peerWrap.style.cssText = 'flex-wrap:wrap;gap:3px;margin-bottom:6px;min-height:22px;';
      const peerPlaceholder = document.createElement('div');
      peerPlaceholder.style.cssText = 'font-size:9px;color:var(--fg-dim);letter-spacing:1px;padding:3px 0;';
      peerPlaceholder.textContent = 'NO PEERS \u2014 RUN PING NETWORK';
      peerWrap.appendChild(peerPlaceholder);
      body.appendChild(peerWrap);

      const selSrcFn = (epId) => selBusSrc(busId, epId);
      const selDstFn = (epId) => selBusDst(busId, epId);

      const srcLabel = document.createElement('div');
      srcLabel.className = 'lsel-label';
      srcLabel.textContent = 'Outbound Source (Loop \u2192 Peer)';
      body.appendChild(srcLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.sidebarSectionId, cfg.selSrcClass, selSrcFn, bus.src));

      const dstLabel = document.createElement('div');
      dstLabel.className = 'lsel-label';
      dstLabel.textContent = 'Inbound Destination (Peer \u2192 Loop)';
      body.appendChild(dstLabel);
      body.appendChild(makeButtonGrid(DUAL_LOOP_ENDPOINTS, cfg.dstSectionId, cfg.selDstClass, selDstFn, bus.dst));

      const toggleDiv = document.createElement('div');
      toggleDiv.className = 'bus-toggle';
      toggleDiv.innerHTML = '<button class="' + cfg.offClass + '" id="' + cfg.toggleBtnId + '" data-action="toggleBus' + X + '">\u22B3 TURN BUS ' + X + ' ON</button>';
      body.appendChild(toggleDiv);
    }

    section.appendChild(body);
    container.appendChild(section);
  }
}

// ── Unified bus flow direction ────────────────────────────────────────────────
// Unidirectional (A-D): returns 'ltr', 'rtl', or 'invalid'
// Dual-channel (E-I): always 'ltr' (out=ltr, in handled separately)
function getBusFlowDirection(busId) {
  const cfg = BUS_CONFIGS[busId];
  if (cfg.type === 'dual') return 'ltr';
  const bus = L21.buses[busId];
  if(bus.src === bus.dst) return 'invalid';
  const srcIsCtr = bus.src.startsWith('ctr-');
  const dstIsCtr = bus.dst.startsWith('ctr-');
  if(srcIsCtr && dstIsCtr) return 'invalid';
  if(BRIDGE_SOURCE_IDS.has(bus.src)) return 'rtl';
  const dstIsTG = bus.dst === 'tg1-threshold' || bus.dst === 'tg2-threshold' || bus.dst === 'tg1-clamp' || bus.dst === 'tg2-clamp';
  const srcCol = srcIsCtr ? 'left' : COL[bus.src];
  const dstCol = (dstIsCtr || dstIsTG) ? 'right' : COL[bus.dst];
  if(srcCol === dstCol) return 'ltr';
  return srcCol === 'left' ? 'ltr' : 'rtl';
}

// ── Unified bus selection handlers ───────────────────────────────────────────
function selBusSrc(busId, endpointId) {
  const cfg = BUS_CONFIGS[busId];
  L21.buses[busId].src = endpointId;
  document.querySelectorAll('#' + cfg.sidebarSectionId + ' .lbtn').forEach(el => {
    el.classList.toggle(cfg.selSrcClass, el.dataset.id === endpointId);
  });
  logSetup(`OP.${cfg.logPrefix}.SRC ${endpointId.toUpperCase()}`, `Operator sets ${cfg.label} source to ${endpointId}`);
  renderAllComponents();
}

// Set the destination endpoint for any bus and update sidebar UI
function selBusDst(busId, endpointId) {
  const cfg = BUS_CONFIGS[busId];
  L21.buses[busId].dst = endpointId;
  document.querySelectorAll('#' + cfg.dstSectionId + ' .lbtn').forEach(el => {
    el.classList.toggle(cfg.selDstClass, el.dataset.id === endpointId);
  });
  logSetup(`OP.${cfg.logPrefix}.DST ${endpointId.toUpperCase()}`, `Operator sets ${cfg.label} destination to ${endpointId}`);
  renderAllComponents();
}

// ── Unified bus toggle ───────────────────────────────────────────────────────
function toggleBusGeneric(busId) {
  const cfg = BUS_CONFIGS[busId];
  const bus = L21.buses[busId];
  // Unidirectional buses check direction validity
  if(cfg.type === 'unidirectional') {
    const dir = getBusFlowDirection(busId);
    if(dir === 'invalid') { log(`${cfg.label.toUpperCase()}: SRC = DST, pick different loops`, 'err'); return; }
  }
  // Dual buses with peer requirement (H/I) — no direction check needed
  bus.active = !bus.active;
  if(bus.active && logger.active) stats.busActivations++;
  syncBusSidebarButton(busId);
  // LED for Bus A
  if(cfg.ledId) {
    const led = document.getElementById(cfg.ledId);
    if(led) led.classList.toggle('run', bus.active);
  }
  // Logging
  if(bus.active) {
    const srcPart = bus.src ? bus.src.toUpperCase() : '';
    const dstPart = bus.dst ? bus.dst.toUpperCase() : '';
    const peerPart = bus.peerTarget ? ` PEER=${bus.peerTarget}` : '';
    const extPart = bus.extDst ? ` EXT=${bus.extDst.toUpperCase()}` : '';
    log(`${cfg.label.toUpperCase()} ON: ${srcPart} \u2192 ${dstPart}`, 'bus');
    logSetup(`OP.${cfg.logPrefix} ON SRC=${srcPart} DST=${dstPart}${peerPart}${extPart}`, `Operator opens ${cfg.label}: ${srcPart} \u2192 ${dstPart}`);
  } else {
    log(`${cfg.label.toUpperCase()} onramp CLOSED \u2014 draining`, 'info');
    logSetup(`OP.${cfg.logPrefix} OFF`, `Operator closes ${cfg.label} onramp`);
  }
  renderAllComponents();
}

// ── Unified unidirectional bus tick (A-D) ─────────────────────────────────────
// Replaces busBTick, busCTick, busDTick, and inline Bus A tick code.
// All four buses use identical logic: shift bits in flow direction, deliver
// exit bit to destination (loop, file-save, challenge/network, counter, TG).
function unidirectionalBusTick(busId, srcPreBit) {
  const bus = L21.buses[busId];
  const cfg = BUS_CONFIGS[busId];
  const dir = getBusFlowDirection(busId);

  // Skip if direction invalid and no live bits to drain
  if(dir === 'invalid' && bus.liveBitCount === 0) return;

  // Onramp: use srcPreBit if source is a loop or bridge (PM/TG), not counter
  // Counter sources are injected separately by drainCounterQueueToBus*
  const onrampBit = (bus.active && dir !== 'invalid' && !bus.src.startsWith('ctr-')) ? srcPreBit : 0;

  // Shift bus array in flow direction
  let exitBit;
  if(dir === 'ltr' || dir === 'invalid') {
    exitBit = bus.bits[BUS_N-1];
    for(let i = BUS_N-1; i > 0; i--) bus.bits[i] = bus.bits[i-1];
    bus.bits[0] = onrampBit;
  } else {
    exitBit = bus.bits[0];
    for(let i = 0; i < BUS_N-1; i++) bus.bits[i] = bus.bits[i+1];
    bus.bits[BUS_N-1] = onrampBit;
  }
  bus.liveBitCount += onrampBit - exitBit;

  // Deliver exit bit to destination
  const dstIsLoop = LOOP_IDS_SET.has(bus.dst);
  if(dstIsLoop || bus.dst === 'file-save') {
    bus.transferBitsRemaining = deliverBitToLoop(exitBit, bus.dst, bus.transferBitsRemaining);
    if(bus.transferBitsRemaining > 0 || exitBit) bus.flash = 1.0;
  } else if(bus.dst === 'challenge' || bus.dst === 'network') {
    bus.transferBitsRemaining = deliverBitToExternalEndpoint(exitBit, bus.transferBitsRemaining);
    if(bus.transferBitsRemaining > 0 || exitBit) bus.flash = 1.0;
  } else if(bus.dst.startsWith('ctr-')) {
    const dstId = bus.dst.replace('ctr-','');
    if(!bus.counterCapture.active && exitBit === 1) {
      bus.counterCapture.active = true;
      bus.counterCapture.target = dstId;
      bus.counterCapture.buf = [1];
      bus.flash = 1.0;
    } else if(bus.counterCapture.active) {
      bus.counterCapture.buf.push(exitBit);
      if(exitBit) bus.flash = 1.0;
      if(bus.counterCapture.buf.length === BPW) {
        let val = 0;
        for(let b = 0; b < 16; b++) val = (val << 1) | bus.counterCapture.buf[1+b];
        if(bus.counterCapture.target === 'global') ctrLoadGlobal(val);
        else ctrLoad(bus.counterCapture.target, val);
        log(`${cfg.label} \u2192 Counter ${bus.counterCapture.target.toUpperCase()}: ${val}`, 'info');
        logOp(`BUS.${busId.toUpperCase()}.XFER [M|${val.toString(2).padStart(11,'0')}] \u2192 CTR.${bus.counterCapture.target.toUpperCase()} VAL=${val}`,
              `${cfg.label} loads ${val} into ${bus.counterCapture.target} counter`);
        bus.counterCapture.active = false;
        bus.counterCapture.buf = [];
      }
    }
  } else if(bus.dst === 'tg1-threshold' || bus.dst === 'tg2-threshold' || bus.dst === 'tg1-clamp' || bus.dst === 'tg2-clamp') {
    bus.tgCapture.target = bus.dst;
    if(deliverBitToTGThreshold(exitBit, bus.tgCapture, cfg.label)) bus.flash = 1.0;
  }
  if(bus.liveBitCount > 0) bus.flash = 1.0;
}

// ── Unified dual-channel bus tick (E-I) ──────────────────────────────────────
// Replaces inline Bus E/F/G/H/I tick code in executeOneTick.
// All five dual buses: shift outBits LTR, deliver exit to outbound endpoint;
// pull inbound bit from source, shift inBits LTR, deliver exit to dst loop.
function dualChannelBusTick(busId, srcPreBit) {
  const bus = L21.buses[busId];
  const requiresPeer = (busId === 'h' || busId === 'i');

  if(bus.active && (!requiresPeer || bus.peerTarget)) {
    // ── Outbound: shift out, feed from loop source
    const exitOut = bus.outBits[BUS_N-1];
    for(let i = BUS_N-1; i > 0; i--) bus.outBits[i] = bus.outBits[i-1];
    bus.outBits[0] = srcPreBit;
    if(srcPreBit) bus.outFlash = 1.0;

    // Deliver outbound exit bit via bus-specific endpoint
    if(busId === 'e')      bus.outTransfer = deliverBitToExternalEndpoint(exitOut, bus.outTransfer);
    else if(busId === 'f') bus.outTransfer = deliverBitToP2PEndpoint(exitOut, bus.outTransfer, 'l');
    else if(busId === 'g') bus.outTransfer = deliverBitToP2PEndpoint(exitOut, bus.outTransfer, 'r');
    else                   bus.outTransfer = deliverBitToNetBusEndpoint(exitOut, bus.outTransfer, busId);

    // ── Inbound: pull next bit from source, shift in, deliver to dst
    let inBit;
    if(busId === 'e')      inBit = pullNextInboundBitFromQueue();
    else if(busId === 'f') inBit = pullNextP2PInboundBit('l');
    else if(busId === 'g') inBit = pullNextP2PInboundBit('r');
    else                   inBit = pullNextNetBusInboundBit(busId);

    const exitIn = bus.inBits[BUS_N-1];
    for(let i = BUS_N-1; i > 0; i--) bus.inBits[i] = bus.inBits[i-1];
    bus.inBits[0] = inBit;
    if(inBit) bus.inFlash = 1.0;

    // Deliver inbound exit bit to destination loop
    if(exitIn !== undefined) bus.inTransfer = deliverBitToLoop(exitIn, bus.dst, bus.inTransfer);
  } else {
    // Drain both arrays when inactive (shift out without delivering)
    for(let i = BUS_N-1; i > 0; i--) bus.outBits[i] = bus.outBits[i-1]; bus.outBits[0] = 0;
    for(let i = BUS_N-1; i > 0; i--) bus.inBits[i] = bus.inBits[i-1];  bus.inBits[0] = 0;
  }
}

// ── Clock accuracy tracking — lives in L21.clock.accuracySamples / L21.clock.lastTimestamp
const CLOCK_ACCURACY_SAMPLE_COUNT = 16;  // rolling window
const FLASH_DECAY_MS = 130;              // visual glow decay rate (ms per unit)
const LED_FLASH_DECAY_MS = 55;           // clock LED glow decay rate (ms per unit)
const STATS_DISPLAY_INTERVAL_MS = 250;   // accuracy + challenge stats update interval (~4×/sec)
const MAX_TICKS_PER_FRAME = 8;           // cap catch-up ticks to prevent runaway after tab backgrounding

// ── Dirty flags — skip DOM updates when state hasn't changed (state lives in L21.alu / L21.mem)
function flagAluDisplayAsStale() { L21.alu.displayNeedsRefresh = true; }
// Mark the memory display as needing a refresh on the next render pass
function flagMemoryDisplayAsStale() { L21.mem.displayNeedsRefresh = true; }


// ── Cached canvas context getter (invalidated on resize)
function getOrCreateCanvasContext(canvasEl, cacheKey) {
  if(!EL[cacheKey] || EL[cacheKey].canvas !== canvasEl) EL[cacheKey] = canvasEl.getContext('2d');
  return EL[cacheKey];
}

// ── DOM element cache — populated at init, avoids getElementById in hot paths
const EL = {};
// Populate the EL cache with frequently accessed DOM elements (called once at init)
function cacheFrequentlyAccessedDOMElements() {
  EL.canvasBusb = document.getElementById('canvas-busb');
  EL.canvasBusc = document.getElementById('canvas-busc');
  EL.canvasBusd = document.getElementById('canvas-busd');
  EL.rowBusb    = document.getElementById('busb-row');
  EL.rowBusc    = document.getElementById('busc-row');
  EL.rowBusd    = document.getElementById('busd-row');
  EL.aluBitsA   = document.getElementById('alu-bits-a');
  EL.aluBitsB   = document.getElementById('alu-bits-b');
  EL.aluBitsC   = document.getElementById('alu-bits-c');
  EL.aluBitsD   = document.getElementById('alu-bits-d');
  EL.aluBitsR   = document.getElementById('alu-bits-r');
  EL.aluValA    = document.getElementById('alu-val-a');
  EL.aluValB    = document.getElementById('alu-val-b');
  EL.aluValC    = document.getElementById('alu-val-c');
  EL.aluValD    = document.getElementById('alu-val-d');
  EL.aluValR    = document.getElementById('alu-val-r');
  EL.aluCapA    = document.getElementById('alu-capture-a');
  EL.aluCapB    = document.getElementById('alu-capture-b');
  EL.aluCapC    = document.getElementById('alu-capture-c');
  EL.aluCapD    = document.getElementById('alu-capture-d');
  EL.flagZero   = document.getElementById('flag-zero');
  EL.flagCarry  = document.getElementById('flag-carry');
  EL.flagOverflow=document.getElementById('flag-overflow');
  EL.flagSign   = document.getElementById('flag-sign');
  EL.flagParity = document.getElementById('flag-parity');
  EL.memSlotsGrid = document.getElementById('mem-slots-grid');
  EL.memAddrDisp  = document.getElementById('mem-addr-display');
  EL.memSlots = [];
  for(let i=0;i<16;i++) EL.memSlots[i] = null;
  EL.clockAccuracyDisplay = document.getElementById('perf-display');
  EL.tickDisplay = document.getElementById('tick-display');
  EL.ledClock = document.getElementById('led-clock');
  EL.opaSel = {}; EL.opbSel = {};
  ['a','b','c','d'].forEach(r=>{
    EL.opaSel[r] = document.getElementById('opa-sel-'+r);
    EL.opbSel[r] = document.getElementById('opb-sel-'+r);
  });
  // Canvas context cache
  EL.ctxBusb = null; EL.ctxBusc = null; EL.ctxBusd = null; EL.ctxBuse = null;
  EL.ctxBusa = null; EL.ctxInj  = null;
  EL.canvasBuse = document.getElementById('canvas-buse');
  EL.rowBuse    = document.getElementById('buse-row');
  EL.canvasBusa = document.getElementById('canvas-bus');
  EL.rowBusa    = document.getElementById('bus-row');
  EL.canvasInj  = document.getElementById('canvas-inject');
  EL.injWrap    = document.getElementById('inject-channel-wrap') || document.querySelector('.inject-channel-wrap');
  // Cache all bus canvas/row elements by config ID for render functions
  EL.busCanvas = {}; EL.busRow = {};
  for (const busId in BUS_CONFIGS) {
    const cfg = BUS_CONFIGS[busId];
    EL.busCanvas[busId] = document.getElementById(cfg.canvasId);
    EL.busRow[busId]    = document.getElementById(cfg.rowId);
  }
  // Bit display containers
  EL.bitsWorking = document.getElementById('bits-working');
  EL.bitsAlu     = document.getElementById('bits-alu');
  EL.bitsMemory  = document.getElementById('bits-memory');
  EL.bitsBig     = document.getElementById('bits-big');
  EL.valsWorking = document.getElementById('vals-working');
  EL.valsAlu     = document.getElementById('vals-alu');
  EL.valsMemory  = document.getElementById('vals-memory');
  EL.valsBig     = document.getElementById('vals-big');
}
// Set the master clock to a new Hz value and update the speed label
function applyNewClockSpeed(hz) {
  clock.hz = hz;
  const label = hz === Math.round(hz) ? hz.toFixed(1) : hz.toFixed(2);
  const lbl = EL.speedLabel || document.getElementById('speed-label');
  if(lbl) lbl.textContent = label + ' Hz';
  if(logger.active) stats.clockChanges++;
}
// Handle speed slider input — clamps to integer Hz 1–144, syncs all controls
function handleSpeedSliderChange(v) {
  // Slider: integer Hz 1–144
  const hz = Math.round(Math.max(1, Math.min(144, parseFloat(v)||1)));
  applyNewClockSpeed(hz);
  // Sync the slider (needed when called from keyboard shortcuts)
  const sld = EL.speedSlider || document.getElementById('speed-slider');
  if(sld) sld.value = hz;
  // Sync the number input
  const inp = EL.speedInput || document.getElementById('speed-input');
  if(inp) inp.value = hz;
}
// Handle speed number input — allows decimal Hz 0.1–144, syncs slider
function handleSpeedNumberInputChange(v) {
  // Number input: any decimal >= 0.1, max 144
  const hz = Math.max(0.1, Math.min(144, parseFloat(v)||1));
  applyNewClockSpeed(hz);
  // Sync slider to nearest integer (clamped)
  const sld = EL.speedSlider || document.getElementById('speed-slider');
  if(sld) sld.value = Math.round(hz);
}
// Clamp a raw slider value to a valid integer Hz (1–144)
function clampSliderValueToHz(v) { return Math.round(Math.max(1, Math.min(144, parseFloat(v)||1))); }

// Toggle the master clock between running and stopped
function toggleMasterClock(){
  clock.running=!clock.running;
  const btn=document.getElementById('btn-run');
  if(clock.running){
    // Clock restarted — record pause duration if logger active
    if(logger.active && stats._pauseStart > 0) {
      stats.pauseMs += performance.now() - stats._pauseStart;
      stats._pauseStart = 0;
    }
    btn.textContent = '⏹ STOP';
    btn.className = 'btn btn-pause';
    document.getElementById('led-run').classList.add('run');
    clock.lastTick = clock.lastFrame = performance.now();
    clock.lastTimestamp = 0;
    clock.accuracySamples = [];
    requestAnimationFrame(mainLoop);
  } else {
    // Clock stopped — record when pause began
    if(logger.active) stats._pauseStart = performance.now();
    btn.textContent = '▶ START';
    btn.className = 'btn btn-run';
    document.getElementById('led-run').classList.remove('run');
  }
}
// Execute exactly one tick and re-render all components (single-step mode)
function stepMachineOneTick(){executeOneTick();renderAllComponents();}
// Reset the tick counter to zero and update the display
function resetTickCount(){clock.tickCount=0;document.getElementById('tick-display').textContent='000000000';}
// Select all text in an input element (used by onfocus handlers)
function selfSelect(el){el.select();}


// ══════════════════════════════════════════════════════════════
// CHALLENGE BUS (CBX) — Inter-Challenge-Box coordination layer
//
// CBX packets travel over the existing WebRTC P2P channels (Buses F and G)
// using a reserved JSON message type "cbx". They are intercepted in the
// P2P message handler before ordinary loop data is touched.
//
// Three availability states per machine:
//   RELAY       (default) — discovery passes through transparently when busy
//   OPEN        — operator is willing to join a challenge; sees incoming requests
//   SOFT_DECLINE — always returns TERMINAL to any incoming discovery
//
// The network probe (PING ALL) sends a CBX_DISCOVERY out both sides,
// collects hop counts, detects ring topology, and displays the result.
// ══════════════════════════════════════════════════════════════

// ── CBX message type constants ──────────────────────────────────
const CBX_MSG = {
  DISCOVERY:          'cbx_discovery',
  DISCOVERY_ACK:      'cbx_discovery_ack',
  TERMINAL:           'cbx_terminal',
  PROBE:              'cbx_probe',
  PROBE_RETURN:       'cbx_probe_return',
  STATUS:             'cbx_status',
  // ── Chain challenge messages ──
  CHAIN_INVITE:       'cbx_chain_invite',     // origin → neighbors: want to start a challenge?
  CHAIN_INVITE_ACK:   'cbx_chain_invite_ack', // neighbor → origin: I accept / I decline
  CHAIN_ASSIGN:       'cbx_chain_assign',
  CHAIN_ASSIGN_ACK:   'cbx_chain_assign_ack',
  CHAIN_GO:           'cbx_chain_go',
  CHAIN_SUM_SUBMIT:   'cbx_chain_sum_submit',
  CHAIN_SUM_OK:       'cbx_chain_sum_ok',
  CHAIN_SUM_FAIL:     'cbx_chain_sum_fail',
  CHAIN_ABORT:        'cbx_chain_abort',
  CHAIN_COMPLETE:     'cbx_chain_complete',
  CHAIN_LOCKOUT:      'cbx_chain_lockout',
};

// Reserved marker word that precedes a chain sum value on the P2P wire.
// 0xCB00 is "Challenge Bus, sum follows". It is intercepted by the local
// Challenge Box and never delivered to the operator's loops.
const CBX_CHAIN_SUM_MARKER = 0xCB00;

// ── CBX availability states ─────────────────────────────────────
// All machines always relay and always accept challenge invitations unless busy.
// The availability system has been simplified to a single busy/idle state
// derived from CHALL.active rather than a stored availability constant.

// ── CBX state object ────────────────────────────────────────────
const CBX = {
  // Network topology as last discovered by a probe
  topology: {
    nodesToLeft:       0,
    nodesToRight:      0,
    isRing:            false,
    totalNodes:        0,
    lastProbeTimestamp: 0,
  },

  // Active probe tracking
  activeProbe: {
    inFlight:          false,
    leftResolved:      false,
    rightResolved:     false,
    leftHopCount:      0,
    rightHopCount:     0,
    leftIsRingReturn:  false,
    rightIsRingReturn: false,
    probeId:           0,
  },

  // Invite state — set by cbxHandleChainInvite, cleared on accept/decline
  _pendingInviteFromSide: null,
  _pendingInviteMessage:  null,

  // Marker detection — set when 0xCB00 arrives on a P2P channel
  _incomingMarkerSide: null,

  // ── Chain challenge state — ORIGIN side ──────────────────────
  // Active when this machine originated a chain challenge.
  originChallenge: {
    active:               false,
    challengeId:          0,
    totalMachines:        0,
    assignedValues:       {},
    verifiedPositions:    new Set(),
    verifiedSums:         {},
    knownRunningSums:     new Set(),
    startSide:            null,
    starterPosition:      0,
    inviteAcksPending:    0,       // how many invite acceptances still awaited
    assignAcksPending:    0,
    correctFinalSum:      0,
    startTick:            0,
    startTime:            0,
  },

  // ── Chain challenge state — PARTICIPATING MACHINE side ───────
  participation: {
    active:               false,
    challengeId:          0,
    myPosition:           0,
    myAssignedValue:      0,
    incomingSumSide:      null,
    outgoingSumSide:      null,
    isStarter:            false,
    phase:                'idle',  // idle → invited → assigned → waiting_for_sum → staged → released → submitted → done
    incomingSum:          null,
    markerSeenOnSide:     null,    // which side we saw the 0xCB00 marker on
    valueStaged:          false,
    lockoutUntil:         0,
    lockoutIntervalId:    null,
  },
};

// ── CBX: send a message over the P2P data channel ───────────────
// All CBX messages are JSON objects with a 'cbxType' field.
// This keeps them separate from ordinary { type:'word' } messages.
function cbxSendMessage(side, messageType, payload) {
  const peerState = p2pSide(side);
  if (!peerState.dataChannel || peerState.dataChannel.readyState !== 'open') {
    // CBX control messages are tightly sequenced protocol state. Buffering and
    // replaying a stale CHAIN_ASSIGN or CHAIN_GO after reconnect would corrupt
    // challenge state. Log the drop clearly so the operator knows to restart.
    log('CBX ' + messageType + ' → ' + side.toUpperCase() + ' dropped (connection not open)', 'err');
    return;
  }
  // Network Monitor capture — outbound CBX
  netmonCaptureCbxOutbound(side, messageType, payload || {});
  const message = Object.assign({ cbxType: messageType }, payload);
  peerState.dataChannel.send(JSON.stringify(message));
}

// ── CBX: receive and dispatch an incoming CBX message ───────────
// Called from the P2P onmessage handler when cbxType is detected.
function cbxReceiveMessage(side, message) {
  // Network Monitor capture — inbound CBX
  netmonCaptureCbxInbound(side, message);
  switch (message.cbxType) {
    case CBX_MSG.DISCOVERY:          cbxHandleIncomingDiscovery(side, message);         break;
    case CBX_MSG.DISCOVERY_ACK:      cbxHandleDiscoveryAck(side, message);              break;
    case CBX_MSG.TERMINAL:           cbxHandleTerminal(side, message);                  break;
    case CBX_MSG.PROBE:              cbxHandleIncomingProbe(side, message);             break;
    case CBX_MSG.PROBE_RETURN:       cbxHandleProbeReturn(side, message);               break;
    case CBX_MSG.STATUS:             cbxHandlePeerStatus(side, message);                break;
    // Chain challenge messages
    case CBX_MSG.CHAIN_INVITE:       cbxHandleChainInvite(side, message);               break;
    case CBX_MSG.CHAIN_INVITE_ACK:   cbxHandleChainInviteAck(side, message);             break;
    case CBX_MSG.CHAIN_ASSIGN:       cbxHandleChainAssign(side, message);               break;
    case CBX_MSG.CHAIN_ASSIGN_ACK:   cbxHandleChainAssignAck(side, message);            break;
    case CBX_MSG.CHAIN_GO:           cbxHandleChainGo(side, message);                   break;
    case CBX_MSG.CHAIN_SUM_SUBMIT:   cbxHandleChainSumSubmit(side, message);            break;
    case CBX_MSG.CHAIN_SUM_OK:       cbxHandleChainSumOk(side, message);                break;
    case CBX_MSG.CHAIN_SUM_FAIL:     cbxHandleChainSumFail(side, message);              break;
    case CBX_MSG.CHAIN_ABORT:        cbxHandleChainAbort(side, message);                break;
    case CBX_MSG.CHAIN_COMPLETE:     cbxHandleChainComplete(side, message);             break;
  }
}

// ── CBX: availability ───────────────────────────────────────────
// All machines always relay and always accept invitations unless a local
// challenge is already active. There is no opt-out state.

function cbxIsAvailableToJoinChallenge() {
  return !CHALL.active;
}

// Return true if this machine will relay CBX messages it cannot handle
function cbxIsWillingToRelay() {
  return true;
}

// ── CBX NETWORK PROBE ───────────────────────────────────────────
// Sends a lightweight probe out both sides simultaneously.
// Each probe hop increments a counter. When a probe hits a TERMINAL
// (no further connection, or SOFT_DECLINE machine), it returns.
// If the probe sent rightward returns from the LEFT side, a ring is detected.

function cbxPingNetwork() {
  if (CBX.activeProbe.inFlight) {
    log('CBX probe already in flight — please wait', 'info');
    return;
  }

  const leftIsConnected  = p2pSide('l').dataChannel?.readyState === 'open';
  const rightIsConnected = p2pSide('r').dataChannel?.readyState === 'open';

  if (!leftIsConnected && !rightIsConnected) {
    const soloTopology = { nodesToLeft: 0, nodesToRight: 0, isRing: false, totalNodes: 1, lastProbeTimestamp: Date.now() };
    Object.assign(CBX.topology, soloTopology);
    cbxUpdateTopologyDisplay(soloTopology);
    log('CBX probe: no neighbors connected', 'info');
    return;
  }

  const probeId = Math.floor(Math.random() * 65535);

  CBX.activeProbe = {
    inFlight:           true,
    leftResolved:       !leftIsConnected,   // unconnected sides resolve immediately as 0 hops
    rightResolved:      !rightIsConnected,
    leftHopCount:       0,
    rightHopCount:      0,
    leftIsRingReturn:   false,
    rightIsRingReturn:  false,
    probeId,
  };

  cbxUpdateTopologyDisplay(null);
  log('CBX network probe started', 'info');

  if (leftIsConnected) {
    cbxSendMessage('l', CBX_MSG.PROBE, {
      probeId,
      hopCount:        0,
      travelDirection: 'left',
      originSide:      'l',
    });
  }
  if (rightIsConnected) {
    cbxSendMessage('r', CBX_MSG.PROBE, {
      probeId,
      hopCount:        0,
      travelDirection: 'right',
      originSide:      'r',
    });
  }

  // Safety timeout — resolve after 8 seconds regardless
  setTimeout(() => cbxResolveProbeIfStillInFlight(), 8000);
}

// Handle an incoming CBX probe message from a neighbor
function cbxHandleIncomingProbe(fromSide, message) {
  // First check: is this probe returning to the machine that sent it?
  // That happens in a ring when the probe has traveled all the way around.
  // We detect this by checking if the probeId matches our own active probe.
  const ourProbe = CBX.activeProbe;
  if (ourProbe.inFlight && message.probeId === ourProbe.probeId) {
    // This probe originated here and has come back around — ring detected.
    // Treat it as a PROBE_RETURN arriving from the unexpected side.
    cbxHandleProbeReturn(fromSide, Object.assign({}, message, { isRingReturn: true }));
    return;
  }

  // Not our probe — we are an intermediate node. Forward or terminate.
  // Forward probe onward if there is a connection on the other side
  const forwardSide        = fromSide === 'l' ? 'r' : 'l';
  const forwardIsConnected = p2pSide(forwardSide).dataChannel?.readyState === 'open';

  if (forwardIsConnected) {
    cbxSendMessage(forwardSide, CBX_MSG.PROBE, {
      probeId:         message.probeId,
      hopCount:        message.hopCount + 1,
      travelDirection: message.travelDirection,
      originSide:      message.originSide,
    });
  } else {
    // No further connection — this is the terminal node, send probe back.
    // Increment hopCount to count this machine; without +1 the origin
    // receives hopCount=0 for a two-machine chain and reports totalNodes=1.
    cbxSendMessage(fromSide, CBX_MSG.PROBE_RETURN, {
      probeId:             message.probeId,
      hopCount:            message.hopCount + 1,
      travelDirection:     message.travelDirection,
      originSide:          message.originSide,
      terminatedByDecline: false,
      isRingReturn:        false,
    });
  }
}

// Handle a returning CBX probe that has traversed the chain
function cbxHandleProbeReturn(fromSide, message) {
  const probe = CBX.activeProbe;
  if (!probe.inFlight || message.probeId !== probe.probeId) return;

  // A ring return happens when the probe we sent in one direction
  // comes back from the OTHER side — it traveled all the way around.
  // We detect this either via the isRingReturn flag (set when the probe
  // arrived at the origin directly in cbxHandleIncomingProbe) or by
  // comparing which side it came back from vs. which side it was sent from.
  const sentFromSide  = message.originSide; // 'l' or 'r'
  const isRingReturn  = message.isRingReturn || (fromSide !== sentFromSide);

  // Assign hop counts to left/right slots.
  // The probe sent leftward reports left-side count; rightward reports right-side count.
  // In a ring, the returning probe's hop count is the count for the OTHER side.
  if (sentFromSide === 'l') {
    if (isRingReturn) {
      // Sent left, came back from right — ring. hopCount = nodes on the right.
      probe.rightHopCount     = message.hopCount;
      probe.rightIsRingReturn = true;
      probe.rightResolved     = true;
    } else {
      probe.leftHopCount  = message.hopCount;
      probe.leftResolved  = true;
    }
  } else {
    if (isRingReturn) {
      // Sent right, came back from left — ring. hopCount = nodes on the left.
      probe.leftHopCount     = message.hopCount;
      probe.leftIsRingReturn = true;
      probe.leftResolved     = true;
    } else {
      probe.rightHopCount = message.hopCount;
      probe.rightResolved = true;
    }
  }

  if (probe.leftResolved && probe.rightResolved) {
    cbxFinalizeTopology();
  }
}

// Timeout handler: resolve a probe that never returned
function cbxResolveProbeIfStillInFlight() {
  if (!CBX.activeProbe.inFlight) return;
  // Force resolution with whatever we have — partial results better than nothing
  cbxFinalizeTopology();
}

// Compute final chain topology from completed probe results
function cbxFinalizeTopology() {
  const probe  = CBX.activeProbe;
  const isRing = probe.leftIsRingReturn || probe.rightIsRingReturn;

  let nodesToLeft, nodesToRight, totalNodes;

  if (isRing) {
    // In a ring both probes travel all the way around and each reports the
    // full intermediate hop count. Use the larger of the two resolved counts
    // (they should be equal; max guards against one timing out early).
    // Total ring size = intermediate hops + 1 (the origin itself).
    // Split intermediate nodes evenly left and right.
    const intermediateNodeCount = Math.max(probe.leftHopCount, probe.rightHopCount);
    totalNodes   = intermediateNodeCount + 1;
    nodesToLeft  = Math.floor(intermediateNodeCount / 2);
    nodesToRight = intermediateNodeCount - nodesToLeft;
  } else {
    nodesToLeft  = probe.leftHopCount;
    nodesToRight = probe.rightHopCount;
    totalNodes   = 1 + nodesToLeft + nodesToRight;
  }

  const topology = {
    nodesToLeft,
    nodesToRight,
    isRing,
    totalNodes,
    lastProbeTimestamp: Date.now(),
  };

  Object.assign(CBX.topology, topology);
  CBX.activeProbe.inFlight = false;

  cbxUpdateTopologyDisplay(topology);
  log(`CBX network: ${nodesToLeft} left · ${nodesToRight} right · ${isRing ? 'RING' : 'linear'} · ${totalNodes} total`, 'ok');
}

// ── CBX: DISCOVERY handling (for future full challenge use) ──────
// These stubs handle the DISCOVERY / DISCOVERY_ACK / TERMINAL flow
// used by multi-computer challenges. The probe system above is a
// lightweight version of the same idea. Full challenge discovery
// is built when the first multi-computer challenge type is added.

function cbxHandleIncomingDiscovery(fromSide, message) {
  if (cbxIsAvailableToJoinChallenge()) {
    cbxHandleChainInvite(fromSide, message);
  } else {
    // Busy — relay the discovery onward rather than terminating
    const forwardSide = fromSide === 'l' ? 'r' : 'l';
    cbxSendMessage(forwardSide, CBX_MSG.DISCOVERY, message);
  }
}

// Handle a CBX discovery acknowledgment from a neighbor
function cbxHandleDiscoveryAck(fromSide, message) {
  // Relay ACK back toward origin (stub for future challenge use)
  const forwardSide = fromSide === 'l' ? 'r' : 'l';
  if (p2pSide(forwardSide).dataChannel?.readyState === 'open') {
    cbxSendMessage(forwardSide, CBX_MSG.DISCOVERY_ACK, message);
  }
}

// Handle a CBX terminal notification (chain endpoint reached)
function cbxHandleTerminal(fromSide, message) {
  // Relay TERMINAL back toward origin (stub for future challenge use)
  const forwardSide = fromSide === 'l' ? 'r' : 'l';
  if (p2pSide(forwardSide).dataChannel?.readyState === 'open') {
    cbxSendMessage(forwardSide, CBX_MSG.TERMINAL, message);
  }
}

// Handle a CBX peer status update (availability change)
function cbxHandlePeerStatus(fromSide, message) {
  // A neighbor is broadcasting their availability state
  // Display update only — no action required
  const el = document.getElementById('cbx-peer-status-' + fromSide);
  if (el) el.textContent = message.availability || '?';
}

// ── CBX: display refresh ─────────────────────────────────────────
function cbxRefreshAvailabilityDisplay() {
  // Show or hide the chain active panel based on participation state
  const activePanel = document.getElementById('cbx-chain-active-panel');
  if (activePanel) {
    const showPanel = CBX.participation.active || CBX.participation.phase === 'invited';
    activePanel.style.display = showPanel ? '' : 'none';
  }
}

// Update the chain topology diagram in the sidebar
function cbxUpdateTopologyDisplay(topology) {
  const el = document.getElementById('cbx-topology-display');
  if (!el) return;

  if (topology === null) {
    el.textContent = 'Probing network…';
    return;
  }

  if (topology.totalNodes === 1) {
    el.textContent = 'No neighbors connected.';
    return;
  }

  const leftLabel  = topology.nodesToLeft  === 1 ? '1 machine left' : `${topology.nodesToLeft} machines left`;
  const rightLabel = topology.nodesToRight === 1 ? '1 machine right' : `${topology.nodesToRight} machines right`;
  const ringLabel  = topology.isRing ? ' · RING NETWORK' : '';
  el.textContent   = `${leftLabel} · ${rightLabel} · ${topology.totalNodes} total${ringLabel}`;

  // Keep the chain_sum network status line in sync
  cbxUpdateChainNetworkStatusLine();
}

// Updates the status line shown inside the chain_sum params panel.
// Called when topology changes or when chain_sum is selected as challenge type.
function cbxUpdateChainNetworkStatusLine() {
  const el = document.getElementById('chall-chain-network-status');
  if (!el) return;
  const t = CBX.topology;
  if (!t || t.totalNodes < 2) {
    el.textContent = 'No network detected — run PING NETWORK first.';
    el.style.color = 'var(--fg-dim)';
  } else {
    const ring = t.isRing ? ' · RING' : '';
    el.textContent = `${t.totalNodes} machines connected${ring} · ready to start`;
    el.style.color = '#44cc88';
  }
}

// ══════════════════════════════════════════════════════════════
// CUSTOM CHALLENGE SYSTEM
//
// Operators can define custom local challenges by pasting a JavaScript
// definition object into the Custom Challenges panel. The definition is
// validated and registered. Once registered, the challenge appears in the
// type selector alongside built-in challenges.
//
// Definition schema:
//   { id, name, description, generate(params), par(result, params), params[] }
//
// generate() must return: { values, expected|expectedValues, answerCount, label }
// par()      must return: { ticks, ops }
// ══════════════════════════════════════════════════════════════

// Registry of validated custom challenge definitions, keyed by id.
// ── Challenge Registry ──────────────────────────────────────────
// All challenges — built-in and custom — live in this registry.
// Built-in definitions are registered at startup with builtin:true
// and cannot be removed or overwritten by operators.
const customChallengeRegistry = new Map();


// Validate a user-defined challenge object for required fields and shape
function validateCustomChallengeDefinition(def) {
  // Required fields present
  for (const field of ['id', 'name', 'description', 'generate', 'par']) {
    if (def[field] === undefined || def[field] === null) {
      return 'Missing required field: ' + field;
    }
  }

  // ID format: lowercase letters, digits, underscores only
  if (!/^[a-z0-9_]+$/.test(def.id)) {
    return 'ID must contain only lowercase letters, digits, and underscores.';
  }

  // ID uniqueness — built-ins have builtin:true and cannot be overwritten
  const existing = customChallengeRegistry.get(def.id);
  if (existing && existing.builtin) {
    return 'ID "' + def.id + '" is reserved by a built-in challenge.';
  }
  if (customChallengeRegistry.has(def.id)) {
    return 'ID "' + def.id + '" is already registered. Remove it first to re-register.';
  }

  // generate and par must be functions
  if (typeof def.generate !== 'function') return '"generate" must be a function.';
  if (typeof def.par      !== 'function') return '"par" must be a function.';

  // Validate params shape if present
  if (def.params !== undefined) {
    if (!Array.isArray(def.params)) return '"params" must be an array.';
    for (let i = 0; i < def.params.length; i++) {
      const p = def.params[i];
      if (!p.type || !p.id || p.default === undefined) {
        return 'params[' + i + '] must have "type", "id", and "default" fields.';
      }
      if (!['number', 'select', 'toggle'].includes(p.type)) {
        return 'params[' + i + '] has unsupported type "' + p.type + '". Use: number, select, toggle.';
      }
      if (p.type === 'select' && (!Array.isArray(p.options) || p.options.length === 0)) {
        return 'params[' + i + '] of type "select" must have a non-empty "options" array.';
      }
    }
  }

  // Dry-run generate() five times with default params
  const defaultParams = buildDefaultParams(def.params || []);
  for (let run = 0; run < 5; run++) {
    let result;
    const startTime = performance.now();
    try {
      result = def.generate(defaultParams);
    } catch (e) {
      return 'generate() threw on dry run ' + (run + 1) + ': ' + e.message;
    }
    if (performance.now() - startTime > 50) {
      return 'generate() took more than 50ms on dry run ' + (run + 1) + ' — must be faster.';
    }
    const resultError = validateGenerateResult(result);
    if (resultError) return 'generate() dry run ' + (run + 1) + ': ' + resultError;
  }

  // Par check with the result of a single dry run
  let parResult;
  try {
    const sampleGenerate = def.generate(defaultParams);
    parResult = def.par(sampleGenerate, defaultParams);
  } catch (e) {
    return 'par() threw: ' + e.message;
  }
  if (!parResult || typeof parResult !== 'object') return 'par() must return a plain object.';
  if (!Number.isInteger(parResult.ticks) || parResult.ticks < 1) return 'par().ticks must be a positive integer.';
  if (!Number.isInteger(parResult.ops)   || parResult.ops   < 1) return 'par().ops must be a positive integer.';

  return null; // all checks passed
}

// Validate the output of a challenge generate() call
function validateGenerateResult(result) {
  if (!result || typeof result !== 'object') return 'must return a plain object.';
  if (!Array.isArray(result.values) || result.values.length === 0) {
    return 'must return a non-empty "values" array.';
  }
  for (const v of result.values) {
    if (!Number.isInteger(v) || v < 0 || v > 65535) {
      return 'all values must be integers in range 0–65535. Got: ' + v;
    }
  }
  const hasExpected       = result.expected       !== undefined;
  const hasExpectedValues = Array.isArray(result.expectedValues) && result.expectedValues.length > 0;
  if (!hasExpected && !hasExpectedValues) {
    return 'must return either "expected" (single integer) or "expectedValues" (array).';
  }
  if (!Number.isInteger(result.answerCount) || result.answerCount < 1) {
    return '"answerCount" must be a positive integer.';
  }
  if (hasExpected && result.answerCount !== 1) {
    return 'when using "expected", answerCount must be 1.';
  }
  if (hasExpectedValues && result.expectedValues.length !== result.answerCount) {
    return '"expectedValues".length must equal "answerCount".';
  }
  if (hasExpectedValues) {
    for (const v of result.expectedValues) {
      if (!Number.isInteger(v) || v < 0 || v > 65535) {
        return 'all expectedValues must be integers in range 0–65535. Got: ' + v;
      }
    }
  }
  return null;
}

// Build the default parameter values from a challenge param definition array
function buildDefaultParams(paramDefs) {
  const params = {};
  for (const p of paramDefs) {
    params[p.id] = p.default;
  }
  return params;
}

// Unregister a custom challenge and remove it from the type selector
function removeCustomChallenge(id) {
  const def = customChallengeRegistry.get(id);
  if (!def) return;
  if (def.builtin) { log('Cannot remove built-in challenge: ' + id, 'err'); return; }
  customChallengeRegistry.delete(id);
  const option = document.querySelector('#chall-type option[value="' + id + '"]');
  if (option) option.remove();
  // If this challenge was selected, revert to first available
  const typeEl = document.getElementById('chall-type');
  if (typeEl && typeEl.value === id) {
    typeEl.selectedIndex = 0;
    challOnTypeChange();
  }
  log('Custom challenge removed: ' + id, 'info');
}

// Add a challenge definition to the challenge type dropdown
function addChallengeToTypeSelector(def) {
  const typeEl = document.getElementById('chall-type');
  if (!typeEl) return;
  if (typeEl.querySelector('option[value="' + def.id + '"]')) return;
  const option = document.createElement('option');
  option.value = def.id;
  if (def.builtin && def.network) {
    option.textContent = '⬡ ' + def.name + ' (Network)';
  } else if (def.builtin) {
    option.textContent = def.name;
  } else {
    option.textContent = def.name + ' [custom]';
  }
  typeEl.appendChild(option);
}


// Render adjustable parameter controls for the selected challenge type
function renderChallengeParams(def) {
  // Renders dynamic param controls for any challenge into the unified params container.
  const container = document.getElementById('chall-params-container');
  if (!container) return;
  container.innerHTML = '';
  if (!def.params || def.params.length === 0) return;
  for (const p of def.params) {
    const row = document.createElement('div');
    row.className = 'chall-param-row';
    row.style.marginBottom = '4px';
    const label = document.createElement('span');
    label.className   = 'chall-param-label';
    label.textContent = p.label || p.id;
    row.appendChild(label);
    if (p.type === 'number') {
      const input = document.createElement('input');
      input.type        = 'number';
      input.id          = 'chall-custom-param-' + p.id;
      input.value       = p.default;
      input.min         = p.min !== undefined ? p.min : 0;
      input.max         = p.max !== undefined ? p.max : 65535;
      input.style.cssText = 'width:44px;font-family:var(--font);font-size:10px;background:var(--el-bg);border:1px solid var(--border3);color:var(--fg);padding:2px 4px;letter-spacing:1px;-moz-appearance:textfield;';
      row.appendChild(input);
    } else if (p.type === 'select') {
      const select = document.createElement('select');
      select.id         = 'chall-custom-param-' + p.id;
      select.className  = 'chall-param-select';
      select.style.cssText = 'font-size:10px;padding:2px 6px;';
      for (const opt of p.options) {
        const option = document.createElement('option');
        option.value       = opt.value;
        option.textContent = opt.label;
        if (opt.value === p.default) option.selected = true;
        select.appendChild(option);
      }
      row.appendChild(select);
    } else if (p.type === 'toggle') {
      const input = document.createElement('input');
      input.type    = 'checkbox';
      input.id      = 'chall-custom-param-' + p.id;
      input.checked = !!p.default;
      row.appendChild(input);
    }
    container.appendChild(row);
  }
}

// Read current parameter values from the challenge params UI controls
function readChallengeParams(def) {
  const params = {};
  if (!def.params) return params;
  for (const p of def.params) {
    const el = document.getElementById('chall-custom-param-' + p.id);
    if (!el) { params[p.id] = p.default; continue; }
    if (p.type === 'number')  params[p.id] = parseInt(el.value) || p.default;
    else if (p.type === 'select') params[p.id] = el.value;
    else if (p.type === 'toggle') params[p.id] = el.checked;
  }
  return params;
}

// Start a challenge by id — generates values, loads into loops, begins timing
function startCustomChallenge(id) {
  const def = customChallengeRegistry.get(id);
  if (!def) { challSetStatus('Challenge "' + id + '" not found.', 'err'); return; }

  const params = readChallengeParams(def);
  let result;
  try {
    result = def.generate(params);
  } catch (e) {
    challSetStatus('generate() error: ' + e.message, 'err');
    return;
  }

  let parValues;
  try {
    parValues = def.par(result, params);
  } catch (e) {
    challSetStatus('par() error: ' + e.message, 'err');
    return;
  }

  const answerCount    = result.answerCount;
  const expected       = result.expected       !== undefined ? result.expected       : null;
  const expectedValues = Array.isArray(result.expectedValues) ? result.expectedValues : [];

  initializeChallengeState(
    id, result.values, expected,
    parValues.ticks, parValues.ops,
    answerCount, expectedValues
  );

  // Store metadata and display hooks on CHALL for use in challEvaluate
  CHALL.challengeName    = def.name;
  CHALL.challengeId      = def.id;
  CHALL.metadata         = result.metadata || {};
  CHALL.resultLabelFn    = typeof result.resultLabel  === 'function' ? result.resultLabel  : null;
  CHALL.historyLabelFn   = typeof result.historyLabel === 'function' ? result.historyLabel : null;
  CHALL.spoilerFn        = typeof result.spoiler      === 'function' ? result.spoiler      : null;

  queueChallengeValuesForDelivery(result.values);

  const label = result.label || def.name + ': ' + result.values.length + ' value(s)';
  challSetStatus(label + ' — send answer via Bus E outbound.', 'wait');

  // Spoiler: use hook if provided, else fall back to generic
  if (CHALL.spoilerFn) {
    challSetSpoilerText(CHALL.spoilerFn(result.values, CHALL.metadata));
  } else {
    challSetSpoilerText(result.values.join(' · ') +
      (result.values.length > 1 ? ' (' + result.values.length + ' values)' : ''));
  }
  notifFireChallStart();
}


// ══════════════════════════════════════════════════════════════
// LOCAL FILE SYSTEM — .L21 MEMORY SNAPSHOTS
//
// Save flow:
//   1. Operator presses NEW FILE, enters name, presses SAVE
//   2. System arms File Save destination — any word arriving at
//      a bus with FILE SAVE selected is captured here
//   3. Operator configures a bus destination to FILE SAVE
//   4. Operator presses BATCH WRITE ALL — 16 words stream in
//   5. All 16 received → saved to localStorage as base64 binary
//
// Load flow:
//   1. Operator selects file, presses LOAD
//   2. 16 × 17-bit words fed through mem.wbBuf/wbPos pipeline
//   3. Operator must have Write to Slots + Auto-Inc enabled
//
// Files stored under localStorage key 'loop21.files'.
// Max 16 files. Names: 1–16 chars A-Z 0-9 _ -
// ══════════════════════════════════════════════════════════════

const APP_VERSION = '333';
(function() {
  document.title = 'Loop 2.1 \u2014 Manual Flow Computer \u2014 v.' + APP_VERSION;
  const el = document.getElementById('app-version-display');
  if (el) el.textContent = 'v.' + APP_VERSION;
})();

// ── Catalog configs ───────────────────────────────────────────
// One entry per catalog. All four catalogs (Files, Skins, CBX Local,
// CBX Net) will share the engine functions defined below.
// Skins / CBX entries are registered separately in their own sections.

const CATALOG_CONFIGS = {
  files: {
    id:               'files',
    storageKey:       'loop21.files',
    max:              16,
    nameRegex:        /^[A-Z0-9_-]{1,16}$/,
    extension:        '.L21',

    // DOM element IDs
    sectionId:         'sb-sec-files',
    listId:            'files-local-list',
    countId:           'files-count',
    statusId:          'files-status',
    sortNameButtonId:  'files-sort-name-btn',
    sortTimeButtonId:  'files-sort-time-btn',
    namingDialogId:    'files-newfile-dialog',
    nameInputId:       'files-save-name',
    overwriteDialogId: 'files-overwrite-dialog',
    overwriteNameId:   'files-overwrite-name',
    deleteDialogId:    'files-delete-dialog',
    deleteNameId:      'files-delete-name',

    // Display strings
    emptyMessage:    'No files saved.',
    fullMessage:     'Folder full (16 files) — delete a file first',
    sortTimeLabel:   'SAVED',
    timestampKey:    'savedAt',

    // Type-specific hooks
    // Called after the naming dialog confirms a valid new name.
    onNameConfirmed: function(name) { filesArmSave(name); },
    // Returns the right-side meta text for each file list row.
    renderEntryMeta: function(entry) {
      const ts       = catalogFormatTimestamp(entry.savedAt);
      const slotLabel = (entry.slots || 0) + 'sl';
      return slotLabel + (ts ? ' · ' + ts.slice(5) : '');
    },
    // Called when an operator clicks a file list row.
    onEntryClick: function(name) { filesSelectEntry(name); },
    // Called after the list re-renders. Handles Files-specific button state.
    postRefresh: function(state) {
      const loadBtn = document.getElementById('files-load-btn');
      if (loadBtn) loadBtn.disabled = !state.selectedName;
    },
    // Called after a file is deleted. Handles Files-specific logging.
    onAfterDelete: function(name) {
      log('FILE DELETED: ' + name, 'info');
    },
  },
  skins: {
    id:               'skins',
    storageKey:       'loop21.scripts.skins',
    max:              16,
    nameRegex:        /^[A-Z0-9_-]{1,16}$/,
    extension:        '.L21SKIN',
    sectionId:        'sb-sec-skins',
    listId:           'scripts-skins-list',
    countId:          'scripts-skins-count',
    statusId:         'scripts-skins-status',
    sortNameButtonId: 'scripts-skins-sort-name',
    sortTimeButtonId: 'scripts-skins-sort-time',
    namingDialogId:   'scripts-skins-naming-dialog',
    nameInputId:      'scripts-skins-name-input',
    overwriteDialogId:'scripts-skins-overwrite-dialog',
    overwriteNameId:  'scripts-skins-overwrite-name',
    deleteDialogId:   'scripts-skins-delete-dialog',
    deleteNameId:     'scripts-skins-delete-name',
    emptyMessage:     'No custom skins.',
    fullMessage:      'Section full (16 scripts) — delete a script first',
    sortTimeLabel:    'MODIFIED',
    timestampKey:     'modified',
    onNameConfirmed:  function(name) { scriptsCreateAndOpenEditor('skins', name); },
    renderEntryMeta:  function(entry) {
      const ts    = catalogFormatTimestamp(entry.modified);
      const badge = entry.verified ? '✓' : '○';
      return badge + (ts ? ' · ' + ts.slice(5) : '');
    },
    onEntryClick: function(name) { scriptsShowEditor('skins', name, false); },
    postRefresh:  null,
    onAfterDelete: function(name) {
      skinUnregister(name);
      log('SCRIPT DELETED: ' + name, 'info');
    },
    renderFoundational: function(listEl) {
      const items = [
        { key: 'og', label: 'OG' },
        { key: 'winamp', label: 'WINAMP' },
        { key: 'sunrise', label: 'SUNRISE' },
      ];
      for (const item of items) {
        const row = document.createElement('div');
        row.className = 'file-entry';
        row.style.opacity = '0.75';
        row.onclick = () => scriptsShowEditor('skins', item.key, true);
        const lock = document.createElement('span');
        lock.style.cssText = 'font-size:7px;color:var(--fg-dim);margin-right:4px;';
        lock.textContent = '■';
        const nameSpan = document.createElement('span');
        nameSpan.className = 'file-entry-name';
        nameSpan.textContent = item.label + '.L21SKIN';
        row.appendChild(lock);
        row.appendChild(nameSpan);
        listEl.appendChild(row);
      }
    },
  },
  cbxLocal: {
    id:               'cbxLocal',
    storageKey:       'loop21.scripts.cbx-local',
    max:              16,
    nameRegex:        /^[A-Z0-9_-]{1,16}$/,
    extension:        '.L21CBX',
    sectionId:        'sb-sec-cbx-local',
    listId:           'scripts-cbxLocal-list',
    countId:          'scripts-cbxLocal-count',
    statusId:         'scripts-cbxLocal-status',
    sortNameButtonId: 'scripts-cbxLocal-sort-name',
    sortTimeButtonId: 'scripts-cbxLocal-sort-time',
    namingDialogId:   'scripts-cbxLocal-naming-dialog',
    nameInputId:      'scripts-cbxLocal-name-input',
    overwriteDialogId:'scripts-cbxLocal-overwrite-dialog',
    overwriteNameId:  'scripts-cbxLocal-overwrite-name',
    deleteDialogId:   'scripts-cbxLocal-delete-dialog',
    deleteNameId:     'scripts-cbxLocal-delete-name',
    emptyMessage:     'No custom challenges.',
    fullMessage:      'Section full (16 scripts) — delete a script first',
    sortTimeLabel:    'MODIFIED',
    timestampKey:     'modified',
    onNameConfirmed:  function(name) { scriptsCreateAndOpenEditor('cbxLocal', name); },
    renderEntryMeta:  function(entry) {
      const ts    = catalogFormatTimestamp(entry.modified);
      const badge = entry.verified ? '✓' : '○';
      return badge + (ts ? ' · ' + ts.slice(5) : '');
    },
    onEntryClick: function(name) { scriptsShowEditor('cbxLocal', name, false); },
    postRefresh:  null,
    onAfterDelete: function(name) {
      challUnregisterScript(name, 'cbxLocal');
      log('SCRIPT DELETED: ' + name, 'info');
    },
    renderFoundational: function(listEl) {
      const locals = BUILTIN_CHALLENGE_DEFINITIONS.filter(d => !d.network);
      for (const def of locals) {
        const row = document.createElement('div');
        row.className = 'file-entry';
        row.style.opacity = '0.75';
        row.onclick = () => scriptsShowEditor('cbxLocal', def.id, true);
        const lock = document.createElement('span');
        lock.style.cssText = 'font-size:7px;color:var(--fg-dim);margin-right:4px;';
        lock.textContent = '■';
        const nameSpan = document.createElement('span');
        nameSpan.className = 'file-entry-name';
        nameSpan.textContent = def.name;
        row.appendChild(lock);
        row.appendChild(nameSpan);
        listEl.appendChild(row);
      }
    },
  },
  cbxNet: {
    id:               'cbxNet',
    storageKey:       'loop21.scripts.cbx-net',
    max:              16,
    nameRegex:        /^[A-Z0-9_-]{1,16}$/,
    extension:        '.L21CBX',
    sectionId:        'sb-sec-cbx-net',
    listId:           'scripts-cbxNet-list',
    countId:          'scripts-cbxNet-count',
    statusId:         'scripts-cbxNet-status',
    sortNameButtonId: 'scripts-cbxNet-sort-name',
    sortTimeButtonId: 'scripts-cbxNet-sort-time',
    namingDialogId:   'scripts-cbxNet-naming-dialog',
    nameInputId:      'scripts-cbxNet-name-input',
    overwriteDialogId:'scripts-cbxNet-overwrite-dialog',
    overwriteNameId:  'scripts-cbxNet-overwrite-name',
    deleteDialogId:   'scripts-cbxNet-delete-dialog',
    deleteNameId:     'scripts-cbxNet-delete-name',
    emptyMessage:     'No custom network challenges.',
    fullMessage:      'Section full (16 scripts) — delete a script first',
    sortTimeLabel:    'MODIFIED',
    timestampKey:     'modified',
    onNameConfirmed:  function(name) { scriptsCreateAndOpenEditor('cbxNet', name); },
    renderEntryMeta:  function(entry) {
      const ts    = catalogFormatTimestamp(entry.modified);
      const badge = entry.verified ? '✓' : '○';
      return badge + (ts ? ' · ' + ts.slice(5) : '');
    },
    onEntryClick: function(name) { scriptsShowEditor('cbxNet', name, false); },
    postRefresh:  null,
    onAfterDelete: function(name) {
      challUnregisterScript(name, 'cbxNet');
      log('SCRIPT DELETED: ' + name, 'info');
    },
    renderFoundational: function(listEl) {
      const nets = BUILTIN_CHALLENGE_DEFINITIONS.filter(d => d.network);
      for (const def of nets) {
        const row = document.createElement('div');
        row.className = 'file-entry';
        row.style.opacity = '0.75';
        row.onclick = () => scriptsShowEditor('cbxNet', def.id, true);
        const lock = document.createElement('span');
        lock.style.cssText = 'font-size:7px;color:var(--fg-dim);margin-right:4px;';
        lock.textContent = '■';
        const nameSpan = document.createElement('span');
        nameSpan.className = 'file-entry-name';
        nameSpan.textContent = '⬡ ' + def.name;
        row.appendChild(lock);
        row.appendChild(nameSpan);
        listEl.appendChild(row);
      }
    },
  },
};

// Load the files catalog from localStorage
function filesLoad() {
  return catalogLoad(CATALOG_CONFIGS.files);
}

// Persist the files catalog to localStorage
function filesSaveCatalog(catalog) {
  catalogSave(CATALOG_CONFIGS.files, catalog);
}

// ── Encode / decode ─────────────────────────────────────────

function filesEncodeFromReceived(received16) {
  // Pack an array of 16 decoded {M, data} objects into a 34-byte base64 string.
  const buf = new Uint8Array(34);
  for (let s = 0; s < 16; s++) {
    const item  = received16[s] || { M: 0, data: 0 };
    const word  = (item.M << 16) | (item.data & 0xFFFF);
    const start = s * 17;
    for (let b = 0; b < 17; b++) {
      const bitVal = (word >> (16 - b)) & 1;
      const pos    = start + b;
      buf[pos >> 3] |= bitVal << (7 - (pos & 7));
    }
  }
  return btoa(String.fromCharCode(...buf));
}

// Encode the current memory slots as a base64 snapshot string
function filesEncodeSnapshot() {
  // Encode current mem.slots[] directly (used by partial save fallback)
  const items = mem.slots.map(v => ({ M: v !== null ? 1 : 0, data: v !== null ? (v & 0xFFFF) : 0 }));
  return filesEncodeFromReceived(items);
}

// Decode a base64 snapshot string back into a 16-slot memory array
function filesDecodeSnapshot(b64) {
  const raw = atob(b64);
  if (raw.length !== 34) return null;
  const buf  = new Uint8Array(34);
  for (let i = 0; i < 34; i++) buf[i] = raw.charCodeAt(i);
  const slots = new Array(16).fill(null);
  for (let s = 0; s < 16; s++) {
    const start = s * 17;
    let word = 0;
    for (let b = 0; b < 17; b++) {
      const pos = start + b;
      word = (word << 1) | ((buf[pos >> 3] >> (7 - (pos & 7))) & 1);
    }
    const M   = (word >> 16) & 1;
    const val = word & 0xFFFF;
    slots[s]  = M ? val : null;
  }
  return slots;
}

// ── Timestamp formatting (wrapper) ───────────────────────────

function filesFormatTimestamp(ms) {
  return catalogFormatTimestamp(ms);
}

// ── Catalog UI state ─────────────────────────────────────────
// One property per catalog. Replaces the per-catalog module-level
// let variables. Engine functions read/write these via config.id.

const catalogState = {
  files:    { selectedName: null, pendingSaveName: null, pendingDeleteName: null,
              sortKey: 'name', sortAscending: true },
  skins:    { selectedName: null, pendingSaveName: null, pendingDeleteName: null,
              sortKey: 'name', sortAscending: true },
  cbxLocal: { selectedName: null, pendingSaveName: null, pendingDeleteName: null,
              sortKey: 'name', sortAscending: true },
  cbxNet:   { selectedName: null, pendingSaveName: null, pendingDeleteName: null,
              sortKey: 'name', sortAscending: true },
};

// ══════════════════════════════════════════════════════════════
// CATALOG ENGINE
//
// Generic catalog management. Parameterised by a config from
// CATALOG_CONFIGS and a state slice from catalogState.
// Files, Skins, CBX Local, and CBX Net all use these functions.
// Nothing in here references a specific catalog by name.
// ══════════════════════════════════════════════════════════════

function catalogFormatTimestamp(ms) {
  if (!ms) return '';
  const d   = new Date(ms);
  const pad = n => String(n).padStart(2, '0');
  return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) +
         ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}

// Load a catalog from localStorage for the given config
function catalogLoad(config) {
  try {
    const raw = localStorage.getItem(config.storageKey);
    return raw ? JSON.parse(raw) : {};
  } catch(e) { return {}; }
}

// Save a catalog to localStorage for the given config
function catalogSave(config, data) {
  try { localStorage.setItem(config.storageKey, JSON.stringify(data)); }
  catch(e) { log('Catalog storage error (' + config.id + '): ' + e.message, 'err'); }
}

// Validate a catalog entry name (length, allowed characters, uniqueness)
function catalogValidateName(config, name) {
  if (!config.nameRegex.test(name)) {
    return { valid: false, error: 'Invalid name — A–Z, 0–9, - _ only (max 16 chars)' };
  }
  return { valid: true, error: null };
}

// Return catalog entry names sorted by the current sort key
function catalogSortedNames(config, catalog) {
  const state = catalogState[config.id];
  const names = Object.keys(catalog);
  names.sort((a, b) => {
    let av, bv;
    if (state.sortKey === 'time') {
      av = catalog[a][config.timestampKey] || 0;
      bv = catalog[b][config.timestampKey] || 0;
    } else {
      av = a; bv = b;
    }
    if (av < bv) return state.sortAscending ? -1 : 1;
    if (av > bv) return state.sortAscending ?  1 : -1;
    return 0;
  });
  return names;
}

// Change the sort key for a catalog and refresh the list
function catalogSortBy(config, key) {
  const state = catalogState[config.id];
  if (state.sortKey === key) {
    state.sortAscending = !state.sortAscending;
  } else {
    state.sortKey       = key;
    state.sortAscending = true;
  }
  catalogRefreshList(config);
}

// Rebuild the catalog list UI from current data
function catalogRefreshList(config) {
  const state   = catalogState[config.id];
  const catalog = catalogLoad(config);
  const names   = catalogSortedNames(config, catalog);
  const listEl  = document.getElementById(config.listId);
  const countEl = document.getElementById(config.countId);

  if (countEl) countEl.textContent = names.length + ' / ' + config.max;

  // Update sort header labels
  const nameBtn = document.getElementById(config.sortNameButtonId);
  const timeBtn = document.getElementById(config.sortTimeButtonId);
  if (nameBtn) {
    nameBtn.textContent = 'NAME ' + (state.sortKey === 'name' ? (state.sortAscending ? '▲' : '▼') : '');
    nameBtn.style.color = state.sortKey === 'name' ? 'var(--fg)' : 'var(--fg-dim)';
  }
  if (timeBtn) {
    timeBtn.textContent = config.sortTimeLabel + (state.sortKey === 'time' ? (state.sortAscending ? ' ▲' : ' ▼') : '');
    timeBtn.style.color = state.sortKey === 'time' ? 'var(--fg)' : 'var(--fg-faint)';
  }

  if (!listEl) return;

  if (names.length === 0 && !config.renderFoundational) {
    listEl.innerHTML = '<div style="font-size:8px;color:var(--fg-dim);letter-spacing:1px;">' + config.emptyMessage + '</div>';
    state.selectedName = null;
    if (config.postRefresh) config.postRefresh(state);
    return;
  }

  listEl.innerHTML = '';

  // Render foundational (read-only) entries at top if present
  if (config.renderFoundational) {
    config.renderFoundational(listEl);
    if (names.length > 0) {
      const divider = document.createElement('div');
      divider.style.cssText = 'border-top:1px solid var(--border2);margin:4px 0;';
      listEl.appendChild(divider);
    }
  }

  if (names.length === 0 && config.renderFoundational) {
    // Foundational entries shown, no custom — show empty hint
    const hint = document.createElement('div');
    hint.style.cssText = 'font-size:7px;color:var(--fg-dim);letter-spacing:1px;margin-top:2px;';
    hint.textContent = config.emptyMessage;
    listEl.appendChild(hint);
    if (config.postRefresh) config.postRefresh(state);
    return;
  }
  for (const name of names) {
    const entry = catalog[name];
    const row   = document.createElement('div');
    row.className = 'file-entry' + (name === state.selectedName ? ' selected' : '');
    row.onclick   = () => config.onEntryClick(name);

    const nameSpan = document.createElement('span');
    nameSpan.className   = 'file-entry-name';
    nameSpan.textContent = name + config.extension;

    const metaSpan = document.createElement('span');
    metaSpan.style.cssText = 'font-size:7px;color:var(--fg-faint);letter-spacing:1px;flex-shrink:0;text-align:right;';
    metaSpan.textContent   = config.renderEntryMeta(entry);

    const delBtn = document.createElement('button');
    delBtn.className   = 'file-entry-del';
    delBtn.textContent = 'DEL';
    delBtn.onclick = (e) => { e.stopPropagation(); catalogAskDelete(config, name); };

    row.appendChild(nameSpan);
    row.appendChild(metaSpan);
    row.appendChild(delBtn);
    listEl.appendChild(row);
  }

  if (config.postRefresh) config.postRefresh(state);
}

// Set the status message text and color for a catalog section
function catalogSetStatus(config, msg, color) {
  const el = document.getElementById(config.statusId);
  if (el) { el.textContent = msg; el.style.color = color || 'var(--fg-dim)'; }
}

// Show the naming dialog for a new catalog entry
function catalogShowNamingDialog(config) {
  const d = document.getElementById(config.namingDialogId);
  const i = document.getElementById(config.nameInputId);
  if (d) d.style.display = 'block';
  if (i) { i.value = ''; i.focus(); }
  const od = document.getElementById(config.overwriteDialogId);
  if (od) od.style.display = 'none';
  catalogSetStatus(config, '', '');
}

// Hide the naming dialog and clear its input
function catalogHideNamingDialog(config) {
  const state = catalogState[config.id];
  const d     = document.getElementById(config.namingDialogId);
  const od    = document.getElementById(config.overwriteDialogId);
  if (d)  d.style.display  = 'none';
  if (od) od.style.display = 'none';
  state.pendingSaveName = null;
}

// Validate and confirm a catalog entry name from the naming dialog
function catalogConfirmName(config) {
  const state = catalogState[config.id];
  const input = document.getElementById(config.nameInputId);
  const raw   = (input ? input.value : '').trim().toUpperCase();

  const validation = catalogValidateName(config, raw);
  if (!validation.valid) {
    catalogSetStatus(config, validation.error, '#ee4444');
    return;
  }

  const catalog = catalogLoad(config);

  if (catalog[raw] !== undefined) {
    // Name collision — show overwrite confirmation inline
    state.pendingSaveName = raw;
    const od = document.getElementById(config.overwriteDialogId);
    const on = document.getElementById(config.overwriteNameId);
    if (on) on.textContent = raw + config.extension;
    if (od) od.style.display = 'block';
    return;
  }

  if (Object.keys(catalog).length >= config.max) {
    catalogSetStatus(config, config.fullMessage, '#ee4444');
    return;
  }

  config.onNameConfirmed(raw);
}

// Confirm overwriting an existing catalog entry
function catalogOverwriteConfirm(config) {
  const state = catalogState[config.id];
  if (!state.pendingSaveName) return;
  const name = state.pendingSaveName;
  state.pendingSaveName = null;
  const od = document.getElementById(config.overwriteDialogId);
  if (od) od.style.display = 'none';
  config.onNameConfirmed(name);
}

// Cancel the overwrite confirmation dialog
function catalogOverwriteCancel(config) {
  const state = catalogState[config.id];
  state.pendingSaveName = null;
  const od = document.getElementById(config.overwriteDialogId);
  if (od) od.style.display = 'none';
  // Keep naming dialog open with name intact so operator can choose a different name
}

// Show the delete confirmation for a catalog entry
function catalogAskDelete(config, name) {
  const state = catalogState[config.id];
  state.pendingDeleteName = name;
  const d  = document.getElementById(config.deleteDialogId);
  const dn = document.getElementById(config.deleteNameId);
  if (dn) dn.textContent = name + config.extension;
  if (d)  d.style.display = 'block';
}

// Confirm and execute deletion of a catalog entry
function catalogConfirmDelete(config) {
  const state   = catalogState[config.id];
  const name    = state.pendingDeleteName;
  state.pendingDeleteName = null;
  const d = document.getElementById(config.deleteDialogId);
  if (d) d.style.display = 'none';
  if (!name) return;
  const catalog = catalogLoad(config);
  if (!catalog[name]) return;
  delete catalog[name];
  catalogSave(config, catalog);
  if (state.selectedName === name) state.selectedName = null;
  catalogRefreshList(config);
  catalogSetStatus(config, 'Deleted: ' + name, 'var(--fg-dim)');
  if (config.onAfterDelete) config.onAfterDelete(name);
}

// Cancel the delete confirmation dialog
function catalogCancelDelete(config) {
  const state = catalogState[config.id];
  state.pendingDeleteName = null;
  const d = document.getElementById(config.deleteDialogId);
  if (d) d.style.display = 'none';
}

// ── FTP state ────────────────────────────────────────────────────────────────
const ftpState = {
  outPending:       false,
  outFileName:      null,
  outDestId:        null,
  inPending:        false,
  inFileName:       null,
  inData:           null,
  inSrcId:          null,
  inSrcHandle:      null,
  inSavedAt:        null,
  inSlots:          null,
  overwritePending: false,
};
let ftpSendDialogActive = false;

// File Save armed state
const fileSaveState = {
  armed:        false,
  pendingName:  null,   // filename to save when complete
  receivedBits: [],     // bits arriving on bus
  wordBuf:      [],     // current 17-bit word being assembled
  wordsReceived:[],     // completed words (as {M, data})
  wordCount:    0,      // completed words so far
  xferState:    0,      // mirrored transfer state for bit assembly
};

// ── Status (wrapper) ─────────────────────────────────────────

function filesSetStatus(msg, color) {
  catalogSetStatus(CATALOG_CONFIGS.files, msg, color);
}

// ── Sort (wrappers) ───────────────────────────────────────────

function filesSortBy(key) {
  catalogSortBy(CATALOG_CONFIGS.files, key);
}

// ── Render file list (wrapper) ────────────────────────────────

function filesRefreshList() {
  // Handle the files-send-btn disabled state, which is Files-specific
  // and not covered by the generic postRefresh hook (which only sees loadBtn).
  const state = catalogState.files;
  if (!state.selectedName) {
    const sendBtn = document.getElementById('files-send-btn');
    if (sendBtn) sendBtn.disabled = true;
  }
  catalogRefreshList(CATALOG_CONFIGS.files);
}

// Handle selection of a file entry in the files list
function filesSelectEntry(name) {
  catalogState.files.selectedName = name;
  const sendBtn = document.getElementById('files-send-btn');
  if (sendBtn) sendBtn.disabled = !name;
  catalogRefreshList(CATALOG_CONFIGS.files);
  const entry = filesLoad()[name];
  const ts    = entry ? catalogFormatTimestamp(entry.savedAt) : '';
  filesSetStatus('Selected: ' + name + (ts ? ' · ' + ts : ''), 'var(--fg)');
}

// ── New File dialog (wrappers) ────────────────────────────────

function filesShowNewFile() {
  catalogShowNamingDialog(CATALOG_CONFIGS.files);
}

// Hide the new-file naming dialog
function filesHideNewFile() {
  catalogHideNamingDialog(CATALOG_CONFIGS.files);
}

// Confirm the new file name and proceed with save
function filesSaveNameConfirm() {
  catalogConfirmName(CATALOG_CONFIGS.files);
}

// Confirm overwriting an existing file
function filesOverwriteConfirm() {
  catalogOverwriteConfirm(CATALOG_CONFIGS.files);
}

// Cancel the file overwrite dialog
function filesOverwriteCancel() {
  catalogOverwriteCancel(CATALOG_CONFIGS.files);
}

// ── Save arm / receive / complete ────────────────────────────

function filesArmSave(name) {
  filesHideNewFile();

  fileSaveState.armed         = true;
  fileSaveState.pendingName   = name;
  fileSaveState.wordBuf       = [];
  fileSaveState.wordsReceived = [];
  fileSaveState.wordCount     = 0;
  fileSaveState.xferState     = 0;

  const panel   = document.getElementById('files-armed-panel');
  const label   = document.getElementById('files-armed-label');
  const progress= document.getElementById('files-armed-progress');
  const partial = document.getElementById('files-partial-panel');
  if (panel)   panel.style.display   = '';
  if (label)   label.textContent     = 'Saving: ' + name + '.L21 — set a bus to FILE SAVE, then BATCH WRITE ALL';
  if (progress)progress.textContent  = 'Receiving… 0 / 16 words';
  if (partial) partial.style.display = 'none';

  filesSetStatus('Armed — waiting for Batch Write All via FILE SAVE', 'var(--c-memory)');
  log('FILE SAVE ARMED: ' + name + ' — direct a bus to FILE SAVE and run Batch Write All', 'info');
}

// Called from deliverBitToLoop when destId === 'file-save'
// Returns updated xfer counter (same protocol as deliverBitToLoop)
function fileSaveReceiveBit(exitB, xfer) {
  if (!fileSaveState.armed) return 0; // not armed — silent discard

  if (xfer === 0 && exitB !== 1) return 0;
  if (xfer === 0 && exitB === 1) {
    xfer = BPW;
  }

  // Accumulate bits into current word
  fileSaveState.wordBuf.push(exitB);

  if (xfer === 1) {
    // Word complete — decode the 17-bit word
    const bits = fileSaveState.wordBuf;
    const M    = bits[0];
    let data   = 0;
    for (let b = 1; b < 17; b++) data = (data << 1) | bits[b];
    fileSaveState.wordsReceived.push({ M, data });
    fileSaveState.wordCount++;
    fileSaveState.wordBuf = [];

    const progress = document.getElementById('files-armed-progress');
    if (progress) progress.textContent = 'Receiving… ' + fileSaveState.wordCount + ' / 16 words';

    if (fileSaveState.wordCount >= 16) {
      filesCompleteArmedSave();
    }
  }

  return xfer - 1;
}

// Complete a save once all 16 words have been captured from the memory loop
function filesCompleteArmedSave() {
  const name    = fileSaveState.pendingName;
  const words   = fileSaveState.wordsReceived;
  const b64     = filesEncodeFromReceived(words);
  const populated = words.filter(w => w.M).length;

  const catalog = filesLoad();
  catalog[name] = { data: b64, savedAt: Date.now(), slots: populated };
  filesSaveCatalog(catalog);

  fileSaveState.armed       = false;
  fileSaveState.pendingName = null;

  const panel = document.getElementById('files-armed-panel');
  if (panel) panel.style.display = 'none';

  catalogState.files.selectedName = name;
  filesRefreshList();
  filesSetStatus('Saved: ' + name + '.L21 (' + populated + ' populated slots)', '#44cc88');
  log('FILE SAVED: ' + name + ' — ' + populated + ' populated, ' + (16 - populated) + ' zero', 'ok');
  logSetup('OP.FILE_SAVE NAME=' + name + ' SLOTS=' + populated,
    'Operator saved memory snapshot "' + name + '" (' + populated + ' slots)');
}

// Check if a save is still in progress and offer to save partial data
function filesCheckPartialSave() {
  // Called when batch write completes but fewer than 16 words arrived.
  if (!fileSaveState.armed || fileSaveState.wordCount === 0) return;
  if (fileSaveState.wordCount >= 16) return; // already completed

  const expected = mem.slots.filter(v => v !== null).length || fileSaveState.wordCount;
  const received = fileSaveState.wordCount;

  const partialPanel = document.getElementById('files-partial-panel');
  const partialLabel = document.getElementById('files-partial-label');
  const cancelBtn    = document.getElementById('files-cancel-save-btn');
  if (partialPanel) partialPanel.style.display = '';
  if (partialLabel) partialLabel.textContent = received + ' of ' + expected + ' expected words received — save partial or cancel';
  if (cancelBtn)    cancelBtn.style.display = 'none'; // replaced by partial panel buttons
}

// Save whatever words have been captured so far (partial save)
function filesSavePartial() {
  // Save whatever words were received, padding rest with zero words
  const words = fileSaveState.wordsReceived.slice();
  while (words.length < 16) words.push({ M: 0, data: 0 });
  fileSaveState.wordsReceived = words;
  fileSaveState.wordCount     = 16;
  filesCompleteArmedSave();
}

// Cancel an in-progress file save operation
function filesCancelSave() {
  fileSaveState.armed       = false;
  fileSaveState.pendingName = null;
  fileSaveState.wordsReceived = [];
  fileSaveState.wordCount   = 0;
  fileSaveState.wordBuf     = [];

  const panel = document.getElementById('files-armed-panel');
  if (panel) panel.style.display = 'none';
  filesSetStatus('Save cancelled', 'var(--fg-dim)');
  log('FILE SAVE CANCELLED', 'info');
}

// ── Delete with confirmation (wrappers) ──────────────────────

function filesAskDelete(name) {
  catalogAskDelete(CATALOG_CONFIGS.files, name);
}

// Confirm deletion of the selected file
function filesDeleteConfirm() {
  catalogConfirmDelete(CATALOG_CONFIGS.files);
}

// Cancel file deletion
function filesDeleteCancel() {
  catalogCancelDelete(CATALOG_CONFIGS.files);
}

// ── Load flow ─────────────────────────────────────────────────

function filesLoadSelected() {
  const selectedName = catalogState.files.selectedName;
  if (!selectedName) return;
  const catalog = filesLoad();
  const entry   = catalog[selectedName];
  if (!entry) { filesSetStatus('File not found: ' + selectedName, '#ee4444'); return; }

  const slots = filesDecodeSnapshot(entry.data);
  if (!slots) { filesSetStatus('Corrupt file: ' + selectedName, '#ee4444'); return; }

  if (mem.wbPos >= 0 || mem._batchRunning) {
    filesSetStatus('Memory writeback busy — wait for current transfer', '#ee4444');
    return;
  }

  if (!clock.running) {
    filesSetStatus('Memory loop is stopped — start the loop before loading', '#ee4444');
    return;
  }

  filesStartLoadStream(slots, selectedName);
}

// Begin streaming a saved file back into the memory loop via bus writeback
function filesStartLoadStream(slots, name) {
  mem._fileLoadQueue = slots.slice(1);
  mem._fileLoadName  = name;
  mem._fileLoadTotal = 16;
  mem._fileLoadSent  = 0;
  filesWriteSlotToMemoryLoop(slots[0], 0);
  filesSetStatus('Loading ' + name + '.L21… 1 / 16', 'var(--fg)');
  log('FILE LOAD: ' + name + ' — streaming 16 slots into Memory loop', 'info');
  logSetup('OP.FILE_LOAD NAME=' + name, 'Operator loads "' + name + '" into Memory loop');
}

// Write one slot value into the memory loop writeback pipeline
function filesWriteSlotToMemoryLoop(val, slotIndex) {
  const M    = val !== null ? 1 : 0;
  const data = val !== null ? (val & 0xFFFF) : 0;
  mem.wbBuf[0] = M;
  for (let b = 0; b < 16; b++) mem.wbBuf[1 + b] = (data >> (15 - b)) & 1;
  mem.wbPos    = 0;
  mem.wbSrcAddr = -1;
  mem._fileLoadSent++;
}

// Callback when a single slot writeback finishes — advances to next slot or completes
function filesOnSlotWriteComplete() {
  const sent = mem._fileLoadSent;
  filesSetStatus('Loading ' + (mem._fileLoadName || '') + '.L21… ' + sent + ' / 16', 'var(--fg)');

  if (!mem._fileLoadQueue || mem._fileLoadQueue.length === 0) {
    const name = mem._fileLoadName || '';
    mem._fileLoadQueue = null;
    mem._fileLoadName  = null;
    filesSetStatus('Loaded: ' + name + '.L21 — 16 words written', '#44cc88');
    log('FILE LOAD COMPLETE: ' + name, 'ok');
    logSetup('OP.FILE_LOAD_DONE NAME=' + name, 'File load complete');
    mem._fileLoadTotal = 0;
    mem._fileLoadSent  = 0;
    return;
  }
  const nextVal    = mem._fileLoadQueue.shift();
  const slotIndex  = mem._fileLoadTotal - mem._fileLoadQueue.length - 1;
  filesWriteSlotToMemoryLoop(nextVal, slotIndex);
}

// ── Export .l21x archive ──────────────────────────────────────

// ══════════════════════════════════════════════════════════════════════════════
// FTP — FILE TRANSFER PROTOCOL
// Files travel directly from /local to /local via chainForward.
// No bus involvement — pure filesystem-to-filesystem transfer.
// ══════════════════════════════════════════════════════════════════════════════

function ftpShowSendDialog() {
  const selectedName = catalogState.files.selectedName;
  if (!selectedName) { filesSetStatus('Select a file first', '#ee4444'); return; }
  ftpSendDialogActive = true;
  const d = document.getElementById('ftp-send-dialog');
  if (d) d.style.display = 'block';
  const label = document.getElementById('ftp-send-filename');
  if (label) label.textContent = selectedName;
  const confirmBtn = document.getElementById('ftp-confirm-btn');
  if (confirmBtn) confirmBtn.disabled = true;
  ftpBuildPeerSelector();
  filesHideNewFile();
  const delD = document.getElementById('files-delete-dialog');
  if (delD) delD.style.display = 'none';
}

// Hide the FTP send dialog panel
function ftpHideSendDialog() {
  ftpSendDialogActive = false;
  const d = document.getElementById('ftp-send-dialog');
  if (d) d.style.display = 'none';
}

// Build the peer selection buttons for FTP file transfer
function ftpBuildPeerSelector() {
  const sel = document.getElementById('ftp-peer-sel');
  if (!sel) return;
  sel.innerHTML = '';
  const peers = new Map();
  ['l','r'].forEach(side => {
    const s = p2pSide(side);
    if (s.dataChannel && s.dataChannel.readyState === 'open') {
      const id = s.peerId || ('p2p-' + side);
      peers.set(id, (s.peerName || id.substring(0,6)) + (side==='l' ? ' ◀' : ' ▶'));
    }
  });
  chainState.topology.detectedMachines.forEach(m => {
    if (m.id !== _p2pMachineId && !peers.has(m.id))
      peers.set(m.id, m.handle || m.id.substring(0,6));
  });
  if (peers.size === 0) {
    const empty = document.createElement('div');
    empty.style.cssText = 'font-size:9px;color:var(--fg-dim);letter-spacing:1px;padding:3px 0;';
    empty.textContent = 'NO PEERS — RUN PING NETWORK';
    sel.appendChild(empty); return;
  }
  peers.forEach((handle, machineId) => {
    const btn = document.createElement('div');
    btn.className = 'lbtn';
    btn.dataset.id = machineId;
    btn.style.cssText = 'font-size:9px;letter-spacing:1px;padding:2px 5px;overflow:hidden;max-width:120px;white-space:nowrap;text-overflow:ellipsis;';
    btn.title = machineId;
    btn.textContent = handle.substring(0,16).toUpperCase();
    btn.onclick = () => {
      sel.querySelectorAll('.lbtn').forEach(b => b.classList.remove('sel-ftp-peer'));
      btn.classList.add('sel-ftp-peer');
      const confirmBtn = document.getElementById('ftp-confirm-btn');
      if (confirmBtn) confirmBtn.disabled = false;
    };
    sel.appendChild(btn);
  });
}

// Confirm and initiate a file transfer to the selected peer
function ftpConfirmSend() {
  const sel = document.getElementById('ftp-peer-sel');
  if (!sel) return;
  const selected = sel.querySelector('.sel-ftp-peer');
  if (!selected) { filesSetStatus('Select a peer first', '#ee4444'); return; }
  const destId      = selected.dataset.id;
  const selectedName = catalogState.files.selectedName;
  if (!selectedName) { ftpHideSendDialog(); return; }
  const catalog = filesLoad();
  const entry = catalog[selectedName];
  if (!entry) { filesSetStatus('File not found', '#ee4444'); ftpHideSendDialog(); return; }
  const packet = {
    type: NET_MSG.FTP_OFFER, netType: NET_MSG.FTP_OFFER,
    srcId: _p2pMachineId, srcHandle: p2pGetLocalIdentity(),
    destId, fileName: selectedName,
    data: entry.data, savedAt: entry.savedAt, slots: entry.slots,
    ttl: NET_TTL_MAX,
  };
  chainForward(destId, packet, null);
  ftpState.outPending  = true;
  ftpState.outFileName = selectedName;
  ftpState.outDestId   = destId;
  ftpHideSendDialog();
  const handle = selected.textContent.replace(/[◀▶]/g,'').trim();
  filesSetStatus('SENT: ' + selectedName + ' → ' + handle.substring(0,10).toUpperCase(), '#44cc88');
  log('FTP OFFER sent: ' + selectedName + ' → ' + destId.substring(0,6), 'ok');
  netmonCaptureFtpPacket('out', NET_MSG.FTP_OFFER, packet);
}

// Handle an incoming FTP file offer from a peer
function ftpHandleOffer(msg) {
  if (msg.destId !== _p2pMachineId) { chainForward(msg.destId, msg, null); return; }
  netmonCaptureFtpPacket('in', NET_MSG.FTP_OFFER, msg);
  notifFireFileOffer();
  ftpState.inPending   = true;
  ftpState.inFileName  = msg.fileName;
  ftpState.inData      = msg.data;
  ftpState.inSrcId     = msg.srcId;
  ftpState.inSrcHandle = msg.srcHandle || msg.srcId.substring(0,6);
  ftpState.inSavedAt   = msg.savedAt;
  ftpState.inSlots     = msg.slots;
  ftpState.overwritePending = false;
  ftpShowInboundPanel();
  log('FTP OFFER received: ' + msg.fileName + ' from ' + ftpState.inSrcHandle, 'ok');
  filesSetStatus('INCOMING: ' + msg.fileName + ' from ' + ftpState.inSrcHandle.toUpperCase(), '#44aaff');
}

// Show the inbound FTP offer panel with accept/decline options
function ftpShowInboundPanel() {
  const panel = document.getElementById('ftp-inbound-panel');
  if (!panel) return;
  panel.style.display = 'block';
  const label = document.getElementById('ftp-inbound-label');
  if (label) label.textContent =
    ftpState.inFileName + ' from ' + ftpState.inSrcHandle.toUpperCase().substring(0,12) +
    (ftpState.inSlots !== undefined ? ' (' + ftpState.inSlots + ' slots)' : '');
  const owPanel = document.getElementById('ftp-overwrite-panel');
  if (owPanel) owPanel.style.display = 'none';
}

// Hide the inbound FTP offer panel
function ftpHideInboundPanel() {
  const panel = document.getElementById('ftp-inbound-panel');
  if (panel) panel.style.display = 'none';
  ftpState.inPending = false;
  ftpState.overwritePending = false;
}

// Accept an incoming FTP file transfer
function ftpAccept() {
  if (!ftpState.inPending) return;
  const catalog = filesLoad();
  const name = ftpState.inFileName;
  const isFull = Object.keys(catalog).length >= CATALOG_CONFIGS.files.max && catalog[name] === undefined;
  if (isFull) { ftpShowOverwriteSelector(catalog); return; }
  ftpCompleteAccept(name);
}

// Show the overwrite slot selector when accepting a file with a name conflict
function ftpShowOverwriteSelector(catalog) {
  ftpState.overwritePending = true;
  const owPanel = document.getElementById('ftp-overwrite-panel');
  if (owPanel) owPanel.style.display = 'block';
  const btns = document.getElementById('ftp-accept-decline-btns');
  if (btns) btns.style.display = 'none';
  const sel = document.getElementById('ftp-overwrite-sel');
  if (!sel) return;
  sel.innerHTML = '';
  const confirmBtn = document.getElementById('ftp-overwrite-confirm-btn');
  if (confirmBtn) confirmBtn.disabled = true;
  Object.keys(catalog).sort().forEach(existingName => {
    const btn = document.createElement('div');
    btn.className = 'lbtn';
    btn.dataset.id = existingName;
    btn.style.cssText = 'font-size:9px;letter-spacing:1px;padding:2px 5px;';
    btn.textContent = existingName;
    btn.onclick = () => {
      sel.querySelectorAll('.lbtn').forEach(b => b.classList.remove('sel-ftp-ow'));
      btn.classList.add('sel-ftp-ow');
      if (confirmBtn) confirmBtn.disabled = false;
    };
    sel.appendChild(btn);
  });
}

// Confirm overwriting a local file with an incoming FTP transfer
function ftpConfirmOverwrite() {
  const sel = document.getElementById('ftp-overwrite-sel');
  const selected = sel ? sel.querySelector('.sel-ftp-ow') : null;
  if (!selected) return;
  const catalog = filesLoad();
  delete catalog[selected.dataset.id];
  filesSaveCatalog(catalog);
  log('FTP overwrite: deleted ' + selected.dataset.id + ' to make room', 'info');
  ftpCompleteAccept(ftpState.inFileName);
}

// Complete the FTP accept — save file and send acceptance message to peer
function ftpCompleteAccept(saveName) {
  const catalog = filesLoad();
  catalog[saveName] = { data: ftpState.inData, savedAt: Date.now(), slots: ftpState.inSlots };
  filesSaveCatalog(catalog);
  filesRefreshList();
  notifFireFileReceived();
  const replyPacket = {
    type: NET_MSG.FTP_ACCEPT, netType: NET_MSG.FTP_ACCEPT,
    srcId: _p2pMachineId, destId: ftpState.inSrcId,
    fileName: saveName, ttl: NET_TTL_MAX,
  };
  chainForward(ftpState.inSrcId, replyPacket, null);
  netmonCaptureFtpPacket('out', NET_MSG.FTP_ACCEPT, replyPacket);
  filesSetStatus('RECEIVED: ' + saveName, '#44cc88');
  log('FTP ACCEPTED: ' + saveName + ' saved to /local', 'ok');
  ftpHideInboundPanel();
  const btns = document.getElementById('ftp-accept-decline-btns');
  if (btns) btns.style.display = 'flex';
}

// Decline an incoming FTP file offer and notify the sender
function ftpDecline() {
  if (!ftpState.inPending) return;
  const replyPacket = {
    type: NET_MSG.FTP_DECLINE, netType: NET_MSG.FTP_DECLINE,
    srcId: _p2pMachineId, destId: ftpState.inSrcId,
    fileName: ftpState.inFileName, ttl: NET_TTL_MAX,
  };
  chainForward(ftpState.inSrcId, replyPacket, null);
  netmonCaptureFtpPacket('out', NET_MSG.FTP_DECLINE, replyPacket);
  filesSetStatus('Declined: ' + ftpState.inFileName, 'var(--fg-dim)');
  log('FTP DECLINED: ' + ftpState.inFileName, 'info');
  ftpHideInboundPanel();
  const btns = document.getElementById('ftp-accept-decline-btns');
  if (btns) btns.style.display = 'flex';
}

// Handle an FTP accept message from the receiving peer
function ftpHandleAccept(msg) {
  if (msg.destId !== _p2pMachineId) { chainForward(msg.destId, msg, null); return; }
  netmonCaptureFtpPacket('in', NET_MSG.FTP_ACCEPT, msg);
  ftpState.outPending = false;
  filesSetStatus('ACCEPTED: ' + (msg.fileName || ftpState.outFileName || ''), '#44cc88');
  log('FTP ACCEPT received for ' + (msg.fileName || ftpState.outFileName || ''), 'ok');
}

// Handle an FTP decline message from the receiving peer
function ftpHandleDecline(msg) {
  if (msg.destId !== _p2pMachineId) { chainForward(msg.destId, msg, null); return; }
  netmonCaptureFtpPacket('in', NET_MSG.FTP_DECLINE, msg);
  notifFireFileDeclined();
  ftpState.outPending = false;
  filesSetStatus('DECLINED by peer: ' + (msg.fileName || ftpState.outFileName || ''), '#ee8844');
  log('FTP DECLINE received for ' + (msg.fileName || ftpState.outFileName || ''), 'info');
}

// Log an FTP packet to the network monitor
function netmonCaptureFtpPacket(dir, type, msg) {
  if (!netmon.enabled) return;
  const labels = {
    [NET_MSG.FTP_OFFER]:   'FTP OFFER',
    [NET_MSG.FTP_ACCEPT]:  'FTP ACCEPT',
    [NET_MSG.FTP_DECLINE]: 'FTP DECLINE',
  };
  const summary = type === NET_MSG.FTP_OFFER
    ? (msg.fileName||'?') + ' → ' + (msg.destId||'?').substring(0,6)
    : (msg.fileName||'?');
  const displayMsg = { ...msg };
  if (displayMsg.data) displayMsg.data = '[.L21 binary ' + msg.data.length + ' chars]';
  netmonAddPacket(dir, labels[type] || type, summary, displayMsg);
}

// Export all saved files as a JSON archive download
function filesExportArchive() {
  const catalog = filesLoad();
  const names   = Object.keys(catalog).sort();
  if (names.length === 0) {
    filesSetStatus('No files to export', 'var(--fg-dim)');
    return;
  }
  const now = filesFormatTimestamp(Date.now());
  let out   = '; L21 FOLDER ARCHIVE\n';
  out      += '; EXPORTED: ' + now + '\n';
  out      += '; FILES: ' + names.length + '\n';

  for (const name of names) {
    const entry  = catalog[name];
    const slots  = filesDecodeSnapshot(entry.data) || new Array(16).fill(null);
    const ts     = filesFormatTimestamp(entry.savedAt);
    const slotCount = slots.filter(v => v !== null).length;
    out += '\nFILE: ' + name + '\n';
    out += '; SAVED: ' + ts + '\n';
    out += '; SLOTS: ' + slotCount + '\n';
    for (let i = 0; i < 16; i++) {
      const val = slots[i] !== null ? slots[i] : 0;
      out += String(i).padStart(2, '0') + ': ' + val.toString(16).toUpperCase().padStart(4, '0') + '\n';
    }
  }

  const blob = new Blob([out], { type: 'text/plain' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url;
  a.download = 'loop21-files.l21x';
  a.click();
  URL.revokeObjectURL(url);
  filesSetStatus('Exported: ' + names.length + ' file(s) as loop21-files.l21x', '#44cc88');
  log('FILE ARCHIVE EXPORTED: ' + names.length + ' files', 'ok');
}

// ── Import .l21x archive ──────────────────────────────────────

function filesImportArchivePicker() {
  const input = document.getElementById('files-import-input');
  if (input) input.click();
}

// Handle file input for archive import
function filesImportArchiveFile(inputEl) {
  const file = inputEl.files[0];
  if (!file) return;
  inputEl.value = '';
  const reader = new FileReader();
  reader.onload = (e) => filesImportArchiveText(e.target.result);
  reader.readAsText(file);
}

// Parse and import a JSON archive text into the files catalog
function filesImportArchiveText(text) {
  const lines   = text.split('\n');
  const parsed  = {};
  let current   = null;
  let slotLines = [];

  for (const rawLine of lines) {
    const line = rawLine.trim();
    if (!line || line.startsWith(';')) continue;
    if (line.startsWith('FILE:')) {
      if (current && slotLines.length === 16) {
        parsed[current] = slotLines;
      }
      current   = line.slice(5).trim().toUpperCase();
      slotLines = [];
      continue;
    }
    // Slot line: "NN: HHHH"
    const m = line.match(/^(\d{1,2}):\s*([0-9A-Fa-f]{1,4})$/);
    if (m && current) {
      slotLines[parseInt(m[1], 10)] = parseInt(m[2], 16);
    }
  }
  if (current && slotLines.length === 16) {
    parsed[current] = slotLines;
  }

  const fileNames = Object.keys(parsed);
  if (fileNames.length === 0) {
    filesSetStatus('No valid files found in archive', '#ee4444');
    return;
  }

  const catalog = filesLoad();
  let imported  = 0;
  let skipped   = 0;

  for (const name of fileNames) {
    if (!CATALOG_CONFIGS.files.nameRegex.test(name)) { skipped++; continue; }
    if (Object.keys(catalog).length >= CATALOG_CONFIGS.files.max && catalog[name] === undefined) {
      filesSetStatus('Folder full — imported ' + imported + ', stopped at limit', '#ffaa44');
      break;
    }
    // Build slot array and encode
    const slots = parsed[name];
    const items = [];
    for (let i = 0; i < 16; i++) {
      const v = slots[i];
      items.push({ M: (v !== undefined && v !== 0) ? 1 : 0, data: v || 0 });
    }
    // For import, M is 1 for any non-zero value
    const b64      = filesEncodeFromReceived(items);
    const slotCount = items.filter(it => it.M).length;
    catalog[name]  = { data: b64, savedAt: Date.now(), slots: slotCount };
    imported++;
  }

  filesSaveCatalog(catalog);
  filesRefreshList();
  filesSetStatus('Imported: ' + imported + ' file(s)' + (skipped ? ', ' + skipped + ' skipped' : ''), '#44cc88');
  log('FILE ARCHIVE IMPORTED: ' + imported + ' files', 'ok');
}


// ══════════════════════════════════════════════════════════════
// SCRIPTS — Skins, CBX Local, CBX Networked
//
// Shared editor, verification, and management functions for all
// three script sub-sections. Each function takes a configId
// ('skins', 'cbxLocal', 'cbxNet') and looks up the config from
// CATALOG_CONFIGS.
// ══════════════════════════════════════════════════════════════

// Editor state — tracks which editor is open per sub-section
const scriptsEditorState = {
  skins:    { active: false, name: null, foundational: false },
  cbxLocal: { active: false, name: null, foundational: false },
  cbxNet:   { active: false, name: null, foundational: false },
};

// ── Wrapper functions for data-action delegation ────────────────

function scriptsSortBy(configId, key) {
  catalogSortBy(CATALOG_CONFIGS[configId], key);
}

// Show the naming dialog for a new script in the given config
function scriptsNewScript(configId) {
  catalogShowNamingDialog(CATALOG_CONFIGS[configId]);
}

// Hide the new script naming dialog
function scriptsHideNewScript(configId) {
  catalogHideNamingDialog(CATALOG_CONFIGS[configId]);
}

// Confirm the new script name and open the editor
function scriptsSaveNameConfirm(configId) {
  catalogConfirmName(CATALOG_CONFIGS[configId]);
}

// Confirm overwriting an existing script
function scriptsOverwriteConfirm(configId) {
  catalogOverwriteConfirm(CATALOG_CONFIGS[configId]);
}

// Cancel script overwrite
function scriptsOverwriteCancel(configId) {
  catalogOverwriteCancel(CATALOG_CONFIGS[configId]);
}

// Confirm script deletion
function scriptsDeleteConfirm(configId) {
  catalogConfirmDelete(CATALOG_CONFIGS[configId]);
}

// Cancel script deletion
function scriptsDeleteCancel(configId) {
  catalogCancelDelete(CATALOG_CONFIGS[configId]);
}

// ── Create and open editor (called from onNameConfirmed) ────────

function scriptsCreateAndOpenEditor(configId, name) {
  const config  = CATALOG_CONFIGS[configId];
  catalogHideNamingDialog(config);
  const catalog = catalogLoad(config);
  if (!catalog[name]) {
    catalog[name] = { source: '', created: Date.now(), modified: Date.now(), verified: false };
    catalogSave(config, catalog);
  }
  catalogRefreshList(config);
  scriptsShowEditor(configId, name, false);
}

// ── Editor view ─────────────────────────────────────────────────

function scriptsShowEditor(configId, name, foundational) {
  const config = CATALOG_CONFIGS[configId];
  const edState = scriptsEditorState[configId];
  if (!edState) return;

  edState.active       = true;
  edState.name         = name;
  edState.foundational = foundational;

  // Hide list view, show editor view
  const listView   = document.getElementById('scripts-' + configId + '-list-view');
  const editorView = document.getElementById('scripts-' + configId + '-editor-view');
  if (listView)   listView.style.display   = 'none';
  if (editorView) editorView.style.display = '';

  // Name label
  const nameEl = document.getElementById('scripts-' + configId + '-editor-name');
  if (nameEl) nameEl.textContent = name + (foundational ? '' : config.extension);

  // Lock icon / custom buttons
  const lockIcon    = document.getElementById('scripts-' + configId + '-lock-icon');
  const customBtns  = document.getElementById('scripts-' + configId + '-editor-custom-btns');
  const readonlyBtns = document.getElementById('scripts-' + configId + '-editor-readonly-btns');
  if (lockIcon)     lockIcon.style.display    = foundational ? '' : 'none';
  if (customBtns)   customBtns.style.display  = foundational ? 'none' : '';
  if (readonlyBtns) readonlyBtns.style.display = foundational ? '' : 'none';

  // Textarea
  const textarea = document.getElementById('scripts-' + configId + '-editor-textarea');
  if (textarea) {
    if (foundational && configId === 'skins') {
      textarea.value = FOUNDATIONAL_SKIN_SOURCES[name] || '';
    } else if (foundational && (configId === 'cbxLocal' || configId === 'cbxNet')) {
      textarea.value = FOUNDATIONAL_CBX_SOURCES[name] || '';
    } else {
      const catalog = catalogLoad(config);
      textarea.value = catalog[name] ? catalog[name].source : '';
    }
    textarea.readOnly = foundational;
    if (foundational) {
      textarea.addEventListener('drop', scriptsBlockDrop);
    } else {
      textarea.removeEventListener('drop', scriptsBlockDrop);
    }
  }

  // Char count
  scriptsEditorUpdateCharCount(configId);

  // Clear status
  const statusEl = document.getElementById('scripts-' + configId + '-editor-status');
  if (statusEl) { statusEl.textContent = ''; statusEl.style.color = 'var(--fg-dim)'; }

  // Hide verify bar
  const verifyBar = document.getElementById('scripts-' + configId + '-verify-bar');
  if (verifyBar) verifyBar.style.display = 'none';
}

// Close the script editor panel
function scriptsHideEditor(configId) {
  const edState = scriptsEditorState[configId];
  if (edState) { edState.active = false; edState.name = null; edState.foundational = false; }

  const listView   = document.getElementById('scripts-' + configId + '-list-view');
  const editorView = document.getElementById('scripts-' + configId + '-editor-view');
  if (listView)   listView.style.display   = '';
  if (editorView) editorView.style.display = 'none';

  catalogRefreshList(CATALOG_CONFIGS[configId]);
}

// Prevent default drop behavior on the script editor textarea
function scriptsBlockDrop(e) { e.preventDefault(); }

// Update the character count display in the script editor
function scriptsEditorUpdateCharCount(configId) {
  const textarea = document.getElementById('scripts-' + configId + '-editor-textarea');
  const countEl  = document.getElementById('scripts-' + configId + '-char-count');
  if (textarea && countEl) countEl.textContent = textarea.value.length;
}

// Set the status message in the script editor panel
function scriptsEditorSetStatus(configId, msg, color) {
  const el = document.getElementById('scripts-' + configId + '-editor-status');
  if (el) { el.textContent = msg; el.style.color = color || 'var(--fg-dim)'; }
}

// ── Save draft ──────────────────────────────────────────────────

function scriptsEditorSaveDraft(configId) {
  const config  = CATALOG_CONFIGS[configId];
  const edState = scriptsEditorState[configId];
  if (!edState || !edState.active || edState.foundational) return;

  const textarea = document.getElementById('scripts-' + configId + '-editor-textarea');
  if (!textarea) return;
  const source = textarea.value;
  if (source.length > 50000) {
    scriptsEditorSetStatus(configId, 'Source too long — max 50,000 characters', '#ee4444');
    return;
  }

  const catalog = catalogLoad(config);
  const name    = edState.name;
  if (!catalog[name]) catalog[name] = { source: '', created: Date.now(), modified: Date.now(), verified: false };
  const wasVerified = catalog[name].verified;

  // Warn if this CBX script is actively running a challenge
  if (wasVerified && (configId === 'cbxLocal' || configId === 'cbxNet')) {
    const skinId = 'custom-' + name.toLowerCase();
    if (CHALL.active && CHALL.challengeId === skinId) {
      if (!confirm('Active challenge will be aborted. Continue?')) return;
    }
  }

  catalog[name].source   = source;
  catalog[name].modified = Date.now();
  catalog[name].verified = false;
  catalogSave(config, catalog);

  // If was verified and now unverified, unregister
  if (wasVerified) {
    if (configId === 'skins') skinUnregister(name);
    if (configId === 'cbxLocal' || configId === 'cbxNet') challUnregisterScript(name, configId);
  }

  scriptsEditorSetStatus(configId, 'Saved draft — unverified', 'var(--fg-dim)');
}

// ── Save & verify ───────────────────────────────────────────────

function scriptsEditorSaveAndVerify(configId) {
  const config  = CATALOG_CONFIGS[configId];
  const edState = scriptsEditorState[configId];
  if (!edState || !edState.active || edState.foundational) return;

  const textarea = document.getElementById('scripts-' + configId + '-editor-textarea');
  if (!textarea) return;
  const source = textarea.value;
  if (source.length > 50000) {
    scriptsEditorSetStatus(configId, 'Source too long — max 50,000 characters', '#ee4444');
    return;
  }

  const catalog = catalogLoad(config);
  const name    = edState.name;
  if (!catalog[name]) catalog[name] = { source: '', created: Date.now(), modified: Date.now(), verified: false };
  catalog[name].source   = source;
  catalog[name].modified = Date.now();

  // Show progress bar
  const verifyBar  = document.getElementById('scripts-' + configId + '-verify-bar');
  const verifyFill = document.getElementById('scripts-' + configId + '-verify-fill');
  const accentColor = configId === 'skins' ? 'var(--c-skins)' : configId === 'cbxLocal' ? 'var(--c-chall)' : 'var(--c-net)';
  if (verifyBar)  verifyBar.style.display = '';
  if (verifyFill) { verifyFill.style.width = '0%'; verifyFill.style.background = accentColor; }

  // Run verification
  if (configId === 'skins') {
    // Animate progress (skin verification is <1ms, so this is purely visual)
    if (verifyFill) verifyFill.style.width = '50%';
    const result = verifySkin(source, name);
    requestAnimationFrame(() => {
      if (verifyFill) verifyFill.style.width = '100%';
      setTimeout(() => {
        if (result.valid) {
          catalog[name].verified = true;
          catalogSave(config, catalog);
          skinRegister(name, result.parsed);
          let msg = '✓ Verified';
          if (result.warnings.length > 0) msg += ' — ' + result.warnings.join('; ');
          scriptsEditorSetStatus(configId, msg, 'var(--memory, #006830)');
          if (verifyFill) verifyFill.style.background = 'var(--memory, #006830)';
        } else {
          catalog[name].verified = false;
          catalogSave(config, catalog);
          skinUnregister(name);
          scriptsEditorSetStatus(configId, result.errors.join('\n'), '#ee4444');
          if (verifyFill) verifyFill.style.background = '#ee4444';
        }
        setTimeout(() => { if (verifyBar) verifyBar.style.display = 'none'; }, 1500);
      }, 300); // minimum visual duration
    });
  } else if (configId === 'cbxLocal' || configId === 'cbxNet') {
    const requireNetwork = (configId === 'cbxNet');
    verifyCBXAsync(source, name, requireNetwork, verifyFill, function(result) {
      if (result.valid) {
        catalog[name].verified = true;
        catalogSave(config, catalog);
        challRegisterScript(name, result.parsed, configId);
        scriptsEditorSetStatus(configId, '✓ Verified: ' + result.parsed.name, 'var(--memory, #006830)');
        if (verifyFill) verifyFill.style.background = 'var(--memory, #006830)';
      } else {
        catalog[name].verified = false;
        catalogSave(config, catalog);
        challUnregisterScript(name, configId);
        scriptsEditorSetStatus(configId, result.errors.join('\n'), '#ee4444');
        if (verifyFill) verifyFill.style.background = '#ee4444';
      }
      setTimeout(() => { if (verifyBar) verifyBar.style.display = 'none'; }, 1500);
    });
  }
}

// ── Download ────────────────────────────────────────────────────

function scriptsEditorDownload(configId) {
  const edState = scriptsEditorState[configId];
  if (!edState || !edState.active) return;

  const config   = CATALOG_CONFIGS[configId];
  const textarea = document.getElementById('scripts-' + configId + '-editor-textarea');
  if (!textarea) return;

  const name    = edState.name;
  const source  = textarea.value;
  const now     = Date.now();
  const wrapper = JSON.stringify({
    type:     configId === 'skins' ? 'skin' : configId === 'cbxLocal' ? 'cbx-local' : 'cbx-net',
    name:     name.toUpperCase(),
    version:  1,
    created:  now,
    modified: now,
    source:   source,
  }, null, 2);

  const fileExt = config.extension.toLowerCase();
  const blob = new Blob([wrapper], { type: 'application/json' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url;
  a.download = name.toUpperCase() + fileExt;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  scriptsEditorSetStatus(configId, 'Downloaded: ' + name.toUpperCase() + fileExt, 'var(--fg-dim)');
}

// ── Delete from editor ──────────────────────────────────────────

function scriptsEditorRequestDelete(configId) {
  const edState = scriptsEditorState[configId];
  if (!edState || !edState.active || edState.foundational) return;
  const name = edState.name;
  // Navigate back to list, then trigger delete dialog
  scriptsHideEditor(configId);
  catalogAskDelete(CATALOG_CONFIGS[configId], name);
}

// ── Skin verification ───────────────────────────────────────────

function isValidCSSColor(val) {
  if (typeof val !== 'string' || !val.trim()) return false;
  const el = document.createElement('div');
  el.style.color = '';
  el.style.color = val;
  return el.style.color !== '';
}

// Validate a skin source string and return parsed skin data or errors
function verifySkin(source, scriptName) {
  const errors   = [];
  const warnings = [];
  let parsed     = null;

  // 1. Parse
  try {
    parsed = (new Function('return (' + source + ')'))();
  } catch(e) {
    return { valid: false, errors: ['Parse error: ' + e.message], warnings: [], parsed: null };
  }

  if (!parsed || typeof parsed !== 'object') {
    return { valid: false, errors: ['Must be a JavaScript object literal'], warnings: [], parsed: null };
  }

  // 2. Required name field
  if (typeof parsed.name !== 'string' || !parsed.name.trim()) {
    errors.push('Missing required field: name (string)');
  }

  // 3. cssVars validation
  if (parsed.cssVars !== undefined) {
    if (typeof parsed.cssVars !== 'object' || Array.isArray(parsed.cssVars)) {
      errors.push('cssVars must be a plain object');
    } else {
      for (const [key, val] of Object.entries(parsed.cssVars)) {
        if (!key.startsWith('--')) {
          errors.push('cssVars key must start with --: ' + key);
        } else if (!VALID_CSS_VARS.has(key)) {
          warnings.push('Unknown CSS variable: ' + key + ' — may not have any effect');
        }
        if (typeof val === 'string' && !isValidCSSColor(val)) {
          errors.push('Invalid CSS color for ' + key + ': ' + val);
        }
      }
    }
  }

  // 4. canvas validation
  if (parsed.canvas !== undefined) {
    if (typeof parsed.canvas !== 'object' || Array.isArray(parsed.canvas)) {
      errors.push('canvas must be a plain object');
    } else {
      for (const [key, val] of Object.entries(parsed.canvas)) {
        if (!VALID_CANVAS_KEYS.has(key)) {
          warnings.push('Unknown canvas key: ' + key);
        }
        if (typeof val === 'string') {
          if (!/^#[0-9a-fA-F]{3,8}$/.test(val)) {
            errors.push('Invalid hex color for canvas.' + key + ': ' + val);
          }
        } else if (Array.isArray(val)) {
          if (val.length !== 3 || !val.every(v => Number.isInteger(v) && v >= 0 && v <= 255)) {
            errors.push('canvas.' + key + ' array must be [R, G, B] with integers 0–255');
          }
        }
      }
    }
  }

  // 5. ID collision with foundational skins
  if (parsed.name) {
    const skinId = parsed.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
    if (FOUNDATIONAL_SKIN_IDS.has(skinId)) {
      errors.push('Skin name collides with built-in skin: ' + skinId);
    }
  }

  return { valid: errors.length === 0, errors: errors, warnings: warnings, parsed: parsed };
}

// ── Skin registration / unregistration ──────────────────────────

function skinRegister(name, skinObj) {
  const skinId = 'custom-' + name.toLowerCase();
  SKINS[skinId] = skinObj;

  // Inject scoped <style> block for cssVars
  const existingStyle = document.querySelector('style[data-skin-id="' + skinId + '"]');
  if (existingStyle) existingStyle.remove();
  if (skinObj.cssVars && Object.keys(skinObj.cssVars).length > 0) {
    const styleEl = document.createElement('style');
    styleEl.setAttribute('data-skin-id', skinId);
    const rules = Object.entries(skinObj.cssVars).map(([k,v]) => k + ':' + v).join(';');
    styleEl.textContent = 'body.skin-' + skinId + '{' + rules + '}';
    document.head.appendChild(styleEl);
  }

  // Add option to skin dropdown (if not already present)
  const skinSel = document.getElementById('skin-select');
  if (skinSel && !skinSel.querySelector('option[value="' + skinId + '"]')) {
    const opt = document.createElement('option');
    opt.value       = skinId;
    opt.textContent = skinObj.name || name;
    skinSel.appendChild(opt);
  }
}

// Remove a custom skin and revert to OG if it was active
function skinUnregister(name) {
  const skinId = 'custom-' + name.toLowerCase();
  if (!SKINS[skinId]) return;

  // If currently applied, revert to OG
  if (currentSkinId === skinId) {
    applySkin('og');
  }

  // Remove from SKINS
  delete SKINS[skinId];

  // Remove <style> block
  const styleEl = document.querySelector('style[data-skin-id="' + skinId + '"]');
  if (styleEl) styleEl.remove();

  // Remove option from dropdown
  const skinSel = document.getElementById('skin-select');
  if (skinSel) {
    const opt = skinSel.querySelector('option[value="' + skinId + '"]');
    if (opt) opt.remove();
  }
}

// ── Upload pipeline ──────────────────────────────────────────────

// Pending upload state per sub-section
const scriptsPendingUpload = {
  skins:    null,
  cbxLocal: null,
  cbxNet:   null,
};

// Open the file picker for script upload
function scriptsUploadPicker(configId) {
  const input = document.getElementById('scripts-' + configId + '-upload-input');
  if (input) { input.value = ''; input.click(); }
}

// Handle file selection for script upload
function scriptsUploadFile(configId, inputEl) {
  const file = inputEl.files && inputEl.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    scriptsProcessUpload(configId, e.target.result);
  };
  reader.readAsText(file);
}

// Parse and validate an uploaded script file
function scriptsProcessUpload(configId, text) {
  const config = CATALOG_CONFIGS[configId];
  let wrapper;
  try {
    wrapper = JSON.parse(text);
  } catch(e) {
    catalogSetStatus(config, 'Invalid script file — not valid JSON', '#ee4444');
    return;
  }

  // Validate structure
  if (!wrapper || typeof wrapper !== 'object') {
    catalogSetStatus(config, 'Invalid script file — not an object', '#ee4444');
    return;
  }
  if (!wrapper.type || !wrapper.name || !wrapper.source) {
    catalogSetStatus(config, 'Invalid script file — missing type, name, or source', '#ee4444');
    return;
  }

  // Type match
  const expectedType = configId === 'skins' ? 'skin' : configId === 'cbxLocal' ? 'cbx-local' : 'cbx-net';
  if (wrapper.type !== expectedType) {
    const typeLabel = wrapper.type === 'skin' ? 'a Skin' : wrapper.type === 'cbx-local' ? 'a CBX Local script' : 'a CBX Networked script';
    catalogSetStatus(config, 'Type mismatch — this is ' + typeLabel + '.', '#ee4444');
    return;
  }

  // Name validation
  const name = wrapper.name.trim().toUpperCase();
  const validation = catalogValidateName(config, name);
  if (!validation.valid) {
    catalogSetStatus(config, 'Invalid script name in file: ' + validation.error, '#ee4444');
    return;
  }

  // Check for collision
  const catalog = catalogLoad(config);
  if (catalog[name] !== undefined) {
    // Store pending upload and show collision dialog
    scriptsPendingUpload[configId] = { name: name, source: wrapper.source, created: wrapper.created || Date.now(), modified: wrapper.modified || Date.now() };
    const dialog  = document.getElementById('scripts-' + configId + '-collision-dialog');
    const nameEl  = document.getElementById('scripts-' + configId + '-collision-name');
    if (nameEl)  nameEl.textContent = name + config.extension;
    if (dialog)  dialog.style.display = 'block';
    return;
  }

  // Check full
  if (Object.keys(catalog).length >= config.max) {
    catalogSetStatus(config, config.fullMessage, '#ee4444');
    return;
  }

  // Add as unverified
  catalog[name] = { source: wrapper.source, created: wrapper.created || Date.now(), modified: wrapper.modified || Date.now(), verified: false };
  catalogSave(config, catalog);
  catalogRefreshList(config);
  catalogSetStatus(config, 'Uploaded: ' + name + ' (unverified)', 'var(--fg-dim)');
}

// Overwrite an existing script with the uploaded content
function scriptsUploadOverwrite(configId) {
  const config  = CATALOG_CONFIGS[configId];
  const pending = scriptsPendingUpload[configId];
  if (!pending) return;
  scriptsPendingUpload[configId] = null;
  const dialog = document.getElementById('scripts-' + configId + '-collision-dialog');
  if (dialog) dialog.style.display = 'none';

  const catalog = catalogLoad(config);
  const wasVerified = catalog[pending.name] && catalog[pending.name].verified;
  catalog[pending.name] = { source: pending.source, created: pending.created, modified: Date.now(), verified: false };
  catalogSave(config, catalog);

  // Unregister if it was verified
  if (wasVerified) {
    if (configId === 'skins') skinUnregister(pending.name);
    if (configId === 'cbxLocal' || configId === 'cbxNet') challUnregisterScript(pending.name, configId);
  }

  catalogRefreshList(config);
  catalogSetStatus(config, 'Overwritten: ' + pending.name + ' (unverified)', 'var(--fg-dim)');
}

// Save an uploaded script under a new auto-generated name
function scriptsUploadRename(configId) {
  const config  = CATALOG_CONFIGS[configId];
  const pending = scriptsPendingUpload[configId];
  if (!pending) return;
  scriptsPendingUpload[configId] = null;
  const dialog = document.getElementById('scripts-' + configId + '-collision-dialog');
  if (dialog) dialog.style.display = 'none';

  const catalog = catalogLoad(config);

  // Find available name with numeric suffix
  let newName = null;
  for (let i = 2; i <= 99; i++) {
    const suffix = '-' + i;
    const candidate = pending.name.length + suffix.length > 16
      ? pending.name.slice(0, 16 - suffix.length) + suffix
      : pending.name + suffix;
    if (catalog[candidate] === undefined) { newName = candidate; break; }
  }

  if (!newName) {
    catalogSetStatus(config, 'Cannot auto-rename — too many copies', '#ee4444');
    return;
  }

  if (Object.keys(catalog).length >= config.max) {
    catalogSetStatus(config, config.fullMessage, '#ee4444');
    return;
  }

  catalog[newName] = { source: pending.source, created: pending.created, modified: Date.now(), verified: false };
  catalogSave(config, catalog);
  catalogRefreshList(config);
  catalogSetStatus(config, 'Uploaded as: ' + newName + ' (unverified)', 'var(--fg-dim)');
}

// Cancel the upload collision dialog
function scriptsUploadCancel(configId) {
  scriptsPendingUpload[configId] = null;
  const dialog = document.getElementById('scripts-' + configId + '-collision-dialog');
  if (dialog) dialog.style.display = 'none';
  catalogSetStatus(CATALOG_CONFIGS[configId], '', '');
}

// ── Init re-verification ────────────────────────────────────────
// At startup, re-verify all scripts marked as verified. Catches
// scripts verified against an older version that may no longer pass.

function scriptsReVerifyAll() {
  // Skins
  const skinsConfig  = CATALOG_CONFIGS.skins;
  const skinsCatalog = catalogLoad(skinsConfig);
  let skinsChanged = false;
  for (const [name, entry] of Object.entries(skinsCatalog)) {
    if (entry.verified) {
      const result = verifySkin(entry.source, name);
      if (!result.valid) {
        entry.verified = false;
        skinsChanged = true;
        skinUnregister(name);
        log('Script ' + name + ' failed re-verification — marked unverified', 'info');
      }
    }
  }
  if (skinsChanged) catalogSave(skinsConfig, skinsCatalog);

  // CBX Local and CBX Net
  for (const configId of ['cbxLocal', 'cbxNet']) {
    const config  = CATALOG_CONFIGS[configId];
    const catalog = catalogLoad(config);
    const requireNetwork = (configId === 'cbxNet');
    let changed = false;
    for (const [name, entry] of Object.entries(catalog)) {
      if (entry.verified) {
        let valid = true;
        try {
          const parsed = (new Function('return (' + entry.source + ')'))();
          // Basic structural checks (skip registry uniqueness — already registered)
          if (!parsed || typeof parsed !== 'object') valid = false;
          else if (typeof parsed.generate !== 'function' || typeof parsed.par !== 'function') valid = false;
          else if (requireNetwork && !parsed.network) valid = false;
          else if (!requireNetwork && parsed.network) valid = false;
          else {
            // Quick dry run
            const dp = buildDefaultParams(parsed.params || []);
            const r = parsed.generate(dp);
            if (!r || !Array.isArray(r.values) || r.values.length === 0) valid = false;
          }
        } catch(e) {
          valid = false;
        }
        if (!valid) {
          entry.verified = false;
          changed = true;
          challUnregisterScript(name, configId);
          log('Script ' + name + ' failed re-verification — marked unverified', 'info');
        }
      }
    }
    if (changed) catalogSave(config, catalog);
  }
}

// ── Init: load and register verified custom skins ───────────────

function scriptsInitSkins() {
  const config  = CATALOG_CONFIGS.skins;
  const catalog = catalogLoad(config);
  for (const [name, entry] of Object.entries(catalog)) {
    if (entry.verified) {
      try {
        const skinObj = parseSkinSource(entry.source);
        skinRegister(name, skinObj);
      } catch(e) {
        entry.verified = false;
        catalogSave(config, catalog);
        log('Script ' + name + ' failed re-parse — marked unverified', 'err');
      }
    }
  }
  catalogRefreshList(config);
}

// ── CBX verification (async with yielding dry runs) ─────────────

function verifyCBXAsync(source, scriptName, requireNetwork, fillEl, callback) {
  const errors = [];
  let parsed = null;

  // Phase 1: Parse (0→10%)
  if (fillEl) fillEl.style.width = '10%';
  try {
    parsed = (new Function('return (' + source + ')'))();
  } catch(e) {
    callback({ valid: false, errors: ['Parse error: ' + e.message], parsed: null });
    return;
  }
  if (!parsed || typeof parsed !== 'object') {
    callback({ valid: false, errors: ['Must be a JavaScript object literal'], parsed: null });
    return;
  }

  // Phase 2: Required fields (10→20%)
  if (fillEl) fillEl.style.width = '20%';
  for (const field of ['id', 'name', 'description', 'generate', 'par']) {
    if (parsed[field] === undefined || parsed[field] === null) {
      errors.push('Missing required field: ' + field);
    }
  }
  if (errors.length > 0) { callback({ valid: false, errors: errors, parsed: null }); return; }

  if (!/^[a-z0-9_]+$/.test(parsed.id)) {
    callback({ valid: false, errors: ['ID must contain only lowercase letters, digits, and underscores'], parsed: null });
    return;
  }

  // Check ID collision with built-ins
  const existing = customChallengeRegistry.get(parsed.id);
  if (existing && existing.builtin) {
    callback({ valid: false, errors: ['ID "' + parsed.id + '" is reserved by a built-in challenge'], parsed: null });
    return;
  }

  if (typeof parsed.generate !== 'function') { callback({ valid: false, errors: ['"generate" must be a function'], parsed: null }); return; }
  if (typeof parsed.par !== 'function')      { callback({ valid: false, errors: ['"par" must be a function'], parsed: null }); return; }

  // Network flag enforcement
  if (requireNetwork && !parsed.network) {
    callback({ valid: false, errors: ['CBX Networked scripts must include network: true'], parsed: null });
    return;
  }
  if (!requireNetwork && parsed.network) {
    callback({ valid: false, errors: ['CBX Local scripts must not include network: true'], parsed: null });
    return;
  }

  // Phase 3: Params shape (20→30%)
  if (fillEl) fillEl.style.width = '30%';
  if (parsed.params !== undefined) {
    if (!Array.isArray(parsed.params)) { callback({ valid: false, errors: ['"params" must be an array'], parsed: null }); return; }
    for (let i = 0; i < parsed.params.length; i++) {
      const p = parsed.params[i];
      if (!p.type || !p.id || p.default === undefined) {
        callback({ valid: false, errors: ['params[' + i + '] must have "type", "id", and "default" fields'], parsed: null }); return;
      }
      if (!['number', 'select', 'toggle'].includes(p.type)) {
        callback({ valid: false, errors: ['params[' + i + '] has unsupported type "' + p.type + '"'], parsed: null }); return;
      }
      if (p.type === 'select' && (!Array.isArray(p.options) || p.options.length === 0)) {
        callback({ valid: false, errors: ['params[' + i + '] of type "select" must have a non-empty "options" array'], parsed: null }); return;
      }
    }
  }

  // Phase 4: Dry runs with event loop yielding (30→80%)
  const defaultParams = buildDefaultParams(parsed.params || []);
  let dryRun = 0;
  const totalRuns = 5;

  // Run the next dry-run iteration during CBX script verification
  function runNextDryRun() {
    if (dryRun >= totalRuns) {
      // Phase 5: Par check (80→90%)
      if (fillEl) fillEl.style.width = '90%';
      let parResult;
      try {
        const sampleGenerate = parsed.generate(defaultParams);
        parResult = parsed.par(sampleGenerate, defaultParams);
      } catch(e) {
        callback({ valid: false, errors: ['par() threw: ' + e.message], parsed: null }); return;
      }
      if (!parResult || typeof parResult !== 'object') { callback({ valid: false, errors: ['par() must return a plain object'], parsed: null }); return; }
      if (!Number.isInteger(parResult.ticks) || parResult.ticks < 1) { callback({ valid: false, errors: ['par().ticks must be a positive integer'], parsed: null }); return; }
      if (!Number.isInteger(parResult.ops)   || parResult.ops   < 1) { callback({ valid: false, errors: ['par().ops must be a positive integer'], parsed: null }); return; }

      // Phase 6: Complete (90→100%)
      if (fillEl) fillEl.style.width = '100%';
      callback({ valid: true, errors: [], parsed: parsed });
      return;
    }

    const pct = 30 + Math.round((dryRun / totalRuns) * 50);
    if (fillEl) fillEl.style.width = pct + '%';

    let result;
    const startTime = performance.now();
    try {
      result = parsed.generate(defaultParams);
    } catch(e) {
      callback({ valid: false, errors: ['generate() threw on dry run ' + (dryRun+1) + ': ' + e.message], parsed: null }); return;
    }
    if (performance.now() - startTime > 50) {
      callback({ valid: false, errors: ['generate() took more than 50ms on dry run ' + (dryRun+1)], parsed: null }); return;
    }
    const resultError = validateGenerateResult(result);
    if (resultError) {
      callback({ valid: false, errors: ['generate() dry run ' + (dryRun+1) + ': ' + resultError], parsed: null }); return;
    }
    dryRun++;
    setTimeout(runNextDryRun, 0); // yield to event loop
  }

  runNextDryRun();
}

// ── Challenge script registration / unregistration ──────────────

function challRegisterScript(name, challObj, configId) {
  const challId = 'custom-' + name.toLowerCase();
  // Stamp the custom ID onto the object
  challObj._customScriptName = name;
  challObj._customConfigId   = configId;
  challObj.id = challId;

  // Remove any previous registration with same ID
  customChallengeRegistry.delete(challId);
  const existingOpt = document.querySelector('#chall-type option[value="' + challId + '"]');
  if (existingOpt) existingOpt.remove();

  customChallengeRegistry.set(challId, challObj);
  addChallengeToTypeSelector(challObj);
}

// Remove a registered CBX script challenge and clean up
function challUnregisterScript(name, configId) {
  const challId = 'custom-' + name.toLowerCase();
  const def = customChallengeRegistry.get(challId);
  if (!def) return;

  // If actively running, abort
  if (CHALL.active && CHALL.challengeId === challId) {
    challAbort();
    challSetStatus('Active challenge aborted — script became unverified.', '');
  }

  customChallengeRegistry.delete(challId);
  const option = document.querySelector('#chall-type option[value="' + challId + '"]');
  if (option) option.remove();

  // If selected in dropdown, revert to first
  const typeEl = document.getElementById('chall-type');
  if (typeEl && typeEl.value === challId) {
    typeEl.selectedIndex = 0;
    challOnTypeChange();
  }
}

// ── Init: load and register verified custom CBX scripts ─────────

function scriptsInitCbx() {
  for (const configId of ['cbxLocal', 'cbxNet']) {
    const config  = CATALOG_CONFIGS[configId];
    const catalog = catalogLoad(config);
    const requireNetwork = (configId === 'cbxNet');
    for (const [name, entry] of Object.entries(catalog)) {
      if (entry.verified) {
        try {
          const challObj = (new Function('return (' + entry.source + ')'))();
          if (requireNetwork && !challObj.network) { entry.verified = false; continue; }
          if (!requireNetwork && challObj.network) { entry.verified = false; continue; }
          challRegisterScript(name, challObj, configId);
        } catch(e) {
          entry.verified = false;
          log('Script ' + name + ' failed re-parse — marked unverified', 'err');
        }
      }
    }
    catalogSave(config, catalog);
    catalogRefreshList(config);
  }
}


// ══════════════════════════════════════════════════════════════
// NETWORK MONITOR
//
// Captures interesting packets flowing through this machine:
//   · CBX challenge messages (invite, assign, go, submit, ok, fail, abort, complete)
//   · CBX chain sum words (the 17-bit values passing between machines)
//   · Network chat messages (routed through hub)
//   · Outbound equivalents of all the above
//
// Excluded (too noisy or no operator value):
//   · Heartbeat, ping/pong, scan, topology, hub election,
//     route table, member list, identity, raw P2P loop words
//
// Operators can view packets, expand them, capture to staging,
// edit fields, and inject modified packets back into the network.
// ══════════════════════════════════════════════════════════════

const NETMON_BUFFER_MAX = 20;

const netmon = {
  active:      false,
  packets:     [],    // circular buffer of captured packets
  selectedIdx: null,  // index of currently expanded packet
  staged:      null,  // packet in staging area (editable copy)
};

// Packet types worth showing — everything else is silently ignored
const NETMON_INTERESTING_CBX = new Set([
  'cbx_chain_invite', 'cbx_chain_invite_ack',
  'cbx_chain_assign', 'cbx_chain_assign_ack',
  'cbx_chain_go',
  'cbx_chain_sum_submit', 'cbx_chain_sum_ok', 'cbx_chain_sum_fail',
  'cbx_chain_abort', 'cbx_chain_complete',
]);

const NETMON_INTERESTING_NET = new Set([
  'net_chat',
]);

// ── Toggle ───────────────────────────────────────────────────

function netmonToggle() {
  netmon.active = !netmon.active;
  const btn = document.getElementById('netmon-toggle-btn');
  if (btn) {
    btn.textContent = netmon.active ? 'MONITOR: ON' : 'MONITOR: OFF';
    btn.className   = netmon.active ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  }
  if (!netmon.active) {
    netmonCloseDetail();
    netmonDiscardStaged();
  }
  log('Network Monitor ' + (netmon.active ? 'ON' : 'OFF'), 'info');
}

// Clear all captured packets from the network monitor
function netmonClear() {
  netmon.packets     = [];
  netmon.selectedIdx = null;
  netmonCloseDetail();
  netmonRefreshStream();
}

// ── Capture hook — called from send/receive paths ────────────

function netmonCaptureCbxInbound(side, msg) {
  if (!netmon.active) return;
  if (!NETMON_INTERESTING_CBX.has(msg.cbxType)) return;
  netmonAddPacket({
    dir:     'in',
    kind:    'cbx',
    type:    msg.cbxType,
    side,
    payload: JSON.parse(JSON.stringify(msg)),
    summary: netmonSummarizeCbx(msg),
  });
}

// Log an outbound CBX message to the network monitor
function netmonCaptureCbxOutbound(side, messageType, payload) {
  if (!netmon.active) return;
  if (!NETMON_INTERESTING_CBX.has(messageType)) return;
  netmonAddPacket({
    dir:     'out',
    kind:    'cbx',
    type:    messageType,
    side,
    payload: JSON.parse(JSON.stringify({ cbxType: messageType, ...payload })),
    summary: netmonSummarizeCbx({ cbxType: messageType, ...payload }),
  });
}

// Log a chain-sum word transfer to the network monitor
function netmonCaptureChainSumWord(dir, side, value) {
  if (!netmon.active) return;
  netmonAddPacket({
    dir,
    kind:    'chain_word',
    type:    'chain_sum_word',
    side,
    payload: { value, hex: '0x' + value.toString(16).toUpperCase().padStart(4, '0') },
    summary: 'sum=' + value + ' (0x' + value.toString(16).toUpperCase().padStart(4, '0') + ')',
  });
}

// Log an inbound chat message to the network monitor
function netmonCaptureChatInbound(side, msg) {
  if (!netmon.active) return;
  netmonAddPacket({
    dir:     'in',
    kind:    'net',
    type:    'net_chat',
    side,
    payload: JSON.parse(JSON.stringify(msg)),
    summary: (msg.srcHandle || msg.src || '?') + ': ' + (msg.text || '').slice(0, 40),
  });
}

// Log an outbound chat message to the network monitor
function netmonCaptureChatOutbound(destId, text, networkId) {
  if (!netmon.active) return;
  netmonAddPacket({
    dir:     'out',
    kind:    'net',
    type:    'net_chat',
    side:    'net',
    payload: { type: 'net_chat', dest: destId, src: _p2pMachineId,
               srcHandle: p2pGetLocalIdentity(), text, networkId },
    summary: '→ ' + destId.slice(0, 8) + ': ' + text.slice(0, 40),
  });
}

// ── Buffer management ────────────────────────────────────────

function netmonAddPacket(packet) {
  packet.ts = Date.now();
  packet.id = netmon.packets.length;
  netmon.packets.unshift(packet);
  if (netmon.packets.length > NETMON_BUFFER_MAX) {
    netmon.packets.pop();
    // Adjust selectedIdx if it shifted
    if (netmon.selectedIdx !== null) netmon.selectedIdx = Math.min(netmon.selectedIdx, netmon.packets.length - 1);
  }
  netmonRefreshStream();
}

// ── Stream display ───────────────────────────────────────────

function netmonRefreshStream() {
  const el      = document.getElementById('netmon-stream');
  const countEl = document.getElementById('netmon-count');
  if (!el) return;
  if (countEl) countEl.textContent = netmon.packets.length > 0 ? '(' + netmon.packets.length + ')' : '';

  if (netmon.packets.length === 0) {
    el.innerHTML = '<div style="font-size:8px;color:var(--fg-faint);letter-spacing:1px;">No packets captured.</div>';
    return;
  }

  el.innerHTML = '';
  netmon.packets.forEach((pkt, idx) => {
    const row = document.createElement('div');
    row.className = 'netmon-entry' + (idx === netmon.selectedIdx ? ' selected' : '');
    row.onclick   = () => netmonSelectPacket(idx);

    const dirSpan = document.createElement('span');
    dirSpan.className   = pkt.dir === 'in' ? 'netmon-dir-in' : 'netmon-dir-out';
    dirSpan.textContent = pkt.dir === 'in' ? '←' : '→';

    const typeSpan = document.createElement('span');
    typeSpan.className   = 'netmon-type';
    typeSpan.textContent = netmonShortType(pkt.type);

    const summarySpan = document.createElement('span');
    summarySpan.className   = 'netmon-summary';
    summarySpan.textContent = pkt.summary;

    const timeSpan = document.createElement('span');
    timeSpan.className   = 'netmon-time';
    const d = new Date(pkt.ts);
    timeSpan.textContent = String(d.getHours()).padStart(2,'0') + ':' +
                           String(d.getMinutes()).padStart(2,'0') + ':' +
                           String(d.getSeconds()).padStart(2,'0');

    row.appendChild(dirSpan);
    row.appendChild(typeSpan);
    row.appendChild(summarySpan);
    row.appendChild(timeSpan);
    el.appendChild(row);
  });
}

// Return a short display label for a network message type
function netmonShortType(type) {
  const map = {
    'cbx_chain_invite':     'INVITE',
    'cbx_chain_invite_ack': 'INV_ACK',
    'cbx_chain_assign':     'ASSIGN',
    'cbx_chain_assign_ack': 'ASGN_ACK',
    'cbx_chain_go':         'GO',
    'cbx_chain_sum_submit': 'SUBMIT',
    'cbx_chain_sum_ok':     'SUM_OK',
    'cbx_chain_sum_fail':   'SUM_FAIL',
    'cbx_chain_abort':      'ABORT',
    'cbx_chain_complete':   'COMPLETE',
    'chain_sum_word':       'SUM_WORD',
    'net_chat':             'CHAT',
  };
  return map[type] || type.replace(/^(cbx_|net_)/, '').toUpperCase().slice(0, 10);
}

// ── Detail view ──────────────────────────────────────────────

function netmonSelectPacket(idx) {
  netmon.selectedIdx = idx;
  netmonRefreshStream();

  const pkt        = netmon.packets[idx];
  const detailEl   = document.getElementById('netmon-detail');
  const typeEl     = document.getElementById('netmon-detail-type');
  const fieldsEl   = document.getElementById('netmon-detail-fields');
  if (!detailEl || !pkt) return;

  const dirLabel = pkt.dir === 'in' ? '← IN' : '→ OUT';
  if (typeEl) typeEl.textContent = dirLabel + ' · ' + netmonShortType(pkt.type) + ' · ' + pkt.side.toUpperCase();

  if (fieldsEl) {
    fieldsEl.innerHTML = '';
    const fields = netmonGetDisplayFields(pkt);
    for (const [key, val] of fields) {
      const row = document.createElement('div');
      row.className = 'netmon-field-row';
      const k = document.createElement('span');
      k.className   = 'netmon-field-key';
      k.textContent = key;
      const v = document.createElement('span');
      v.className   = 'netmon-field-value';
      v.textContent = String(val);
      row.appendChild(k);
      row.appendChild(v);
      fieldsEl.appendChild(row);
    }
  }

  detailEl.style.display = '';
}

// Close the packet detail panel in the network monitor
function netmonCloseDetail() {
  netmon.selectedIdx = null;
  const el = document.getElementById('netmon-detail');
  if (el) el.style.display = 'none';
  netmonRefreshStream();
}

// Build the display field list for a captured packet
function netmonGetDisplayFields(pkt) {
  const p   = pkt.payload;
  const fields = [];
  if (pkt.type === 'chain_sum_word') {
    fields.push(['value', p.value], ['hex', p.hex], ['side', pkt.side.toUpperCase()]);
  } else if (pkt.type === 'cbx_chain_sum_submit') {
    fields.push(['position', p.position], ['localSum', p.localSum], ['challengeId', p.challengeId]);
  } else if (pkt.type === 'cbx_chain_assign') {
    fields.push(['position', p.myPosition], ['value', p.myAssignedValue],
                ['isStarter', p.isStarter], ['inSide', p.incomingSumSide || '—'],
                ['outSide', p.outgoingSumSide || '—']);
  } else if (pkt.type === 'cbx_chain_invite') {
    fields.push(['challengeId', p.challengeId], ['totalMachines', p.totalMachines],
                ['challengeType', p.challengeType || '—']);
  } else if (pkt.type === 'cbx_chain_invite_ack') {
    fields.push(['accepted', p.accepted], ['reason', p.reason || '—'], ['challengeId', p.challengeId]);
  } else if (pkt.type === 'cbx_chain_sum_ok') {
    fields.push(['position', p.position], ['verifiedSum', p.verifiedSum], ['challengeId', p.challengeId]);
  } else if (pkt.type === 'cbx_chain_sum_fail') {
    fields.push(['failingPosition', p.failingPosition], ['submitted', p.submittedSum],
                ['expected', p.expectedSum]);
  } else if (pkt.type === 'net_chat') {
    fields.push(['from', p.srcHandle || p.src || '—'], ['to', p.dest || '—'],
                ['text', p.text || '—'], ['network', p.networkId || '—']);
  } else if (pkt.type === 'cbx_chain_go') {
    fields.push(['challengeId', p.challengeId]);
  } else if (pkt.type === 'cbx_chain_abort') {
    fields.push(['challengeId', p.challengeId]);
  } else if (pkt.type === 'cbx_chain_complete') {
    fields.push(['finalSum', p.finalSum], ['challengeId', p.challengeId]);
  } else {
    // Generic fallback: show all payload fields
    for (const [k, v] of Object.entries(p)) {
      if (k === 'cbxType' || k === 'netType' || k === 'ttl') continue;
      fields.push([k, typeof v === 'object' ? JSON.stringify(v) : v]);
    }
  }
  return fields;
}

// ── Capture to staging ───────────────────────────────────────

function netmonCapture() {
  if (netmon.selectedIdx === null) return;
  const pkt = netmon.packets[netmon.selectedIdx];
  if (!pkt) return;

  // Deep copy into staging — operator will edit this
  netmon.staged = {
    type:    pkt.type,
    kind:    pkt.kind,
    side:    pkt.side,
    dir:     pkt.dir,
    payload: JSON.parse(JSON.stringify(pkt.payload)),
  };

  const stagingEl = document.getElementById('netmon-staging');
  const fieldsEl  = document.getElementById('netmon-staging-fields');
  const statusEl  = document.getElementById('netmon-inject-status');
  if (!stagingEl || !fieldsEl) return;

  if (statusEl) statusEl.textContent = '';
  fieldsEl.innerHTML = '';

  const fields = netmonGetEditableFields(netmon.staged);
  for (const [key, val, editable] of fields) {
    const row = document.createElement('div');
    row.className = 'netmon-field-row';
    const k = document.createElement('span');
    k.className   = 'netmon-field-key';
    k.textContent = key;
    const v = editable
      ? (() => {
          const input = document.createElement('input');
          input.type        = 'text';
          input.className   = 'netmon-field-input';
          input.value       = String(val);
          input.dataset.key = key;
          input.oninput     = () => netmonStagingFieldChanged(key, input.value);
          return input;
        })()
      : (() => {
          const span = document.createElement('span');
          span.className   = 'netmon-field-value';
          span.textContent = String(val);
          span.style.color = 'var(--fg-faint)';
          return span;
        })();
    row.appendChild(k);
    row.appendChild(v);
    fieldsEl.appendChild(row);
  }

  stagingEl.style.display = '';
}

// Build the editable field list for a staged (replay) packet
function netmonGetEditableFields(staged) {
  const p = staged.payload;
  // Returns [key, value, isEditable]
  if (staged.type === 'chain_sum_word') {
    return [['value', p.value, true], ['hex', p.hex, false], ['side', staged.side.toUpperCase(), false]];
  }
  if (staged.type === 'cbx_chain_sum_submit') {
    return [['position', p.position, false], ['localSum', p.localSum, true], ['challengeId', p.challengeId, false]];
  }
  if (staged.type === 'cbx_chain_assign') {
    return [['position', p.myPosition, false], ['value', p.myAssignedValue, true],
            ['isStarter', p.isStarter, false]];
  }
  if (staged.type === 'net_chat') {
    return [['from', p.srcHandle || '—', false], ['to', p.dest || '—', false], ['text', p.text, true]];
  }
  if (staged.type === 'cbx_chain_sum_fail') {
    return [['failingPosition', p.failingPosition, false],
            ['submitted', p.submittedSum, true], ['expected', p.expectedSum, false]];
  }
  // Generic: all fields non-editable except numeric values
  return Object.entries(p)
    .filter(([k]) => k !== 'cbxType' && k !== 'netType' && k !== 'ttl')
    .map(([k, v]) => [k, v, typeof v === 'number']);
}

// Handle a field value change in the staged packet editor
function netmonStagingFieldChanged(key, rawValue) {
  if (!netmon.staged) return;
  const p = netmon.staged.payload;
  const num = Number(rawValue);
  if (key === 'value') {
    p.value = isNaN(num) ? 0 : (num & 0xFFFF);
    p.hex   = '0x' + p.value.toString(16).toUpperCase().padStart(4, '0');
  } else if (key === 'localSum' || key === 'myAssignedValue') {
    p[key] = isNaN(num) ? 0 : (num & 0xFFFF);
  } else if (key === 'text') {
    p.text = rawValue;
  }
}

// Discard the currently staged packet for replay
function netmonDiscardStaged() {
  netmon.staged = null;
  const el = document.getElementById('netmon-staging');
  if (el) el.style.display = 'none';
}

// ── Inject ───────────────────────────────────────────────────

function netmonInject() {
  const staged  = netmon.staged;
  const statusEl = document.getElementById('netmon-inject-status');
  if (!staged) return;

  const side = staged.side;
  const p    = staged.payload;

  try {
    if (staged.type === 'chain_sum_word') {
      // Inject a chain sum word into the local CBX chain word detection
      // as if it arrived from the specified side
      const consumed = cbxCheckIncomingChainWord(side, p.value);
      if (statusEl) statusEl.textContent = consumed
        ? '✓ Injected sum word: ' + p.value
        : '✗ Not consumed — no active chain challenge';
    } else if (staged.type === 'cbx_chain_sum_submit') {
      // Re-inject a submit as if arriving from side
      cbxHandleChainSumSubmit(side, p);
      if (statusEl) statusEl.textContent = '✓ Injected CHAIN_SUM_SUBMIT';
    } else if (staged.type === 'cbx_chain_invite') {
      cbxHandleChainInvite(side, p);
      if (statusEl) statusEl.textContent = '✓ Injected CHAIN_INVITE';
    } else if (staged.type === 'cbx_chain_assign') {
      cbxHandleChainAssign(side, p);
      if (statusEl) statusEl.textContent = '✓ Injected CHAIN_ASSIGN';
    } else if (staged.type === 'cbx_chain_go') {
      cbxHandleChainGo(side, p);
      if (statusEl) statusEl.textContent = '✓ Injected CHAIN_GO';
    } else if (staged.type === 'cbx_chain_abort') {
      cbxHandleChainAbort(side, p);
      if (statusEl) statusEl.textContent = '✓ Injected CHAIN_ABORT';
    } else if (staged.type === 'net_chat') {
      // Inject as if a chat message arrived from the network
      chatReceiveMessage(p.src || 'injected', p.srcHandle || 'INJECTED', p.text || '');
      if (statusEl) statusEl.textContent = '✓ Injected chat: "' + (p.text || '').slice(0, 30) + '"';
    } else {
      if (statusEl) statusEl.textContent = '✗ Injection not supported for: ' + staged.type;
    }
    log('NETMON INJECT: ' + staged.type + ' via ' + side, 'info');
  } catch (e) {
    if (statusEl) statusEl.textContent = '✗ Inject error: ' + e.message;
    log('NETMON INJECT ERROR: ' + e.message, 'err');
  }
}

// ── Summary helpers ──────────────────────────────────────────

function netmonSummarizeCbx(msg) {
  const t = msg.cbxType;
  if (t === 'cbx_chain_invite')      return 'id=' + msg.challengeId + ' machines=' + (msg.totalMachines || '?');
  if (t === 'cbx_chain_invite_ack')  return (msg.accepted ? 'ACCEPTED' : 'SKIP') + ' id=' + msg.challengeId;
  if (t === 'cbx_chain_assign')      return 'pos=' + msg.myPosition + ' val=' + msg.myAssignedValue + (msg.isStarter ? ' STARTER' : '');
  if (t === 'cbx_chain_assign_ack')  return 'pos=' + msg.myPosition;
  if (t === 'cbx_chain_go')          return 'id=' + msg.challengeId;
  if (t === 'cbx_chain_sum_submit')  return 'pos=' + msg.position + ' sum=' + msg.localSum;
  if (t === 'cbx_chain_sum_ok')      return 'pos=' + msg.position + ' sum=' + msg.verifiedSum;
  if (t === 'cbx_chain_sum_fail')    return 'pos=' + msg.failingPosition + ' got=' + msg.submittedSum;
  if (t === 'cbx_chain_abort')       return 'id=' + msg.challengeId;
  if (t === 'cbx_chain_complete')    return 'finalSum=' + msg.finalSum;
  return msg.challengeId || '';
}

// ══════════════════════════════════════════════════════════════
// CBX CHAIN CHALLENGE — CHAIN SUM
//
// The origin generates one value per machine, assigns each to a
// position, designates a starter (the terminus on one side), and
// sends ASSIGN packets to all machines. Each machine waits for a
// running sum to arrive from a neighbor, adds its assigned value,
// submits the local sum to its Challenge Box for verification, and
// passes the result onward. The origin verifies each submission.
// Any wrong sum triggers an immediate full-network abort with the
// failing position identified.
// ══════════════════════════════════════════════════════════════

// ── Helpers ─────────────────────────────────────────────────────

function cbxOppositeSide(side) {
  return side === 'l' ? 'r' : 'l';
}

// Send a CBX message to all machines in the current chain
function cbxSendToAllParticipants(messageType, payload) {
  cbxSendMessage('l', messageType, payload);
  cbxSendMessage('r', messageType, payload);
}

// Write a chain challenge event to the log
function cbxLogChain(machinePart, humanPart) {
  if (logger && logger.active) logOp('CBX.' + machinePart, humanPart);
  log(humanPart, 'info');
}

// ── Origin: start a chain sum challenge ─────────────────────────
// Called from challStart() when type is 'chain_sum'.

function startChainSumChallenge() {
  const topology = CBX.topology;
  if (topology.totalNodes < 2) {
    challSetStatus('Chain Sum requires at least one connected neighbor. Run PING NETWORK first.', 'err');
    return;
  }

  const challengeId   = Math.floor(Math.random() * 65535);
  const totalMachines = topology.totalNodes;

  // Store pending challenge params — finalised after all invites are accepted
  CBX.originChallenge = {
    active:            false,   // becomes true after all invites accepted
    challengeId,
    totalMachines,
    assignedValues:    {},
    verifiedPositions: new Set(),
    verifiedSums:      {},
    knownRunningSums:  new Set([0]),
    startSide:         null,
    starterPosition:   0,
    inviteAcksPending: totalMachines - 1,
    assignAcksPending: 0,
    correctFinalSum:   0,
    startTick:         0,
    startTime:         0,
  };

  // Send CHAIN_INVITE to both sides — each machine shows accept/decline to its operator
  const leftConnected  = p2pSide('l').dataChannel?.readyState === 'open';
  const rightConnected = p2pSide('r').dataChannel?.readyState === 'open';
  const invite = { challengeId, challengeType: 'chain_sum', totalMachines };
  if (leftConnected)  cbxSendMessage('l', CBX_MSG.CHAIN_INVITE, invite);
  if (rightConnected) cbxSendMessage('r', CBX_MSG.CHAIN_INVITE, invite);

  challSetStatus(`Chain Sum — waiting for ${totalMachines - 1} neighbor(s) to accept…`, 'wait');
  cbxLogChain(`CHAIN_SUM.INVITE challengeId=${challengeId} machines=${totalMachines}`,
    `Chain Sum invite sent to ${totalMachines - 1} neighbor(s)`);
}

// Called after all machines have accepted — now generate values and send ASSIGN
function cbxBeginChainSumAfterAllAccepted() {
  const origin   = CBX.originChallenge;
  const topology = CBX.topology;
  const totalMachines = origin.totalMachines;

  const positions = [];
  for (let i = -topology.nodesToLeft; i <= topology.nodesToRight; i++) {
    positions.push(i);
  }

  const maxPerMachine = Math.floor(60000 / totalMachines);
  const assignedValues = {};
  for (const pos of positions) {
    assignedValues[pos] = Math.max(1, Math.floor(Math.random() * maxPerMachine));
  }
  const correctFinalSum = Object.values(assignedValues).reduce((a, b) => a + b, 0);

  const startSide       = topology.nodesToRight > 0 ? 'r' : 'l';
  const starterPosition = startSide === 'r' ? topology.nodesToRight : -topology.nodesToLeft;

  origin.active          = true;
  origin.assignedValues  = assignedValues;
  origin.correctFinalSum = correctFinalSum;
  origin.startSide       = startSide;
  origin.starterPosition = starterPosition;
  origin.assignAcksPending = totalMachines - 1;
  origin.knownRunningSums  = new Set([0]);
  origin.startTick  = clock.tickCount;
  origin.startTime  = performance.now();

  const rightPositions = positions.filter(p => p > 0).sort((a, b) => a - b);
  const leftPositions  = positions.filter(p => p < 0).sort((a, b) => b - a);

  if (rightPositions.length > 0) {
    cbxSendChainAssignRelay('r', rightPositions, assignedValues, origin.challengeId,
      starterPosition, startSide, correctFinalSum, totalMachines);
  }
  if (leftPositions.length > 0) {
    cbxSendChainAssignRelay('l', leftPositions, assignedValues, origin.challengeId,
      starterPosition, startSide, correctFinalSum, totalMachines);
  }

  const parTicks = totalMachines * 120;
  const parOps   = totalMachines * 4;
  initializeChallengeState('chain_sum', Object.values(assignedValues),
    correctFinalSum, parTicks, parOps);

  const posLabel = starterPosition > 0 ? `+${starterPosition}` : `${starterPosition}`;
  challSetStatus(`Chain Sum — all accepted · ${totalMachines} machines · starter: position ${posLabel}`, 'wait');
  cbxRenderChainProgressCells(positions, starterPosition);
  document.getElementById('chall-chain-progress').style.display = '';
  document.getElementById('chall-chain-direction').textContent =
    `Starter: position ${posLabel} · flows ${startSide === 'r' ? 'rightward first' : 'leftward first'}`;

  cbxLogChain(
    `CHAIN_SUM.ASSIGN challengeId=${origin.challengeId} machines=${totalMachines} starter=${starterPosition} sum=${correctFinalSum}`,
    `Chain Sum: assignments sent, correct sum = ${correctFinalSum}`
  );
}

// ── Origin: handle a sum submission from a participating machine ─
// The verification is order-independent: a submitted sum is valid if it equals
// any currently known running sum in the chain plus the submitting machine's value.
// This lets operators pass the potato in any direction they choose.
function cbxHandleChainSumSubmit(fromSide, message) {
  const origin = CBX.originChallenge;
  if (!origin.active || message.challengeId !== origin.challengeId) return;

  const position      = message.position;
  const submittedSum  = message.localSum;
  const assignedValue = origin.assignedValues[position];

  // A machine can only submit once
  if (origin.verifiedPositions.has(position)) return;

  // Valid if: submittedSum = someKnownRunningSum + thisMachine'sValue
  const expectedSum = submittedSum - assignedValue;
  if (!origin.knownRunningSums.has(expectedSum)) {
    const posLabel = position > 0 ? `+${position}` : `${position}`;
    cbxLogChain(
      `CHAIN_SUM.FAIL position=${position} submitted=${submittedSum} assignedValue=${assignedValue}`,
      `Chain Sum FAILURE: position ${posLabel} submitted ${submittedSum} (assigned value ${assignedValue}, implied prior sum ${expectedSum} not in verified set)`
    );
    cbxSendToAllParticipants(CBX_MSG.CHAIN_SUM_FAIL, {
      challengeId:     origin.challengeId,
      failingPosition: position,
      submittedSum,
      expectedSum:     origin.knownRunningSums.size > 0
        ? [...origin.knownRunningSums].map(s => s + assignedValue).join(' or ')
        : assignedValue,
    });
    cbxChainFailureAtOrigin(position, submittedSum, assignedValue);
    return;
  }

  // Correct — add this sum to the known set and mark position verified
  origin.verifiedPositions.add(position);
  origin.verifiedSums[position] = submittedSum;
  origin.knownRunningSums.add(submittedSum);

  // Relay SUM_OK back toward origin path (send both sides; only the connected one matters)
  cbxSendMessage(fromSide, CBX_MSG.CHAIN_SUM_OK, {
    challengeId: origin.challengeId,
    position,
    verifiedSum: submittedSum,
  });

  cbxUpdateChainProgressCell(position, 'verified');
  cbxLogChain(
    `CHAIN_SUM.OK position=${position} sum=${submittedSum}`,
    `Chain Sum: position ${position > 0 ? '+' : ''}${position} verified, sum = ${submittedSum}`
  );

  // All participating machines verified — origin adds its own value and finishes
  if (origin.verifiedPositions.size >= origin.totalMachines - 1) {
    const finalSum = submittedSum + origin.assignedValues[0];
    cbxSendToAllParticipants(CBX_MSG.CHAIN_COMPLETE, {
      challengeId: origin.challengeId,
      finalSum,
    });
    cbxChainCompleteAtOrigin(finalSum);
  }
}

// Send ASSIGN packets down one side of the chain as a relay list.
// The first machine in the list consumes its entry, forwards the rest.
function cbxSendChainAssignRelay(side, orderedPositions, assignedValues,
    challengeId, starterPosition, startSide, correctFinalSum, totalMachines) {
  if (orderedPositions.length === 0) return;

  const firstPosition = orderedPositions[0];
  const remainingPositions = orderedPositions.slice(1);

  // Determine directions for the first machine in this relay
  const isStarter         = firstPosition === starterPosition;
  const incomingSumSide   = isStarter ? null : cbxOppositeSide(side); // sum arrives from the direction we came from
  const outgoingSumSide   = side; // pass sum onward in the direction away from origin

  cbxSendMessage(side, CBX_MSG.CHAIN_ASSIGN, {
    challengeId,
    myPosition:           firstPosition,
    myAssignedValue:      assignedValues[firstPosition],
    isStarter,
    incomingSumSide,
    outgoingSumSide,
    correctFinalSum,
    totalMachines,
    // Relay payload: the rest of the chain receives their assignments via this machine
    relayPositions:       remainingPositions,
    relayValues:          remainingPositions.map(p => assignedValues[p]),
    relayStartSide:       side,
    starterPosition,
    startSide,
  });
}

// ── Origin: handle ASSIGN_ACK from a participating machine ───────
function cbxHandleChainAssignAck(fromSide, message) {
  const origin = CBX.originChallenge;
  if (!origin.active || message.challengeId !== origin.challengeId) return;

  origin.assignAcksPending--;
  cbxLogChain(`CHAIN_SUM.ASSIGN_ACK from=position${message.myPosition}`,
    `Chain Sum: position ${message.myPosition} acknowledged assignment`);

  if (origin.assignAcksPending <= 0) {
    // All machines ready — send GO
    cbxSendToAllParticipants(CBX_MSG.CHAIN_GO, { challengeId: origin.challengeId });
    challSetStatus('Chain Sum — GO! Waiting for submissions…', 'wait');
    notifFireChallStart();
    cbxLogChain(`CHAIN_SUM.GO challengeId=${origin.challengeId}`,
      'Chain Sum: GO sent to all machines');
  }
}

// ── Origin: chain succeeded ──────────────────────────────────────
function cbxChainCompleteAtOrigin(finalSum) {
  cbxLogChain(`CHAIN_SUM.COMPLETE finalSum=${finalSum}`,
    `Chain Sum complete! Final sum = ${finalSum}`);
  // Deliver final sum to the challenge module as if it came via Bus E
  handleChallengeAnswerWord(finalSum);
  CBX.originChallenge.active = false;
  document.getElementById('chall-chain-progress').style.display = 'none';
}

// ── Origin: chain failed ─────────────────────────────────────────
function cbxChainFailureAtOrigin(failingPosition, submitted, expected) {
  CBX.originChallenge.active = false;
  const posLabel = failingPosition > 0 ? `+${failingPosition}` : `${failingPosition}`;
  challSetStatus(
    `⚠ CHAIN FAILURE — WRONG SUM AT POSITION ${posLabel} · submitted ${submitted} · expected ${expected}`,
    'err'
  );
  cbxUpdateChainProgressCell(failingPosition, 'failed');
  log(`CHAIN SUM FAILED at position ${posLabel}: submitted ${submitted}, expected ${expected}`, 'err');
  document.getElementById('chall-chain-progress').style.display = 'none';
  challAbort();
}

// ── Participating machine: receive CHAIN_INVITE ──────────────────
// If not busy, auto-accept immediately. If busy with a local challenge,
// skip this machine by sending a skip notice and forwarding the invite
// to the next machine in the chain.
function cbxHandleChainInvite(fromSide, message) {
  if (CHALL.active || CBX.participation.active) {
    // This machine is busy — skip it and forward the invite onward
    const forwardSide = fromSide === 'l' ? 'r' : 'l';
    cbxSendMessage(fromSide, CBX_MSG.CHAIN_INVITE_ACK, {
      challengeId: message.challengeId, accepted: false, reason: 'busy',
    });
    if (p2pSide(forwardSide).dataChannel?.readyState === 'open') {
      cbxSendMessage(forwardSide, CBX_MSG.CHAIN_INVITE, message);
    }
    log(`Chain Sum invite skipped (busy) — forwarded to ${forwardSide.toUpperCase()}`, 'info');
    return;
  }

  // Auto-accept
  CBX.participation.phase       = 'invited';
  CBX.participation.challengeId = message.challengeId;
  CBX.participation.active      = true;
  CBX._pendingInviteFromSide    = fromSide;
  CBX._pendingInviteMessage     = message;

  cbxSendMessage(fromSide, CBX_MSG.CHAIN_INVITE_ACK, {
    challengeId: message.challengeId, accepted: true,
  });

  // Show the chain active panel inside the Challenges section
  const activePanel = document.getElementById('cbx-chain-active-panel');
  if (activePanel) activePanel.style.display = '';
  const challSection = document.getElementById('chall-section');
  if (challSection && challSection.classList.contains('sb-collapsed')) {
    challSection.classList.remove('sb-collapsed');
  }

  log(`Chain Sum invitation auto-accepted — waiting for assignment`, 'ok');
  notifFireChallInvite();
}

// ── Origin: handle invite acknowledgement ───────────────────────
// A busy machine sends accepted:false with reason:'busy' and forwards the invite
// onward — it does not count as a confirmed participant. An accepted:true
// decrements the pending count and proceeds once all expected machines have responded.
function cbxHandleChainInviteAck(fromSide, message) {
  const origin = CBX.originChallenge;
  if (!origin || message.challengeId !== origin.challengeId) return;

  if (!message.accepted) {
    // Machine was busy and skipped itself — it forwarded the invite onward,
    // so a replacement machine may yet respond. Adjust the expected count down
    // only if this was counted in the original invite total.
    if (origin.inviteAcksPending > 0) {
      origin.inviteAcksPending--;
    }
    cbxLogChain(`CHAIN_SUM.INVITE_SKIP from=${fromSide} reason=${message.reason || 'busy'} pending=${origin.inviteAcksPending}`,
      `Chain Sum: ${fromSide.toUpperCase()} neighbor skipped (${message.reason || 'busy'}), ${origin.inviteAcksPending} still pending`);
    // If no more pending (all remaining were busy), the chain has whoever accepted
    if (origin.inviteAcksPending <= 0) {
      if (origin.totalMachines <= 1) {
        challSetStatus('Chain Sum: no available neighbors — challenge needs at least 2 machines', 'err');
        challAbort();
        return;
      }
      cbxBeginChainSumAfterAllAccepted();
    }
    return;
  }

  origin.inviteAcksPending--;
  cbxLogChain(`CHAIN_SUM.INVITE_ACK from=${fromSide} pending=${origin.inviteAcksPending}`,
    `Chain Sum: ${fromSide.toUpperCase()} neighbor accepted, ${origin.inviteAcksPending} still pending`);

  if (origin.inviteAcksPending <= 0) {
    cbxBeginChainSumAfterAllAccepted();
  }
}

// ── Sum forwarding: marker + value via P2P raw word channel ─────
// When a machine's Challenge Box needs to pass the running sum to a neighbor,
// it sends two raw P2P words: CBX_CHAIN_SUM_MARKER (0xCB00) followed by the sum.
// The neighbor's Challenge Box intercepts the marker in p2pQueueInboundWord,
// sets a flag, and treats the immediately following word as the incoming sum.
function cbxSendChainSumToNeighbor(side, sumValue) {
  const dc = p2pSide(side).dataChannel;
  if (!dc || dc.readyState !== 'open') {
    // Chain sum words travel over the live P2P connection. A downed connection
    // during an active challenge is a hard failure — the challenge must be restarted.
    log('CBX chain sum → ' + side.toUpperCase() + ' dropped (connection not open) — challenge aborted', 'err');
    return;
  }
  // Send marker then sum as raw JSON words, same as ordinary p2pSendWord
  dc.send(JSON.stringify({ type: 'word', value: CBX_CHAIN_SUM_MARKER }));
  dc.send(JSON.stringify({ type: 'word', value: sumValue }));
  // Network Monitor capture — outbound chain sum word
  netmonCaptureChainSumWord('out', side, sumValue);
  cbxLogChain(`CHAIN_SUM.FORWARD side=${side} sum=${sumValue}`,
    `Chain Sum: forwarded running sum ${sumValue} to ${side.toUpperCase()} neighbor`);
}

// ── Sum detection: called from p2pQueueInboundWord ───────────────
// Returns true if the word was consumed by the CBX chain sum mechanism.
function cbxCheckIncomingChainWord(fromSide, value) {
  const p = CBX.participation;
  if (!p.active) return false;

  // If we just saw the marker on this side, the next word is the sum
  if (CBX._incomingMarkerSide === fromSide) {
    CBX._incomingMarkerSide = null;
    if (p.phase === 'waiting_for_sum') {
      p.incomingSum = value;
      // Network Monitor capture — inbound chain sum word
      netmonCaptureChainSumWord('in', fromSide, value);
      cbxStageParticipatingValue();
    }
    return true; // consumed regardless — never deliver marker-following words to loops
  }

  // Is this the marker itself?
  if (value === CBX_CHAIN_SUM_MARKER) {
    CBX._incomingMarkerSide = fromSide;
    return true; // consume the marker — never let 0xCB00 reach the loops
  }

  return false;
}
// Handle a chain assignment message (position + values for this machine)
function cbxHandleChainAssign(fromSide, message) {
  // If there are relay entries, forward the remainder down the chain first
  if (message.relayPositions && message.relayPositions.length > 0) {
    const nextSide = message.relayStartSide;
    if (p2pSide(nextSide).dataChannel?.readyState === 'open') {
      cbxSendMessage(nextSide, CBX_MSG.CHAIN_ASSIGN, {
        challengeId:      message.challengeId,
        myPosition:       message.relayPositions[0],
        myAssignedValue:  message.relayValues[0],
        isStarter:        message.relayPositions[0] === message.starterPosition,
        incomingSumSide:  cbxOppositeSide(nextSide),
        outgoingSumSide:  nextSide,
        correctFinalSum:  message.correctFinalSum,
        totalMachines:    message.totalMachines,
        relayPositions:   message.relayPositions.slice(1),
        relayValues:      message.relayValues.slice(1),
        relayStartSide:   nextSide,
        starterPosition:  message.starterPosition,
        startSide:        message.startSide,
      });
    }
  }

  // Store our assignment
  CBX.participation = {
    active:           true,
    challengeId:      message.challengeId,
    myPosition:       message.myPosition,
    myAssignedValue:  message.myAssignedValue,
    myExpectedSum:    null, // computed when incoming sum arrives
    incomingSumSide:  message.incomingSumSide,
    outgoingSumSide:  message.outgoingSumSide,
    isStarter:        message.isStarter,
    phase:            'assigned',
    incomingSum:      null,
    valueStaged:      false,
    lockoutUntil:     0,
    lockoutIntervalId: null,
  };

  // Send ACK back the way the ASSIGN arrived — that direction leads toward origin
  cbxSendMessage(fromSide, CBX_MSG.CHAIN_ASSIGN_ACK, {
    challengeId: message.challengeId,
    myPosition:  message.myPosition,
  });

  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.ASSIGNED position=${message.myPosition} value=${message.myAssignedValue} starter=${message.isStarter}`,
    `Chain Sum: assigned position ${message.myPosition}, value = ${message.myAssignedValue}, starter = ${message.isStarter}`);

  // Starters get their value staged immediately (no incoming sum to wait for)
  if (message.isStarter) {
    cbxStageParticipatingValue();
  }
}

// ── Participating machine: receive GO ────────────────────────────
function cbxHandleChainGo(fromSide, message) {
  const p = CBX.participation;
  if (!p.active || message.challengeId !== p.challengeId) return;
  p.phase = p.isStarter ? 'staged' : 'waiting_for_sum';
  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.GO position=${p.myPosition}`, `Chain Sum GO received at position ${p.myPosition}`);
}

// ── Participating machine: detect incoming sum on P2P bus ────────
// Called from the P2P word handler when a chain challenge is active.
// A chain sum word is identified by a special prefix word sent just
// before the actual sum value.
// ── Participating machine: stage the assigned value ──────────────
function cbxStageParticipatingValue() {
  const p = CBX.participation;
  p.valueStaged = true;
  p.phase = 'staged';

  const releaseBtn = document.getElementById('cbx-release-btn');
  if (releaseBtn) {
    releaseBtn.disabled = false;
    releaseBtn.className = 'cbx-release-btn ready';
    releaseBtn.textContent = 'RELEASE VALUE';
  }
  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.STAGED position=${p.myPosition} value=${p.myAssignedValue}`,
    `Chain Sum: value ${p.myAssignedValue} staged at position ${p.myPosition}`);
}

// ── Participating machine: RELEASE button with Jeopardy lockout ──
function cbxReleaseChainValue() {
  const p = CBX.participation;
  if (!p.active) return;

  const now = performance.now();

  // Jeopardy lockout: if button pressed before value is staged, lock out for 3 seconds
  if (!p.valueStaged) {
    p.lockoutUntil = now + 3000;
    const releaseBtn = document.getElementById('cbx-release-btn');
    if (releaseBtn) {
      releaseBtn.disabled = true;
      releaseBtn.className = 'cbx-release-btn locked';
    }
    cbxStartLockoutCountdown();
    cbxLogChain(`CHAIN_SUM.EARLY_RELEASE position=${p.myPosition}`,
      `Chain Sum: early release attempt at position ${p.myPosition} — locked out 3s`);
    return;
  }

  // Value is staged — release it into the Working Loop via inject
  p.phase = 'released';
  p.valueStaged = false;

  const releaseBtn = document.getElementById('cbx-release-btn');
  if (releaseBtn) {
    releaseBtn.disabled = true;
    releaseBtn.className = 'cbx-release-btn';
    releaseBtn.textContent = 'RELEASED';
  }

  // Inject the assigned value into the Working Loop
  injectValue(p.myAssignedValue);

  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.RELEASED position=${p.myPosition} value=${p.myAssignedValue} tick=${clock.tickCount}`,
    `Chain Sum: value ${p.myAssignedValue} released into Working Loop at position ${p.myPosition}`);
}


// Broadcast a lockout message to prevent premature answer submission
function cbxBroadcastLockout() {
  const p = CBX.participation;
  const msg = { cbxType: CBX_MSG.CHAIN_LOCKOUT, challengeId: p.challengeId,
                position: p.myPosition, handle: p2pGetLocalIdentity() };
  ['l','r'].forEach(side => {
    const dc = p2pSide(side).dataChannel;
    if(dc && dc.readyState === 'open') cbxSendMessage(side, msg.cbxType, msg);
  });
}
// Handle an incoming lockout message from the chain origin
function cbxHandleChainLockout(side, msg) {
  const handle = msg.handle || '?';
  const pos = msg.position >= 0 ? `+${msg.position}` : `${msg.position}`;
  log(`⚠ ${handle} (pos ${pos}) hit RELEASE too early — 3s lockout`, 'err');
  const otherSide = side === 'l' ? 'r' : 'l';
  const dc = p2pSide(otherSide).dataChannel;
  if(dc && dc.readyState === 'open') cbxSendMessage(otherSide, msg.cbxType, msg);
}

// Start the 3-second lockout countdown before submission is allowed
function cbxStartLockoutCountdown() {
  const p = CBX.participation;
  if (p.lockoutIntervalId) clearInterval(p.lockoutIntervalId);
  p.lockoutIntervalId = setInterval(() => {
    const remaining = Math.max(0, (p.lockoutUntil - performance.now()) / 1000);
    const timerEl = document.getElementById('cbx-chain-lockout-timer');
    const lockoutLine = document.getElementById('cbx-chain-lockout-line');
    if (timerEl) timerEl.textContent = remaining.toFixed(1);
    if (lockoutLine) lockoutLine.style.display = remaining > 0 ? '' : 'none';
    if (remaining <= 0) {
      clearInterval(p.lockoutIntervalId);
      p.lockoutIntervalId = null;
      // Re-enable if value is now staged
      if (p.valueStaged) {
        const btn = document.getElementById('cbx-release-btn');
        if (btn) { btn.disabled = false; btn.className = 'cbx-release-btn ready'; }
      }
    }
  }, 100);
}

// ── Participating machine: submit local sum to origin ────────────
// The operator calls this after doing the addition in their ALU and
// routing the result to Bus E. The Challenge Box intercepts it,
// submits to origin for verification, and routes the result to the
// outgoing P2P side.
function cbxSubmitLocalChainSum(sumValue) {
  const p = CBX.participation;
  if (!p.active || p.phase !== 'released') return;

  p.phase = 'submitted';

  // Submit to origin for verification — route back the way ASSIGN came (toward origin)
  const towardOriginSide = cbxOppositeSide(p.outgoingSumSide);
  cbxSendMessage(towardOriginSide, CBX_MSG.CHAIN_SUM_SUBMIT, {
    challengeId: p.challengeId,
    position:    p.myPosition,
    localSum:    sumValue,
  });

  // Forward the running sum to the next machine using the marker protocol.
  // The Challenge Box handles this invisibly — the operator never routes to Bus F/G.
  if (p.outgoingSumSide && p2pSide(p.outgoingSumSide).dataChannel?.readyState === 'open') {
    cbxSendChainSumToNeighbor(p.outgoingSumSide, sumValue);
  }

  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.SUBMIT position=${p.myPosition} sum=${sumValue}`,
    `Chain Sum: position ${p.myPosition} submitted local sum ${sumValue}`);
}

// ── Participating machine: receive SUM_OK from origin ────────────
function cbxHandleChainSumOk(fromSide, message) {
  const p = CBX.participation;
  if (!p.active || message.challengeId !== p.challengeId) return;
  p.phase = 'done';
  cbxRefreshParticipationDisplay();
  cbxLogChain(`CHAIN_SUM.OK_RECV position=${p.myPosition}`,
    `Chain Sum: sum verified by origin — position ${p.myPosition} done`);
}

// ── Participating machine: receive SUM_FAIL from origin ──────────
function cbxHandleChainSumFail(fromSide, message) {
  const p = CBX.participation;
  if (p.active && message.challengeId === p.challengeId) {
    p.phase = 'idle';
    p.active = false;
  }
  const posLabel = message.failingPosition > 0
    ? `+${message.failingPosition}` : `${message.failingPosition}`;
  cbxRefreshParticipationDisplay();
  log(`CHAIN ABORTED — wrong sum at position ${posLabel}`, 'err');
  // Flash the CBX panel red briefly
  const panel = document.getElementById('cbx-chain-active-panel');
  if (panel) {
    panel.style.borderColor = '#ee4444';
    setTimeout(() => { if (panel) panel.style.borderColor = ''; }, 3000);
  }
}

// ── Participating machine: receive ABORT ─────────────────────────
function cbxHandleChainAbort(fromSide, message) {
  const p = CBX.participation;
  if (p.active && message.challengeId === p.challengeId) {
    p.phase = 'idle';
    p.active = false;
    cbxRefreshParticipationDisplay();
    log('Chain challenge aborted by origin', 'info');
  }
}

// ── Participating machine: receive COMPLETE ──────────────────────
function cbxHandleChainComplete(fromSide, message) {
  const p = CBX.participation;
  if (p.active && message.challengeId === p.challengeId) {
    p.phase = 'done';
    p.active = false;
    cbxRefreshParticipationDisplay();
    log(`Chain Sum complete — final sum ${message.finalSum}`, 'ok');
  }
}

// ── Display: chain progress cells at origin ──────────────────────
function cbxRenderChainProgressCells(positions, starterPosition) {
  const container = document.getElementById('chall-chain-progress-cells');
  if (!container) return;
  container.innerHTML = '';
  // Sort positions left to right
  const sorted = [...positions].sort((a, b) => a - b);
  for (const pos of sorted) {
    const cell = document.createElement('div');
    cell.className = 'chain-cell ' + (pos === 0 ? 'origin' : 'pending');
    cell.id = `chain-cell-pos-${pos < 0 ? 'n' + Math.abs(pos) : pos}`;
    cell.title = `Position ${pos > 0 ? '+' : ''}${pos}${pos === starterPosition ? ' (starter)' : ''}${pos === 0 ? ' (you)' : ''}`;
    cell.textContent = pos === 0 ? '★' : (pos > 0 ? `+${pos}` : pos);
    container.appendChild(cell);
  }
}

// Update a single cell in the chain progress display grid
function cbxUpdateChainProgressCell(position, state) {
  const id = `chain-cell-pos-${position < 0 ? 'n' + Math.abs(position) : position}`;
  const cell = document.getElementById(id);
  if (!cell) return;
  cell.className = `chain-cell ${state}`;
}

// ── Display: participating machine role panel ────────────────────
function cbxRefreshParticipationDisplay() {
  const p = CBX.participation;
  const panel = document.getElementById('cbx-chain-active-panel');
  if (!panel) return;
  panel.style.display = p.active ? '' : 'none';
  if (!p.active) return;

  const phaseEl    = document.getElementById('cbx-chain-phase');
  const roleDesc   = document.getElementById('cbx-chain-role-desc');
  const valueLine  = document.getElementById('cbx-chain-value-line');
  const myValueEl  = document.getElementById('cbx-chain-my-value');
  const sumLine    = document.getElementById('cbx-chain-sum-line');
  const sumEl      = document.getElementById('cbx-chain-incoming-sum');
  const lockLine   = document.getElementById('cbx-chain-lockout-line');

  const posLabel = p.myPosition > 0 ? `+${p.myPosition}` : `${p.myPosition}`;

  const phaseLabels = {
    assigned:         'ASSIGNED',
    waiting_for_sum:  'WAITING FOR SUM',
    staged:           'READY — RELEASE VALUE',
    released:         'ADD YOUR VALUE · SUBMIT VIA BUS E',
    submitted:        'SUBMITTED — AWAITING VERIFY',
    done:             'DONE ✓',
    idle:             'IDLE',
  };

  const phaseColors = {
    assigned:         'var(--fg-dim)',
    waiting_for_sum:  '#ffaa22',
    staged:           '#44cc88',
    released:         'var(--bus-h-color,#8080e0)',
    submitted:        '#ffaa22',
    done:             '#44cc88',
    idle:             'var(--fg-dim)',
  };

  if (phaseEl) {
    phaseEl.textContent  = phaseLabels[p.phase] || p.phase.toUpperCase();
    phaseEl.style.color  = phaseColors[p.phase] || 'var(--fg)';
  }

  const dirIn  = p.incomingSumSide ? p.incomingSumSide.toUpperCase() : '—';
  const dirOut = p.outgoingSumSide ? p.outgoingSumSide.toUpperCase() : '—';
  if (roleDesc) {
    roleDesc.textContent = p.isStarter
      ? `Position ${posLabel} · STARTER · pass sum → ${dirOut}`
      : `Position ${posLabel} · sum arrives ← ${dirIn} · pass sum → ${dirOut}`;
  }

  if (valueLine) valueLine.style.display = p.myAssignedValue ? '' : 'none';
  if (myValueEl) myValueEl.textContent = p.myAssignedValue || '—';

  if (sumLine) sumLine.style.display = p.incomingSum !== null ? '' : 'none';
  if (sumEl)   sumEl.textContent = p.incomingSum !== null ? p.incomingSum : '—';

  if (lockLine) lockLine.style.display = (p.lockoutUntil > performance.now()) ? '' : 'none';
}

// ══════════════════════════════════════════════════════════════
// CHALLENGE MODULE
// ══════════════════════════════════════════════════════════════
const CHALL = {
  active:         false,
  state:          'idle',
  type:           'add',   // 'add' | 'multiply' | 'transform_nth'
  values:         [],      // the values sent to operator
  n:              2,       // how many values sent
  expected:       null,    // correct answer (scalar for add/multiply)
  expectedValues: [],      // correct answer list (for transform_nth)
  answerCount:    1,       // how many answer words to collect before evaluating
  received:       [],      // words received back from operator
  startTick:      0,
  startTime:      0,
  opsAtStart:     0,
  parTicks:       0,
  parOps:         0,
  history:        [],
};

let challScoringMode = 'efficiency'; // 'efficiency' | 'speed'

// Set the scoring mode (efficiency or speed) for the next challenge
function challSetScoringMode(mode) {
  if(CHALL.active) return; // don't allow switching during a live challenge
  challScoringMode = mode;
  document.getElementById('chall-mode-efficiency').classList.toggle('chall-mode-active', mode === 'efficiency');
  document.getElementById('chall-mode-speed').classList.toggle('chall-mode-active', mode === 'speed');
  document.getElementById('chall-mode-desc').textContent = mode === 'efficiency'
    ? 'Scored on ticks and operator actions only.'
    : 'Scored on ticks, operator actions, and elapsed time.';
}

// Return a random integer in [lo, hi] inclusive
function randomIntBetween(lo, hi) { return Math.floor(Math.random()*(hi-lo+1))+lo; }

// Handle challenge type selector change — update params and preview
function challOnTypeChange() {
  const typeEl = document.getElementById('chall-type');
  const type   = typeEl ? typeEl.value : '';
  const def    = customChallengeRegistry.get(type);
  if (!def) return;

  // Update description
  const descEl = document.getElementById('chall-desc');
  if (descEl) descEl.textContent = def.description || '';

  // Render params into unified container
  renderChallengeParams(def);

  // Show/hide network status block for network challenges
  const chainParamsEl = document.getElementById('chall-chain_sum-params');
  if (chainParamsEl) chainParamsEl.style.display = (def.network ? '' : 'none');
  if (def.network) cbxUpdateChainNetworkStatusLine();
}

// Enables Bus E automatically when a challenge starts
function ensureBusEIsActive() {
  if (L21.buses.e.active) return;
  L21.buses.e.active = true;
  const btn       = document.getElementById('btn-buse');
  const inlineBtn = document.getElementById('inline-btn-buse');
  if (btn)       { btn.textContent = '⊗ TURN BUS E OFF'; btn.className = 'btn btn-buse-on'; }
  if (inlineBtn) { inlineBtn.className = 'bus-inline-btn bus-inline-btn-e on'; }
  log('Bus E auto-enabled for challenge', 'info');
}

// Queues all values for inbound delivery with a BPW-bit gap between each
function queueChallengeValuesForDelivery(vals) {
  for (let i = 0; i < vals.length; i++) {
    queueWordForInboundDelivery(vals[i]);
    if (i < vals.length - 1) {
      for (let j = 0; j < BPW; j++) L21.ext.inQueue.push(0);
    }
  }
}

// Sets up common CHALL state fields shared by all challenge types
function initializeChallengeState(type, vals, expected, parTicks, parOps, answerCount = 1, expectedValues = []) {
  CHALL.active         = true;
  CHALL.state          = 'feeding';
  CHALL.type           = type;
  CHALL.values         = vals;
  CHALL.n              = vals.length;
  CHALL.expected       = expected;
  CHALL.expectedValues = expectedValues;
  CHALL.answerCount    = answerCount;
  CHALL.received       = [];
  CHALL.startTick      = clock.tickCount;
  CHALL.startTime      = performance.now();
  CHALL.opsAtStart     = L21.operatorActionCount;
  CHALL.parTicks       = parTicks;
  CHALL.parOps         = parOps;
  CHALL.startHz        = clock.hz;
  CHALL.scoringMode    = challScoringMode;
}

// ══════════════════════════════════════════════════════════════
// OPERATORS CLUB — COMPLETION CODE SYSTEM
//
// Generates a cryptographic completion code when the Bridge Crossing
// challenge is completed successfully. The code encodes the seed,
// tick count, operator actions, wall time, and a hash. It is
// displayed to the operator, copied to clipboard, and stored in
// localStorage as a backup.
//
// The standalone verifier (separate HTML file) decodes the code,
// recomputes the hash, and reports VALID/INVALID with stats.
// ══════════════════════════════════════════════════════════════

// 27-character unambiguous alphabet — excludes 0/O, 1/I/L, 5/S, 8/B
const CLUB_ALPHABET = '234679ACDEFGHJKMNPQRTUVWXYZ';
const CLUB_SALT = 'L21-OPERATORS-CLUB-2026';

// Generate a 48-bit random seed for a completion code
function clubGenerateSeed48() {
  const buf = new Uint8Array(6);
  crypto.getRandomValues(buf);
  var seed = BigInt(0);
  for (var i = 0; i < buf.length; i++) seed = (seed << BigInt(8)) | BigInt(buf[i]);
  return seed;
}

// Compute a 55-bit hash from an input string (used in completion codes)
function clubComputeHash55(input) {
  // FNV-1a 64-bit, truncated to 55 bits
  var h = BigInt('0xcbf29ce484222325');
  var prime = BigInt('0x100000001b3');
  for (var i = 0; i < input.length; i++) {
    h ^= BigInt(input.charCodeAt(i));
    h = (h * prime) & BigInt('0xFFFFFFFFFFFFFFFF');
  }
  return h & BigInt('0x7FFFFFFFFFFFFF');
}

// Generate a cryptographic completion code from challenge results
function clubGenerateCompletionCode(tickCount, opActions, wallSeconds) {
  var seed48 = clubGenerateSeed48();
  var ticks  = BigInt(Math.min(tickCount, 0xFFFF));
  var ops    = BigInt(Math.min(opActions, 0xFFF));
  var wall   = BigInt(Math.min(wallSeconds, 0xFFF));

  var hashInput = seed48.toString() + ':' + ticks.toString() + ':' + ops.toString() + ':' + wall.toString() + ':' + CLUB_SALT;
  var hash55 = clubComputeHash55(hashInput);

  // Pack 143 bits: seed(48) + ticks(16) + ops(12) + wall(12) + hash(55)
  var bits = BigInt(0);
  bits = (bits << BigInt(48)) | seed48;
  bits = (bits << BigInt(16)) | ticks;
  bits = (bits << BigInt(12)) | ops;
  bits = (bits << BigInt(12)) | wall;
  bits = (bits << BigInt(55)) | hash55;

  // Encode as 32 base-27 digits
  var base = BigInt(CLUB_ALPHABET.length);
  var chars = [];
  for (var i = 0; i < 32; i++) {
    chars.unshift(CLUB_ALPHABET[Number(bits % base)]);
    bits = bits / base;
  }

  // Format as 8 groups of 4
  var groups = [];
  for (var i = 0; i < 32; i += 4) {
    groups.push(chars.slice(i, i + 4).join(''));
  }
  return groups.join('-');
}

// Decode and validate a completion code string into its component fields
function clubDecodeCompletionCode(codeStr) {
  var clean = codeStr.replace(/[-\s]/g, '').toUpperCase();
  if (clean.length !== 32) return { valid: false, error: 'Code must be 32 characters (8 groups of 4)' };

  var base = BigInt(CLUB_ALPHABET.length);
  var bits = BigInt(0);
  for (var i = 0; i < clean.length; i++) {
    var idx = CLUB_ALPHABET.indexOf(clean[i]);
    if (idx === -1) return { valid: false, error: 'Invalid character: ' + clean[i] };
    bits = bits * base + BigInt(idx);
  }

  // Unpack (reverse order): hash(55), wall(12), ops(12), ticks(16), seed(48)
  var hash55 = bits & BigInt('0x7FFFFFFFFFFFFF'); bits = bits >> BigInt(55);
  var wall   = Number(bits & BigInt(0xFFF)); bits = bits >> BigInt(12);
  var ops    = Number(bits & BigInt(0xFFF)); bits = bits >> BigInt(12);
  var ticks  = Number(bits & BigInt(0xFFFF)); bits = bits >> BigInt(16);
  var seed48 = bits & BigInt('0xFFFFFFFFFFFF');

  // Recompute hash
  var hashInput = seed48.toString() + ':' + ticks + ':' + ops + ':' + wall + ':' + CLUB_SALT;
  var expectedHash = clubComputeHash55(hashInput);

  return {
    valid: hash55 === expectedHash,
    seed: seed48.toString(),
    ticks: ticks,
    ops: ops,
    wallSeconds: wall,
    error: hash55 === expectedHash ? null : 'Hash mismatch — code is invalid or tampered',
  };
}

// Display the completion code panel with the generated code
function clubShowCompletionCode(tickCount, opActions, wallSeconds) {
  const code = clubGenerateCompletionCode(tickCount, opActions, wallSeconds);

  // Display
  const panel  = document.getElementById('club-completion-panel');
  const codeEl = document.getElementById('club-completion-code');
  const copyEl = document.getElementById('club-copy-status');
  if (panel)  panel.style.display = '';
  if (codeEl) codeEl.textContent  = code;

  // Copy to clipboard
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(code).then(() => {
      if (copyEl) copyEl.textContent = '✓ Copied to clipboard';
    }).catch(() => {
      if (copyEl) copyEl.textContent = 'Copy failed — write it down manually';
    });
  } else {
    if (copyEl) copyEl.textContent = 'Clipboard not available — write it down manually';
  }

  // Store in localStorage as backup
  try {
    localStorage.setItem('loop21.club.lastCode', JSON.stringify({
      code: code,
      ticks: tickCount,
      ops: opActions,
      wallSeconds: wallSeconds,
      timestamp: Date.now(),
    }));
  } catch(e) { /* non-fatal */ }

  log('OPERATORS CLUB: Completion code generated — ' + code, 'ok');
}

// Hide the completion code display panel
function clubHideCompletionPanel() {
  const panel = document.getElementById('club-completion-panel');
  if (panel) panel.style.display = 'none';
}


// ══════════════════════════════════════════════════════════════
// BUILT-IN CHALLENGE DEFINITIONS
//
// All nine local challenges are defined here as script objects
// with builtin:true. They are registered at startup and cannot
// be removed or overwritten by operators. Operators can view
// the source via the View button in the Custom Challenges panel
// and copy it to create their own variants.
//
// Schema extensions used by built-ins:
//   metadata       — arbitrary object stored on CHALL, passed to display hooks
//   resultLabel(got, metadata) → string — correct-answer display
//   historyLabel(got, metadata) → string — compact history entry
//   spoiler(values, metadata)  → string — spoiler panel text
// ══════════════════════════════════════════════════════════════

function _ri(lo, hi) { return Math.floor(Math.random() * (hi - lo + 1)) + lo; }

const BUILTIN_CHALLENGE_DEFINITIONS = [

  // ── Add X Numbers ──────────────────────────────────────────────
  {
    id: 'add', name: 'Add X Numbers', builtin: true,
    description: 'Values will arrive via Bus E inbound. Add them all and send the sum back via Bus E outbound.',
    generate: function(params) {
      const n = params.count;
      const vals = [];
      let remaining = 65535;
      for (let i = 0; i < n; i++) {
        const maxVal = Math.min(32767, Math.floor(remaining - (n - i - 1)));
        const v = Math.max(1, _ri(1, Math.max(1, maxVal)));
        vals.push(v); remaining -= v;
      }
      const total = vals.reduce((a, b) => a + b, 0);
      return {
        values: vals, expected: total & 0xFFFF, answerCount: 1,
        label: n + ' values — sum = ?',
        metadata: { n },
        resultLabel:  (got)      => 'Sum of ' + n + ' values = ' + got,
        historyLabel: (got, md)  => '×' + md.n + ' sum=' + got,
        spoiler: (vals) => vals.join(' + ') + ' = ' + vals.reduce((a,b)=>a+b,0),
      };
    },
    par: function(result, params) {
      const n = result.values.length;
      return { ticks: 77 * n + 5, ops: 3 * n + 4 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Values to add', default: 2,
        options: [2,3,4,5,6,8,10,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Multiply Two Numbers ────────────────────────────────────────
  {
    id: 'multiply', name: 'Multiply Two Numbers', builtin: true,
    description: 'Two numbers will arrive via Bus E inbound. Multiply them and send the product back via Bus E outbound.',
    generate: function(params) {
      const maxA = Math.min(64, Math.max(1, params.max_a));
      const a = _ri(1, maxA);
      const b = _ri(1, Math.floor(65535 / a));
      return {
        values: [a, b], expected: a * b, answerCount: 1,
        label: a + ' × ' + b + ' = ?',
        metadata: { a, b },
        resultLabel:  (got, md) => md.a + ' × ' + md.b + ' = ' + got,
        historyLabel: (got, md) => md.a + '×' + md.b + '=' + got,
        spoiler: (vals) => vals[0] + ' × ' + vals[1] + ' = ' + (vals[0] * vals[1]),
      };
    },
    par: function(result) {
      const a = result.values[0], b = result.values[1];
      const m = Math.min(a, b);
      return { ticks: 36 * (m - 1) + 82, ops: 3 * m + 5 };
    },
    params: [
      { type: 'number', id: 'max_a', label: 'Max for A (2–64)', min: 2, max: 64, default: 64 },
    ],
  },

  // ── Transform Every Nth Value ───────────────────────────────────
  {
    id: 'transform_nth', name: 'Transform Every Nth Value', builtin: true,
    description: 'A stream of values arrives via Bus E. Apply the revealed operation to every Nth value. Return only the transformed values via Bus E outbound.',
    generate: function(params) {
      const stride = params.stride, totalCount = params.total;
      const ops = [
        { name: 'INC', label: 'increment (+1)', fn: v => (v + 1) & 0xFFFF },
        { name: 'DEC', label: 'decrement (−1)', fn: v => ((v - 1) + 0x10000) & 0xFFFF },
        { name: 'SHL', label: 'double (SHL)',   fn: v => (v << 1) & 0xFFFF },
        { name: 'SHR', label: 'halve (SHR)',    fn: v => (v >> 1) & 0xFFFF },
        { name: 'NOT', label: 'bitwise NOT',    fn: v => (~v) & 0xFFFF },
      ];
      const op = ops[_ri(0, ops.length - 1)];
      const maxVal = op.name === 'SHL' ? 32767 : 65534;
      const vals = Array.from({ length: totalCount }, () => _ri(1, maxVal));
      const expectedValues = vals.filter((v, i) => (i + 1) % stride === 0).map(v => op.fn(v));
      const transformCount = expectedValues.length;
      return {
        values: vals, expectedValues, answerCount: transformCount,
        label: totalCount + ' values — apply ' + op.label + ' to every ' + stride + 'th',
        metadata: { stride, transformCount, opName: op.name, opLabel: op.label },
        resultLabel:  (got, md) => 'All ' + md.transformCount + ' transformed values correct',
        historyLabel: (got, md) => 'xform/' + md.stride + ' op=' + md.opName + ' n=' + transformCount,
        spoiler: (vals, md) => 'Every ' + md.stride + 'th value — apply ' + md.opLabel,
      };
    },
    par: function(result, params) {
      const n = result.values.length, tc = result.answerCount;
      return { ticks: 41 * n + 123 * tc, ops: n + 4 * tc };
    },
    params: [
      { type: 'select', id: 'stride', label: 'Every Nth (stride)', default: 4,
        options: [2,3,4,5,6,8].map(v => ({ value: v, label: v + 'th' })) },
      { type: 'select', id: 'total', label: 'Total values', default: 16,
        options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Filter ─────────────────────────────────────────────────────
  {
    id: 'filter', name: 'Filter: Pass Back Matching Values', builtin: true,
    description: 'A stream of values arrives via Bus E. Identify those matching the condition revealed at start. Return only the matching values via Bus E outbound.',
    generate: function(params) {
      const totalCount = params.count;
      const baseConditions = [
        { label: 'odd (b0 = 1)',          test: v => (v & 1) === 1 },
        { label: 'divisible by 3',        test: v => v % 3 === 0 },
        { label: 'divisible by 4',        test: v => v % 4 === 0 },
        { label: 'top bit set (≥ 32768)', test: v => (v & 0x8000) !== 0 },
        { label: 'even AND ≥ 128',        test: v => (v & 1) === 0 && v >= 128 },
      ];
      let condition;
      if (Math.random() < 0.4) {
        if (Math.random() < 0.5) {
          const thresh = _ri(45000, 52000);
          condition = { label: '≥ ' + thresh, test: v => v >= thresh };
        } else {
          const thresh = _ri(12000, 20000);
          condition = { label: '< ' + thresh, test: v => v < thresh };
        }
      } else {
        condition = baseConditions[_ri(0, baseConditions.length - 1)];
      }
      const targetMatches = Math.round(totalCount * (0.25 + Math.random() * 0.08));
      const vals = [];
      let added = 0, attempts = 0;
      while (added < targetMatches && attempts++ < targetMatches * 200) {
        const v = _ri(1, 65534);
        if (condition.test(v)) { vals.push(v); added++; }
      }
      attempts = 0;
      while (vals.length < totalCount && attempts++ < totalCount * 200) {
        const v = _ri(1, 65534);
        if (!condition.test(v)) vals.push(v);
      }
      for (let i = vals.length - 1; i > 0; i--) {
        const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
      }
      const expectedValues = vals.filter(v => condition.test(v));
      const matchCount = expectedValues.length;
      return {
        values: vals, expectedValues, answerCount: matchCount,
        label: totalCount + ' values — return all where: ' + condition.label,
        metadata: { conditionLabel: condition.label, matchCount },
        resultLabel:  (got, md) => 'All ' + md.matchCount + ' matching values returned',
        historyLabel: (got, md) => 'filter(' + md.conditionLabel + ') ' + md.matchCount + '/' + totalCount,
        spoiler: (vals, md) => vals.join(' · ') + ' (condition: ' + md.conditionLabel + ')',
      };
    },
    par: function(result) {
      const n = result.values.length, m = result.answerCount;
      return { ticks: 41 * n + 18 * m, ops: n + m };
    },
    params: [
      { type: 'select', id: 'count', label: 'Stream length', default: 16,
        options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Sort Values ────────────────────────────────────────────────
  {
    id: 'sort', name: 'Sort Values (Low → High)', builtin: true,
    description: 'A set of values arrives via Bus E. Sort them from lowest to highest and return all values in sorted order via Bus E outbound.',
    generate: function(params) {
      const n = params.count;
      const valSet = new Set();
      while (valSet.size < n) valSet.add(_ri(1, 65534));
      const vals = Array.from(valSet);
      for (let i = vals.length - 1; i > 0; i--) {
        const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
      }
      const sorted = vals.slice().sort((a, b) => a - b);
      return {
        values: vals, expectedValues: sorted, answerCount: n,
        label: n + ' values — sort low to high',
        metadata: { n },
        resultLabel:  (got, md) => 'All ' + md.n + ' values returned in correct order',
        historyLabel: (got, md) => 'sort ' + md.n + ' vals',
        spoiler: (vals) => 'Unsorted: ' + vals.join(' · ') + '\nSorted: ' + vals.slice().sort((a,b)=>a-b).join(' · '),
      };
    },
    par: function(result) {
      const n = result.values.length;
      const c = n * (n - 1) / 2;
      return { ticks: n * 41 + c * 80 + n * 41, ops: n * 3 + c * 4 + n * 2 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Values to sort', default: 4,
        options: [4,6,8,10,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Find Maximum ───────────────────────────────────────────────
  {
    id: 'find_max', name: 'Find the Maximum', builtin: true,
    description: 'A stream of values arrives via Bus E. Find the single largest value and return it via Bus E outbound.',
    generate: function(params) {
      const n = params.count;
      const vals = Array.from({ length: n }, () => _ri(1, 65534));
      const maxVal = Math.max(...vals);
      return {
        values: vals, expected: maxVal, answerCount: 1,
        label: n + ' values — find the largest',
        metadata: { n },
        resultLabel:  (got) => 'Maximum value ' + got + ' found correctly',
        historyLabel: (got, md) => 'max of ' + md.n + '=' + got,
        spoiler: (vals) => vals.join(' · ') + ' (max: ' + Math.max(...vals) + ')',
      };
    },
    par: function(result) {
      const n = result.values.length;
      return { ticks: n * 82 + 41, ops: n * 3 + 4 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Values in stream', default: 8,
        options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── XOR Checksum ───────────────────────────────────────────────
  {
    id: 'xor_checksum', name: 'XOR Checksum', builtin: true,
    description: 'A set of values arrives via Bus E. XOR all of them together and return the single result via Bus E outbound.',
    generate: function(params) {
      const n = params.count;
      const vals = Array.from({ length: n }, () => _ri(1, 65534));
      const xorResult = vals.reduce((a, b) => a ^ b, 0);
      return {
        values: vals, expected: xorResult, answerCount: 1,
        label: n + ' values — XOR all = ?',
        metadata: { n },
        resultLabel:  (got) => 'XOR checksum ' + got + ' correct',
        historyLabel: (got, md) => 'xor×' + md.n + '=' + got,
        spoiler: (vals) => vals.join(' ^ ') + ' = ' + vals.reduce((a,b)=>a^b,0),
      };
    },
    par: function(result) {
      const n = result.values.length;
      return { ticks: 77 * n + 5, ops: 3 * n + 4 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Values to XOR', default: 4,
        options: [4,6,8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Count Matches ──────────────────────────────────────────────
  {
    id: 'count_matches', name: 'Count Matches', builtin: true,
    description: 'A stream of values arrives via Bus E. Count how many match the condition revealed at start. Return the count (a single number) via Bus E outbound.',
    generate: function(params) {
      const totalCount = params.count;
      const conditions = [
        { label: 'even (b0 = 0)',         test: v => (v & 1) === 0 },
        { label: 'odd (b0 = 1)',          test: v => (v & 1) === 1 },
        { label: 'divisible by 3',        test: v => v % 3 === 0 },
        { label: 'divisible by 4',        test: v => v % 4 === 0 },
        { label: 'top bit set (≥ 32768)', test: v => (v & 0x8000) !== 0 },
      ];
      const condition = conditions[_ri(0, conditions.length - 1)];
      const targetMatches = Math.round(totalCount * (0.25 + Math.random() * 0.08));
      const vals = [];
      let added = 0;
      while (added < targetMatches) {
        const v = _ri(1, 65534);
        if (condition.test(v)) { vals.push(v); added++; }
      }
      while (vals.length < totalCount) {
        const v = _ri(1, 65534); if (!condition.test(v)) vals.push(v);
      }
      for (let i = vals.length - 1; i > 0; i--) {
        const j = _ri(0, i); [vals[i], vals[j]] = [vals[j], vals[i]];
      }
      const matchCount = vals.filter(v => condition.test(v)).length;
      return {
        values: vals, expected: matchCount, answerCount: 1,
        label: totalCount + ' values — count those that are ' + condition.label,
        metadata: { conditionLabel: condition.label, totalCount },
        resultLabel:  (got) => 'Match count ' + got + ' correct',
        historyLabel: (got, md) => 'count(' + md.conditionLabel + ')=' + got + '/' + md.totalCount,
        spoiler: (vals, md) => vals.join(' · ') + ' (condition: ' + md.conditionLabel + ')',
      };
    },
    par: function(result) {
      const n = result.values.length;
      return { ticks: n * 41 + 544 + 41, ops: n + 8 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Stream length', default: 16,
        options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Accumulate to Threshold ─────────────────────────────────────
  {
    id: 'accumulate', name: 'Accumulate to Threshold', builtin: true,
    description: 'Values arrive via Bus E. Keep a running sum. A threshold is revealed at start. Return the running sum the moment it meets or exceeds the threshold.',
    generate: function(params) {
      const n = params.count;
      const vals = Array.from({ length: n }, () => _ri(100, 4000));
      let runSum = 0;
      const prefixSums = vals.map(v => (runSum += v));
      const hitIndex = Math.min(n - 1,
        Math.floor(n * 0.75) + _ri(0, Math.max(0, Math.ceil(n * 0.15) - 1)));
      const prevSum = hitIndex > 0 ? prefixSums[hitIndex - 1] : 0;
      let threshold = prevSum + 1 + _ri(0, Math.max(0, prefixSums[hitIndex] - prevSum - 1));
      let expectedAnswer = prefixSums[hitIndex];
      // Scale down if overflow
      if (threshold > 65535 || expectedAnswer > 65535) {
        const scale = 60000 / runSum;
        for (let i = 0; i < n; i++) vals[i] = Math.max(1, Math.round(vals[i] * scale));
        let rs2 = 0;
        const ps2 = vals.map(v => (rs2 += v));
        const pv2 = hitIndex > 0 ? ps2[hitIndex - 1] : 0;
        threshold = pv2 + 1 + _ri(0, Math.max(0, ps2[hitIndex] - pv2 - 1));
        expectedAnswer = ps2[hitIndex];
      }
      return {
        values: [threshold, ...vals], expected: expectedAnswer, answerCount: 1,
        label: 'Threshold: ' + threshold + ' — sum ' + n + ' values',
        metadata: { threshold, n },
        resultLabel:  (got) => 'Threshold reached at sum ' + got,
        historyLabel: (got, md) => 'accum≥' + md.threshold + ' n=' + md.n + '=' + got,
        spoiler: (vals, md) => 'Threshold: ' + md.threshold + ' · Values: ' + vals.slice(1).join(' · '),
      };
    },
    par: function(result, params) {
      const n = params.count;
      return { ticks: 82 * n + 41, ops: 3 * n + 6 };
    },
    params: [
      { type: 'select', id: 'count', label: 'Values in stream', default: 8,
        options: [8,12,16,20,24,32].map(v => ({ value: v, label: String(v) })) },
    ],
  },

  // ── Chain Sum (Network) ────────────────────────────────────────
  {
    id: 'chain_sum', name: 'Chain Sum', builtin: true, network: true,
    description: 'Each machine in the network receives a unique value. Pass the running sum along the chain — add your value and submit to your Challenge Box. The origin verifies each step.',
    // Chain Sum runs via startChainSumChallenge() — generate() and par() are not used.
    generate: function() { return { values: [0], expected: 0, answerCount: 1, label: 'Chain Sum' }; },
    par:      function() { return { ticks: 1, ops: 1 }; },
    params: [],
  },

  // ── Bridge Crossing (Operators Club) ──────────────────────────
  {
    id: 'bridge_crossing', name: '★ Bridge Crossing', builtin: true, club: true,
    description: 'OPERATORS CLUB INITIATION — Four values arrive via Bus E: A, B, C, D (in that order). Compute: ((C + D) XOR A) + B. Constraint: A and B must be stored in Memory slots before they can reach the ALU. Return the answer via Bus E outbound. Three bridge crossings. Three ALU operations. One answer. — loop2.computer/club',

    generate: function() {
      const A = _ri(1, 65534);
      const C = _ri(1, 32767);
      const D = _ri(1, 65535 - C);
      const partial = ((C + D) ^ A) & 0xFFFF;
      const maxB = 65535 - partial;
      const B = _ri(1, Math.max(1, maxB));
      const answer = (partial + B) & 0xFFFF;
      return {
        values: [A, B, C, D],
        expected: answer,
        answerCount: 1,
        label: 'Bridge Crossing — A=' + A + ' B=' + B + ' C=' + C + ' D=' + D,
        metadata: { A, B, C, D, partial },
        resultLabel:  (got) => '((C+D) XOR A) + B = ' + got,
        historyLabel: (got) => 'bridge=' + got,
        spoiler: (vals, md) => 'A=' + md.A + ' B=' + md.B + ' C=' + md.C + ' D=' + md.D + ' · partial=' + md.partial + ' · answer=' + ((md.partial + md.B) & 0xFFFF),
      };
    },

    par: function() {
      return { ticks: 612, ops: 24 };
    },

    params: [],
  },

];

// ── Source serialization for View Script ─────────────────────────
// Stores a readable source string on each built-in definition so
// operators can view and copy it from the Custom Challenges panel.
function _serializeBuiltinSource(def) {
  return JSON.stringify({
    id:          def.id,
    name:        def.name,
    description: def.description,
    note:        'Built-in challenge — copy and rename id to create a custom variant.',
    params:      def.params,
  }, null, 2) + '\n\n// generate() and par() are built-in and cannot be displayed as editable source.';
}

// ── Register all built-in challenges ────────────────────────────
function initBuiltinChallenges() {
  for (const def of BUILTIN_CHALLENGE_DEFINITIONS) {
    def._source = _serializeBuiltinSource(def);
    customChallengeRegistry.set(def.id, def);
    addChallengeToTypeSelector(def);
  }
}

// ── Initialise the challenge type selector and params on load ────
function challInitRegistry() {
  initBuiltinChallenges();
  // Select 'add' by default and render its params
  const typeEl = document.getElementById('chall-type');
  if (typeEl) {
    typeEl.value = 'add';
    challOnTypeChange();
  }
}


// Start a challenge — generate values, load into loops, begin timing
function challStart() {
  if(CHALL.active) { challAbort(); return; }

  const typeEl = document.getElementById('chall-type');
  const type = typeEl ? typeEl.value : 'add';

  ensureBusEIsActive();
  clubHideCompletionPanel();
  challShowStats(true);
  document.getElementById('chall-start-btn').textContent = '⊗ ACTIVE';
  document.getElementById('chall-start-btn').classList.add('active');
  document.getElementById('chall-abort-btn').style.display = '';
  document.getElementById('cs-ticks').textContent = '0';
  document.getElementById('cs-ops').textContent = '0';
  document.getElementById('cs-score').textContent = '—';

  if (type === 'chain_sum') {
    startChainSumChallenge();
  } else {
    startCustomChallenge(type);
  }
}

// Abort the current challenge and reset the challenge state
function challAbort() {
  // If a chain challenge was active at the origin, notify all participants
  if (CBX.originChallenge.active) {
    cbxSendToAllParticipants(CBX_MSG.CHAIN_ABORT, { challengeId: CBX.originChallenge.challengeId });
    CBX.originChallenge.active = false;
    document.getElementById('chall-chain-progress').style.display = 'none';
  }
  CHALL.active = false; CHALL.state = 'idle';
  CHALL.challengeName = null; CHALL.challengeId = null;
  CHALL.metadata = {}; CHALL.resultLabelFn = null; CHALL.historyLabelFn = null; CHALL.spoilerFn = null;
  L21.ext.inQueue = [];  // flush any pending inbound bits
  L21.ext.outBuf  = [];  // flush outbound capture buffer
  challClearSpoiler();
  clubHideCompletionPanel();
  challSetStatus('Aborted. Press New Challenge to try again.', '');
  challShowStats(false);
  document.getElementById('chall-start-btn').textContent = '▶ NEW CHALLENGE';
  document.getElementById('chall-start-btn').classList.remove('active');
  document.getElementById('chall-abort-btn').style.display = 'none';
  log('CHALLENGE ABORTED', 'info');
}

// Set the challenge status message and CSS class
function challSetStatus(msg, cls) {
  const el = document.getElementById('chall-status');
  if(!el) return;
  el.textContent = msg;
  el.className = 'chall-status' + (cls ? ' ' + cls : '');
}

// Show or hide the challenge statistics panel
function challShowStats(show) {
  const el = document.getElementById('chall-stats');
  if(el) el.style.display = show ? 'grid' : 'none';
}

// Called by Bus E when a complete word exits the outbound bus toward the challenge endpoint
function handleChallengeAnswerWord(val) {
  // Participating machines in a chain challenge submit their local sum via Bus E.
  // We intercept that here and route it to the CBX submission handler.
  if (CBX.participation.active && CBX.participation.phase === 'released') {
    cbxSubmitLocalChainSum(val);
    return; // do not evaluate as a local challenge answer
  }

  if(!CHALL.active) return;
  CHALL.received.push(val);
  // Update live progress display
  const woEl = document.getElementById('cs-words-out');
  if(woEl && CHALL.answerCount > 1) {
    woEl.textContent = CHALL.received.length + ' / ' + CHALL.answerCount + ' received';
  }
  // Evaluate only when all expected answers have arrived
  if(CHALL.received.length >= CHALL.answerCount) {
    challEvaluate();
  }
}

// Evaluate the operator answer against the expected result and compute score
function challEvaluate() {
  const n = CHALL.n || CHALL.values.length;
  // For multi-answer challenges, check every answer; for single-answer, check just the first
  let got, correct;
  if(CHALL.answerCount > 1) {
    got = CHALL.received;
    correct = CHALL.expectedValues.length === CHALL.received.length
      && CHALL.expectedValues.every((v, i) => v === CHALL.received[i]);
  } else {
    got = CHALL.received[0];
    correct = (got === CHALL.expected);
  }
  const gotDisplay = CHALL.answerCount > 1 ? CHALL.received.join(', ') : got;
  const wallMs  = performance.now() - CHALL.startTime;
  const wallSec = wallMs / 1000;
  const elapsed = wallSec.toFixed(1);
  const ticks   = clock.tickCount - CHALL.startTick;
  const opDelta = L21.operatorActionCount - CHALL.opsAtStart;
  // Scoring branches on challScoringMode:
  //   Efficiency — ticks (55%) + ops (45%). Wall-clock time not counted.
  //   Speed      — ticks (35%) + ops (30%) + elapsed real time (35%).
  let score = 0;
  let tickEfficiency = 0;
  let opEfficiency = 0;
  let timeEfficiency = 0;
  if(correct) {
    const parTicks = CHALL.parTicks;
    const parOps   = CHALL.parOps;
    const hz       = CHALL.startHz || 1;
    const parTime  = (parTicks / hz) * 4;  // generous 4× human overhead multiplier
    tickEfficiency = Math.min(1.0, parTicks / Math.max(parTicks, ticks));
    opEfficiency   = Math.min(1.0, parOps   / Math.max(parOps,   opDelta));
    timeEfficiency = Math.min(1.0, parTime  / Math.max(parTime,  wallSec));
    let efficiency;
    if(CHALL.scoringMode === 'speed') {
      efficiency = tickEfficiency * 0.35 + opEfficiency * 0.30 + timeEfficiency * 0.35;
    } else {
      efficiency = tickEfficiency * 0.55 + opEfficiency * 0.45;
    }
    score = Math.max(50, Math.floor(efficiency * 1000));
  }

  CHALL.active = false; CHALL.state = 'done';
  L21.ext.inQueue = [];
  L21.ext.outBuf  = [];

  if(document.getElementById('cs-time'))  document.getElementById('cs-time').textContent  = elapsed + 's';
  if(document.getElementById('cs-ticks')) document.getElementById('cs-ticks').textContent = ticks + ' (par ' + CHALL.parTicks + ')';
  if(document.getElementById('cs-ops'))   document.getElementById('cs-ops').textContent   = opDelta + ' (par ' + CHALL.parOps + ')';
  if(document.getElementById('cs-score')) {
    if(correct) {
      const tickPct = Math.round(tickEfficiency * 100);
      const opPct   = Math.round(opEfficiency   * 100);
      const timePct = Math.round(timeEfficiency * 100);
      const breakdown = CHALL.scoringMode === 'speed'
        ? score + ' (' + tickPct + '%t · ' + opPct + '%op · ' + timePct + '%tm)'
        : score + ' (' + tickPct + '%t · ' + opPct + '%op)';
      document.getElementById('cs-score').textContent = breakdown;
    } else {
      document.getElementById('cs-score').textContent = 'WRONG';
    }
  }
  challShowStats(true);

  if(correct) {
    let resultLabel;
    if (CHALL.resultLabelFn) {
      resultLabel = CHALL.resultLabelFn(got, CHALL.metadata);
    } else if (CHALL.answerCount > 1) {
      resultLabel = 'All ' + CHALL.answerCount + ' values correct';
    } else {
      resultLabel = (CHALL.challengeName || 'Challenge') + ': ' + got;
    }
    challSetStatus('✓ Correct! ' + resultLabel + ' · ' + elapsed + 's · ' + ticks + ' ticks · ' + opDelta + ' ops · Score: ' + score, 'ok');
    log('CHALLENGE CORRECT. Score: ' + score + ' [' + CHALL.scoringMode + '] (tick eff: ' + Math.round(tickEfficiency*100) + '%, op eff: ' + Math.round(opEfficiency*100) + '%, time eff: ' + Math.round(timeEfficiency*100) + '%)', 'ok');
    notifFireChallWin();

    // Operators Club: generate completion code for club challenges
    const challDef = customChallengeRegistry.get(CHALL.challengeId);
    if (challDef && challDef.club) {
      const wallSec = Math.round(elapsed);
      clubShowCompletionCode(ticks, opDelta, wallSec);
    }
  } else {
    const expectedDisplay = CHALL.answerCount > 1 ? CHALL.expectedValues.join(', ') : CHALL.expected;
    const gotStr = CHALL.answerCount > 1 ? CHALL.received.join(', ') : (got !== undefined ? got : 'nothing');
    challSetStatus('✗ Wrong. Expected: ' + expectedDisplay + ' — Got: ' + gotStr, 'err');
    log('CHALLENGE WRONG. Expected: ' + expectedDisplay + ' Got: ' + gotStr, 'err');
    notifFireChallFail();
  }

  let typeLabel;
  if (CHALL.historyLabelFn) {
    typeLabel = CHALL.historyLabelFn(got, CHALL.metadata);
  } else {
    typeLabel = (CHALL.challengeId || CHALL.type || 'chall') + ' n=' + n;
  }
  const entry = (correct ? '✓' : '✗') + ' [' + (CHALL.scoringMode||'efficiency')[0].toUpperCase() + '] ' + typeLabel + '=' + CHALL.expected
              + ' → ' + elapsed + 's · ' + ticks + 'tk · ' + opDelta + 'op'
              + (correct ? ' · ' + score + 'pts' : '');
  CHALL.history.unshift(entry);
  if(CHALL.history.length > 10) CHALL.history.pop();
  const hEl = document.getElementById('chall-history');
  if(hEl) hEl.innerHTML = CHALL.history.map(h => `<div>${h}</div>`).join('');

  document.getElementById('chall-start-btn').textContent = '▶ NEW CHALLENGE';
  document.getElementById('chall-start-btn').classList.remove('active');
  document.getElementById('chall-abort-btn').style.display = 'none';
}


// Toggle visibility of the challenge spoiler text
function challToggleSpoiler() {
  const btn = document.getElementById('chall-spoiler-btn');
  const val = document.getElementById('chall-spoiler-values');
  if(!btn || !val) return;
  const open = val.style.display !== 'none';
  val.style.display = open ? 'none' : '';
  btn.textContent = open ? '▶ Show values' : '▼ Hide values';
}

// Set the spoiler text content
function challSetSpoilerText(text) {
  const btn = document.getElementById('chall-spoiler-btn');
  const val = document.getElementById('chall-spoiler-values');
  if (!btn || !val) return;
  if (!text) { btn.style.display = 'none'; val.style.display = 'none'; return; }
  val.textContent  = text;
  val.style.display = 'none';
  btn.textContent  = '▶ Show values';
  btn.style.display = '';
}

// Clear the spoiler text and hide the spoiler area
function challClearSpoiler() {
  const btn = document.getElementById('chall-spoiler-btn');
  const val = document.getElementById('chall-spoiler-values');
  if(btn) { btn.style.display = 'none'; btn.textContent = '▶ Show values'; }
  if(val) { val.style.display = 'none'; val.textContent = ''; }
}

// Update the live tick/action/time counters during an active challenge
function challUpdateLiveStats() {
  if(!CHALL.active) return;
  const tEl   = document.getElementById('cs-ticks');
  const timeEl = document.getElementById('cs-time');
  const opsEl  = document.getElementById('cs-ops');
  if(tEl)    tEl.textContent    = clock.tickCount - CHALL.startTick;
  if(timeEl) { const ws=(performance.now()-CHALL.startTime)/1000; timeEl.textContent=ws.toFixed(1)+'s'; }
  if(opsEl) opsEl.textContent = L21.operatorActionCount - CHALL.opsAtStart;
}


// ════════════════════════════════════════════════════════════
// WORKING SCRATCH REGISTERS (2 slots, attached to Working Loop)
// ════════════════════════════════════════════════════════════
// Working scratch register state — short alias for L21.wscr
const wscr = L21.wscr;
let workingScratchDisplayNeedsRefresh = true;
// Mark the WSCR display as needing refresh
function flagWorkingScratchDisplayAsStale() { workingScratchDisplayNeedsRefresh = true; }

// Toggle the WSCR capture mode on/off
function toggleWorkingScratchCapture() {
  wscr.capture = !wscr.capture;
  wscr.capPos = -1;
  wscr.capBuf = [];
  const btn = document.getElementById('wscr-capture-btn');
  if(btn) {
    btn.textContent = wscr.capture ? 'CAPTURE: ON — next → slot ' + wscr.capAddr : 'CAPTURE: OFF';
    btn.classList.toggle('active', wscr.capture);
  }
  const led = document.getElementById('wscr-led');
  if(led) led.classList.toggle('active', wscr.capture);
  logSetup('OP.WSCR_CAPTURE ' + (wscr.capture?'ON':'OFF'), 'Operator ' + (wscr.capture?'enables':'disables') + ' Working scratch capture');
}

// Start writing a WSCR slot value back to the Working Loop
function sendWorkingScratchSlotToLoop(slot) {
  if(wscr.slots[slot] === null) { log('Scratch slot ' + slot + ' is empty', 'err'); return; }
  if(wscr.wbPos[slot] >= 0) { log('Scratch slot ' + slot + ' writeback already in progress', 'err'); return; }
  const val = wscr.slots[slot];
  wscr.wbBuf[slot] = [1];
  for(let b = 15; b >= 0; b--) wscr.wbBuf[slot].push((val >> b) & 1);
  wscr.wbPos[slot] = 0;
  logSetup('OP.WSCR_SEND ' + slot + ' VAL=' + val, 'Operator sends scratch slot ' + slot + ' (' + val + ') to Working loop');
}

// Clear a single WSCR slot to null
function clearWorkingScratchSlot(slot) {
  wscr.slots[slot] = null;
  wscr.wbPos[slot] = -1;
  wscr.wbBuf[slot] = [];
  flagWorkingScratchDisplayAsStale(); refreshWorkingScratchDisplay();
  logSetup('OP.WSCR_CLR ' + slot, 'Operator clears Working scratch slot ' + slot);
}

// Called every tick from executeOneTick — sample Working R-head and run writeback pipelines
function processWorkingScratchOnTick() {
  // ── Capture: sample Working loop R-head
  if(wscr.capture && !loops['working'].paused && !opCount.halted['working']) {
    const rBit = loops['working'].bits[readHeadBitIndex('working')];
    if(wscr.capPos < 0) {
      if(rBit === 1) { wscr.capPos = 0; wscr.capBuf = [1]; }
    } else {
      wscr.capBuf.push(rBit);
      wscr.capPos++;
      if(wscr.capPos >= BPW - 1) {
        // Full word captured (marker + 16 data bits)
        let val = 0;
        for(let i = 1; i < wscr.capBuf.length; i++) val = (val << 1) | wscr.capBuf[i];
        val &= 0xFFFF;
        wscr.slots[wscr.capAddr] = val;
        const capturedSlot = wscr.capAddr;
        wscr.capAddr = (wscr.capAddr + 1) % 4; // cycle 0→1→2→3→0
        wscr.capPos = -1; wscr.capBuf = [];
        flagWorkingScratchDisplayAsStale();
        ctrFire('working', 'scratchWordWritten');
        ctrFireBulk('working', 'scratchBitsWritten', BPW);
        // Update capture button label
        const btn = document.getElementById('wscr-capture-btn');
        if(btn && wscr.capture) btn.textContent = 'CAPTURE: ON — next → slot ' + wscr.capAddr;
        logOp('WSCR.CAP[' + capturedSlot + '] VAL=' + val, 'Working scratch captured ' + val + ' into slot ' + capturedSlot);
      }
    }
  }

  // ── Writeback pipelines: write stored bits into Working loop write head (bits[0])
  for(let s = 0; s < 4; s++) {
    if(wscr.wbPos[s] >= 0) {
      const bit = wscr.wbBuf[s][wscr.wbPos[s]];
      loops['working'].bits[0] = bit;
      if(wscr.wbPos[s] === 0) {
        loops['working'].lastWord = extractWordAtReadHead(loops['working'].bits);
        ctrFire('working', 'wordWritten');
        notifFire('working', 'wordWritten');
      }
      ctrFire('working', 'bitsWritten');
      loops['working'].flash = 1.0;
      wscr.wbPos[s]++;
      if(wscr.wbPos[s] >= BPW) {
        wscr.wbPos[s] = -1;
        wscr.wbBuf[s] = [];
        flagWorkingScratchDisplayAsStale();
        ctrFireBulk('working', 'scratchBitsRead', BPW);
        ctrFire('working', 'scratchWordRead');
        logOp('WSCR.SEND[' + s + ']', 'Working scratch slot ' + s + ' delivered to Working loop');
      }
    }
  }
}

// Build the DOM elements for the 4 WSCR slot displays
function buildWorkingScratchSlotElements() {
  const grid = document.getElementById('wscr-slots-grid');
  if(!grid || grid.children.length) return;
  for(let i = 0; i < 4; i++) {
    const row = document.createElement('div');
    row.className = 'wscr-slot';
    row.id = 'wscr-slot-' + i;

    const lbl = document.createElement('div');
    lbl.className = 'wscr-slot-lbl';
    lbl.textContent = i;
    row.appendChild(lbl);

    const bitsWrap = document.createElement('div');
    bitsWrap.className = 'wscr-slot-bits';
    const mk = document.createElement('div'); mk.className = 'wscr-slot-bit mk'; bitsWrap.appendChild(mk);
    const g1 = document.createElement('div'); g1.style.cssText = 'width:2px;flex-shrink:0;'; bitsWrap.appendChild(g1);
    for(let b = 0; b < 4; b++) { const d = document.createElement('div'); d.className = 'wscr-slot-bit'; bitsWrap.appendChild(d); }
    const g2 = document.createElement('div'); g2.style.cssText = 'width:2px;flex-shrink:0;'; bitsWrap.appendChild(g2);
    for(let b = 0; b < 12; b++) { const d = document.createElement('div'); d.className = 'wscr-slot-bit'; bitsWrap.appendChild(d); }
    row.appendChild(bitsWrap);

    const val = document.createElement('div');
    val.className = 'wscr-slot-val';
    val.textContent = '—';
    row.appendChild(val);

    const wb = document.createElement('button');
    wb.className = 'wscr-slot-wb';
    wb.textContent = '→W';
    wb.title = 'Send to Working loop head';
    wb.onclick = ((s) => () => sendWorkingScratchSlotToLoop(s))(i);
    row.appendChild(wb);

    const clr = document.createElement('button');
    clr.className = 'wscr-slot-clr';
    clr.textContent = 'CLR';
    clr.title = 'Clear slot';
    clr.onclick = ((s) => () => clearWorkingScratchSlot(s))(i);
    row.appendChild(clr);

    grid.appendChild(row);
  }
}

// Refresh all WSCR slot displays and capture state
function refreshWorkingScratchDisplay() {
  if(!workingScratchDisplayNeedsRefresh) return; workingScratchDisplayNeedsRefresh = false;
  buildWorkingScratchSlotElements();
  for(let i = 0; i < 4; i++) {
    const el = document.getElementById('wscr-slot-' + i);
    if(!el) continue;
    el.classList.toggle('active', wscr.slots[i] !== null);
    // bit dots
    const bitsWrap = el.children[1];
    const dotEls = [...bitsWrap.children].filter(c => !c.style.width);
    const v = wscr.slots[i];
    dotEls.forEach((d, di) => {
      d.classList.remove('lit');
      if(v !== null) {
        const bit = (di === 0) ? 1 : (v >> (16 - di)) & 1;
        if(bit) d.classList.add('lit');
      }
    });
    // value text
    const valEl = el.children[2];
    if(valEl) valEl.textContent = v !== null ? String(v) : '—';
  }
}

// ── Bus E external interface stubs
// deliverBitToExternalEndpoint: called each tick with the bit exiting the outbound bus
// Returns updated xfer counter (same protocol as deliverBitToLoop)
function deliverBitToExternalEndpoint(exitBit, xfer) {
  if(xfer === 0 && exitBit !== 1) return 0;
  if(xfer === 0 && exitBit === 1) xfer = BPW;
  L21.ext.outBuf.push(exitBit);
  const remaining = xfer - 1;
  if(remaining === 0) {
    // Full word arrived at external endpoint — route to challenge or network
    // Reconstruct value from 16 data bits (indices 1-16, MSB first)
    let data=0; for(let i=1;i<L21.ext.outBuf.length;i++) data=(data<<1)|L21.ext.outBuf[i];
    data &= 0xFFFF;
    L21.ext.outBuf = [];
    handleExternalWordArrival(data);
  }
  return remaining;
}

// Pull the next bit from the external inbound queue into Bus E
function pullNextInboundBitFromQueue() {
  return L21.ext.inQueue.length > 0 ? L21.ext.inQueue.shift() : 0;
}

// Queue a word to be sent inbound (from external endpoint into the machine)
function queueWordForInboundDelivery(val) {
  L21.ext.inQueue.push(1); // marker
  for(let b=15;b>=0;b--) L21.ext.inQueue.push((val>>b)&1); // 16 data bits MSB first
  L21.buses.e.inFlash = 1.0;
}

// Called when a complete word exits the outbound bus
function handleExternalWordArrival(val) {
  // Stub — will dispatch to challenge module or network handler
  if(L21.buses.e.extDst === 'challenge') {
    if(typeof handleChallengeAnswerWord === 'function') handleChallengeAnswerWord(val);
  }
  // network: future implementation
}

// ================================================================
//  TICK ENGINE — decomposed into named sub-step functions
//
//  R/G/W HEAD MODEL:
//    Data flows: ... bits[N-1] → bits[2] → bits[1] → bits[0] → (rotated away)
//    bits[2] = READ dot  : bus/ALU samples happen here, before gate or rotate
//    bits[1] = GATE dot  : if CLOSED, zero this position (1 tick after read)
//    bits[0] = WRITE dot : bus/inject land here after rotate; travels full loop to READ
//    Gate never affects read (upstream) or write (downstream) — only the middle.
// ================================================================

// ── Preamble: auto-writeback, clock accuracy, logger, tick count, global counter ──
function tickPreamble() {
  // Auto-writeback: fire pending ALU answer writeback at the start of this tick
  if(alu._autoWbPending) {
    alu._autoWbPending = false;
    alu.autoWritebackPrevResult = alu.result;
    if(alu.autoWriteback && alu.result !== null) {
      aluWriteback();
      log('AUTO-SEND: answer sent to loop', 'info');
    }
  }
  // Record actual interval for clock accuracy display
  const _now = performance.now();
  if(clock.lastTimestamp > 0 && clock.running){
    clock.accuracySamples.push(_now - clock.lastTimestamp);
    if(clock.accuracySamples.length > CLOCK_ACCURACY_SAMPLE_COUNT) clock.accuracySamples.shift();
  }
  clock.lastTimestamp = _now;
  if (logger.active) {
    logger.tickCount++;
    // Snapshot loop R-dot words each tick
    const hwk = loops['working'].bits[readHeadBitIndex('working')]===1 ? extractWordValueFromBits(loops['working'].bits.slice(readHeadBitIndex('working'))) : '_';
    const hwa = loops['alu'].bits[readHeadBitIndex('alu')]===1         ? extractWordValueFromBits(loops['alu'].bits.slice(readHeadBitIndex('alu')))         : '_';
    const hwm = loops['memory'].bits[readHeadBitIndex('memory')]===1   ? extractWordValueFromBits(loops['memory'].bits.slice(readHeadBitIndex('memory')))   : '_';
    const hwb = loops['big'].bits[readHeadBitIndex('big')]===1         ? extractWordValueFromBits(loops['big'].bits.slice(readHeadBitIndex('big')))         : '_';
    const gs  = ['working','alu','memory','big'].map(id=>!loops[id].gateOpen?'C':'O').join('');
    writeLogLine(
      `T${String(logger.tickCount).padStart(5,'0')}.TICK BUS=${L21.buses.a.active?'ON':'OFF'} GATES=${gs} WK=${hwk} AL=${hwa} MM=${hwm} BG=${hwb}`,
      `Tick ${logger.tickCount}: bus ${L21.buses.a.active?'on':'off'}, gates W${gs[0]}A${gs[1]}M${gs[2]}B${gs[3]}, heads: wk=${hwk} al=${hwa} mm=${hwm} bg=${hwb}`
    );
    updateLoggerStatusDisplay();
  }
  clock.tickCount++;
  if(clock.tickCount >= MAX_TICK_COUNT) clock.tickCount = 0;
  if(EL.tickDisplay) EL.tickDisplay.textContent=String(clock.tickCount).padStart(9,'0');

  // Global counter is the sum of all loop counters
  ctr.global.val = (ctr.working.val + ctr.alu.val + ctr.memory.val + ctr.big.val) >>> 0;
  refreshCounterDisplay('global');
  // Check if global counter halt is linked
  if(opCount.linked.global && !opCount.halted.global && ctr.global.val === opCount.val) {
    haltLoopsWhenCountersMatch();
  }
}

// ── Step 1: READ — sample source bits from all buses before gate or rotate ──
function tickSampleBusSources() {
  const sources = {};
  // Unidirectional buses A-D
  sources.a = (L21.buses.a.active  && getBusFlowDirection('a')!=='invalid') ? sampleBusSourceBit(L21.buses.a.src)  : 0;
  sources.b = (L21.buses.b.active && getBusFlowDirection('b')!=='invalid') ? sampleBusSourceBit(L21.buses.b.src) : 0;
  sources.c = (L21.buses.c.active && getBusFlowDirection('c')!=='invalid') ? sampleBusSourceBit(L21.buses.c.src) : 0;
  sources.d = (L21.buses.d.active && getBusFlowDirection('d')!=='invalid') ? sampleBusSourceBit(L21.buses.d.src) : 0;
  // Bus E outbound source
  sources.e = 0;
  if(L21.buses.e.active) {
    sources.e = opCount.halted[L21.buses.e.src] ? 0 : loops[L21.buses.e.src].bits[readHeadBitIndex(L21.buses.e.src)];
  }
  // Bus F (P2P Left)
  sources.f = 0;
  if(L21.buses.f.active) {
    sources.f = opCount.halted[L21.buses.f.src] ? 0 : loops[L21.buses.f.src].bits[readHeadBitIndex(L21.buses.f.src)];
  }
  // Bus G (P2P Right)
  sources.g = 0;
  if(L21.buses.g.active) {
    sources.g = opCount.halted[L21.buses.g.src] ? 0 : loops[L21.buses.g.src].bits[readHeadBitIndex(L21.buses.g.src)];
  }
  // Bus H (Net0 routable)
  sources.h = 0;
  if(L21.buses.h.active && L21.buses.h.peerTarget) {
    sources.h = opCount.halted[L21.buses.h.src] ? 0 : loops[L21.buses.h.src].bits[readHeadBitIndex(L21.buses.h.src)];
  }
  // Bus I (Net1 routable)
  sources.i = 0;
  if(L21.buses.i.active && L21.buses.i.peerTarget) {
    sources.i = opCount.halted[L21.buses.i.src] ? 0 : loops[L21.buses.i.src].bits[readHeadBitIndex(L21.buses.i.src)];
  }
  return sources;
}

// ── Step 1 (cont): read-phase processing — lastWord, memory capture, ALU capture, inject advance ──
function tickReadPhase() {
  // Update lastWord display when marker is at the R dot
  DEFS.forEach(def => {
    const lp = loops[def.id];
    const ri = readHeadBitIndex(def.id);
    if(lp.bits[ri]===1) lp.lastWord = extractWordAtReadHead(lp.bits, ri);
  });

  // ── Memory read-head slot capture (pre-rotate)
  if (mem.writeToSlots && mem.wbPos < 0) {
    const mBit = loops['memory'].bits[readHeadBitIndex('memory')];
    if (mem.capPos < 0 && mBit === 1) {
      if (mem.autoInc && !mem.autoIncActive) {
        mem.autoIncActive = true;
        mem.autoIncCount = 0;
        setAutoIncStart(mem.autoIncStart);
      }
      mem.capAddr = getCurrentMemoryAddress();
      mem.capBuf.fill(0);
      mem.capPos = 0;
    }
    if (mem.capPos >= 0) captureIncomingBitToMemorySlot(mBit);
  }

  // ── ALU capture: sample read dot pre-rotate, feed into capture pipeline
  if ((alu.route !== null || alu.capTarget !== null) && alu.wbPos < 0 && cmp.wbPos < 0) {
    const aluBit = loops['alu'].bits[readHeadBitIndex('alu')];
    if (alu.capTarget === null && alu.route && aluBit === 1) {
      alu.capTarget = alu.route;
      alu.capPos = 0;
      alu.capBuf.fill(0);
    }
    if (alu.capTarget !== null) {
      aluCaptureBit(aluBit);
    }
  }

  // ── Advance inject channel
  const injExitBit = inj.buffer[INJ_N-1];
  for(let i=INJ_N-1;i>0;i--) inj.buffer[i]=inj.buffer[i-1];
  inj.buffer[0] = inj.pending.length>0 ? inj.pending.shift() : 0;
  if(inj.active && inj.pending.length===0 && inj.buffer.every(b=>b===0)){
    inj.active=false;
    document.getElementById('led-inj').classList.remove('on');
  }
  if(injExitBit!==0) inj.flash=1.0;
  return injExitBit;
}

// ── Step 2: GATE — kill G dot on closed loops ──
function tickGatePhase() {
  DEFS.forEach(def=>{
    const lp=loops[def.id];
    if(!lp.gateOpen) lp.bits[gateHeadBitIndex(def.id)]=0;
  });
}

// ── Step 3: ROTATE all loops (skip paused or op-count halted ones) ──
function tickRotatePhase() {
  DEFS.forEach(def=>{
    const lp=loops[def.id];
    if(lp.paused) return;
    if(opCount.halted[def.id]) return;
    lp.bits.push(lp.bits.shift());
    lp.flash=1.0;
  });
}

// ── Step 4: WRITE — bus ticks, counter drains, peripherals, writeback pipelines, inject, dual buses ──
// Advance the memory slot writeback pipeline by one tick.
// Sends one bit per tick from mem.wbBuf into the Memory loop's write head.
// On completion: handles destructive reads, file load continuation, batch write
// chaining, and batch completion cleanup.
function advanceMemoryWritebackPipeline() {
  if (mem.wbPos < 0) return;
  const bit = mem.wbBuf[mem.wbPos];
  loops['memory'].bits[0] = bit;
  if (mem.wbPos === 0) {
    loops['memory'].lastWord = extractWordAtReadHead(loops['memory'].bits);
    ctrFire('memory', 'wordWritten');
    notifFire('memory', 'wordWritten');
  }
  ctrFire('memory', 'bitsWritten');
  loops['memory'].flash = 1.0;
  mem.wbPos++;
  if (mem.wbPos !== BPW) return;
  // Word complete — handle pipeline completion
  if (mem.destructive && mem.wbSrcAddr >= 0) {
    mem.slots[mem.wbSrcAddr] = null;
    log(`MEM[${mem.wbSrcAddr}] cleared (destructive read)`, 'info');
  }
  mem.wbPos = -1;
  mem.wbSrcAddr = -1;
  if (mem._fileLoadQueue !== null && mem._fileLoadQueue !== undefined) {
    filesOnSlotWriteComplete();
  } else if (mem.batchQueue.length > 0) {
    const nextAddr = mem.batchQueue.shift();
    sendMemorySlotToLoopBatch(nextAddr);
  } else if (mem._batchRunning) {
    mem._batchRunning = false;
    const btn = document.getElementById('mem-batch-btn');
    if (btn) { btn.textContent = 'BATCH WRITE ALL'; btn.disabled = false; }
    log('Batch write complete — all slots sent', 'ok');
    logSetup('OP.MEM_BATCH_DONE', 'Batch write complete: all 16 slots sent to Memory loop');
    filesCheckPartialSave();
  }
}

// Execute all write-phase operations for one tick: bus transfers, writeback pipelines, filter ticks
function tickWritePhase(sources, injExitBit) {
  // ── Unidirectional bus ticks (A-D)
  unidirectionalBusTick('a', sources.a);

  // ── Loop counters + global counter drains
  advanceLoopCountersOnTick();
  drainCounterQueueToBusA();
  drainCounterQueueToBusB();
  drainCounterQueueToBusC();
  drainCounterQueueToBusD();

  unidirectionalBusTick('b', sources.b);
  unidirectionalBusTick('c', sources.c);
  unidirectionalBusTick('d', sources.d);

  // ── Pattern Matcher + Threshold Gate ticks
  pmTick();
  advancePatternMatcherOutputBridge();
  pm2Tick();
  advancePatternMatcher2OutputBridge();
  tg1Tick();
  advanceThresholdGate1OutputBridge();
  tg2Tick();
  advanceThresholdGate2OutputBridge();

  // ── Memory slot writeback pipeline
  advanceMemoryWritebackPipeline();

  // ── Comparator writeback pipeline — sends packed flags word into ALU loop
  if (cmp.wbPos >= 0) {
    const bit = cmp.wbBuf[cmp.wbPos];
    loops['alu'].bits[0] = bit;
    if (cmp.wbPos === 0) {
      loops['alu'].lastWord = extractWordAtReadHead(loops['alu'].bits);
      ctrFire('alu', 'wordWritten');
      notifFire('alu', 'wordWritten');
    }
    ctrFire('alu', 'bitsWritten');
    loops['alu'].flash = 1.0;
    cmp.wbPos++;
    if (cmp.wbPos === 17) cmp.wbPos = -1;
  }

  // ── ALU writeback pipeline — sends answer register into ALU loop bit by bit
  if (alu.wbPos >= 0) {
    const bit = alu.wbBuf[alu.wbPos];
    loops['alu'].bits[0] = bit;
    if (alu.wbPos === 0) {
      loops['alu'].lastWord = extractWordAtReadHead(loops['alu'].bits);
      ctrFire('alu', 'wordWritten');
      notifFire('alu', 'wordWritten');
    }
    ctrFire('alu', 'bitsWritten');
    loops['alu'].flash = 1.0;
    alu.wbPos++;
    if (alu.wbPos === 17) alu.wbPos = -1;
  }

  // ── Inject write — always lands after the gate, gate state is irrelevant
  if (inj.wbPos < 0) {
    if (injExitBit === 1) {
      inj.wbPos = 1;
      ctrFire('working', 'wordWritten');
      notifFire('working', 'wordWritten');
      ctrFire('working', 'bitsWritten');
    }
  } else {
    ctrFire('working', 'bitsWritten');
    inj.wbPos++;
    if (inj.wbPos >= BPW) inj.wbPos = -1;
  }
  if (injExitBit !== 0) {
    loops['working'].bits[0] = injExitBit;
    loops['working'].flash = 1.0;
    if (injExitBit === 1) loops['working'].lastWord = extractWordAtReadHead(loops['working'].bits);
  }

  // ── Dual-channel bus ticks (E-I) + P2P/net buffer flush
  dualChannelBusTick('e', sources.e);
  p2pFlushWordBufferToQueue('l');
  p2pFlushWordBufferToQueue('r');
  dualChannelBusTick('f', sources.f);
  dualChannelBusTick('g', sources.g);
  netBusFlushWordBufferToQueue('h');
  dualChannelBusTick('h', sources.h);
  netBusFlushWordBufferToQueue('i');
  dualChannelBusTick('i', sources.i);

  // ── Working scratch + clock LED
  processWorkingScratchOnTick();
  clock.ledFlash = 1.0;
}

// ── Coordinator ──
function executeOneTick(){
  tickPreamble();
  const sources = tickSampleBusSources();
  const injExitBit = tickReadPhase();
  tickGatePhase();
  tickRotatePhase();
  tickWritePhase(sources, injExitBit);
}


// requestAnimationFrame driver — accumulates time, fires ticks, renders at screen rate
function mainLoop(now){
  if(!clock.running) return;
  const prevFrame=clock.lastFrame;
  const dt=now-clock.lastFrame;clock.lastFrame=now;
  // ── Flash decay (all visual glow values decay toward 0 each frame)
  const decay = dt / FLASH_DECAY_MS;
  DEFS.forEach(def => { loops[def.id].flash = Math.max(0, loops[def.id].flash - decay); });
  inj.flash = Math.max(0, inj.flash - decay);
  for (const busId in BUS_CONFIGS) {
    const bus = L21.buses[busId];
    for (const prop of BUS_CONFIGS[busId].flashProps) bus[prop] = Math.max(0, bus[prop] - decay);
  }
  for (const p of [pm, pm2, tg1, tg2]) {
    p.bridgeFlash = Math.max(0, p.bridgeFlash - decay);
    if (p.matchBridgeFlash  !== undefined) p.matchBridgeFlash  = Math.max(0, p.matchBridgeFlash  - decay);
    if (p.rejectBridgeFlash !== undefined) p.rejectBridgeFlash = Math.max(0, p.rejectBridgeFlash - decay);
  }
  clock.ledFlash = Math.max(0, clock.ledFlash - dt / LED_FLASH_DECAY_MS);
  if(EL.ledClock) EL.ledClock.classList.toggle('on', clock.ledFlash > 0);
  let _ticked=false;
  // Fire as many ticks as the elapsed time demands — allows speeds above ~60Hz to work correctly.
  // Cap catch-up ticks to prevent runaway after tab backgrounding.
  const tickInterval = 1000 / clock.hz;
  let catchUpLimit = MAX_TICKS_PER_FRAME;
  while(now - clock.lastTick >= tickInterval && catchUpLimit-- > 0) {
    executeOneTick();
    clock.lastTick += tickInterval;  // advance by exact interval, not to 'now', to avoid drift
    _ticked = true;
  }
  // If we hit the cap, reset clock.lastTick to now to avoid perpetual catch-up
  if(catchUpLimit <= 0) clock.lastTick = now;
  // Update clock accuracy display + challenge stats ~4× per second
  if(Math.round(now/STATS_DISPLAY_INTERVAL_MS) !== Math.round(prevFrame/STATS_DISPLAY_INTERVAL_MS)){
    challUpdateLiveStats();
    _k0();
    const el = EL.clockAccuracyDisplay;
    if(el){
      if(!clock.running || clock.accuracySamples.length < 2){
        el.textContent = clock.running ? '—' : 'STOPPED';
      } else {
        const target = 1000/clock.hz;
        const avg = clock.accuracySamples.reduce((a,b)=>a+b,0)/clock.accuracySamples.length;
        const pct = Math.min(Math.round(target/avg*100),100);
        const color = pct>=95?'#44cc88':pct>=75?'#ffaa22':'#ee4444';
        el.textContent = pct+'%';
        el.style.color = color;
      }
    }
  }
  // Render if ticked, or if any flash is still active (for decay animation)
  let _anyFlash = inj.flash > 0 || DEFS.some(d => loops[d.id].flash > 0);
  if (!_anyFlash) {
    for (const busId in BUS_CONFIGS) {
      const bus = L21.buses[busId];
      for (const prop of BUS_CONFIGS[busId].flashProps) { if (bus[prop] > 0) { _anyFlash = true; break; } }
      if (_anyFlash) break;
    }
  }
  if(_ticked||_anyFlash) renderAllComponents();
  requestAnimationFrame(mainLoop);
}


// ── Bus toggle delegates — required by data-action HTML attributes ────────────
// Toggle Bus A on/off (data-action binding)
function toggleBus()  { toggleBusGeneric('a'); }
// Toggle Bus B on/off (data-action binding)
function toggleBusB() { toggleBusGeneric('b'); }
// Toggle Bus C on/off (data-action binding)
function toggleBusC() { toggleBusGeneric('c'); }
// Toggle Bus D on/off (data-action binding)
function toggleBusD() { toggleBusGeneric('d'); }
// Toggle Bus E on/off (data-action binding)
function toggleBusE() { toggleBusGeneric('e'); }
// Toggle Bus F on/off (data-action binding)
function toggleBusF() { toggleBusGeneric('f'); }
// Toggle Bus G on/off (data-action binding)
function toggleBusG() { toggleBusGeneric('g'); }
// Toggle Bus H on/off (data-action binding)
function toggleBusH() { toggleBusGeneric('h'); }
// Toggle Bus I on/off (data-action binding)
function toggleBusI() { toggleBusGeneric('i'); }

// Update an inline bus toggle button label and CSS class
function syncBusInlineButtonState(inlineId, active, label) {
  const b = document.getElementById(inlineId);
  if (!b) return;
  b.textContent = (active ? '⏹ ' : '▶ ') + label;
  b.classList.toggle('on', active);
  b.classList.toggle('off', !active);
}

// Update a sidebar bus toggle button to match current active state
function syncBusSidebarButton(busId) {
  const cfg = BUS_CONFIGS[busId];
  const bus = L21.buses[busId];
  const btn = document.getElementById(cfg.toggleBtnId);
  if (btn) {
    btn.textContent = bus.active ? '\u2297 TURN ' + cfg.label.toUpperCase() + ' OFF' : '\u22B3 TURN ' + cfg.label.toUpperCase() + ' ON';
    btn.className = bus.active ? cfg.onClass : cfg.offClass;
  }
  syncBusInlineButtonState(cfg.inlineBtnId, bus.active, busId.toUpperCase());
}

// Manually advance Bus A by one bit (single-step mode)
function stepBus(){
  if(getBusFlowDirection('a')==='invalid') return;
  const dir=getBusFlowDirection('a');
  let exitB;
  if(dir==='ltr'){exitB=L21.buses.a.bits[BUS_N-1];for(let i=BUS_N-1;i>0;i--)L21.buses.a.bits[i]=L21.buses.a.bits[i-1];L21.buses.a.bits[0]=0;}
  else{exitB=L21.buses.a.bits[0];for(let i=0;i<BUS_N-1;i++)L21.buses.a.bits[i]=L21.buses.a.bits[i+1];L21.buses.a.bits[BUS_N-1]=0;}
  L21.buses.a.transferBitsRemaining = deliverBitToLoop(exitB, L21.buses.a.dst, L21.buses.a.transferBitsRemaining);
  L21.buses.a.flash=1.0;
  renderAllComponents();
}

// Manually rotate a loop by one bit position (single-step mode)
function stepLoop(id){
  const lp=loops[id];
  lp.bits.push(lp.bits.shift());
  lp.flash=1.0;
  if(lp.bits[readHeadBitIndex(id)]===1) lp.lastWord=extractWordAtReadHead(lp.bits, readHeadBitIndex(id));
  renderAllComponents();
}

// Toggle the paused state of a loop
function togglePause(id){
  const lp=loops[id];
  lp.paused=!lp.paused;
  const btn=document.getElementById('pause-btn-'+id);
  if(lp.paused){
    btn.textContent='▶';btn.className='pause-btn loop-paused';
  } else {
    btn.textContent='⏸';btn.className='pause-btn loop-running';
  }
  renderAllComponents();
}

// Toggle the gate (open/closed) on a loop
function toggleGate(id){
  const lp=loops[id];
  lp.gateOpen=!lp.gateOpen;
  if(logger.active) stats.gateToggles++;
  const btn=document.getElementById('gate-btn-'+id);
  if(lp.gateOpen){
    btn.textContent='CLOSE GATE';btn.className='gate-btn gate-open';
    log(id.toUpperCase()+' gate OPEN — data flows','info');
  } else {
    btn.textContent='GATE ⊗';btn.className='gate-btn gate-closed';
    log(id.toUpperCase()+' gate CLOSED — data dies','err');
  }
  renderAllComponents();
}

// ================================================================
//  ALU STATE
// ================================================================

// ALU state — short alias for L21.alu
const alu = L21.alu;


// Toggle ALU auto-writeback mode (auto-send result to loop after compute)
function toggleAluAutoWriteback() {
  alu.autoWriteback = !alu.autoWriteback;
  alu.autoWritebackPrevResult = alu.result;
  alu._autoWbPending = false;
  const btn = document.getElementById('alu-auto-wb-btn');
  if(btn) {
    btn.textContent = alu.autoWriteback ? 'AUTO-SEND: ON' : 'AUTO-SEND: OFF';
    btn.className = 'pm-toggle-btn ' + (alu.autoWriteback ? 'pm-destr-on' : 'pm-destr-off');
    btn.style.width = '100%';
    btn.style.marginTop = '3px';
  }
  log(`ALU auto-send: ${alu.autoWriteback ? 'ON' : 'OFF'}`, 'info');
  logSetup(`OP.ALU_AUTO_WB ${alu.autoWriteback ? 'ON' : 'OFF'}`, `Operator ${alu.autoWriteback ? 'enables' : 'disables'} ALU answer auto-send`);
}

// Toggle ALU between 3-operand and ignore-3rd-operand modes
function toggleAluMode() {
  alu.ignore3 = !alu.ignore3;
  const btn = document.getElementById('alu-mode-btn');
  btn.textContent = alu.ignore3 ? 'MODE: 12-BIT' : 'MODE: 16-BIT';
  btn.className   = alu.ignore3 ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  log(`ALU mode: ${alu.ignore3 ? '12-bit (top 4 address bits masked)' : '16-bit (full width)'}`, 'info');
  logSetup(`OP.ALU_MODE ${alu.ignore3 ? '12BIT' : '16BIT'}`, `Operator sets ALU to ${alu.ignore3 ? '12-bit' : '16-bit'} mode`);
  aluCompute();
}

// Select an ALU operation (ADD, SUB, AND, OR, etc.)
function selOp(op) {
  alu.op = op;
  document.querySelectorAll('.alu-op').forEach(el => {
    el.classList.toggle('sel-op', el.dataset.op === op);
  });
  aluCompute();
  logSetup(`OP.ALU_OP ${op}`,`Operator selects ALU operation: ${op}`);
}

// Set the ALU capture route (which register captures the next word)
function setRoute(r) {
  alu.route = r;
  ['off','a','b','c','d'].forEach(id => {
    const el = document.getElementById('route-'+id);
    if (el) el.classList.toggle('active', (r === null && id==='off') || r===id);
  });
  const label = r ? `HEAD → REG ${r.toUpperCase()}` : 'HEAD route OFF';
  log(label, 'info');
  logSetup(`OP.ALU_ROUTE ${r ? r.toUpperCase() : 'OFF'}`,`Operator sets ALU capture route to ${r || 'off'}`);
}

// Toggle route hold — when on, capture route persists after capture completes
function toggleRouteHold() {
  alu.routeHold = !alu.routeHold;
  const btn = document.getElementById('route-hold-btn');
  if (btn) {
    btn.textContent = alu.routeHold ? 'HOLD' : 'ADVANCE';
    btn.classList.toggle('active', alu.routeHold);
  }
  log(`ALU head: ${alu.routeHold ? 'HOLD (stays on selected register)' : 'ADVANCE (moves A→B→C→D)'}`, 'info');
  logSetup(`OP.ALU_ROUTE_HOLD ${alu.routeHold ? 'ON' : 'OFF'}`, `Operator sets ALU route to ${alu.routeHold ? 'hold' : 'advance'} mode`);
}

// Set which ALU register is used as operand A or B source
function setOpSrc(operand, reg) {
  // operand: 'a' or 'b' (which operand slot), reg: 'a'|'b'|'c'|'d'
  if (operand === 'a') alu.opASrc = reg;
  else alu.opBSrc = reg;
  // Update highlight
  document.querySelectorAll(`.opa-sel-btn`).forEach(el =>
    el.classList.toggle('active', operand==='a' && el.dataset.reg===reg));
  document.querySelectorAll(`.opb-sel-btn`).forEach(el =>
    el.classList.toggle('active', operand==='b' && el.dataset.reg===reg));
  aluCompute();
  logSetup(`OP.ALU_OPSRC OP${operand.toUpperCase()}=${reg.toUpperCase()}`,
           `Operator sets Operand ${operand.toUpperCase()} source to Reg ${reg.toUpperCase()}`);
}

// Called each tick: if a word just arrived at ALU head AND route is set,
// capture it one bit per tick into the capture buffer, then commit to register.
function aluTickCapture() {
  const lp = loops['alu'];

  // If we're mid-capture, keep pulling bits from the head area
  if (alu.capTarget !== null) {
    // The bit that just passed the head (now at position bits[N-1] after rotate)
    // is our next capture bit. We sample it before the gate zeroes it.
    // Actually we sample bits[0] PRE-rotate in main tick — handled via aluCaptureBit()
    return;
  }

  // Start a new capture when: route is set AND marker bit just arrived at read dot
  if (alu.route && lp.bits[readHeadBitIndex('alu')] === 1) {
    alu.capTarget = alu.route;
    alu.capPos    = 0;
    alu.capBuf.fill(0);
    // Don't consume the first bit here — aluCaptureBit() gets called this same tick
  }
}

// Called pre-rotate with the raw bit at bits[0]
function aluCaptureBit(bit) {
  if (alu.capTarget === null) return;
  alu.capBuf[alu.capPos] = bit;
  alu.capPos++;

  // Update capture bar display
  const barId = 'alu-capture-' + alu.capTarget;
  const bar = document.getElementById(barId);
  if (bar) {
    [...bar.children].forEach((s, i) => {
      s.classList.toggle('lit', i < alu.capPos && alu.capBuf[i] === 1);
    });
  }

  if (alu.capPos === BPW) {
    // Full word captured: bit 0 = marker, bits 1-11 = data
    let data = 0;
    for (let b=0;b<16;b++) data = (data<<1) | alu.capBuf[1+b];
    alu[alu.capTarget] = data;
    aluUpdateDisplay();
    log(`REG ${alu.capTarget.toUpperCase()} ← ${data} (0x${data.toString(16).toUpperCase().padStart(4,'0')})`,'info');
    flagAluDisplayAsStale(); logOp(`BUS.A.XFER ${formatWordAsBinary(data|0x10000)} → ALU.REG.${alu.capTarget.toUpperCase()}`,`Bus delivers ${data} into ALU operand ${alu.capTarget.toUpperCase()}`);
    aluCompute();
    // Clear capture bar
    if (bar) [...bar.children].forEach(s => s.classList.remove('lit'));
    alu.capTarget = null;
    alu.capPos    = 0;
    alu.capBuf.fill(0);
    // Auto-advance route to next register (unless HOLD mode)
    if (!alu.routeHold) {
      if (alu.route === 'a') setRoute('b');
      else if (alu.route === 'b') setRoute('c');
      else if (alu.route === 'c') setRoute('d');
      else setRoute(null);
    }
  }
}

// Compute result whenever op, A, or B changes
// ── Comparator state (shares A/B operands with ALU)
// Comparator state — short alias for L21.cmp
const cmp = L21.cmp;

// Compute all comparator flags from ALU registers A and B
function cmpCompute() {
  const a = alu[alu.opASrc] !== null ? alu[alu.opASrc] : 0;
  const b = alu[alu.opBSrc] !== null ? alu[alu.opBSrc] : 0;
  cmp.flags.gt  = a >  b;
  cmp.flags.lt  = a <  b;
  cmp.flags.eq  = a === b;
  cmp.flags.gte = a >= b;
  cmp.flags.lte = a <= b;
  cmp.flags.ne  = a !== b;
  // Pack into 6 bits: GT LT EQ GTE LTE NE
  cmp.packed = (cmp.flags.gt?32:0)|(cmp.flags.lt?16:0)|(cmp.flags.eq?8:0)|
               (cmp.flags.gte?4:0)|(cmp.flags.lte?2:0)|(cmp.flags.ne?1:0);
  // Update flag displays
  const ids = ['gt','lt','eq','gte','lte','ne'];
  ids.forEach(f => {
    const el = document.getElementById('cmp-flag-'+f);
    if(el) el.classList.toggle('lit', cmp.flags[f]);
  });
  // Update packed result bits display
  const bitsEl = document.getElementById('cmp-result-bits');
  if(bitsEl) {
    if(!bitsEl.children.length){for(let i=0;i<BPW;i++){const d=document.createElement('div');d.className='alu-cap-slot';bitsEl.appendChild(d);}}
    const children = bitsEl.children;
    if(children.length === BPW) {
      // marker always 1 if any flag set, then 5 spare zeros, then 6 flag bits
      const word12 = (cmp.packed > 0 ? 0x10000 : 0) | cmp.packed;
      for(let i=0;i<12;i++) {
        const bit = (word12 >> (11-i)) & 1;
        const el = children[i];
        el.style.background = bit ? '#00b8e0' : '#c8d8e8';
        el.style.boxShadow  = bit ? '0 0 5px #00b8e0' : 'none';
      }
    }
  }
}

// Write the packed comparator flags as a word into the ALU Loop
function cmpWriteback() {
  // Push packed comparator word into ALU loop
  if(cmp.wbPos >= 0){ log('Comparator writeback already running','err'); return; }
  const word = (0x10000 | cmp.packed);
  cmp.wbBuf[0] = 1;
  // 11 data bits: top 5 are zero, low 6 are flags
  for(let b=15;b>=0;b--) cmp.wbBuf[16-b] = (cmp.packed>>b)&1;
  cmp.wbPos = 0;
  ctrFire('alu', 'cmpAnswerSent');
  log(`CMP → ALU loop: packed flags 0x${cmp.packed.toString(16).toUpperCase().padStart(2,'0')}`, 'info');
}

// Execute the selected ALU operation on the current operands
function aluCompute() {
  flagAluDisplayAsStale();
  const opAVal = alu[alu.opASrc];
  const opBVal = alu[alu.opBSrc];
  // Clear result if Op A source register is empty
  if (opAVal === null) {
    alu.result = null;
    alu.flags = { zero:false, carry:false, overflow:false, sign:false, parity:false };
    aluUpdateDisplay();
    return;
  }
  // In 12-bit mode, mask operands to low 12 bits (top 4 addr bits unused)
  const aFull = opAVal, bFull = opBVal !== null ? opBVal : 0;
  const a = alu.ignore3 ? (aFull & 0x0FFF) : aFull;
  const b = alu.ignore3 ? (bFull & 0x0FFF) : bFull;
  const DMAX = alu.ignore3 ? 0x0FFF : 0xFFFF;  // max data value
  const SBIT = alu.ignore3 ? 0x0800 : 0x8000; // sign bit
  const CMSK = alu.ignore3 ? 0x1000 : 0x10000; // carry bit position
  const RMSK = alu.ignore3 ? 0x1FFF : 0x1FFFF; // result mask (carry+data)
  const OMSK = alu.ignore3 ? 0x0800 : 0x8000;  // overflow sign mask
  // Result stored as carry+data bits (up to 17 bits for 16-bit mode, 13 bits for 12-bit mode)
  let result12 = 0, carry = false, overflow = false;
  switch(alu.op) {
    // ── Arithmetic operations ──
    case 'ADD': {
      const r = a + b; carry = r > DMAX;
      result12 = r & RMSK;
      overflow = !((a^b)&SBIT) && !!((a^r)&SBIT);
      break;
    }
    case 'SUB': {
      const r = a - b; carry = r < 0;
      result12 = ((r % (DMAX+1)) + (DMAX+1)) & RMSK;
      overflow = !!((a^b)&SBIT) && !!((a^r)&SBIT);
      break;
    }
    // ── Bitwise operations ──
    case 'AND': result12=(a&b)&DMAX; break;
    case 'OR':  result12=(a|b)&DMAX; break;
    case 'XOR': result12=(a^b)&DMAX; break;
    // ── Unary operations ──
    case 'NOT': result12=(~a)&DMAX; break;
    // ── Shift operations ──
    case 'SHL': carry=!!(a&SBIT); result12=((carry?CMSK:0)|(a<<1))&RMSK; break;
    case 'SHR': carry=!!(a&0x01); result12=(a>>1)&DMAX; break;
    case 'NEG': { const r=(~a+1)&DMAX; result12=r; overflow=(a===SBIT); carry=(a!==0); break; }
    case 'INC': { const r=a+1; carry=r>DMAX; result12=r&DMAX; overflow=(a===SBIT-1); break; }
    case 'DEC': { const r=a-1; carry=r<0; result12=((r%(DMAX+1))+(DMAX+1))&DMAX; overflow=(a===SBIT); break; }
    case 'MOD': { carry=(b===0); result12=b!==0 ? a%b : 0; break; }
    case 'ROR': { carry=!!(a&0x01); result12=((a>>1)|(carry?SBIT:0))&DMAX; break; }
    case 'ABS': { const neg=!!(a&SBIT); carry=neg; result12=neg ? (~a+1)&DMAX : a; overflow=(a===SBIT); break; }
    case 'NAND': result12=(~(a&b))&DMAX; break;
    case 'NOR':  result12=(~(a|b))&DMAX; break;
    case 'XNOR': result12=(~(a^b))&DMAX; break;
  }
  alu.result = result12;
  const resultD = result12 & DMAX;  // data bits only
  alu.flags.zero=resultD===0; alu.flags.carry=(CARRY_OPS.has(alu.op)) ? carry : !!(result12&CMSK); alu.flags.overflow=overflow;
  alu.flags.sign=!!(resultD&SBIT);
  // Popcount for 16-bit value — counts set bits without string allocation
  let _pc = resultD - ((resultD >> 1) & 0x5555);
  _pc = (_pc & 0x3333) + ((_pc >> 2) & 0x3333);
  _pc = (_pc + (_pc >> 4)) & 0x0F0F;
  _pc = (_pc + (_pc >> 8)) & 0xFF;
  alu.flags.parity = (_pc % 2) === 0;
  const fs=[alu.flags.zero?'Z':'',alu.flags.carry?'C':'',alu.flags.overflow?'V':'',alu.flags.sign?'S':''].filter(Boolean).join('')||'—';
  const unaryOp = UNARY_OPS.has(alu.op);
  const opEl = document.getElementById('alu-answer-op');
  if (opEl) opEl.textContent = unaryOp ? `${alu.op}(${a})` : `${a} ${alu.op} ${b}`;
  log(`${alu.op} ${a}${unaryOp?'':' & '+b} = ${resultD} [${fs}]`,'ok');
  if(logger.active) stats.aluOpsExecuted++;
  cmpCompute(); // recompute comparator whenever operands change
  logOp(`ALU.EXEC ${alu.op} OPA=${formatWordAsBinary(aFull|0x10000)} OPB=${formatWordAsBinary(bFull|0x10000)} RES=${formatWordAsBinary(result12)} FLAGS=${fs}`,`ALU executes ${alu.op}: ${a}${unaryOp?'':' & '+b} = ${resultD} [${fs}]`);
  aluUpdateDisplay();
  // Auto-writeback: if enabled and result changed, fire writeback
  if(alu.autoWriteback && alu.result !== null && alu.result !== alu.autoWritebackPrevResult) {
    if(clock.running) {
      // Machine is running — schedule for the next tick so writeback enters the loop cleanly
      alu._autoWbPending = true;
    } else {
      // Machine is stopped — fire immediately (no tick is coming to consume the pending flag).
      // If a previous writeback is still in the pipeline (wbPos >= 0), it hasn't drained yet
      // because the machine isn't running. Reset wbPos so the new result can go out.
      if (alu.wbPos >= 0) {
        alu.wbPos = -1;
      }
      alu.autoWritebackPrevResult = alu.result;
      aluWriteback();
      log('AUTO-SEND: answer sent to loop', 'info');
    }
  }
}

// Clear all four ALU input registers (A, B, C, D)
function aluClearAll() {
  ['a','b','c','d'].forEach(r => { alu[r] = null; });
  alu.result = null;
  alu.flags = { zero:false, carry:false, overflow:false, sign:false, parity:false };
  const opEl = document.getElementById('alu-answer-op');
  if (opEl) opEl.textContent = '—';
  flagAluDisplayAsStale();
  aluCompute();
  aluUpdateDisplay();
  log('ALU all registers cleared', 'info');
  logSetup('OP.ALU_CLR_ALL', 'Operator clears all ALU registers');
}

// Clear a single ALU register to null
function aluClearReg(reg) {
  flagAluDisplayAsStale();
  if (reg === 'c' || reg === 'd') {
    alu[reg] = null;
    aluCompute();
    aluUpdateDisplay();
    log(`REG ${reg.toUpperCase()} cleared`, 'info');
    return;
  }
  if (reg === 'r') {
    alu.result = null;
    alu.flags = { zero:false, carry:false, overflow:false, sign:false, parity:false };
    const opEl = document.getElementById('alu-answer-op');
    if (opEl) opEl.textContent = '—';
  } else {
    alu[reg] = null;
    aluCompute();
  }
  aluUpdateDisplay();
  cmpCompute();
  log(`REG ${reg.toUpperCase()} cleared`, 'info');
  logSetup(`OP.ALU_CLR REG=${reg.toUpperCase()}`,`Operator clears ALU register ${reg.toUpperCase()}`);
}

// Write the ALU result as a word into the ALU Loop
function aluWriteback() {
  if (alu.result===null){log('No result to write back','err');return;}
  if (alu.wbPos>=0){log('Writeback already in progress','err');return;}
  // Load 9-bit word into pipeline: [marker, d7..d0]
  alu.wbBuf[0]=1;
  for(let b=0;b<16;b++) alu.wbBuf[1+b]=(alu.result>>(15-b))&1;
  alu.wbPos=0;
  if(logger.active) stats.aluWritebacks++;
  ctrFire('alu', 'aluAnswerSent');
  const _rdisplay = alu.result !== null ? (alu.ignore3 ? (alu.result&0x0FFF) : (alu.result&0xFFFF)) : '—';
  log(`R → ALU loop: ${_rdisplay}`,'ok');
  logSetup(`OP.ALU_WB ${formatWordAsBinary(alu.result)}`,`Operator sends ALU answer ${_rdisplay} to ALU loop head`);
  renderAllComponents();
}

// Write a specific ALU register value as a word into the ALU Loop
function aluWritebackReg(reg) {
  const val = alu[reg];
  if (val===null){log(`Reg ${reg.toUpperCase()} is empty`,'err');return;}
  if (alu.wbPos>=0){log('Writeback already in progress','err');return;}
  // Reuse the same writeback pipeline as the result register
  alu.wbBuf[0]=1;
  for(let b=0;b<16;b++) alu.wbBuf[1+b]=(val>>(15-b))&1;
  alu.wbPos=0;
  if(logger.active) stats.aluWritebacks++;
  ctrFire('alu', 'regSent');
  log(`${reg.toUpperCase()} → ALU loop: ${val}`,'ok');
  logSetup(`OP.ALU_WB_REG${reg.toUpperCase()} ${formatWordAsBinary(val|0x10000)}`,`Operator sends Reg ${reg.toUpperCase()} value ${val} to ALU loop head`);
  renderAllComponents();
}

// Build the 16 bit-display elements for an ALU register
function aluInitBitEls(containerId) {
  const el=document.getElementById(containerId);
  if(!el||el.children.length) return;
  for(let i=0;i<16;i++){const d=document.createElement('div');d.className='alu-bit';el.appendChild(d);}
}
// Build the bit-display elements for the ALU result register
function aluInitResultEls() {
  const el=document.getElementById('alu-bits-r');
  if(!el||el.children.length) return;
  // marker bit + 4 upper data bits + gap + 12 lower data bits
  const mk=document.createElement('div'); mk.className='alu-bit alu-bit-mk'; el.appendChild(mk);
  const g1=document.createElement('div'); g1.style.cssText='width:2px;flex-shrink:0;'; el.appendChild(g1);
  for(let i=0;i<4;i++){const d=document.createElement('div');d.className='alu-bit';el.appendChild(d);}
  const g2=document.createElement('div'); g2.style.cssText='width:2px;flex-shrink:0;'; el.appendChild(g2);
  for(let i=0;i<12;i++){const d=document.createElement('div');d.className='alu-bit';el.appendChild(d);}
}
// Build the capture progress bar for an ALU register
function aluInitCapBar(id) {
  const el=document.getElementById(id);
  if(!el||el.children.length) return;
  for(let i=0;i<BPW;i++){const d=document.createElement('div');d.className='alu-cap-slot';el.appendChild(d);}
}

// Refresh all ALU register displays, flags, and capture indicators
function aluUpdateDisplay() {
  if(!alu.displayNeedsRefresh) return; alu.displayNeedsRefresh=false;
  aluInitBitEls('alu-bits-a'); aluInitBitEls('alu-bits-b');
  aluInitBitEls('alu-bits-c'); aluInitBitEls('alu-bits-d');
  aluInitResultEls();
  aluInitCapBar('alu-capture-a'); aluInitCapBar('alu-capture-b');
  aluInitCapBar('alu-capture-c'); aluInitCapBar('alu-capture-d');
  const _elCache={'alu-bits-a':EL.aluBitsA,'alu-bits-b':EL.aluBitsB,'alu-bits-c':EL.aluBitsC,'alu-bits-d':EL.aluBitsD};
  // Set the individual bit display elements for a register
  function setBits(id,val,green){
    const el=_elCache[id]||document.getElementById(id);if(!el)return;
    [...el.children].forEach((d,i)=>{
      const bit=val!==null?(val>>(15-i))&1:0;
      d.classList.remove('lit','lit-g');
      if(bit) d.classList.add(green?'lit-g':'lit');
      // Grey out top 8 bits (i=0..7 = bits 15..8) in 8-bit mode
      d.classList.toggle('dim', alu.ignore3 && i < 4);
    });
  }
  const _valCache={'alu-val-a':EL.aluValA,'alu-val-b':EL.aluValB,'alu-val-c':EL.aluValC,'alu-val-d':EL.aluValD};
  // Set the decimal/hex value label for a register
  function setVal(id,val){
    const el=_valCache[id]||document.getElementById(id);if(!el)return;
    if(val===null){el.textContent='—';return;}
    const v = alu.ignore3 ? (val & 0x0FFF) : val;
    const pad = alu.ignore3 ? 3 : 4;
    el.textContent=`${v} / 0x${v.toString(16).toUpperCase().padStart(pad,'0')}`;
  }
  setBits('alu-bits-a',alu.a,false); setBits('alu-bits-b',alu.b,false);
  setBits('alu-bits-c',alu.c,false); setBits('alu-bits-d',alu.d,false);
  setVal('alu-val-c',alu.c); setVal('alu-val-d',alu.d);
  // Highlight operand source selectors
  ['a','b','c','d'].forEach(reg => {
    const eA = EL.opaSel[reg];
    const eB = EL.opbSel[reg];
    if(eA) eA.classList.toggle('active', alu.opASrc===reg);
    if(eB) eB.classList.toggle('active', alu.opBSrc===reg);
  });
  // Result: 9-bit display (bit8=carry/marker, bits7-0=data)
  const rEl=EL.aluBitsR||document.getElementById('alu-bits-r');
  if(rEl) {
    const hasResult = alu.result !== null;
    const r9 = hasResult ? alu.result : 0;
    const children = [...rEl.children].filter(c=>!c.style.width); // skip gap divs
    children.forEach((d,i)=>{
      d.classList.remove('lit-g');
      // i=0 is carry/marker bit, i=1..11 are data bits 10..0
      const bit = hasResult ? (r9 >> (16-i)) & 1 : 0;
      if(bit) d.classList.add('lit-g');
      // Grey out top 3 data bits (i=1,2,3) in 8-bit mode
      d.classList.toggle('dim', alu.ignore3 && i >= 1 && i <= 3);
    });
  }
  // Also update the numeric display to show full 9-bit value
  const rValEl = EL.aluValR||document.getElementById('alu-val-r');
  if(rValEl) {
    if(alu.result===null) { rValEl.textContent='—'; }
    else {
      const rFull = alu.result & 0xFFFF;
      const rDisp = alu.ignore3 ? (alu.result & 0x0FFF) : rFull;
      const carry = (alu.result >> 16) & 1;
      const pad = alu.ignore3 ? 3 : 4;
      rValEl.textContent = carry
        ? `${alu.result} (C+${rDisp})`
        : `${rDisp} / 0x${rDisp.toString(16).toUpperCase().padStart(pad,'0')}`;
    }
  }
  setVal('alu-val-a',alu.a); setVal('alu-val-b',alu.b);
  if(EL.flagZero) EL.flagZero.classList.toggle('lit',!!alu.flags.zero);
  if(EL.flagCarry) EL.flagCarry.classList.toggle('lit',!!alu.flags.carry);
  if(EL.flagOverflow) EL.flagOverflow.classList.toggle('lit',!!alu.flags.overflow);
  if(EL.flagSign) EL.flagSign.classList.toggle('lit',!!alu.flags.sign);
  if(EL.flagParity) EL.flagParity.classList.toggle('lit',!!alu.flags.parity);
}

// ================================================================
//  MEMORY SEND TO SLOTS STATE
// ================================================================
// Memory state — short alias for L21.mem
const mem = L21.mem;

// Compute the current memory address from the 4 address bits
function getCurrentMemoryAddress() {
  return (mem.addrBits[0]<<3)|(mem.addrBits[1]<<2)|(mem.addrBits[2]<<1)|mem.addrBits[3];
}

// Toggle the memory write-to-slots mode on/off
function toggleWriteToSlots() {
  mem.writeToSlots = !mem.writeToSlots;
  if (mem.writeToSlots) {
    // Always reset auto-inc state so the sequence starts clean from the configured address
    mem.autoIncActive = false;
    mem.autoIncCount = 0;
    mem.capPos = -1;
    mem.capAddr = -1;
    mem.capBuf.fill(0);
  }
  const btn = document.getElementById('mem-write-slots-btn');
  btn.textContent = mem.writeToSlots ? 'WRITE TO SLOTS: ON' : 'WRITE TO SLOTS: OFF';
  btn.classList.toggle('active', mem.writeToSlots);
  log(`Memory slot write ${mem.writeToSlots?'ENABLED — words saved as they pass':'DISABLED'}`, 'info');
  logSetup(`OP.MEM_WRITE_SLOTS ${mem.writeToSlots?'ON':'OFF'}`, `Operator ${mem.writeToSlots?'enables':'disables'} write-to-slots`);
  refreshMemoryDisplay();
}

// Toggle address-read mode (first bits of word determine slot address)
function toggleAddrRead() {
  mem.addrRead = !mem.addrRead;
  const btn = document.getElementById('mem-addr-read-btn');
  btn.textContent = mem.addrRead ? 'ADDR-READ: ON' : 'ADDR-READ: OFF';
  btn.classList.toggle('active', mem.addrRead);
  log(`Address-read mode ${mem.addrRead?'ON — first 3 bits of word determine destination slot':'OFF'}`, 'info');
  logSetup(`OP.MEM_ADDR_READ ${mem.addrRead?'ON':'OFF'}`, `Operator ${mem.addrRead?'enables':'disables'} address-read mode`);
}

// Flip a single memory address bit and update the display
function flipMemAddr(bit) {
  if(_drag.handled) return;
  flagMemoryDisplayAsStale();
  // bit = 3,2,1,0 → index = 0,1,2,3
  const idx = 3 - bit;
  mem.addrBits[idx] ^= 1;
  const wrap = document.getElementById('maddr-' + bit);
  wrap.classList.toggle('on', mem.addrBits[idx] === 1);
  const newAddr = getCurrentMemoryAddress();
  document.getElementById('mem-addr-display').textContent = newAddr;
  refreshMemoryDisplay();
  logSetup(`OP.MEM_ADDR ${newAddr}`,`Operator sets memory address to ${newAddr}`);
}

// Clear a single memory slot to null
function clearMemSlot(addr) {
  mem.slots[addr] = null;
  flagMemoryDisplayAsStale(); refreshMemoryDisplay();
  log(`MEM[${addr}] cleared`, 'info');
  logSetup(`OP.MEM_CLR SLOT=${addr}`,`Operator clears memory slot ${addr}`);
}

// Clear all 16 memory slots to null
function clearAllMemSlots() {
  mem.slots = new Array(mem.slots.length).fill(null);
  flagMemoryDisplayAsStale(); refreshMemoryDisplay();
  log('All memory slots cleared', 'info');
  logSetup(`OP.MEM_CLR_ALL`, `Operator clears all memory slots`);
}

// Toggle destructive read mode (slot zeroed after writeback)
function toggleDestructive() {
  mem.destructive = !mem.destructive;
  const btn = document.getElementById('mem-destr-btn');
  if (mem.destructive) {
    btn.textContent = 'TURN DESTRUCT OFF';
    btn.className = 'mem-destr-btn destr-on';
  } else {
    btn.textContent = 'TURN DESTRUCT ON';
    btn.className = 'mem-destr-btn destr-off';
  }
  log(`Destructive read ${mem.destructive?'ON':'OFF'}`, 'info');
  logSetup(`OP.MEM_DESTRUCT ${mem.destructive?'ON':'OFF'}`,`Operator turns destructive read ${mem.destructive?'on':'off'}`);
}

// Toggle memory auto-increment mode
function toggleAutoInc() {
  mem.autoInc = !mem.autoInc;
  const btn = document.getElementById('mem-autoinc-btn');
  // Always reset sequence state so a fresh toggle starts clean
  mem.autoIncActive = false;
  mem.autoIncCount = 0;
  if (mem.autoInc) {
    // Re-read the start input to pick up any manual changes
    const startEl = document.getElementById('mem-autoinc-start');
    if (startEl) {
      const parsed = parseInt(startEl.value, 10);
      if (!isNaN(parsed)) mem.autoIncStart = Math.max(0, Math.min(15, parsed));
    }
    setAutoIncStart(mem.autoIncStart);
    btn.textContent = 'TURN AUTO-INC OFF';
    btn.className = 'mem-destr-btn destr-on';
  } else {
    btn.textContent = 'TURN AUTO-INC ON';
    btn.className = 'mem-destr-btn destr-off';
  }
  log(`Auto-increment ${mem.autoInc?'ON (start: '+mem.autoIncStart+')':'OFF'}`, 'info');
  logSetup(`OP.MEM_AUTOINC ${mem.autoInc?'ON':'OFF'} START=${mem.autoIncStart}`,`Operator turns auto-increment ${mem.autoInc?'on':'off'} (start: ${mem.autoIncStart})`);
}

// Set the starting address for memory auto-increment
function setAutoIncStart(val) {
  val = Math.max(0, Math.min(15, parseInt(val)||0));
  mem.autoIncStart = val;
  // sync the 4-bit address levers to match
  for (let bit=0; bit<4; bit++) {
    const b = (val >> (3-bit)) & 1;
    mem.addrBits[bit] = b;
    const wrap = document.getElementById('maddr-' + (3-bit));
    if (wrap) wrap.classList.toggle('on', b===1);
  }
  document.getElementById('mem-addr-display').textContent = val;
  document.getElementById('mem-autoinc-start').value = val;
  refreshMemoryDisplay();
}

// Advance the auto-increment address pointer to the next slot
function advanceMemoryAutoIncrementAddress() {
  mem.autoIncCount++;
  if (mem.autoIncCount >= 16) {
    mem.autoIncActive = false;
    mem.autoIncCount = 0;
    log('Auto-increment sequence complete (16 slots)', 'ok');
    return;
  }
  const next = (mem.autoIncStart + mem.autoIncCount) % 16;
  for (let bit=0; bit<4; bit++) {
    const b = (next >> (3-bit)) & 1;
    mem.addrBits[bit] = b;
    const wrap = document.getElementById('maddr-' + (3-bit));
    if (wrap) wrap.classList.toggle('on', b===1);
  }
  document.getElementById('mem-addr-display').textContent = next;
  refreshMemoryDisplay();
  log(`Auto-inc → slot ${next}`, 'info');
}


// Internal: start writeback for a specific slot as part of batch (skips busy check)
function sendMemorySlotToLoopBatch(addr) {
  const val = mem.slots[addr];
  // Null slots write a zero word (marker=0, data=0) to preserve slot-position
  // information in the stream. Every batch write always produces exactly 16 words.
  if (val === null) {
    // Send marker=1, data=0. The capture pipeline requires marker=1 to
    // start a capture, so null slots must use marker=1 to ensure the
    // address pointer advances correctly through auto-increment.
    // Trade-off: null and value-zero are indistinguishable on load.
    mem.wbBuf[0] = 1;                          // marker = 1
    for (let b = 0; b < 16; b++) mem.wbBuf[1 + b] = 0;  // data = 0
    mem.wbPos = 0;
    mem.wbSrcAddr = -1;
    log(`BATCH MEM[${addr}] → Memory loop: 0 (empty slot)`, 'info');
    logSetup(`OP.MEM_BATCH_SLOT SLOT=${addr} EMPTY`,
             `Batch write slot ${addr}: empty slot as zero value (marker=1 data=0)`);
    return;
  }
  mem.wbBuf[0] = 1;
  for (let b = 0; b < 16; b++) mem.wbBuf[1 + b] = (val >> (15 - b)) & 1;
  mem.wbPos = 0;
  mem.wbSrcAddr = addr;
  if (logger.active) stats.memSlotReads++;
  ctrFire('memory', 'readFromSlot');
  log(`BATCH MEM[${addr}] → Memory loop: ${val & 0xFFFF}`, 'info');
  logSetup(`OP.MEM_BATCH_SLOT SLOT=${addr} ${formatWordAsBinary(val)} DESTRUCT=${mem.destructive?'Y':'N'}`,
           `Batch write slot ${addr}: ${val & 0xFFFF} to Memory loop`);
}

// Operator action: output all 16 slots sequentially into the Memory loop.
// Null slots are written as zero words (marker=0, data=0) so slot-position
// information is preserved in the stream. Always produces exactly 16 words.
function memBatchWrite() {
  if(logger.active) stats.batchWrites++;
  if (mem.wbPos >= 0 || mem._batchRunning) {
    log('Memory writeback busy — wait for current transfer to complete', 'err'); return;
  }
  mem.batchQueue = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; // slot 0 starts immediately, rest queued
  mem._batchRunning = true;
  const btn = document.getElementById('mem-batch-btn');
  if (btn) { btn.textContent = 'BATCH RUNNING…'; btn.disabled = true; }
  const populated = mem.slots.filter(v => v !== null).length;
  log(`Batch write started — 16 words (${populated} populated, ${16 - populated} zero)`, 'info');
  logSetup('OP.MEM_BATCH_START', `Operator initiates batch write: all 16 slots to Memory loop (${populated} populated)`);
  sendMemorySlotToLoopBatch(0);
  renderAllComponents();
}
// Write a memory slot value as a word into the Memory Loop via the writeback pipeline
function memWriteback(addr) {
  if (mem.slots[addr] === null) { log(`Slot ${addr} is empty`, 'err'); return; }
  if (mem.wbPos >= 0) { log('Memory writeback busy', 'err'); return; }
  const val = mem.slots[addr];
  mem.wbBuf[0] = 1;
  for (let b=0;b<16;b++) mem.wbBuf[1+b] = (val >> (15-b)) & 1;
  mem.wbPos = 0;
  mem.wbSrcAddr = addr;
  if(logger.active) stats.memSlotReads++;
  ctrFire('memory', 'readFromSlot');
  log(`MEM[${addr}] → Memory loop: ${val}${mem.destructive?' (destructive)':''}`, 'info');
  logSetup(`OP.MEM_WB SLOT=${addr} ${formatWordAsBinary(val)} DESTRUCT=${mem.destructive?'Y':'N'}`,`Operator sends slot ${addr} value ${val&0xFFFF} to Memory loop${mem.destructive?' (destructive)':''}`);
}

// Called from bus write when mode=slot
function captureIncomingBitToMemorySlot(bit) {
  if (mem.capPos < 0) return;
  mem.capBuf[mem.capPos] = bit;
  mem.capPos++;

  // Update cap bar
  const grid = document.getElementById('mem-slots-grid');
  if (grid) {
    const slotEl = grid.children[mem.capAddr];
    if (slotEl) {
      const bar = slotEl.querySelector('.mem-cap-bar');
      if (bar) [...bar.children].forEach((s,i) => {
        s.classList.toggle('lit', i < mem.capPos && mem.capBuf[i] === 1);
      });
    }
  }

  if (mem.capPos === BPW) {
    let data = 0;
    for (let b=0;b<16;b++) data = (data<<1)|mem.capBuf[1+b];
    // preserve 12-bit (marker as bit 11)
    const val16 = data; // capBuf[0]=marker, capBuf[1..16]=16 data bits

    // Address-read mode: first 3 data bits (b10,b9,b8) determine destination slot
    if (mem.addrRead) {
      const addrFromWord = (mem.capBuf[1]<<3)|(mem.capBuf[2]<<2)|(mem.capBuf[3]<<1)|mem.capBuf[4];
      mem.capAddr = addrFromWord;
    }

    mem.slots[mem.capAddr] = val16; flagMemoryDisplayAsStale();
    if(logger.active) stats.memSlotWrites++;
    ctrFire('memory', 'writeToSlot');
    log(`MEM[${mem.capAddr}] ← ${data} (0x${data.toString(16).toUpperCase().padStart(4,'0')})`, 'info');
    logOp(`MEM.SLOT[${mem.capAddr}] ← ${formatWordAsBinary(val16|0x10000)}`, `Memory read head saves ${val16} into slot ${mem.capAddr}`);
    // Clear cap bar
    const grid2 = document.getElementById('mem-slots-grid');
    if (grid2) {
      const slotEl = grid2.children[mem.capAddr];
      if (slotEl) { const bar = slotEl.querySelector('.mem-cap-bar'); if(bar) [...bar.children].forEach(s=>s.classList.remove('lit')); }
    }
    mem.capPos = -1;
    mem.capAddr = -1;
    mem.capBuf.fill(0);
    refreshMemoryDisplay();
    if (mem.autoInc && mem.autoIncActive) advanceMemoryAutoIncrementAddress();
  }
}

// Build the DOM elements for all 16 memory slot displays
function buildMemorySlotElements() {
  const grid = document.getElementById('mem-slots-grid');
  if (!grid || grid.children.length) return;
  for (let i=0;i<16;i++) {
    const slot = document.createElement('div');
    slot.className = 'mem-slot';
    slot.id = 'mem-slot-' + i;

    // addr label
    const addr = document.createElement('div');
    addr.className = 'mem-slot-addr';
    addr.textContent = i;
    slot.appendChild(addr);

    // 17 bit dots: marker + gap + 4 upper + gap + 12 lower
    const bitsWrap = document.createElement('div');
    bitsWrap.className = 'mem-slot-bits';
    const mk = document.createElement('div'); mk.className='mem-slot-bit mk'; bitsWrap.appendChild(mk);
    const g1 = document.createElement('div'); g1.style.cssText='width:2px;flex-shrink:0;'; bitsWrap.appendChild(g1);
    for (let b=0;b<4;b++) { const d=document.createElement('div'); d.className='mem-slot-bit'; bitsWrap.appendChild(d); }
    const g2 = document.createElement('div'); g2.style.cssText='width:2px;flex-shrink:0;'; bitsWrap.appendChild(g2);
    for (let b=0;b<12;b++) { const d=document.createElement('div'); d.className='mem-slot-bit'; bitsWrap.appendChild(d); }
    slot.appendChild(bitsWrap);

    // value
    const val = document.createElement('div');
    val.className = 'mem-slot-val';
    val.textContent = '—';
    slot.appendChild(val);

    // writeback btn
    const wb = document.createElement('button');
    wb.className = 'mem-slot-wb';
    wb.textContent = '→L';
    wb.title = 'Send to Memory Loop head';
    wb.onclick = ((a) => () => memWriteback(a))(i);
    slot.appendChild(wb);

    // clear btn
    const clr = document.createElement('button');
    clr.className = 'mem-slot-clr';
    clr.textContent = 'CLR';
    clr.title = 'Clear slot';
    clr.onclick = ((a) => () => clearMemSlot(a))(i);
    slot.appendChild(clr);

    // capture bar (below, in a wrapper div)
    const row = document.createElement('div');
    row.style.cssText='display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;';
    // re-assemble: addr + column(bits+capbar) + val + wb
    // Actually build as a 2-row item:
    const outer = document.createElement('div');
    outer.className = 'mem-slot';
    outer.id = 'mem-slot-' + i;
    outer.style.flexDirection = 'column';
    outer.style.gap = '2px';
    // top row
    const topRow = document.createElement('div');
    topRow.style.cssText='display:flex;align-items:center;gap:5px;width:100%;';
    topRow.appendChild(addr);
    topRow.appendChild(bitsWrap);
    topRow.appendChild(val);
    topRow.appendChild(wb);
    topRow.appendChild(clr);
    outer.appendChild(topRow);
    // cap bar row
    const capBar = document.createElement('div');
    capBar.className = 'mem-cap-bar';
    for (let c=0;c<BPW;c++) { const d=document.createElement('div'); d.className='mem-cap-slot'; capBar.appendChild(d); }
    outer.appendChild(capBar);

    grid.appendChild(outer);
  }
  // Cache slot elements after build
  for(let i=0;i<16;i++) EL.memSlots[i]=document.getElementById('mem-slot-'+i);
}

// Refresh all memory slot displays, address indicators, and mode states
function refreshMemoryDisplay() {
  if(!mem.displayNeedsRefresh) return; mem.displayNeedsRefresh=false;
  buildMemorySlotElements();
  const addr = getCurrentMemoryAddress();
  for (let i=0;i<16;i++) {
    const el = EL.memSlots[i] || document.getElementById('mem-slot-'+i);
    if (!el) continue;
    el.classList.toggle('selected', i===addr);
    el.classList.toggle('active', mem.slots[i]!==null);

    const topRow = el.firstChild;
    // bit dots: children of bitsWrap (second child of topRow)
    const bitsWrap = topRow.children[1];
    const val9 = mem.slots[i];
    const dotEls = [...bitsWrap.children].filter(c=>!c.style.width);
    dotEls.forEach((d,di) => {
      d.classList.remove('lit');
      const bit = val9!==null ? (di === 0 ? 1 : (val9>>(16-di))&1) : 0;
      if (bit) d.classList.add('lit');
    });
    // value text
    const valEl = topRow.children[2];
    if (valEl) {
      if (val9===null) { valEl.textContent='—'; }
      else {
        const d11 = val9 & 0xFFFF;
        valEl.textContent = `${d11}`;
      }
    }
  }
}


// ================================================================
//  RNG — simple Math.random(), operator-settable min/max (0–65535, inclusive)
// ================================================================
const rngHistory = [];
// Update the RNG history display with recent generated values
function rngUpdateHistory() {
  const el = document.getElementById('rng-history');
  if (!el) return;
  if (rngHistory.length === 0) { el.textContent = ''; return; }
  el.textContent = 'Last sent: ' + rngHistory.slice().reverse().join(', ');
}
// Read the current lo/hi range from the RNG input fields
function rngGetRange() {
  const minEl = document.getElementById('rng-min');
  const maxEl = document.getElementById('rng-max');
  let lo = parseInt(minEl.value, 10);
  let hi = parseInt(maxEl.value, 10);
  if (isNaN(lo) || lo < 0)   lo = 0;
  if (isNaN(hi) || hi > 65535) hi = 65535;
  if (lo > hi) { lo = 0; hi = 65535; }  // invalid range — fall back to full
  return { lo: Math.min(65535, Math.max(0, lo)),
           hi: Math.min(65535, Math.max(0, hi)) };
}
// Validate the RNG range inputs and update error display
function rngValidateRange() {
  const minEl = document.getElementById('rng-min');
  const maxEl = document.getElementById('rng-max');
  let lo = parseInt(minEl.value, 10);
  let hi = parseInt(maxEl.value, 10);
  if (!isNaN(lo)) { lo = Math.max(0, Math.min(65535, lo)); minEl.value = lo; }
  if (!isNaN(hi)) { hi = Math.max(0, Math.min(65535, hi)); maxEl.value = hi; }
  const badMin = isNaN(lo) || lo > hi;
  const badMax = isNaN(hi) || hi < lo;
  minEl.classList.toggle('err', badMin);
  maxEl.classList.toggle('err', badMax);
}
// Generate a random value in the current range and inject it into the Working Loop
function rngSend() {
  if (inj.pending.length > 0 || inj.buffer.some(b => b !== 0)) {
    log('Injection Channel busy — wait', 'err'); return;
  }
  const { lo, hi } = rngGetRange();
  const span = hi - lo + 1;
  const val = lo + Math.floor(Math.random() * span);
  const word = [1];
  for (let b = 15; b >= 0; b--) word.push((val >> b) & 1);
  inj.pending = word;
  inj.active = true;
  document.getElementById('led-inj').classList.add('on');
  rngHistory.push(val);
  if (rngHistory.length > 8) rngHistory.shift();
  rngUpdateHistory();
  const rangeNote = (lo === 0 && hi === 65535) ? '' : ` [${lo}–${hi}]`;
  log(`RNG${rangeNote} → ${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')})`, 'info');
  logSetup(`OP.RNG_SEND ${formatWordAsBinary(val|0x10000)}${lo>0||hi<65535?` MIN=${lo} MAX=${hi}`:''}`,
           `Operator sends random value ${val} (range ${lo}–${hi}) to Injection Channel`);
}

// ── Session identity (set from sidebar inputs, used in .loop header) ──
let operatorHandle = '';  // operator's chosen handle, saved in session log
let sessionName = '';     // session name, saved in session log

// ================================================================
//  SESSION LOGGER — .loop file format
//  Every line: MACHINE_CODE || HUMAN_DESCRIPTION
// ================================================================
// Session logger state — short alias for L21.logger
const logger = L21.logger;

// ── Session stats ─────────────────────────────────────────────────
// Session statistics — short alias for L21.stats
const stats = L21.stats;

// Reset all session statistics counters to zero
function resetSessionStatistics() {
  for (const k of Object.keys(stats)) {
    if (k === '_pauseStart') continue; // managed by toggleMasterClock/loggerToggle
    stats[k] = 0;
  }
}

// ── Helpers ──────────────────────────────────────────────────────

function extractWordValueFromBits(bits) {
  // Format a 17-bit word from loop bits array starting at index 0
  // bits[0]=marker, bits[1..4]=top 4 data bits, bits[5..16]=low 12 data bits
  if (!bits || bits[0] !== 1) return '_x1';
  const top = bits.slice(1,5).join('');
  const low = bits.slice(5,17).join('');
  return '[' + bits[0] + '|' + top + '·' + low + ']';
}

// Format a 16-bit value as a grouped binary string (4-bit groups)
function formatWordAsBinary(val12) {
  // Named formatWordAsBinary for compatibility; formats 17-bit words [M|BBBB·BBBBBBBBBBBB]
  if (val12 === null) return '[0|0000·000000000000]';
  const mk = (val12 >> 16) & 1;
  let top = '', low = '';
  for (let b=15;b>=12;b--) top += (val12>>b)&1;
  for (let b=11;b>=0;b--)  low += (val12>>b)&1;
  return `[${mk}|${top}·${low}]`;
}

// Format a value as "decimal (0xHEX)"
function formatValueAsDecimalHex(val) {
  if (val === null) return '—';
  return `${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')})`;
}

// Build a text description of all words currently in a loop
function describeLoopContentsForLog(lp) {
  // Serialise full loop as space-separated 17-bit words or empty markers
  const out = [];
  for (let i=0; i<lp.bits.length; i+=BPW) {
    if (lp.bits[i] === 1) {
      const t=lp.bits.slice(i+1,i+5).join(''), l=lp.bits.slice(i+5,i+17).join('');
      out.push('['+lp.bits[i]+'|'+t+'·'+l+']');
    } else {
      out.push('_');
    }
  }
  return out.join(' ');
}

// Pad a string to a minimum length with trailing spaces
function padStringRight(s, n) { return String(s).padEnd(n); }

// Write a machine-readable and human-readable log line pair
function writeLogLine(machine, human) {
  logger.lines.push(machine + ' || ' + human);
}

// ── SPEC section ─────────────────────────────────────────────────

function logWriteSPEC() {
  writeLogLine('SPEC.VERSION 2.1', 'Loop 2.1 Core Specification');
  writeLogLine('SPEC.DATE ' + new Date().toISOString(), 'Session started ' + new Date().toLocaleString());
  const handle = operatorHandle.trim() || 'ANONYMOUS';
  writeLogLine('SPEC.OPERATOR ' + handle, 'Operator handle: ' + handle);
  const sname = sessionName.trim();
  if (sname) writeLogLine('SPEC.SESSION_NAME ' + sname, 'Session name: ' + sname);
  writeLogLine(`SPEC.SKIN ${currentSkinId.toUpperCase()}`, `Active skin at session start: ${currentSkinId.toUpperCase()}`);
  writeLogLine('SPEC.LOOPS 4', '4 loops: Working, ALU, Memory, Big');
  writeLogLine(`SPEC.LOOP.WORKING SIZE=${loops['working'].bits.length/BPW} WORD=${BPW}`, `Working Loop: ${loops['working'].bits.length/BPW} words, 17-bit wire format (1 signal + 16 data)`);
  writeLogLine(`SPEC.LOOP.ALU     SIZE=${loops['alu'].bits.length/BPW} WORD=${BPW}`, `ALU Loop: ${loops['alu'].bits.length/BPW} words, 17-bit wire format`);
  writeLogLine(`SPEC.LOOP.MEMORY  SIZE=${loops['memory'].bits.length/BPW} WORD=${BPW}`, `Memory Loop: ${loops['memory'].bits.length/BPW} words, 17-bit wire format`);
  writeLogLine(`SPEC.LOOP.BIG     SIZE=${loops['big'].bits.length/BPW} WORD=${BPW}`, `Big Loop: ${loops['big'].bits.length/BPW} words, 17-bit wire format`);
  writeLogLine('SPEC.BUSES 2', '2 buses: Bus A (data routing, purple) and Bus B (counter bus, violet)');
  writeLogLine('SPEC.BUS_A SEND TO SLOTS=34 SRCS=WORKING|ALU|MEMORY|BIG|PM DSTS=WORKING|ALU|MEMORY|BIG', 'Bus A: 34-slot data bus, any loop or PM to any loop');
  writeLogLine('SPEC.BUS_B SEND TO SLOTS=34 SRCS=WORKING|ALU|MEMORY|BIG|CTR-W|CTR-A|CTR-M|CTR-B|CTR-GLB DSTS=WORKING|ALU|MEMORY|BIG|CTR-W|CTR-A|CTR-M|CTR-B|CTR-GLB', 'Bus B: 34-slot counter bus, loops and counters');
  writeLogLine('SPEC.PATTERN_MATCHER LOOP=BIG MASK=11BIT PATTERN=11BIT MODES=COPY|DESTRUCTIVE PM_COUNT=2 CASCADE=SUPPORTED', 'Two Pattern Matchers on Big Loop; PM2 can run standalone or in cascade mode (evaluates PM1 matches, outputs to PM2-Match / PM2-Reject bus sources)');
  writeLogLine('SPEC.COUNTERS LOOP_COUNTERS=4 GLOBAL_COUNTER=1 WIDTH=8BIT_LOOP|UNLIMITED_GLOBAL', '4 loop rotation counters (8-bit) + 1 global tick counter (unlimited)');
  writeLogLine('SPEC.WORD_FORMAT [M|DDDD·DDDDDDDDDDDD]', '17-bit wire word: M=signal bit, DDDD=upper 4 data bits (addr), DDDDDDDDDDDD=lower 12 data bits');
  writeLogLine('SPEC.MEM_SLOTS 16', '16 addressable 17-bit memory slots');
  writeLogLine('SPEC.BUSD CONFIG', `SRC=${L21.buses.d.src.toUpperCase()} DST=${L21.buses.d.dst.toUpperCase()}`);
  writeLogLine('SPEC.RNG RANDOM', '16-bit Math.random() (0–65535)');
  writeLogLine('SPEC.CLOCK_HZ ' + clock.hz, `Clock speed: ${clock.hz} Hz`);
}

// ── Shared machine-state dump (used by INIT and FINAL) ──────────
//    prefix: 'INIT' or 'FINAL'
//    options: { phase, includeRouteHold, includeFlags }

function logWriteMachineState(prefix, options) {
  const phase = options.phase || 'start';

  // Buses A/B
  for (const busId of ['a','b']) {
    const tag = 'BUS' + busId.toUpperCase();
    const bus = L21.buses[busId];
    writeLogLine(`${prefix}.${tag}.SRC ${bus.src.toUpperCase()}`, `Bus ${busId.toUpperCase()} source: ${bus.src}`);
    writeLogLine(`${prefix}.${tag}.DST ${bus.dst.toUpperCase()}`, `Bus ${busId.toUpperCase()} destination: ${bus.dst}`);
    writeLogLine(`${prefix}.${tag}.STATE ${bus.active?'ON':'OFF'}`, `Bus ${busId.toUpperCase()}: ${bus.active?'active':'inactive'}`);
  }

  // Loop states + bit contents
  for (const id of ['working','alu','memory','big']) {
    const lp = loops[id];
    const paused = lp.paused ? 'PAUSED' : 'RUNNING';
    const gate   = !lp.gateOpen ? 'CLOSED' : 'OPEN';
    writeLogLine(`${prefix}.LOOP.${id.toUpperCase()} STATE=${paused} GATE=${gate}`, `${id} loop: ${paused.toLowerCase()}, gate ${gate.toLowerCase()}`);
  }
  for (const id of ['working','alu','memory','big']) {
    writeLogLine(`${prefix}.LOOP.${id.toUpperCase()}.BITS ${describeLoopContentsForLog(loops[id])}`,
          `${id} loop bit contents at session ${phase}`);
  }

  // ALU registers
  for (const reg of ['a','b','c','d']) {
    const val = alu[reg];
    writeLogLine(`${prefix}.ALU.REG_${reg.toUpperCase()} ${formatWordAsBinary(val !== null ? (val|0x10000) : null)}`, `ALU Reg ${reg.toUpperCase()}: ${formatValueAsDecimalHex(val)}`);
  }
  writeLogLine(`${prefix}.ALU.OPA_SRC ${alu.opASrc.toUpperCase()}`, `Operand A source: Reg ${alu.opASrc.toUpperCase()}`);
  writeLogLine(`${prefix}.ALU.OPB_SRC ${alu.opBSrc.toUpperCase()}`, `Operand B source: Reg ${alu.opBSrc.toUpperCase()}`);
  writeLogLine(`${prefix}.ALU.OP ${alu.op}`, `ALU operation: ${alu.op}`);
  writeLogLine(`${prefix}.ALU.ROUTE ${alu.route === null ? 'OFF' : alu.route.toUpperCase()}`, `ALU capture route: ${alu.route || 'off'}`);
  if (options.includeRouteHold) {
    writeLogLine(`${prefix}.ALU.ROUTE_HOLD ${alu.routeHold ? 'ON' : 'OFF'}`, `ALU route hold: ${alu.routeHold ? 'on (fixed register)' : 'off (auto-advance)'}`);
  }
  writeLogLine(`${prefix}.ALU.RESULT ${formatWordAsBinary(alu.result)}`, `ALU result: ${formatValueAsDecimalHex(alu.result)}`);
  if (options.includeFlags) {
    const f = alu.flags;
    const fs = [f.zero?'Z':'',f.carry?'C':'',f.overflow?'V':'',f.sign?'S':'',f.parity?'P':''].filter(Boolean).join('')||'NONE';
    writeLogLine(`${prefix}.ALU.FLAGS ZERO=${f.zero?1:0} CARRY=${f.carry?1:0} OVERFLOW=${f.overflow?1:0} SIGN=${f.sign?1:0} PARITY=${f.parity?1:0}`,
          `ALU flags: ${fs}`);
  }

  // Memory
  writeLogLine(`${prefix}.MEM.WRITE_SLOTS ${mem.writeToSlots?'ON':'OFF'}`, `Memory write-to-slots: ${mem.writeToSlots?'on':'off'}`);
  writeLogLine(`${prefix}.MEM.ADDR ${getCurrentMemoryAddress()}`, `Memory address: ${getCurrentMemoryAddress()}`);
  writeLogLine(`${prefix}.MEM.DESTRUCTIVE ${mem.destructive?'ON':'OFF'}`, `Destructive read: ${mem.destructive?'on':'off'}`);
  writeLogLine(`${prefix}.MEM.AUTOINC ${mem.autoInc?'ON':'OFF'} START=${mem.autoIncStart}`, `Auto-increment: ${mem.autoInc?'on (start '+mem.autoIncStart+')':'off'}`);
  for (let i = 0; i < 16; i++) {
    const v = mem.slots[i];
    writeLogLine(`${prefix}.MEM.SLOT[${i}] ${formatWordAsBinary(v)}`, `Memory slot ${i}: ${v !== null ? formatValueAsDecimalHex(v & 0xFFFF) : 'empty'}`);
  }

  // Counters
  for (const id of ['working','alu','memory','big']) {
    const c = ctr[id];
    writeLogLine(`${prefix}.CTR.${id.toUpperCase()} VAL=${c.val} ROT=${c.rot} DESTRUCTIVE=${c.destructive?'ON':'OFF'}`,
          `${id} counter: ${c.val} (0x${c.val.toString(16).toUpperCase().padStart(2,'0')}), rot ${c.rot}, destructive ${c.destructive?'on':'off'}`);
  }
  writeLogLine(`${prefix}.CTR.GLOBAL VAL=${ctr.global.val} DESTRUCTIVE=${ctr.global.destructive?'ON':'OFF'}`,
        `Global counter: ${ctr.global.val}, destructive ${ctr.global.destructive?'on':'off'}`);

  // Pattern Matchers
  for (const [pmObj, label, isActiveFn] of [[pm, 'PM1', isPatternMatcherActive], [pm2, 'PM2', isPatternMatcher2Active]]) {
    const maskVal  = pmObj.maskBits.reduce((a, b, i) => a | (b << (15 - i)), 0);
    const matchVal = pmObj.matchBits.reduce((a, b, i) => a | (b << (15 - i)), 0);
    let stateStr = `${prefix}.${label}.STATE ${isActiveFn()?'ON':'OFF'} EJECT=${pmObj.destructive?'DESTRUCTIVE':'COPY'}`;
    let humanStr = `${label}: ${isActiveFn()?'enabled':'disabled'}, eject: ${pmObj.destructive?'destructive':'copy'}`;
    if (pmObj === pm2) {
      stateStr += ` CASCADE=${pm2.cascadeMode?'ON':'OFF'}`;
      humanStr += `, cascade: ${pm2.cascadeMode?'ON':'OFF'}`;
    }
    writeLogLine(stateStr, humanStr);
    writeLogLine(`${prefix}.${label}.MASK ${maskVal.toString(2).padStart(16,'0')} (0x${maskVal.toString(16).toUpperCase().padStart(4,'0')})`,
          `${label} mask: ${maskVal}`);
    writeLogLine(`${prefix}.${label}.PATTERN ${matchVal.toString(2).padStart(16,'0')} (0x${matchVal.toString(16).toUpperCase().padStart(4,'0')})`,
          `${label} pattern: ${matchVal}`);
    writeLogLine(`${prefix}.${label}.MATCH_COUNT ${pmObj.matchCount}`, `${label} match count: ${pmObj.matchCount}`);
  }

  // Operator input
  const swVal = readInputSwitchValue();
  writeLogLine(`${prefix}.OP_INPUT ${formatWordAsBinary(swVal | 0x10000)}`, `Operator input: ${swVal} (0x${swVal.toString(16).toUpperCase().padStart(4,'0')})`);

  // Filter order
  writeLogLine(`${prefix}.FILTER_ORDER ${L21.filterOrder.toUpperCase()}`, `Filter order: ${L21.filterOrder === 'pm_first' ? 'PM → TG' : 'TG → PM'}`);
}

// ── INIT section ─────────────────────────────────────────────────

function logWriteINIT() {
  writeLogLine('INIT.CLOCK_HZ ' + clock.hz, `Clock: ${clock.hz} Hz`);
  logWriteMachineState('INIT', { phase: 'start' });
}

// ── OPS helpers ──────────────────────────────────────────────────

function logOp(machine, human) {
  if (!logger.active) return;
  const t = logger.tickCount;
  writeLogLine(`T${String(t).padStart(5,'0')}.${machine}`, `[tick ${t}] ${human}`);
}

// Write a setup event to the log (records initial configuration state)
function logSetup(machine, human) {
  L21.operatorActionCount++; // always count, regardless of logger state
  if (!logger.active) return;
  stats.operatorActions++;
  // Pre-tick setup step (between ticks)
  const t = logger.tickCount;
  writeLogLine(`S${String(t).padStart(5,'0')}.${machine}`, `[setup@${t}] ${human}`);
}

// ── FINAL section ────────────────────────────────────────────────

function logWriteFINAL() {
  writeLogLine('FINAL.TICKS ' + logger.tickCount, `Total clock ticks: ${logger.tickCount}`);
  const elapsed = ((Date.now() - logger.startTime)/1000).toFixed(1);
  writeLogLine('FINAL.ELAPSED_S ' + elapsed, `Session duration: ${elapsed} seconds`);

  // ── Operator performance stats
  const actionsPerTick  = logger.tickCount > 0 ? (stats.operatorActions / logger.tickCount).toFixed(3) : '—';
  const wordsPerTick    = logger.tickCount > 0 ? (stats.wordsTransferred / logger.tickCount).toFixed(3) : '—';
  const ticksPerAction  = stats.operatorActions > 0 ? (logger.tickCount / stats.operatorActions).toFixed(1) : '—';
  writeLogLine(`FINAL.STATS.OPERATOR_ACTIONS ${stats.operatorActions}`,       `Operator actions (clicks/decisions): ${stats.operatorActions}`);
  writeLogLine(`FINAL.STATS.WORDS_TRANSFERRED ${stats.wordsTransferred}`,     `Words delivered across buses: ${stats.wordsTransferred}`);
  writeLogLine(`FINAL.STATS.ALU_OPS ${stats.aluOpsExecuted}`,                 `ALU operations executed: ${stats.aluOpsExecuted}`);
  writeLogLine(`FINAL.STATS.INJECTS ${stats.injects}`,                        `Values injected into Working loop: ${stats.injects}`);
  writeLogLine(`FINAL.STATS.BUS_ACTIVATIONS ${stats.busActivations}`,         `Bus activations (any bus turned ON): ${stats.busActivations}`);
  writeLogLine(`FINAL.STATS.GATE_TOGGLES ${stats.gateToggles}`,               `Gate open/close actions: ${stats.gateToggles}`);
  writeLogLine(`FINAL.STATS.MEM_SLOT_WRITES ${stats.memSlotWrites}`,          `Memory slots written: ${stats.memSlotWrites}`);
  writeLogLine(`FINAL.STATS.MEM_SLOT_READS ${stats.memSlotReads}`,            `Memory slots read back to loop: ${stats.memSlotReads}`);
  writeLogLine(`FINAL.STATS.CLOCK_CHANGES ${stats.clockChanges}`,             `Clock speed adjustments: ${stats.clockChanges}`);
  writeLogLine(`FINAL.STATS.ALU_WRITEBACKS ${stats.aluWritebacks}`,             `ALU → loop writebacks (SEND TO LOOP presses): ${stats.aluWritebacks}`);
  writeLogLine(`FINAL.STATS.PM_REWRITES ${stats.pmRewrites}`,                   `PM in-place rewrites: ${stats.pmRewrites}`);
  writeLogLine(`FINAL.STATS.CTR_EJECTS ${stats.ctrEjects}`,                     `Counter eject actions: ${stats.ctrEjects}`);
  writeLogLine(`FINAL.STATS.BATCH_WRITES ${stats.batchWrites}`,                 `Batch memory write operations: ${stats.batchWrites}`);
  // Pause time — flush any open pause interval first
  const openPauseMs = (!clock.running && stats._pauseStart > 0) ? (performance.now() - stats._pauseStart) : 0;
  const totalPauseMs = Math.round(stats.pauseMs + openPauseMs);
  const totalPauseSec = (totalPauseMs / 1000).toFixed(1);
  const sessionMs = logger.sessionStartTime > 0 ? Math.round(performance.now() - logger.sessionStartTime) : 0;
  const runMs = Math.max(0, sessionMs - totalPauseMs);
  const pausePct = sessionMs > 0 ? ((totalPauseMs / sessionMs) * 100).toFixed(1) : '0.0';
  writeLogLine(`FINAL.STATS.PAUSE_TIME_MS ${totalPauseMs}`,                     `Time paused (clock stopped): ${totalPauseSec}s`);
  writeLogLine(`FINAL.STATS.RUN_TIME_MS ${runMs}`,                               `Time running (clock active): ${(runMs/1000).toFixed(1)}s`);
  writeLogLine(`FINAL.STATS.SESSION_TIME_MS ${sessionMs}`,                       `Total session wall time: ${(sessionMs/1000).toFixed(1)}s`);
  writeLogLine(`FINAL.STATS.PAUSE_FRACTION ${pausePct}%`,                        `Fraction of session paused: ${pausePct}%`);
  writeLogLine(`FINAL.STATS.PM1_MATCHES ${pm.matchCount}`,                    `Pattern Matcher 1 matches: ${pm.matchCount}`);
  writeLogLine(`FINAL.STATS.PM2_MATCHES ${pm2.matchCount}`,                    `Pattern Matcher 2 matches: ${pm2.matchCount}`);
  writeLogLine(`FINAL.STATS.ACTIONS_PER_TICK ${actionsPerTick}`,              `Actions per tick (intervention rate): ${actionsPerTick}`);
  writeLogLine(`FINAL.STATS.TICKS_PER_ACTION ${ticksPerAction}`,              `Ticks per action (machine autonomy): ${ticksPerAction}`);
  writeLogLine(`FINAL.STATS.WORDS_PER_TICK ${wordsPerTick}`,                  `Words transferred per tick (throughput): ${wordsPerTick}`);
  const wordsPerAction  = stats.operatorActions > 0 ? (stats.wordsTransferred / stats.operatorActions).toFixed(2) : '—';
  const rewriteRate     = pm.matchCount > 0 ? ((stats.pmRewrites / pm.matchCount)*100).toFixed(1)+'%' : '—';
  writeLogLine(`FINAL.STATS.WORDS_PER_ACTION ${wordsPerAction}`,               `Words moved per operator decision (efficiency): ${wordsPerAction}`);
  writeLogLine(`FINAL.STATS.PM_REWRITE_RATE ${rewriteRate}`,                   `PM rewrite rate (rewrites / matches): ${rewriteRate}`);

  // Clock
  writeLogLine('FINAL.CLOCK_HZ ' + clock.hz, `Final clock speed: ${clock.hz} Hz`);

  // Operator Count
  const linkedIds = ['working','alu','memory','big'].filter(id=>opCount.linked[id]).map(s=>s.toUpperCase()).join('|')||'NONE';
  const haltedIds = ['working','alu','memory','big'].filter(id=>opCount.halted[id]).map(s=>s.toUpperCase()).join('|')||'NONE';
  writeLogLine(`FINAL.OPCOUNT VAL=${opCount.val} LINKED=${linkedIds} HALTED=${haltedIds}`,
        `Op-count: ${opCount.val}, linked loops: ${linkedIds}, halted: ${haltedIds}`);

  // Shared machine state
  logWriteMachineState('FINAL', { phase: 'end', includeRouteHold: true, includeFlags: true });
}

// ── Format reference block ───────────────────────────────────────

function logWriteFormatRef() {
  const ref = [
    '',
    '// ── .loop FILE FORMAT REFERENCE ────────────────────────────',
    '// Each line: MACHINE_CODE || HUMAN_DESCRIPTION',
    '// Sections:  SPEC (machine config) | INIT (start state)',
    '//            T##### (tick ops)     | S##### (setup ops)',
    '//            FINAL (end state)',
    '// Word fmt:  [M|DDD·DDDDDDDD]  M=signal(1 bit)  DDD=upper 3 data bits  DDDDDDDD=lower 8 data bits',
    '// Empty slot: _  |  Empty run: _xN',
    '// ─────────────────────────────────────────────────────────────',
  ];
  ref.forEach(r => logger.lines.push(r));
}

// ================================================================
//  FULL STATE SNAPSHOT SYSTEM — enables rewind to any tick
//  Each snapshot captures the complete mutable state of the machine.
//  Snapshots are stored in an array indexed by tick number.
// ================================================================
const snapshotHistory = [];
const SNAPSHOT_MAX = 100000; // cap to prevent unbounded memory growth

// ================================================================
//  HARDWARE INTEGRATION TEST — configures machine for operator testing
// ================================================================

// Helper: set a PM bit array from a 16-bit value and sync lever DOM elements
function setPMBitsFromValue(pmState, regName, value, prefix) {
  for (let i = 0; i < 16; i++) pmState[regName][i] = (value >> (15 - i)) & 1;
  // Sync lever DOM elements
  for (let i = 0; i < 16; i++) {
    const wrap = document.getElementById(`${prefix}-${regName}-${i}`);
    if (wrap) wrap.classList.toggle('on', pmState[regName][i] === 1);
  }
}

// Configure the machine into a predefined test state for hardware verification
function setupHardwareTest() {
  // ── Stop clock if running
  if (clock.running) {
    clock.running = false;
    document.getElementById('led-run').classList.remove('run');
    const btn = document.getElementById('btn-run');
    if (btn) { btn.textContent = '▶ START'; btn.className = 'btn btn-start'; }
  }

  // ── Zero all loops
  for (const id of ['working', 'alu', 'memory', 'big']) {
    loops[id].bits.fill(0);
    loops[id].lastWord = null;
    loops[id].flash = 0;
  }

  // ── Clear all bus bit arrays
  for (const busId of ['a', 'b', 'c', 'd']) {
    L21.buses[busId].bits.fill(0);
    L21.buses[busId].flash = 0;
    L21.buses[busId].liveBitCount = 0;
    L21.buses[busId].transferBitsRemaining = 0;
  }

  // ── Configure buses: Working → ALU → Big → Memory
  selBusSrc('a', 'working'); selBusDst('a', 'alu');
  selBusSrc('b', 'alu');     selBusDst('b', 'big');
  selBusSrc('c', 'big');     selBusDst('c', 'memory');

  // Turn on A, B, C — turn off D
  if (!L21.buses.a.active) toggleBusGeneric('a');
  if (!L21.buses.b.active) toggleBusGeneric('b');
  if (!L21.buses.c.active) toggleBusGeneric('c');
  if (L21.buses.d.active) toggleBusGeneric('d');

  // Turn off dual-channel buses
  for (const busId of ['e', 'f', 'g']) {
    if (L21.buses[busId].active) {
      L21.buses[busId].active = false;
      syncBusInlineButtonState(BUS_CONFIGS[busId].inlineBtnId, false, busId.toUpperCase());
      const sBtn = document.getElementById(BUS_CONFIGS[busId].toggleBtnId);
      if (sBtn) { sBtn.textContent = '⊳ TURN ' + BUS_CONFIGS[busId].label.toUpperCase() + ' ON'; sBtn.className = BUS_CONFIGS[busId].offClass; }
    }
  }

  // ── Close all gates
  for (const id of ['working', 'alu', 'memory', 'big']) {
    loops[id].gateOpen = false;
    const gBtn = document.getElementById('gate-btn-' + id);
    if (gBtn) { gBtn.textContent = 'OPEN GATE'; gBtn.className = 'gate-btn gate-closed'; }
  }

  // ── Clear and unpause all loops
  for (const id of ['working', 'alu', 'memory', 'big']) {
    loops[id].paused = false;
    const pBtn = document.getElementById('pause-btn-' + id);
    if (pBtn) { pBtn.textContent = '⏸'; pBtn.className = 'pause-btn loop-running'; }
  }

  // ── Reset counters
  for (const id of ['working', 'alu', 'memory', 'big', 'global']) {
    ctr[id].val = 0;
    ctr[id].outBuf = []; ctr[id].outBufA = []; ctr[id].outBufC = []; ctr[id].outBufD = [];
    if (ctr[id].rot !== undefined) ctr[id].rot = 0;
    refreshCounterDisplay(id);
  }

  // ── Clear op-count halts
  for (const id of ['working', 'alu', 'memory', 'big', 'global']) {
    opCount.halted[id] = false;
    const oBtn = document.getElementById('op-count-btn-' + id);
    if (oBtn) oBtn.classList.remove('halted');
  }

  // ── ALU: clear all registers, route to A (first 4 values fill registers A-D)
  aluClearAll();
  alu.route = 'a';
  alu.routeHold = false;
  alu.autoWriteback = false;
  alu._autoWbPending = false;
  ['off', 'a', 'b', 'c', 'd'].forEach(rid => {
    const el = document.getElementById('route-' + rid);
    if (el) el.classList.toggle('active', rid === 'a');
  });
  const awbBtn = document.getElementById('alu-auto-wb-btn');
  if (awbBtn) { awbBtn.textContent = 'AUTO-SEND: OFF'; awbBtn.className = 'pm-toggle-btn pm-destr-off'; }

  // ── PM1: mask=0x0001, match=0x0001 (odd numbers), destructive
  setPMBitsFromValue(pm, 'maskBits', 0x0001, 'pm');
  setPMBitsFromValue(pm, 'matchBits', 0x0001, 'pm');
  setPMBitsFromValue(pm, 'changeMaskBits', 0x0000, 'pm');
  setPMBitsFromValue(pm, 'changeValBits', 0x0000, 'pm');
  pm.destructive = true; pm.matchFlag = false; pm.matchCount = 0;
  pm.cooldown = 0; pm.outBuf = []; pm.bridge = [0]; pm.bridgeFlash = 0;
  const pmDBtn = document.getElementById('pm-destr-btn');
  if (pmDBtn) { pmDBtn.textContent = 'OUTFLOW: DESTRUCTIVE'; pmDBtn.className = 'pm-toggle-btn pm-destr-on'; }
  refreshPatternMatcherDisplay();

  // ── PM2: mask=0x0002, match=0x0002 (bit 1 set), destructive, standalone
  setPMBitsFromValue(pm2, 'maskBits', 0x0002, 'pm2');
  setPMBitsFromValue(pm2, 'matchBits', 0x0002, 'pm2');
  setPMBitsFromValue(pm2, 'changeMaskBits', 0x0000, 'pm2');
  setPMBitsFromValue(pm2, 'changeValBits', 0x0000, 'pm2');
  pm2.destructive = true; pm2.matchFlag = false; pm2.matchCount = 0;
  pm2.cooldown = 0; pm2.outBuf = []; pm2.bridge = [0]; pm2.bridgeFlash = 0;
  pm2.cascadeMode = false; pm2.cascadeInBuf = [];
  pm2.matchOutBuf = []; pm2.rejectOutBuf = [];
  pm2.matchBridge = [0]; pm2.rejectBridge = [0];
  const pm2DBtn = document.getElementById('pm2-destr-btn');
  if (pm2DBtn) { pm2DBtn.textContent = 'OUTFLOW: DESTRUCTIVE'; pm2DBtn.className = 'pm-toggle-btn pm-destr-on'; }
  const pm2CBtn = document.getElementById('pm2-cascade-btn');
  if (pm2CBtn) { pm2CBtn.textContent = 'MODE: STANDALONE'; pm2CBtn.className = 'pm-toggle-btn pm-destr-off'; }
  refreshPatternMatcher2Display();

  // ── TG1: enabled, GT 20000, clamp ON → 40000, destructive
  tg1.enabled = true; tg1.mode = 'gt'; tg1.threshold = 20000;
  tg1.destructive = false; tg1.clampEnabled = true; tg1.clampValue = 40000;
  tg1.matchFlag = false; tg1.matchCount = 0; tg1.cooldown = 0;
  tg1.outBuf = []; tg1.bridge = [0]; tg1.bridgeFlash = 0;
  tg1.captureNext = false; tg1.capPos = -1; tg1.capBuf = [];
  const tg1EBtn = document.getElementById('tg1-enable-btn');
  if (tg1EBtn) { tg1EBtn.textContent = 'TURN OFF'; tg1EBtn.className = 'pm-toggle-btn pm-destr-on'; }
  const tg1DBtn = document.getElementById('tg1-destr-btn');
  if (tg1DBtn) { tg1DBtn.textContent = 'OUTFLOW: COPY'; tg1DBtn.className = 'pm-toggle-btn pm-destr-off'; }
  document.querySelectorAll('#tg1-mode-sel .tg-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === 'gt'));
  const tg1ThInp = document.getElementById('tg1-threshold-input');
  if (tg1ThInp) tg1ThInp.value = 20000;
  const tg1ClBtn = document.getElementById('tg1-clamp-btn');
  if (tg1ClBtn) { tg1ClBtn.textContent = 'CLAMP: ON'; tg1ClBtn.className = 'pm-toggle-btn pm-destr-on'; }
  const tg1ClRow = document.getElementById('tg1-clamp-row');
  if (tg1ClRow) tg1ClRow.style.display = '';
  const tg1ClInp = document.getElementById('tg1-clamp-input');
  if (tg1ClInp) tg1ClInp.value = 40000;
  refreshThresholdGate1Display();

  // ── TG2: enabled, LT 10000, clamp ON → 5000, destructive
  tg2.enabled = true; tg2.mode = 'lt'; tg2.threshold = 10000;
  tg2.destructive = false; tg2.clampEnabled = true; tg2.clampValue = 5000;
  tg2.matchFlag = false; tg2.matchCount = 0; tg2.rejectCount = 0; tg2.cooldown = 0;
  tg2.outBuf = []; tg2.bridge = [0]; tg2.bridgeFlash = 0;
  tg2.captureNext = false; tg2.capPos = -1; tg2.capBuf = [];
  tg2.cascadeMode = false; tg2.cascadeInBuf = [];
  tg2.matchOutBuf = []; tg2.rejectOutBuf = [];
  tg2.matchBridge = [0]; tg2.rejectBridge = [0];
  const tg2EBtn = document.getElementById('tg2-enable-btn');
  if (tg2EBtn) { tg2EBtn.textContent = 'TURN OFF'; tg2EBtn.className = 'pm-toggle-btn pm-destr-on'; }
  const tg2DBtn = document.getElementById('tg2-destr-btn');
  if (tg2DBtn) { tg2DBtn.textContent = 'OUTFLOW: COPY'; tg2DBtn.className = 'pm-toggle-btn pm-destr-off'; }
  document.querySelectorAll('#tg2-mode-sel .tg-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === 'lt'));
  const tg2ThInp = document.getElementById('tg2-threshold-input');
  if (tg2ThInp) tg2ThInp.value = 10000;
  const tg2ClBtn = document.getElementById('tg2-clamp-btn');
  if (tg2ClBtn) { tg2ClBtn.textContent = 'CLAMP: ON'; tg2ClBtn.className = 'pm-toggle-btn pm-destr-on'; }
  const tg2ClRow = document.getElementById('tg2-clamp-row');
  if (tg2ClRow) tg2ClRow.style.display = '';
  const tg2ClInp = document.getElementById('tg2-clamp-input');
  if (tg2ClInp) tg2ClInp.value = 5000;
  const tg2CascBtn = document.getElementById('tg2-cascade-btn');
  if (tg2CascBtn) { tg2CascBtn.textContent = 'MODE: STANDALONE'; tg2CascBtn.className = 'pm-toggle-btn pm-destr-off'; }
  refreshThresholdGate2Display();

  // ── Memory: clear all slots, writeToSlots ON, autoInc ON from slot 0
  clearAllMemSlots();
  mem.capPos = -1; mem.capAddr = -1; mem.capBuf.fill(0);
  mem.wbPos = -1; mem.wbSrcAddr = -1;
  mem.batchQueue = []; mem._batchRunning = false;
  // Set address to 0
  setAutoIncStart(0);
  // Enable auto-increment
  if (!mem.autoInc) toggleAutoInc();
  // Enable write-to-slots
  if (!mem.writeToSlots) toggleWriteToSlots();

  // ── Clear inject channel
  inj.buffer.fill(0); inj.pending = []; inj.flash = 0; inj.active = false; inj.wbPos = -1;
  document.getElementById('led-inj').classList.remove('on');

  // ── Reset tick counter
  clock.tickCount = 0;
  if (EL.tickDisplay) EL.tickDisplay.textContent = '000000000';

  // ── Refresh all displays
  alu.displayNeedsRefresh = true;
  mem.displayNeedsRefresh = true;
  renderAllComponents();
  aluUpdateDisplay();
  refreshMemoryDisplay();

  // ── Log the configuration
  log('═══ HARDWARE TEST CONFIGURED ═══', 'ok');
  log('Route: Working → ALU → Big → Memory', 'info');
  log('Buses A/B/C ON, all gates CLOSED', 'info');
  log('ALU: route to A (first 4 values fill registers A→B→C→D)', 'info');
  log('PM1: odd numbers (mask 0x0001, match 0x0001) DESTRUCTIVE', 'info');
  log('PM2: bit 1 set (mask 0x0002, match 0x0002) DESTRUCTIVE', 'info');
  log('TG1: > 20000, clamp → 40000 COPY', 'info');
  log('TG2: < 10000, clamp → 5000 COPY', 'info');
  log('Memory: write-to-slots ON, auto-inc from slot 0', 'info');
  log('Inject values with the switches or RNG, then START the clock.', 'ok');
}

// Capture a deep copy of all L21 simulation state for save/restore
function captureFullSnapshot() {
  const clone = v => JSON.parse(JSON.stringify(v));
  return {
    clock:   { tickCount: clock.tickCount, hz: clock.hz, running: clock.running },
    loops: {
      working: { bits: loops['working'].bits.slice(), paused: loops['working'].paused, gateOpen: loops['working'].gateOpen },
      alu:     { bits: loops['alu'].bits.slice(),     paused: loops['alu'].paused,     gateOpen: loops['alu'].gateOpen },
      memory:  { bits: loops['memory'].bits.slice(),  paused: loops['memory'].paused,  gateOpen: loops['memory'].gateOpen },
      big:     { bits: loops['big'].bits.slice(),     paused: loops['big'].paused,     gateOpen: loops['big'].gateOpen },
    },
    buses:   clone(L21.buses),
    inj:     clone(inj),
    alu:     clone(alu),
    cmp:     clone(cmp),
    mem:     clone(mem),
    wscr:    clone(wscr),
    ctr:     clone(ctr),
    pm:      clone(pm),
    pm2:     clone(pm2),
    tg1:     clone(tg1),
    tg2:     clone(tg2),
    switchBits: switchBits.slice(),
    ext:     clone(L21.ext),
    operatorActionCount: L21.operatorActionCount,
    filterOrder: L21.filterOrder,
    opCount: clone(opCount),
    chall:   clone(CHALL),
    cbxAvailability: CBX.availability,
  };
}

// Restore all L21 simulation state from a previously captured snapshot
function restoreFromSnapshot(snap) {
  // Deep-assign: copies all properties from source into target, preserving target object references
  const deepAssign = (dest, src) => {
    for (const k in src) {
      if (Array.isArray(src[k])) {
        if (Array.isArray(dest[k])) { dest[k].length = 0; for (let i = 0; i < src[k].length; i++) dest[k][i] = src[k][i]; }
        else dest[k] = JSON.parse(JSON.stringify(src[k]));
      } else if (src[k] !== null && typeof src[k] === 'object') {
        if (!dest[k] || typeof dest[k] !== 'object') dest[k] = {};
        deepAssign(dest[k], src[k]);
      } else {
        dest[k] = src[k];
      }
    }
  };

  // Clock
  clock.tickCount = snap.clock.tickCount;
  clock.hz = snap.clock.hz;

  // Loops — restore bits/paused/gateOpen, reset visual state
  for (const id of ['working', 'alu', 'memory', 'big']) {
    deepAssign(loops[id], snap.loops[id]);
    loops[id].flash = 0;
    loops[id].lastWord = null;
  }

  // Buses A-D — restore state, zero flash
  for (const busId of ['a', 'b', 'c', 'd']) {
    deepAssign(L21.buses[busId], snap.buses[busId]);
    L21.buses[busId].flash = 0;
  }

  // Bus E
  deepAssign(L21.buses.e, snap.buses.e);
  L21.buses.e.outFlash = 0; L21.buses.e.inFlash = 0;

  // Buses F/G (P2P) — restore with legacy fallback for old snapshot formats
  if (snap.buses.f && snap.buses.f.outBits) {
    deepAssign(L21.buses.f, snap.buses.f);
    L21.buses.f.outFlash = 0; L21.buses.f.inFlash = 0;
    // Legacy fallback: old snapshots stored P2P buffers as top-level properties
    if (snap._p2pOutBufL)  L21.buses.f.outBuf  = snap._p2pOutBufL.slice();
    if (snap._p2pOutBuf)   L21.buses.f.outBuf  = snap._p2pOutBuf.slice();
    if (snap._p2pInQueueL) L21.buses.f.inQueue = snap._p2pInQueueL.slice();
    if (snap._p2pInQueue)  L21.buses.f.inQueue = snap._p2pInQueue.slice();
    if (snap._p2pWordBufL) L21.buses.f.wordBuf = snap._p2pWordBufL.slice();
  }
  if (snap.buses.g && snap.buses.g.outBits) {
    deepAssign(L21.buses.g, snap.buses.g);
    L21.buses.g.outFlash = 0; L21.buses.g.inFlash = 0;
    // Legacy fallback
    if (snap._p2pOutBufR)  L21.buses.g.outBuf  = snap._p2pOutBufR.slice();
    if (snap._p2pInQueueR) L21.buses.g.inQueue = snap._p2pInQueueR.slice();
    if (snap._p2pWordBufR) L21.buses.g.wordBuf = snap._p2pWordBufR.slice();
  }

  // Buses H/I (net routable)
  for (const busId of ['h', 'i']) {
    if (snap.buses[busId]) {
      deepAssign(L21.buses[busId], snap.buses[busId]);
      L21.buses[busId].outFlash = 0; L21.buses[busId].inFlash = 0;
    }
  }

  // Injection — restore state, zero flash
  deepAssign(inj, snap.inj);
  inj.flash = 0;

  // ALU — restore state, clear auto-wb pending
  deepAssign(alu, snap.alu);
  alu._autoWbPending = false;

  // Comparator
  deepAssign(cmp, snap.cmp);

  // Memory
  deepAssign(mem, snap.mem);

  // Working scratch
  deepAssign(wscr, snap.wscr);

  // Counters
  for (const id of ['working', 'alu', 'memory', 'big', 'global']) deepAssign(ctr[id], snap.ctr[id]);

  // Op count
  deepAssign(opCount, snap.opCount);

  // Pattern matchers — restore state, zero flash
  deepAssign(pm, snap.pm);
  pm.bridgeFlash = 0;
  deepAssign(pm2, snap.pm2);
  pm2.bridgeFlash = 0; pm2.matchBridgeFlash = 0; pm2.rejectBridgeFlash = 0;

  // Threshold gates — restore state, zero flash
  deepAssign(tg1, snap.tg1);
  tg1.bridgeFlash = 0;
  deepAssign(tg2, snap.tg2);
  tg2.bridgeFlash = 0; tg2.matchBridgeFlash = 0; tg2.rejectBridgeFlash = 0;

  // Operator input
  if (Array.isArray(snap.switchBits)) {
    switchBits.length = 0;
    for (let i = 0; i < snap.switchBits.length; i++) switchBits[i] = snap.switchBits[i];
  }

  // External / challenge
  deepAssign(L21.ext, snap.ext);
  L21.operatorActionCount = snap.operatorActionCount;

  // Filter order
  if (snap.filterOrder) L21.filterOrder = snap.filterOrder;
  const filterBtn = document.getElementById('filter-order-btn');
  if (filterBtn) {
    const label = L21.filterOrder === 'pm_first' ? 'PM → TG' : 'TG → PM';
    filterBtn.textContent = 'FILTER ORDER: ' + label;
    filterBtn.classList.toggle('active', L21.filterOrder === 'tg_first');
  }

  // Challenge state
  deepAssign(CHALL, snap.chall);

  // CBX availability — preserved across rewind
  if (snap.cbxAvailability) {
    CBX.availability = snap.cbxAvailability;
    cbxRefreshAvailabilityDisplay();
  }

  // ── Refresh all displays ──
  if (EL.tickDisplay) EL.tickDisplay.textContent = String(clock.tickCount).padStart(9, '0');
  refreshAllDisplaysAfterRestore();
}

// Refresh every display element after a snapshot restore
function refreshAllDisplaysAfterRestore() {
  // Force all display-dirty flags so renderAllComponents processes them
  alu.displayNeedsRefresh = true;
  mem.displayNeedsRefresh = true;
  workingScratchDisplayNeedsRefresh = true;

  // Peripheral displays not covered by renderAllComponents
  cmpCompute();
  refreshPatternMatcherDisplay();
  refreshPatternMatcher2Display();
  refreshThresholdGate1Display();
  refreshThresholdGate2Display();
  for(const id of ['working','alu','memory','big','global']) refreshCounterDisplay(id);
  refreshInputSwitchDisplay();

  // Bus sidebar + inline button states
  for (const busId of ['a','b','c','d','e','f','g','h','i']) syncBusSidebarButton(busId);

  // Gate and pause buttons
  for(const id of ['working','alu','memory','big']) {
    const lp = loops[id];
    const gBtn = document.getElementById('gate-btn-' + id);
    if(gBtn) { gBtn.textContent = lp.gateOpen ? 'CLOSE GATE' : 'OPEN GATE'; gBtn.className = lp.gateOpen ? 'gate-btn gate-open' : 'gate-btn gate-closed'; }
    const pBtn = document.getElementById('pause-btn-' + id);
    if(pBtn) { pBtn.textContent = lp.paused ? '▶' : '⏸'; pBtn.className = lp.paused ? 'pause-btn loop-paused' : 'pause-btn loop-running'; }
  }

  // ALU operation selector
  document.querySelectorAll('.alu-op').forEach(el => {
    el.classList.toggle('sel-op', el.dataset.op === alu.op);
  });
  // ALU route selector
  ['off','a','b','c','d'].forEach(rid => {
    const el = document.getElementById('route-' + rid);
    if(el) el.classList.toggle('active', (alu.route === null && rid === 'off') || alu.route === rid);
  });
  // ALU mode button
  const modeBtn = document.getElementById('alu-mode-btn');
  if(modeBtn) { modeBtn.textContent = alu.ignore3 ? 'MODE: 12-BIT' : 'MODE: 16-BIT'; }

  // Speed slider
  const speedSlider = document.getElementById('speed-slider');
  if(speedSlider) speedSlider.value = clock.hz;
  const speedVal = document.getElementById('speed-val');
  if(speedVal) speedVal.textContent = clock.hz + ' Hz';

  // Snapshot scrubber
  updateSnapshotScrubber();

  renderAllComponents();
}

// ── Snapshot controls ──
function snapshotCaptureAfterTick() {
  if(snapshotHistory.length >= SNAPSHOT_MAX) {
    // Drop oldest 10% to avoid hitting the cap every tick
    snapshotHistory.splice(0, Math.floor(SNAPSHOT_MAX * 0.1));
  }
  snapshotHistory[clock.tickCount] = captureFullSnapshot();
  updateSnapshotScrubber();
}

// Capture the initial snapshot for session rewind (called at challenge start)
function snapshotCaptureInitial() {
  snapshotHistory.length = 0;
  snapshotHistory[0] = captureFullSnapshot();
}

// Rewind one tick by restoring the previous snapshot and re-running
function stepBack() {
  if(clock.running) { log('Stop the clock before stepping back', 'err'); return; }
  const target = clock.tickCount - 1;
  if(target < 0 || !snapshotHistory[target]) { log('No earlier snapshot available', 'err'); return; }
  restoreFromSnapshot(snapshotHistory[target]);
  // Trim future snapshots (they're now invalid since state diverged)
  snapshotHistory.length = clock.tickCount + 1;
  log('Stepped back to tick ' + clock.tickCount, 'info');
}

// Rewind to the initial snapshot (tick 0)
function rewindToStart() {
  if(clock.running) { log('Stop the clock before rewinding', 'err'); return; }
  if(!snapshotHistory[0]) { log('No initial snapshot available', 'err'); return; }
  restoreFromSnapshot(snapshotHistory[0]);
  snapshotHistory.length = 1;
  log('Rewound to tick 0', 'info');
}

// Rewind to a specific tick number by replaying from the initial snapshot
function rewindToTick(targetTick) {
  if(clock.running) { log('Stop the clock before rewinding', 'err'); return; }
  targetTick = Math.max(0, Math.min(targetTick, snapshotHistory.length - 1));
  if(!snapshotHistory[targetTick]) { log('No snapshot at tick ' + targetTick, 'err'); return; }
  restoreFromSnapshot(snapshotHistory[targetTick]);
  snapshotHistory.length = clock.tickCount + 1;
  log('Rewound to tick ' + clock.tickCount, 'info');
}

// Update the snapshot scrubber slider range and position
function updateSnapshotScrubber() {
  const scrubber = document.getElementById('tick-scrubber');
  if(!scrubber) return;
  const maxTick = snapshotHistory.length - 1;
  scrubber.max = Math.max(0, maxTick);
  scrubber.value = clock.tickCount;
  const label = document.getElementById('tick-scrubber-label');
  if(label) label.textContent = clock.tickCount + ' / ' + maxTick;
}

// ── Logger toggle / download ──────────────────────────────────────

function updateLoggerStatusDisplay() {
  const btn = document.getElementById('logger-toggle-btn');
  const dlBtn = document.getElementById('logger-dl-btn');
  const status = document.getElementById('logger-status');
  if (!btn) return;
  if (logger.active) {
    btn.textContent = '■ END SESSION LOG';
    btn.className = 'log-ctrl-btn logging';
    status.textContent = `Recording… ${logger.lines.length} lines / tick ${logger.tickCount}`;
  } else {
    btn.textContent = '● BEGIN SESSION LOG';
    btn.className = 'log-ctrl-btn';
    if (logger.lines.length > 0) {
      status.textContent = `Stopped. ${logger.lines.length} lines captured.`;
      dlBtn.disabled = false;
    } else {
      status.textContent = 'Log inactive';
      dlBtn.disabled = true;
    }
  }
}

// Toggle session logging on/off and write the session header when starting
function loggerToggle() {
  if (!logger.active) {
    // Start
    logger.active = true;
    logger.lines = [];
    logger.tickCount = 0;
    logger.startTime = Date.now();
    logger.sessionStartTime = performance.now();
    resetSessionStatistics();
    // If clock is already stopped, start counting pause time immediately
    if (!clock.running) stats._pauseStart = performance.now();
    writeLogLine('// LOOP 2.1 SESSION LOG', `Session started ${new Date().toLocaleString()}`);
    writeLogLine('//', '');
    logWriteSPEC();
    writeLogLine('//', '');
    logWriteINIT();
    writeLogLine('//', '');
    writeLogLine('// BEGIN OPERATIONS', 'Operator actions and clock ticks follow');
    log('Logger started', 'ok');
  } else {
    // Stop
    logger.active = false;
    writeLogLine('//', '');
    writeLogLine('// END OPERATIONS', 'Session ended');
    writeLogLine('//', '');
    // Write operator notes before FINAL if any were entered
    const notesEl = document.getElementById('operator-notes');
    const notesText = notesEl ? notesEl.value.trim() : '';
    if (notesText) {
      writeLogLine('// OPERATOR NOTES', 'Operator notes follow');
      notesText.split('\n').forEach(line => {
        writeLogLine('NOTE ' + line, line);
      });
      writeLogLine('//', '');
    }
    logWriteFINAL();
    writeLogLine('//', '');
    logWriteFormatRef();
    log(`Logger stopped — ${logger.lines.length} lines captured`, 'ok');
  }
  updateLoggerStatusDisplay();
}

// Download the current session log as a .loop text file
function loggerDownload() {
  if (!logger.lines.length) return;
  const text = logger.lines.join('\n');
  const blob = new Blob([text], {type: 'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `loop2_session_${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.loop`;
  a.click();
  URL.revokeObjectURL(url);
}

// ================================================================
//  NOTIFICATIONS — per-loop sound alerts and P2P chat alert
//  Sounds synthesized via Web Audio API (no external files).
//  Triggers: wordRead, wordWritten, fullCycle per loop.
//  Each loop and chat independently selects one of eight sounds.
//  All notifications off by default.
// ================================================================

const NOTIF_SOUNDS = [
  { id: 'none',    label: '— Off —' },
  { id: 'ding',    label: 'Ding' },
  { id: 'bell',    label: 'Bell' },
  { id: 'chime',   label: 'Chime' },
  { id: 'blip',    label: 'Blip' },
  { id: 'bloop',   label: 'Bloop' },
  { id: 'tone',    label: 'Soft Tone' },
  { id: 'pop',     label: 'Pop' },
  { id: 'pulse',   label: 'Pulse' },
];

const NOTIF_TRIGGER_LABELS = {
  wordRead:    'Word Read',
  wordWritten: 'Word Written',
  fullCycle:   'Full Cycle',
};

// State: per loop — which triggers are armed, which sound is selected
const notif = {
  working: { triggers: { wordRead:false, wordWritten:false, fullCycle:false }, sound:'none' },
  alu:     { triggers: { wordRead:false, wordWritten:false, fullCycle:false }, sound:'none' },
  memory:  { triggers: { wordRead:false, wordWritten:false, fullCycle:false }, sound:'none' },
  big:     { triggers: { wordRead:false, wordWritten:false, fullCycle:false }, sound:'none' },
  chat:    { armed:false, sound:'none' },
  fileOffer:    { armed:false, sound:'none' },
  fileReceived: { armed:false, sound:'none' },
  fileDeclined: { armed:false, sound:'none' },
  challInvite:  { armed:false, sound:'none' },
  challStart:   { armed:false, sound:'none' },
  challFail:    { armed:false, sound:'none' },
  challWin:     { armed:false, sound:'none' },
  netInvite:    { armed:false, sound:'none' },
  netJoin:      { armed:false, sound:'none' },
  netDrop:      { armed:false, sound:'none' },
};

// Shared AudioContext — created lazily on first use to satisfy browser autoplay policy
let _audioContext = null;
// Get or create the shared Web Audio API AudioContext
function getAudioContext() {
  if (!_audioContext) _audioContext = new (window.AudioContext || window.webkitAudioContext)();
  return _audioContext;
}

// Play a notification sound by id using the Web Audio API
function notifPlaySound(soundId) {
  if (!soundId || soundId === 'none') return;
  try {
    const ctx = getAudioContext();
    const now = ctx.currentTime;
    switch (soundId) {

      case 'ding': {
        // Clean, bright ding — high sine with quick decay
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'sine'; osc.frequency.setValueAtTime(1480, now);
        osc.frequency.exponentialRampToValueAtTime(1200, now + 0.3);
        gain.gain.setValueAtTime(0.4, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.6);
        osc.start(now); osc.stop(now + 0.65);
        break;
      }

      case 'bell': {
        // Mellow bell — two partials, slower decay
        for (const [freq, amp] of [[880, 0.3], [2200, 0.12]]) {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain); gain.connect(ctx.destination);
          osc.type = 'sine'; osc.frequency.setValueAtTime(freq, now);
          gain.gain.setValueAtTime(amp, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 1.2);
          osc.start(now); osc.stop(now + 1.3);
        }
        break;
      }

      case 'chime': {
        // Airy chime — triangle wave, gentle envelope
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'triangle'; osc.frequency.setValueAtTime(1046, now);
        gain.gain.setValueAtTime(0.0, now);
        gain.gain.linearRampToValueAtTime(0.35, now + 0.02);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.9);
        osc.start(now); osc.stop(now + 1.0);
        break;
      }

      case 'blip': {
        // Short electronic blip — square, very brief
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'square'; osc.frequency.setValueAtTime(660, now);
        gain.gain.setValueAtTime(0.15, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08);
        osc.start(now); osc.stop(now + 0.1);
        break;
      }

      case 'bloop': {
        // Descending bloop — sine sweep down
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'sine';
        osc.frequency.setValueAtTime(520, now);
        osc.frequency.exponentialRampToValueAtTime(180, now + 0.18);
        gain.gain.setValueAtTime(0.3, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.22);
        osc.start(now); osc.stop(now + 0.25);
        break;
      }

      case 'tone': {
        // Soft warm tone — sine, slow fade in and out
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.type = 'sine'; osc.frequency.setValueAtTime(528, now);
        gain.gain.setValueAtTime(0.0, now);
        gain.gain.linearRampToValueAtTime(0.25, now + 0.06);
        gain.gain.linearRampToValueAtTime(0.25, now + 0.25);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.55);
        osc.start(now); osc.stop(now + 0.6);
        break;
      }

      case 'pop': {
        // Soft pop — noise burst shaped into a thump
        const bufferSize = Math.floor(ctx.sampleRate * 0.05);
        const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const data = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize);
        const source = ctx.createBufferSource();
        const gain = ctx.createGain();
        const filter = ctx.createBiquadFilter();
        source.buffer = buffer;
        filter.type = 'lowpass'; filter.frequency.value = 400;
        source.connect(filter); filter.connect(gain); gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.6, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
        source.start(now);
        break;
      }

      case 'pulse': {
        // Two-tone pulse — ascending pair, retro feel
        for (const [delay, freq] of [[0, 440], [0.1, 660]]) {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain); gain.connect(ctx.destination);
          osc.type = 'sine'; osc.frequency.setValueAtTime(freq, now + delay);
          gain.gain.setValueAtTime(0.0, now + delay);
          gain.gain.linearRampToValueAtTime(0.22, now + delay + 0.01);
          gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.12);
          osc.start(now + delay); osc.stop(now + delay + 0.15);
        }
        break;
      }
    }
  } catch(e) { /* audio errors are non-fatal */ }
}

// Called from the tick engine at the same points as ctrFire
function notifFire(loopId, trigger) {
  if (!notif[loopId]) return;
  if (!notif[loopId].triggers[trigger]) return;
  notifPlaySound(notif[loopId].sound);
}

// Called when a P2P chat message arrives
function notifFireChat() {
  if (!notif.chat.armed) return;
  notifPlaySound(notif.chat.sound);
}

// Play a preview of a notification sound
function notifPreviewSound(soundId) {
  notifPlaySound(soundId);
}

// Toggle a notification trigger armed state for a loop
function notifToggleTrigger(loopId, trigger) {
  notif[loopId].triggers[trigger] = !notif[loopId].triggers[trigger];
  const btn = document.getElementById(`notif-trig-${loopId}-${trigger}`);
  if (btn) btn.classList.toggle('active', notif[loopId].triggers[trigger]);
}

// Set the sound id for a loop notification
function notifSetSound(loopId, soundId) {
  notif[loopId].sound = soundId;
}


// ── Files notification toggles and fire functions ──────────────
function notifToggleFileOffer()    { notif.fileOffer.armed    = !notif.fileOffer.armed;    notifToggleButton('notif-file-offer-btn',    'FILE OFFER');    }
// Toggle the file-received notification trigger
function notifToggleFileReceived() { notif.fileReceived.armed = !notif.fileReceived.armed; notifToggleButton('notif-file-received-btn', 'FILE RECEIVED'); }
// Toggle the file-declined notification trigger
function notifToggleFileDeclined() { notif.fileDeclined.armed = !notif.fileDeclined.armed; notifToggleButton('notif-file-declined-btn', 'FILE DECLINED'); }
// Set the sound for all file transfer notifications
function notifSetFileSound(soundId) { notif.fileOffer.sound = notif.fileReceived.sound = notif.fileDeclined.sound = soundId; }
// Fire the file-offer notification sound if armed
function notifFireFileOffer()    { if (notif.fileOffer.armed)    notifPlaySound(notif.fileOffer.sound);    }
// Fire the file-received notification sound if armed
function notifFireFileReceived() { if (notif.fileReceived.armed) notifPlaySound(notif.fileReceived.sound); }
// Fire the file-declined notification sound if armed
function notifFireFileDeclined() { if (notif.fileDeclined.armed) notifPlaySound(notif.fileDeclined.sound); }

// ── Challenge notification toggles and fire functions ──────────
function notifToggleChallInvite() { notif.challInvite.armed = !notif.challInvite.armed; notifToggleButton('notif-chall-invite-btn', 'CHALLENGE INVITE'); }
// Toggle the challenge-start notification trigger
function notifToggleChallStart()  { notif.challStart.armed  = !notif.challStart.armed;  notifToggleButton('notif-chall-start-btn',  'CHALLENGE START');  }
// Toggle the challenge-fail notification trigger
function notifToggleChallFail()   { notif.challFail.armed   = !notif.challFail.armed;   notifToggleButton('notif-chall-fail-btn',   'CHALLENGE FAIL');   }
// Toggle the challenge-win notification trigger
function notifToggleChallWin()    { notif.challWin.armed    = !notif.challWin.armed;    notifToggleButton('notif-chall-win-btn',    'CHALLENGE WIN');    }
// Set the sound for all challenge notifications
function notifSetChallSound(soundId) { notif.challInvite.sound = notif.challStart.sound = notif.challFail.sound = notif.challWin.sound = soundId; }
// Fire the challenge-invite notification sound if armed
function notifFireChallInvite() { if (notif.challInvite.armed) notifPlaySound(notif.challInvite.sound); }
// Fire the challenge-start notification sound if armed
function notifFireChallStart()  { if (notif.challStart.armed)  notifPlaySound(notif.challStart.sound);  }
// Fire the challenge-fail notification sound if armed
function notifFireChallFail()   { if (notif.challFail.armed)   notifPlaySound(notif.challFail.sound);   }
// Fire the challenge-win notification sound if armed
function notifFireChallWin()    { if (notif.challWin.armed)    notifPlaySound(notif.challWin.sound);    }

// ── Networking notification toggles and fire functions ─────────
function notifToggleNetInvite() { notif.netInvite.armed = !notif.netInvite.armed; notifToggleButton('notif-net-invite-btn', 'NETWORK INVITE'); }
// Toggle the network-member-joined notification trigger
function notifToggleNetJoin()   { notif.netJoin.armed   = !notif.netJoin.armed;   notifToggleButton('notif-net-join-btn',   'MEMBER JOINED');  }
// Toggle the network-member-dropped notification trigger
function notifToggleNetDrop()   { notif.netDrop.armed   = !notif.netDrop.armed;   notifToggleButton('notif-net-drop-btn',   'MEMBER DROPPED'); }
// Fire the network-invite notification sound if armed
function notifFireNetInvite() { if (notif.netInvite.armed) notifPlaySound(notif.netInvite.sound); }
// Fire the network-member-joined notification sound if armed
function notifFireNetJoin()   { if (notif.netJoin.armed)   notifPlaySound(notif.netJoin.sound);   }
// Fire the network-member-dropped notification sound if armed
function notifFireNetDrop()   { if (notif.netDrop.armed)   notifPlaySound(notif.netDrop.sound);   }
// Update a notification toggle button to reflect armed/disarmed state
function notifToggleButton(id, label) {
  const btn = document.getElementById(id);
  if(!btn) return;
  const active = btn.classList.toggle('active');
  btn.textContent = (active ? '✓ ' : '') + label;
}

// Toggle the chat-message notification trigger
function notifToggleChat() {
  notif.chat.armed = !notif.chat.armed;
  const btn = document.getElementById('notif-chat-btn');
  if (btn) btn.classList.toggle('active', notif.chat.armed);
}

// Set the sound for chat notifications
function notifSetChatSound(soundId) {
  notif.chat.sound = notif.netInvite.sound = notif.netJoin.sound = notif.netDrop.sound = soundId;
}

// Build the notification configuration panel in the sidebar
function buildNotifPanel() {
  const fileSoundSel = document.getElementById('notif-file-sound-select');
  if (fileSoundSel && fileSoundSel.options.length === 0) {
    NOTIF_SOUNDS.forEach(s => {
      const opt = document.createElement('option');
      opt.value = s.id; opt.textContent = s.label;
      fileSoundSel.appendChild(opt);
    });
  }
  const challSoundSel = document.getElementById('notif-chall-sound-select');
  if (challSoundSel && challSoundSel.options.length === 0) {
    NOTIF_SOUNDS.forEach(s => {
      const opt = document.createElement('option');
      opt.value = s.id; opt.textContent = s.label;
      challSoundSel.appendChild(opt);
    });
  }
  const panel = document.getElementById('notif-loops-panel');
  if (!panel || panel.children.length) return;
  const LOOP_COLORS = { working:'#4a90d9', alu:'#f0a000', memory:'#00c864', big:'#00b8e0' };
  for (const loopId of ['working','alu','memory','big']) {
    const group = document.createElement('div');
    group.className = 'notif-group';

    const title = document.createElement('div');
    title.className = 'notif-group-title';
    title.textContent = loopId.toUpperCase();
    title.style.color = LOOP_COLORS[loopId];
    group.appendChild(title);

    // Trigger buttons
    const btnRow = document.createElement('div');
    btnRow.className = 'notif-trig-btns';
    for (const trigger of ['wordRead','wordWritten','fullCycle']) {
      const btn = document.createElement('button');
      btn.className = 'notif-trig-btn';
      btn.id = `notif-trig-${loopId}-${trigger}`;
      btn.textContent = NOTIF_TRIGGER_LABELS[trigger];
      btn.onclick = () => notifToggleTrigger(loopId, trigger);
      btnRow.appendChild(btn);
    }
    group.appendChild(btnRow);

    // Sound selector row
    const soundRow = document.createElement('div');
    soundRow.className = 'notif-sound-row';
    const label = document.createElement('span');
    label.className = 'notif-sound-label';
    label.textContent = 'SOUND';
    const select = document.createElement('select');
    select.className = 'notif-sound-select';
    select.id = `notif-sound-${loopId}`;
    select.onchange = () => notifSetSound(loopId, select.value);
    for (const s of NOTIF_SOUNDS) {
      const opt = document.createElement('option');
      opt.value = s.id; opt.textContent = s.label;
      select.appendChild(opt);
    }
    const previewBtn = document.createElement('button');
    previewBtn.className = 'notif-preview-btn';
    previewBtn.textContent = '▶';
    previewBtn.onclick = () => notifPreviewSound(select.value);
    soundRow.appendChild(label);
    soundRow.appendChild(select);
    soundRow.appendChild(previewBtn);
    group.appendChild(soundRow);
    panel.appendChild(group);
  }

  // Populate chat sound select
  const chatSelect = document.getElementById('notif-chat-sound-select');
  if (chatSelect && !chatSelect.children.length) {
    for (const s of NOTIF_SOUNDS) {
      const opt = document.createElement('option');
      opt.value = s.id; opt.textContent = s.label;
      chatSelect.appendChild(opt);
    }
  }
}

// ================================================================
//  P2P — WebRTC peer-to-peer data channel
//  Manual SDP exchange (copy-paste offer/answer between operators).
//  Uses Google STUN servers for NAT traversal. No signaling server.
//  Data channel carries 16-bit word values as JSON messages.
// ================================================================

const P2P_STUN = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };

// Per-side state: 'l' = Bus F / Left, 'r' = Bus G / Right
const _p2p = {
  l: { connection: null, dataChannel: null, isInitiator: false, latencyInterval: null, peerName: '' },
  r: { connection: null, dataChannel: null, isInitiator: false, latencyInterval: null, peerName: '' },
};

// Return the P2P state object for a side (left or right)
function p2pSide(side) { return _p2p[side] || _p2p.l; }

// Update the P2P connection status display for a side
function p2pUpdateStatus(side, state) {
  const el = document.getElementById('p2p-status-' + side);
  if (!el) return;
  el.textContent = state.toUpperCase();
  el.className = 'p2p-status ' + (state === 'connected' ? 'connected' : state === 'connecting' ? 'connecting' : 'disconnected');
  p2pSetChatPanelActive(side, state === 'connected');
}

// Compress SDP: strip unnecessary lines, base64 encode
function p2pCompressSDP(sdp) {
  const lines = sdp.split('\r\n').filter(line => {
    if (!line) return false;
    if (line.startsWith('a=extmap:')) return false;
    if (line.startsWith('a=rtcp-mux')) return false;
    if (line.startsWith('a=rtcp-rsize')) return false;
    if (line.startsWith('a=msid-semantic')) return false;
    return true;
  });
  return btoa(lines.join('\n'));
}

// Decompress a shortened SDP offer/answer string back to full SDP format
function p2pDecompressSDP(compressed) {
  try {
    return atob(compressed).replace(/\n/g, '\r\n') + '\r\n';
  } catch(e) {
    return null;
  }
}

// ── Machine ID — generated once, persisted in localStorage

function chatDownloadLog() {
  let lines = ['LOOP 2.1 CHAT LOG', '================', ''];
  for(const [peerId, peer] of chatPeers) {
    if(!peer.history || peer.history.length === 0) continue;
    const handle = peer.handle || peerId;
    lines.push(`--- ${handle} ---`);
    peer.history.forEach(entry => {
      const sender = entry.who === 'you' ? 'You' : handle;
      lines.push(`[${entry.time || ''}] ${sender}: ${entry.text}`);
    });
    lines.push('');
  }
  const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'loop21-chat-log.txt'; a.click();
  URL.revokeObjectURL(url);
}

// Generate a new random 8-character machine ID
function p2pGenerateMachineId() {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let id = '';
  for (let i = 0; i < 4; i++) id += chars[Math.floor(Math.random() * chars.length)];
  return id;
}

// Get the persistent machine ID (generates one if not yet stored)
function p2pGetMachineId() {
  try {
    let id = localStorage.getItem('loop21_machine_id');
    if (!id) { id = p2pGenerateMachineId(); localStorage.setItem('loop21_machine_id', id); }
    return id;
  } catch(e) {
    return p2pGenerateMachineId();
  }
}

// Get the operator handle or fall back to machine ID
function p2pGetLocalIdentity() {
  const handle = (typeof operatorHandle !== 'undefined') ? operatorHandle.trim() : '';
  return handle || p2pGetMachineId();
}

const _p2pMachineId = p2pGetMachineId();

// Populate the machine ID display element at init
function p2pInitMachineIdDisplay() {
  const el = document.getElementById('p2p-machine-id');
  if (el) el.textContent = _p2pMachineId;
}

// Set the display name for a connected peer
function p2pSetPeerName(side, name) {
  p2pSide(side).peerName = name || 'PEER';
  const line    = document.getElementById('p2p-peer-name-line-' + side);
  const display = document.getElementById('p2p-peer-name-' + side);
  if (line)    line.style.display = '';
  if (display) display.textContent = p2pSide(side).peerName;
}

// Clear the display name for a disconnected peer
function p2pClearPeerName(side) {
  p2pSide(side).peerName = '';
  const line = document.getElementById('p2p-peer-name-line-' + side);
  if (line) line.style.display = 'none';
}

// Send this machine identity to a connected peer
function p2pSendIdentity(side) {
  const dc = p2pSide(side).dataChannel;
  if (!dc || dc.readyState !== 'open') return;
  dc.send(JSON.stringify({ type: 'identity', name: p2pGetLocalIdentity(), machineId: _p2pMachineId }));
}

// Configure event handlers on a WebRTC data channel
function p2pSetupDataChannel(channel, side) {
  p2pSide(side).dataChannel = channel;
  channel.onopen = () => {
    p2pUpdateStatus(side, 'connected');
    log(`P2P ${side.toUpperCase()} connected`, 'ok');
    logSetup(`OP.P2P.${side.toUpperCase()} CONNECTED`, `P2P ${side} data channel opened`);
    p2pStartLatencyPing(side);
    p2pSendIdentity(side);
    chainOnPeerConnected(side);
  };
  channel.onclose = () => {
    p2pUpdateStatus(side, 'disconnected');
    p2pClearPeerName(side);
    log(`P2P ${side.toUpperCase()} data channel closed`, 'info');
    p2pStopLatencyPing(side);
    chainOnPeerDisconnected(side);
  };
  channel.onerror = (e) => {
    log(`P2P ${side.toUpperCase()} error: ` + (e.message || e), 'err');
  };
  channel.onmessage = (event) => {
    try {
      const msg = JSON.parse(event.data);
      // CBX coordination messages are intercepted here before touching any loop data.
      // They are identified by the presence of a 'cbxType' field.
      if (msg.cbxType) {
        cbxReceiveMessage(side, msg);
        return;
      }
      // Networking messages are identified by 'netType' field.
      if (msg.netType) {
        chainReceiveMessage(side, { ...msg, type: msg.netType });
        return;
      }
      if (msg.type === 'word') {
        p2pQueueInboundWord(msg.value, side);
        log(`P2P${side.toUpperCase()} ← ${msg.value} (0x${msg.value.toString(16).toUpperCase().padStart(4,'0')})`, 'bus');
        if(logger.active) logOp(`P2P.${side.toUpperCase()}.RECV ${msg.value}`, `P2P ${side} received word ${msg.value}`);
      } else if (msg.type === 'identity') {
        p2pSetPeerName(side, msg.name);
        p2pSide(side).peerId = msg.machineId || ('p2p-' + side);
        log(`P2P ${side.toUpperCase()} peer: ${msg.name}`, 'ok');
      } else if (msg.type === 'chat') {
        p2pReceiveChatMessage(side, msg.text, p2pSide(side).peerId);
      } else if (msg.type === 'pong') {
        const latency = performance.now() - msg.timestamp;
        const el = document.getElementById('p2p-latency-' + side);
        if(el) el.textContent = Math.round(latency) + 'ms';
        const netEl = document.getElementById('chain-latency-' + side + '-val');
        if(netEl) netEl.textContent = Math.round(latency) + 'ms';
      } else if (msg.type === 'ping') {
        const dc = p2pSide(side).dataChannel;
        if(dc && dc.readyState === 'open') {
          dc.send(JSON.stringify({ type: 'pong', timestamp: msg.timestamp }));
        }
      }
    } catch(e) { /* ignore non-JSON messages */ }
  };
}

// Send a 16-bit word to a P2P peer via the data channel
function p2pSendWord(value, side) {
  const dc = p2pSide(side).dataChannel;
  if (!dc || dc.readyState !== 'open') {
    log(`P2P ${side.toUpperCase()} not connected — word dropped`, 'err');
    return;
  }
  dc.send(JSON.stringify({ type: 'word', value: value }));
  log(`P2P${side.toUpperCase()} → ${value} (0x${value.toString(16).toUpperCase().padStart(4,'0')})`, 'bus');
  if(logger.active) logOp(`P2P.${side.toUpperCase()}.SEND ${value}`, `P2P ${side} sent word ${value}`);
}

// Return a formatted timestamp string for chat messages
function p2pChatTimestamp() {
  const now = new Date();
  return String(now.getHours()).padStart(2,'0') + ':' +
         String(now.getMinutes()).padStart(2,'0') + ':' +
         String(now.getSeconds()).padStart(2,'0');
}

// Append a chat message to the P2P chat display (legacy path)
function p2pAppendChatMessage(side, who, text) {
  const logEl = document.getElementById('p2p-chat-log-' + side);
  if (!logEl) return;
  const row = document.createElement('div');
  row.className = 'p2p-chat-msg';
  const timeSpan = document.createElement('span');
  timeSpan.className = 'chat-time';
  timeSpan.textContent = p2pChatTimestamp();
  const whoSpan = document.createElement('span');
  whoSpan.className = who === 'you' ? 'chat-who-you' : 'chat-who-peer';
  whoSpan.textContent = who === 'you' ? p2pGetLocalIdentity() : (p2pSide(side).peerName || 'PEER');
  const textNode = document.createTextNode(' ' + text);
  row.appendChild(timeSpan);
  row.appendChild(whoSpan);
  row.appendChild(textNode);
  logEl.appendChild(row);
  logEl.scrollTop = logEl.scrollHeight;
}

// Send a chat message to a P2P peer (legacy path)
function p2pSendChatMessage(side) {
  const input = document.getElementById('p2p-chat-input-' + side);
  if (!input) return;
  const text = input.value.trim();
  if (!text) return;
  const dc = p2pSide(side).dataChannel;
  if (!dc || dc.readyState !== 'open') {
    log(`P2P ${side.toUpperCase()} not connected — chat unavailable`, 'err');
    return;
  }
  dc.send(JSON.stringify({ type: 'chat', text: text }));
  p2pAppendChatMessage(side, 'you', text);
  if(logger.active) logOp(`P2P.${side.toUpperCase()}.CHAT.SEND "${text}"`, `P2P ${side} chat sent: ${text}`);
  input.value = '';
  input.focus();
}

// Legacy function — now triggers unified chat refresh instead
function p2pSetChatPanelActive(side, isActive) {
  // Legacy function — now triggers unified chat refresh instead
  chatRefreshPeerList();
}

// ══════════════════════════════════════════════════════════════════════
//  UNIFIED CHAT SYSTEM
// ══════════════════════════════════════════════════════════════════════

// chatPeers: Map of peerId -> { handle, side ('l'|'r'|null), networkId (or null), history: [] }
const chatPeers = new Map();
let chatActivePeerId = null;

// Get or create a peer entry in the unified chat peer list
function chatGetOrCreatePeer(peerId, handle, side) {
  if (!chatPeers.has(peerId)) {
    chatPeers.set(peerId, { handle: handle || peerId, side: side || null, networkIds: new Set(), history: [] });
  } else {
    const peer = chatPeers.get(peerId);
    if (handle) peer.handle = handle;
    if (side) peer.side = side;
  }
  return chatPeers.get(peerId);
}

// Refresh the chat peer list sidebar with all known peers
function chatRefreshPeerList() {
  const select = document.getElementById('chat-peer-select');
  const nopeers = document.getElementById('chat-no-peers');
  const ui = document.getElementById('chat-ui');
  if (!select || !nopeers || !ui) return;

  // Build peer list from P2P connections + network members, deduped by ID
  const peerMap = new Map(); // peerId -> display info

  // Direct P2P neighbors
  ['l', 'r'].forEach(side => {
    const s = p2pSide(side);
    if (s.dataChannel && s.dataChannel.readyState === 'open') {
      const peerId = s.peerId || ('p2p-' + side);
      const handle = s.peerName || (side === 'l' ? 'LEFT NEIGHBOR' : 'RIGHT NEIGHBOR');
      peerMap.set(peerId, { handle, side, label: handle + ' (' + (side === 'l' ? 'PL' : 'PR') + ')' });
      chatGetOrCreatePeer(peerId, handle, side);
    }
  });

  // Network members (from all networks this machine belongs to or hubs)
  for (const [netId, net] of chainState.networks) {
    for (const [memberId, member] of net.members) {
      if (memberId === _p2pMachineId) continue; // skip self
      if (!peerMap.has(memberId)) {
        const label = (member.handle || memberId) + ' [' + net.name + ']';
        peerMap.set(memberId, { handle: member.handle || memberId, side: null, label });
        chatGetOrCreatePeer(memberId, member.handle, null);
      }
      const peer = chatPeers.get(memberId);
      if (peer) peer.networkIds.add(netId);
    }
  }

  if (peerMap.size === 0) {
    nopeers.style.display = '';
    ui.style.display = 'none';
    return;
  }

  nopeers.style.display = 'none';
  ui.style.display = '';

  // Rebuild select options
  const prevVal = select.value;
  select.innerHTML = '';
  for (const [peerId, info] of peerMap) {
    const opt = document.createElement('option');
    opt.value = peerId;
    opt.textContent = info.label;
    select.appendChild(opt);
  }

  // Restore selection or pick first
  if (prevVal && peerMap.has(prevVal)) {
    select.value = prevVal;
  } else {
    select.value = peerMap.keys().next().value;
  }

  chatActivePeerId = select.value;
  chatLoadHistory(chatActivePeerId);
}

// Select a peer in the chat list and load their message history
function chatSelectPeer(peerId) {
  chatActivePeerId = peerId;
  chatLoadHistory(peerId);
}

// Load and display the chat message history for a peer
function chatLoadHistory(peerId) {
  const logEl = document.getElementById('chat-log');
  if (!logEl) return;
  logEl.innerHTML = '';
  const peer = chatPeers.get(peerId);
  if (!peer) return;
  peer.history.forEach(entry => chatRenderMessage(logEl, entry.who, entry.name, entry.text, entry.time));
  logEl.scrollTop = logEl.scrollHeight;
}

// Render a single chat message into the chat log element
function chatRenderMessage(logEl, who, name, text, time) {
  const row = document.createElement('div');
  row.className = 'chat-msg';
  const timeSpan = document.createElement('span');
  timeSpan.className = 'chat-time';
  timeSpan.textContent = time;
  const whoSpan = document.createElement('span');
  whoSpan.className = who === 'you' ? 'chat-who-you' : 'chat-who-peer';
  whoSpan.textContent = name;
  const textNode = document.createTextNode(' ' + text);
  row.appendChild(timeSpan);
  row.appendChild(whoSpan);
  row.appendChild(textNode);
  logEl.appendChild(row);
}

// Return a formatted timestamp string for unified chat
function chatTimestamp() {
  const now = new Date();
  return String(now.getHours()).padStart(2,'0') + ':' +
         String(now.getMinutes()).padStart(2,'0') + ':' +
         String(now.getSeconds()).padStart(2,'0');
}

// Append a message to a peer chat history and update display if active
function chatAppendToHistory(peerId, who, name, text) {
  const peer = chatGetOrCreatePeer(peerId, null, null);
  const entry = { who, name, text, time: chatTimestamp() };
  peer.history.push(entry);
  // If this peer is active, render immediately
  if (peerId === chatActivePeerId) {
    const logEl = document.getElementById('chat-log');
    if (logEl) {
      chatRenderMessage(logEl, who, name, text, entry.time);
      logEl.scrollTop = logEl.scrollHeight;
    }
  }
}

// Send a chat message to the currently selected peer
function chatSendMessage() {
  const input = document.getElementById('chat-input');
  if (!input) return;
  const text = input.value.trim();
  if (!text || !chatActivePeerId) return;

  const peer = chatPeers.get(chatActivePeerId);
  if (!peer) return;

  let sent = false;
  // Try direct P2P first
  if (peer.side) {
    const dc = p2pSide(peer.side).dataChannel;
    if (dc && dc.readyState === 'open') {
      dc.send(JSON.stringify({ type: 'chat', text, fromId: _p2pMachineId }));
      sent = true;
    }
  }
  // Try network routing if no direct connection
  if (!sent && peer.networkIds && peer.networkIds.size > 0) {
    const netId = peer.networkIds.values().next().value;
    netRouteChatMessage(chatActivePeerId, text, netId);
    sent = true;
  }

  if (sent) {
    chatAppendToHistory(chatActivePeerId, 'you', p2pGetLocalIdentity(), text);
    if (logger.active) logOp(`CHAT.SEND TO=${chatActivePeerId} "${text}"`, `Chat sent to ${peer.handle}: ${text}`);
    input.value = '';
    input.focus();
  }
}

// Handle an incoming chat message from any source (P2P or network)
function chatReceiveMessage(fromId, fromHandle, text) {
  chatGetOrCreatePeer(fromId, fromHandle, null);
  chatAppendToHistory(fromId, 'peer', fromHandle || fromId, text);
  notifFireChat();
  log(`CHAT ← ${fromHandle || fromId}: "${text}"`, 'bus');
  if (logger.active) logOp(`CHAT.RECV FROM=${fromId} "${text}"`, `Chat from ${fromHandle || fromId}: ${text}`);
}

// Update P2P chat receive to route through unified system
function p2pReceiveChatMessage(side, text, fromId) {
  const s = p2pSide(side);
  const peerId = fromId || s.peerId || ('p2p-' + side);
  const handle = s.peerName || (side === 'l' ? 'LEFT' : 'RIGHT');
  chatReceiveMessage(peerId, handle, text);
}

// ══════════════════════════════════════════════════════════════════════
//  NETWORKING SYSTEM
// ══════════════════════════════════════════════════════════════════════

// Network packet types
const NET_MSG = {
  SCAN:         'chain_scan',          // topology probe
  SCAN_REPLY:   'chain_scan_reply',    // probe return with hop info
  ANNOUNCE:     'net_announce',      // hub announces network existence
  INVITE:       'net_invite',        // hub invites specific machine
  INVITE_ACK:   'net_invite_ack',    // machine accepts/declines
  JOIN_REQ:     'net_join_req',      // machine requests to join existing network
  JOIN_APPROVE: 'net_join_approve',  // hub approves join request
  JOIN_DENY:    'net_join_deny',     // hub denies join request
  HEARTBEAT:    'net_heartbeat',     // hub -> all members, keepalive
  HUB_ELECT:    'net_hub_elect',     // election candidate broadcast
  HUB_CLAIM:    'net_hub_claim',     // winner claims hub role
  ROUTE_TABLE:  'net_route_table',   // hub distributes routing table
  MEMBER_LIST:  'net_member_list',   // hub distributes full member list
  DROP_NOTIFY:  'net_drop_notify',   // hub notifies of member dropout
  CHAT:         'net_chat',          // routed chat message
  FORWARD:      'net_forward',       // generic packet forward wrapper
  BUS_WORD_H:   'bus_word_h',        // routed word arriving for Bus H inbound
  BUS_WORD_I:   'bus_word_i',        // routed word arriving for Bus I inbound
  FTP_OFFER:    'ftp_offer',         // sender offers a file to a peer
  FTP_ACCEPT:   'ftp_accept',        // receiver accepts the offer
  FTP_DECLINE:  'ftp_decline',       // receiver declines the offer
};

// chainState: all networking state, session-only (not persisted)
const chainState = {
  // Chain topology from last scan
  topology: {
    scanned: false,
    leftHops: 0,
    rightHops: 0,
    totalNodes: 1,
    isRing: false,
    lastScanTimestamp: 0,
    detectedMachines: [],  // [{id, handle, position, side}]
    detectedNetworks: [],  // [{id, name, hubId, memberCount}]
  },
  // Networks this machine is involved in
  // Map of networkId -> { name, hubId, isHub, members: Map<id,{handle,position}>, routeTable: Map<id,'l'|'r'>, heartbeatTimer, watchdogTimer, electionTimer }
  networks: new Map(),
  // Pending invitation (one at a time)
  pendingInvitation: null,  // { networkId, networkName, hubId, hubHandle }
  // Pending join requests (if hub)
  pendingRequests: [],  // [{networkId, fromId, fromHandle, fromPosition}]
  // Scan state
  scanInFlight: false,
  scanProbeId: null,
  scanLeftResolved: false,
  scanRightResolved: false,
  scanLeftHops: 0,
  scanRightHops: 0,
  scanTimeout: null,
  // Election state
  electionInProgress: false,
  electionCandidateId: null,
};

// Heartbeat interval: 5 seconds. Watchdog: 3 missed = 15 seconds.
const NET_HEARTBEAT_MS = 5000;
const NET_WATCHDOG_MISSES = 3;
const CHAIN_SCAN_TIMEOUT_MS = 8000;
const NET_TTL_MAX = 32;
const NET_MAX_MEMBERS = 16;
// Chat outbound buffer: holds packets queued while hub is unavailable.
// At 15-second hub election window, even a very active session produces ~10 messages.
// 100 per network is a safe ceiling; oldest are dropped if exceeded.
const NET_CHAT_OUTBOUND_BUFFER_MAX = 100;
// Per-network queues of undelivered outbound chat packets.
// Map<networkId, Array<chatPacket>>
const netChatOutboundQueues = new Map();

// ── Network ID generation ──
function chainGenerateId() {
  return 'net-' + Math.random().toString(36).slice(2, 10);
}

// ── Send a networking packet to a neighbor ──
function chainSendToSide(side, msg) {
  const dc = p2pSide(side).dataChannel;
  if (dc && dc.readyState === 'open') {
    dc.send(JSON.stringify({ netType: msg.type, ...msg }));
  }
}

// ── Forward a packet toward a destination ──
function chainForward(targetId, msg, incomingSide) {
  // Find route for targetId across all known networks
  let routeSide = null;
  for (const [, net] of chainState.networks) {
    const route = net.routeTable.get(targetId);
    if (route) { routeSide = route; break; }
  }
  // If no network route, try opposite side from incoming
  if (!routeSide) {
    routeSide = incomingSide === 'l' ? 'r' : 'l';
  }
  if (msg.ttl !== undefined) {
    msg.ttl--;
    if (msg.ttl <= 0) return; // TTL expired, drop
  }
  chainSendToSide(routeSide, msg);
}

// ── Broadcast to all direct neighbors ──
function chainBroadcastNeighbors(msg) {
  ['l','r'].forEach(side => chainSendToSide(side, msg));
}

// ── Send to all members of a network ──
function netBroadcast(networkId, msg) {
  const net = chainState.networks.get(networkId);
  if (!net || !net.isHub) return;
  for (const [memberId,] of net.members) {
    if (memberId === _p2pMachineId) continue;
    const route = net.routeTable.get(memberId);
    if (route) {
      const packet = { ...msg, dest: memberId, networkId, ttl: NET_TTL_MAX };
      chainSendToSide(route, packet);
    }
  }
}

// ── Route chat through network ──
function netRouteChatMessage(destId, text, networkId) {
  const net = chainState.networks.get(networkId);
  if (!net) return;
  const packet = {
    type: NET_MSG.CHAT,
    networkId,
    dest: destId,
    src: _p2pMachineId,
    srcHandle: p2pGetLocalIdentity(),
    text,
    ttl: NET_TTL_MAX,
    seq: Date.now(),
  };
  const route = net.routeTable.get(destId);
  if (route) {
    // Network Monitor capture — outbound chat
    netmonCaptureChatOutbound(destId, text, networkId);
    chainSendToSide(route, packet);
  } else {
    // No hub route available — buffer the packet for delivery once a hub is established.
    // This covers the hub election window (~15 seconds) and any brief reconnection gaps.
    if (!netChatOutboundQueues.has(networkId)) {
      netChatOutboundQueues.set(networkId, []);
    }
    const queue = netChatOutboundQueues.get(networkId);
    queue.push(packet);
    // If the buffer is over the cap, drop the oldest message to make room for the newest.
    if (queue.length > NET_CHAT_OUTBOUND_BUFFER_MAX) {
      queue.shift();
      log('Chat buffer full — oldest message dropped', 'err');
    }
    log('Chat queued (no hub route) — will send when network is restored', 'info');
  }
}

// ── Drain any buffered outbound chat packets for a network ──
// Called whenever routing is restored: when this machine becomes hub,
// or when a new hub is confirmed and the route table is updated.
function netDrainChatOutboundQueue(networkId) {
  const queue = netChatOutboundQueues.get(networkId);
  if (!queue || queue.length === 0) return;
  const net = chainState.networks.get(networkId);
  if (!net) return;
  let sent = 0;
  while (queue.length > 0) {
    const packet = queue[0];
    const route = net.routeTable.get(packet.dest);
    if (!route) break; // route still not available — leave remaining packets queued
    queue.shift();
    // Refresh TTL so the drained packet isn't stale
    chainSendToSide(route, { ...packet, ttl: NET_TTL_MAX });
    sent++;
  }
  if (sent > 0) {
    log(sent + ' queued chat message(s) delivered after network restored', 'ok');
  }
}

// ── Message receiver — called from p2p onmessage dispatch ──
function chainReceiveMessage(side, msg) {
  switch (msg.type) {
    case NET_MSG.SCAN:        return chainHandleScan(side, msg);
    case NET_MSG.SCAN_REPLY:  return chainHandleScanReply(side, msg);
    case NET_MSG.ANNOUNCE:    return netHandleAnnounce(side, msg);
    case NET_MSG.INVITE:      return netHandleInvite(side, msg);
    case NET_MSG.INVITE_ACK:  return netHandleInviteAck(side, msg);
    case NET_MSG.JOIN_REQ:    return netHandleJoinReq(side, msg);
    case NET_MSG.JOIN_APPROVE:return netHandleJoinApprove(side, msg);
    case NET_MSG.JOIN_DENY:   return netHandleJoinDeny(side, msg);
    case NET_MSG.HEARTBEAT:   return netHandleHeartbeat(side, msg);
    case NET_MSG.HUB_ELECT:   return netHandleHubElect(side, msg);
    case NET_MSG.HUB_CLAIM:   return netHandleHubClaim(side, msg);
    case NET_MSG.ROUTE_TABLE: return netHandleRouteTable(side, msg);
    case NET_MSG.MEMBER_LIST: return netHandleMemberList(side, msg);
    case NET_MSG.DROP_NOTIFY: return netHandleDropNotify(side, msg);
    case NET_MSG.CHAT:        return netHandleChatMessage(side, msg);
    case NET_MSG.FORWARD:     return netHandleForward(side, msg);
    case NET_MSG.BUS_WORD_H:  return netBusReceiveWord('h', msg);
    case NET_MSG.BUS_WORD_I:  return netBusReceiveWord('i', msg);
    case NET_MSG.FTP_OFFER:   return ftpHandleOffer(msg);
    case NET_MSG.FTP_ACCEPT:  return ftpHandleAccept(msg);
    case NET_MSG.FTP_DECLINE: return ftpHandleDecline(msg);
  }
}

// ══ SCAN ══
function chainScan() {
  if (chainState.scanInFlight) return;
  chainState.scanInFlight = true;
  chainState.scanProbeId = Math.floor(Math.random() * 0xFFFF);
  chainState.scanLeftResolved = false;
  chainState.scanRightResolved = false;
  chainState.scanLeftHops = 0;
  chainState.scanRightHops = 0;
  chainState.topology.detectedMachines = [];
  chainState.topology.detectedNetworks = [];

  const probe = {
    type: NET_MSG.SCAN,
    probeId: chainState.scanProbeId,
    originId: _p2pMachineId,
    originHandle: p2pGetLocalIdentity(),
    hopCount: 0,
    machines: [{ id: _p2pMachineId, handle: p2pGetLocalIdentity(), position: 0 }],
    networks: [],
    ttl: NET_TTL_MAX,
  };

  let sentAny = false;
  ['l','r'].forEach(side => {
    const dc = p2pSide(side).dataChannel;
    if (dc && dc.readyState === 'open') {
      chainSendToSide(side, { ...probe, direction: side });
      sentAny = true;
    } else {
      // No connection on this side — pre-resolve it
      if (side === 'l') chainState.scanLeftResolved = true;
      else chainState.scanRightResolved = true;
    }
  });

  if (!sentAny) {
    chainState.scanInFlight = false;
    chainFinalizeScan();
    return;
  }

  chainState.scanTimeout = setTimeout(() => {
    chainState.scanLeftResolved = true;
    chainState.scanRightResolved = true;
    chainFinalizeScan();
  }, CHAIN_SCAN_TIMEOUT_MS);

  chainUpdateTopologyDisplay('Scanning…');
  document.getElementById('chain-scan-btn').textContent = '⬡ SCANNING…';
}

// Handle an incoming chain scan message and forward or respond
function chainHandleScan(side, msg) {
  // Check if this probe originated here (ring detection)
  if (msg.originId === _p2pMachineId) {
    // Ring! Probe came back around — send reply back the way it came.
    chainSendToSide(side, {
      type: NET_MSG.SCAN_REPLY,
      probeId: msg.probeId,
      hopCount: msg.hopCount,
      machines: msg.machines,
      networks: msg.networks || [],
      isRingReturn: true,
      direction: msg.direction,
      ttl: NET_TTL_MAX,
    });
    return;
  }

  // Add self to machine list
  const updatedMachines = [...(msg.machines || []),
    { id: _p2pMachineId, handle: p2pGetLocalIdentity(),
      position: msg.direction === 'r' ? msg.hopCount + 1 : -(msg.hopCount + 1) }];

  // Add any networks we're a hub of
  const myNetworks = [...(msg.networks || [])];
  for (const [netId, net] of chainState.networks) {
    if (net.isHub) {
      myNetworks.push({ id: netId, name: net.name, hubId: _p2pMachineId,
        hubHandle: p2pGetLocalIdentity(), memberCount: net.members.size });
    }
  }

  // Forward in same direction if possible, else return
  const forwardSide = side === 'l' ? 'r' : 'l';
  const forwardDc = p2pSide(forwardSide).dataChannel;
  if (forwardDc && forwardDc.readyState === 'open' && msg.ttl > 1) {
    chainSendToSide(forwardSide, {
      ...msg, hopCount: msg.hopCount + 1, ttl: msg.ttl - 1,
      machines: updatedMachines, networks: myNetworks,
    });
  } else {
    // Terminal — send return toward origin
    chainSendToSide(side, {
      type: NET_MSG.SCAN_REPLY,
      probeId: msg.probeId,
      hopCount: msg.hopCount + 1,
      machines: updatedMachines,
      networks: myNetworks,
      isRingReturn: false,
      direction: msg.direction,
      ttl: NET_TTL_MAX,
    });
  }
}

// Handle a chain scan reply (machine responded to our scan)
function chainHandleScanReply(side, msg) {
  // If we're not the origin of this probe, forward it back toward the origin.
  // The probe travels in one direction; the reply travels back in the opposite direction.
  // We identify as the origin by matching our active scanProbeId.
  if (msg.probeId !== chainState.scanProbeId) {
    // Not our probe — forward reply back the way it came from
    // (reply travels opposite direction to the original probe)
    const forwardSide = side === 'l' ? 'r' : 'l';
    const dc = p2pSide(forwardSide).dataChannel;
    if (dc && dc.readyState === 'open' && (msg.ttl === undefined || msg.ttl > 1)) {
      chainSendToSide(forwardSide, { ...msg, ttl: (msg.ttl || NET_TTL_MAX) - 1 });
    }
    return;
  }

  if (msg.direction === 'l') {
    chainState.scanLeftHops = msg.hopCount;
    chainState.scanLeftResolved = true;
    (msg.machines || []).forEach(m => {
      if (m.id !== _p2pMachineId && !chainState.topology.detectedMachines.find(x => x.id === m.id))
        chainState.topology.detectedMachines.push(m);
    });
    (msg.networks || []).forEach(n => {
      if (!chainState.topology.detectedNetworks.find(x => x.id === n.id))
        chainState.topology.detectedNetworks.push(n);
    });
  } else {
    chainState.scanRightHops = msg.hopCount;
    chainState.scanRightResolved = true;
    (msg.machines || []).forEach(m => {
      if (m.id !== _p2pMachineId && !chainState.topology.detectedMachines.find(x => x.id === m.id))
        chainState.topology.detectedMachines.push(m);
    });
    (msg.networks || []).forEach(n => {
      if (!chainState.topology.detectedNetworks.find(x => x.id === n.id))
        chainState.topology.detectedNetworks.push(n);
    });
  }

  if (chainState.scanLeftResolved && chainState.scanRightResolved) {
    clearTimeout(chainState.scanTimeout);
    chainState.scanInFlight = false;
    chainFinalizeScan();
  }
}

// Finalize chain scanning and build the topology
function chainFinalizeScan() {
  refreshNetBusPeerSelectors();
  const { scanLeftHops, scanRightHops } = chainState;
  const total = 1 + scanLeftHops + scanRightHops;
  chainState.topology.scanned = true;
  chainState.topology.leftHops = scanLeftHops;
  chainState.topology.rightHops = scanRightHops;
  chainState.topology.totalNodes = total;
  chainState.topology.lastScanTimestamp = Date.now();

  const btn = document.getElementById('chain-scan-btn');
  if (btn) btn.textContent = '⬡ SCAN NETWORK';

  const parts = [];
  if (scanLeftHops > 0) parts.push(scanLeftHops + ' left');
  if (scanRightHops > 0) parts.push(scanRightHops + ' right');
  parts.push(total + ' total');
  chainUpdateTopologyDisplay(parts.join(' · '));
  netUpdateInviteList();
  netUpdateAvailableNets();
  chatRefreshPeerList();
  log('Network scan complete: ' + total + ' machine(s) detected', 'ok');
}

// Update the chain topology text display
function chainUpdateTopologyDisplay(text) {
  const el = document.getElementById('chain-topo-text');
  if (el) el.textContent = text;
}

// ══ CREATE NETWORK ══
function netCreate() {
  const nameInput = document.getElementById('net-name-input');
  const statusEl = document.getElementById('net-create-status');
  const name = nameInput ? nameInput.value.trim() : '';

  if (!name) {
    if (statusEl) statusEl.textContent = 'Enter a network name.';
    return;
  }

  // Gather selected machines
  const checkboxes = document.querySelectorAll('#net-invite-list input[type=checkbox]:checked');
  const inviteIds = Array.from(checkboxes).map(cb => cb.value);

  if (inviteIds.length === 0) {
    if (statusEl) statusEl.textContent = 'Select at least one machine to invite.';
    return;
  }

  const networkId = chainGenerateId();
  const net = {
    name, hubId: _p2pMachineId, isHub: true,
    members: new Map([[_p2pMachineId, { handle: p2pGetLocalIdentity(), position: 0 }]]),
    routeTable: new Map(),
    pendingAcks: new Set(inviteIds),
    heartbeatTimer: null,
    watchdogTimer: null,
  };
  chainState.networks.set(networkId, net);

  // Build route table for all detected machines
  chainState.topology.detectedMachines.forEach(m => {
    const route = m.position > 0 ? 'r' : 'l';
    net.routeTable.set(m.id, route);
  });

  // Send invitations
  inviteIds.forEach(targetId => {
    const machine = chainState.topology.detectedMachines.find(m => m.id === targetId);
    if (!machine) return;
    const route = machine.position > 0 ? 'r' : 'l';
    chainSendToSide(route, {
      type: NET_MSG.INVITE,
      networkId, networkName: name,
      hubId: _p2pMachineId, hubHandle: p2pGetLocalIdentity(),
      dest: targetId, ttl: NET_TTL_MAX, seq: Date.now(),
    });
  });

  if (statusEl) statusEl.textContent = 'Invitations sent. Waiting for responses…';
  if (nameInput) nameInput.value = '';
  netUpdateMyNets();
  chatRefreshPeerList();
  log('Network "' + name + '" created, invitations sent to ' + inviteIds.length + ' machine(s)', 'ok');
}

// ══ INVITATIONS ══
function netHandleInvite(side, msg) {
  // If this is for us, show the invitation panel
  if (msg.dest === _p2pMachineId) {
    chainState.pendingInvitation = {
      networkId: msg.networkId, networkName: msg.networkName,
      hubId: msg.hubId, hubHandle: msg.hubHandle, hubSide: side,
    };
    netShowInvitationPanel();
    notifFireNetInvite();
    return;
  }
  // Forward toward destination
  chainForward(msg.dest, msg, side);
}

// Show the network invitation panel with accept/decline options
function netShowInvitationPanel() {
  const inv = chainState.pendingInvitation;
  if (!inv) return;
  const panel = document.getElementById('net-invitation-panel');
  const desc = document.getElementById('net-invitation-desc');
  if (panel) panel.style.display = '';
  if (desc) desc.textContent = '"' + inv.networkName + '" — hub: ' + (inv.hubHandle || inv.hubId);
  // Auto-expand the Chain & Net group and Networking section
  const chainNetGroup = document.getElementById('sb-chain-net-group');
  if (chainNetGroup && chainNetGroup.classList.contains('sb-chain-net-collapsed')) {
    chainNetGroup.classList.remove('sb-chain-net-collapsed');
  }
  const netSection = document.getElementById('chain-section');
  if (netSection && netSection.classList.contains('sb-collapsed')) {
    netSection.classList.remove('sb-collapsed');
  }
}

// Accept a network invitation and send join request
function netAcceptInvitation() {
  const inv = chainState.pendingInvitation;
  if (!inv) return;

  // Create local network entry as member
  const net = {
    name: inv.networkName, hubId: inv.hubId, isHub: false,
    members: new Map([
      [_p2pMachineId, { handle: p2pGetLocalIdentity(), position: null }],
      [inv.hubId, { handle: inv.hubHandle, position: null }],
    ]),
    routeTable: new Map([[inv.hubId, inv.hubSide]]),
    heartbeatTimer: null,
    watchdogTimer: null,
    missedHeartbeats: 0,
  };
  chainState.networks.set(inv.networkId, net);

  // Send ACK back toward hub
  chainSendToSide(inv.hubSide, {
    type: NET_MSG.INVITE_ACK,
    networkId: inv.networkId,
    fromId: _p2pMachineId,
    fromHandle: p2pGetLocalIdentity(),
    accepted: true,
    dest: inv.hubId,
    ttl: NET_TTL_MAX,
  });

  chainState.pendingInvitation = null;
  const panel = document.getElementById('net-invitation-panel');
  if (panel) panel.style.display = 'none';
  netUpdateMyNets();
  chatRefreshPeerList();
  netStartWatchdog(inv.networkId);
  log('Joined network "' + inv.networkName + '"', 'ok');
}

// Decline a network invitation and notify the sender
function netDeclineInvitation() {
  const inv = chainState.pendingInvitation;
  if (!inv) return;
  chainSendToSide(inv.hubSide, {
    type: NET_MSG.INVITE_ACK,
    networkId: inv.networkId,
    fromId: _p2pMachineId,
    fromHandle: p2pGetLocalIdentity(),
    accepted: false,
    dest: inv.hubId,
    ttl: NET_TTL_MAX,
  });
  chainState.pendingInvitation = null;
  const panel = document.getElementById('net-invitation-panel');
  if (panel) panel.style.display = 'none';
}

// Handle an invitation acknowledgment from a peer
function netHandleInviteAck(side, msg) {
  if (msg.dest !== _p2pMachineId) {
    chainForward(msg.dest, msg, side);
    return;
  }
  const net = chainState.networks.get(msg.networkId);
  if (!net || !net.isHub) return;

  net.pendingAcks.delete(msg.fromId);

  if (msg.accepted) {
    // Find position from route table context
    const machine = chainState.topology.detectedMachines.find(m => m.id === msg.fromId);
    const pos = machine ? machine.position : null;
    net.members.set(msg.fromId, { handle: msg.fromHandle || msg.fromId, position: pos });
    log('"' + net.name + '": ' + (msg.fromHandle || msg.fromId) + ' joined', 'ok');
    notifFireNetJoin();
  } else {
    log('"' + net.name + '": ' + (msg.fromHandle || msg.fromId) + ' declined', 'info');
  }

  // If all acks received, distribute member list and start heartbeat
  if (net.pendingAcks.size === 0) {
    netDistributeMemberList(msg.networkId);
    netStartHeartbeat(msg.networkId);
  }

  netUpdateMyNets();
  chatRefreshPeerList();
}

// ══ JOIN REQUEST (for machines requesting to join an existing network) ══
function netHandleJoinReq(side, msg) {
  if (msg.dest !== _p2pMachineId) {
    chainForward(msg.dest, msg, side);
    return;
  }
  const net = chainState.networks.get(msg.networkId);
  if (!net || !net.isHub) return;

  // Find position of requester
  const machine = chainState.topology.detectedMachines.find(m => m.id === msg.fromId);
  const pos = machine ? machine.position : '?';

  chainState.pendingRequests.push({
    networkId: msg.networkId, networkName: net.name,
    fromId: msg.fromId, fromHandle: msg.fromHandle, fromPosition: pos,
    replySide: side,
  });
  netUpdateJoinRequests();
  log('"' + net.name + '": join request from ' + (msg.fromHandle || msg.fromId), 'info');
}

// Approve a pending join request (hub only)
function netApproveJoinRequest(index) {
  const req = chainState.pendingRequests[index];
  if (!req) return;
  chainState.pendingRequests.splice(index, 1);

  const net = chainState.networks.get(req.networkId);
  if (!net) return;

  net.members.set(req.fromId, { handle: req.fromHandle, position: req.fromPosition });
  const route = req.fromPosition > 0 ? 'r' : 'l';
  net.routeTable.set(req.fromId, route);

  chainSendToSide(route, {
    type: NET_MSG.JOIN_APPROVE,
    networkId: req.networkId, networkName: net.name,
    dest: req.fromId, hubId: _p2pMachineId,
    hubHandle: p2pGetLocalIdentity(), ttl: NET_TTL_MAX,
  });

  netDistributeMemberList(req.networkId);
  netUpdateJoinRequests();
  netUpdateMyNets();
  chatRefreshPeerList();
  notifFireNetJoin();
}

// Deny a pending join request (hub only)
function netDenyJoinRequest(index) {
  const req = chainState.pendingRequests[index];
  if (!req) return;
  chainState.pendingRequests.splice(index, 1);
  const net = chainState.networks.get(req.networkId);
  const route = (req.fromPosition || 0) > 0 ? 'r' : 'l';
  chainSendToSide(route, {
    type: NET_MSG.JOIN_DENY,
    networkId: req.networkId, dest: req.fromId, ttl: NET_TTL_MAX,
  });
  netUpdateJoinRequests();
}

// Handle join approval from the hub
function netHandleJoinApprove(side, msg) {
  if (msg.dest !== _p2pMachineId) { chainForward(msg.dest, msg, side); return; }
  const net = {
    name: msg.networkName, hubId: msg.hubId, isHub: false,
    members: new Map([
      [_p2pMachineId, { handle: p2pGetLocalIdentity(), position: null }],
      [msg.hubId, { handle: msg.hubHandle, position: null }],
    ]),
    routeTable: new Map([[msg.hubId, side]]),
    heartbeatTimer: null, watchdogTimer: null, missedHeartbeats: 0,
  };
  chainState.networks.set(msg.networkId, net);
  netUpdateMyNets();
  chatRefreshPeerList();
  netStartWatchdog(msg.networkId);
  log('Joined network "' + msg.networkName + '"', 'ok');
}

// Handle join denial from the hub
function netHandleJoinDeny(side, msg) {
  if (msg.dest !== _p2pMachineId) { chainForward(msg.dest, msg, side); return; }
  log('Join request denied for network ' + msg.networkId, 'info');
}

// ══ HEARTBEAT / WATCHDOG ══
function netStartHeartbeat(networkId) {
  const net = chainState.networks.get(networkId);
  if (!net || !net.isHub) return;
  if (net.heartbeatTimer) clearInterval(net.heartbeatTimer);
  net.heartbeatTimer = setInterval(() => {
    netBroadcast(networkId, { type: NET_MSG.HEARTBEAT, networkId, hubId: _p2pMachineId });
  }, NET_HEARTBEAT_MS);
}

// Start the heartbeat watchdog timer for a network
function netStartWatchdog(networkId) {
  const net = chainState.networks.get(networkId);
  if (!net || net.isHub) return;
  net.missedHeartbeats = 0;
  if (net.watchdogTimer) clearInterval(net.watchdogTimer);
  net.watchdogTimer = setInterval(() => {
    net.missedHeartbeats++;
    if (net.missedHeartbeats >= NET_WATCHDOG_MISSES) {
      clearInterval(net.watchdogTimer);
      net.watchdogTimer = null;
      log('"' + net.name + '": hub unreachable — starting election', 'info');
      netStartElection(networkId);
    }
  }, NET_HEARTBEAT_MS);
}

// Handle an incoming heartbeat from the network hub
function netHandleHeartbeat(side, msg) {
  // If for a network I'm a member of, reset watchdog
  const net = chainState.networks.get(msg.networkId);
  if (net && !net.isHub) {
    net.missedHeartbeats = 0;
  }
  // Forward to other neighbors who may be in this network
  const otherSide = side === 'l' ? 'r' : 'l';
  const otherDc = p2pSide(otherSide).dataChannel;
  if (otherDc && otherDc.readyState === 'open' && msg.ttl > 1) {
    chainSendToSide(otherSide, { ...msg, ttl: msg.ttl - 1 });
  }
}

// ══ HUB ELECTION (simplified Bully algorithm) ══
function netStartElection(networkId) {
  chainState.electionInProgress = true;
  chainState.electionCandidateId = _p2pMachineId;
  chainBroadcastNeighbors({
    type: NET_MSG.HUB_ELECT,
    networkId, candidateId: _p2pMachineId,
    ttl: NET_TTL_MAX,
  });
  // Wait for others to respond, then claim if still winner
  if (chainState.electionTimer) clearTimeout(chainState.electionTimer);
  chainState.electionTimer = setTimeout(() => {
    if (chainState.electionCandidateId === _p2pMachineId) {
      netClaimHub(networkId);
    }
  }, 2000);
}

// Handle a hub election message (simplified Bully algorithm)
function netHandleHubElect(side, msg) {
  const net = chainState.networks.get(msg.networkId);
  if (!net) return;
  // If our ID is lower, we win — broadcast ours
  if (_p2pMachineId < msg.candidateId) {
    if (!chainState.electionInProgress) {
      netStartElection(msg.networkId);
    }
  } else {
    // They win — update candidate
    chainState.electionCandidateId = msg.candidateId;
  }
  // Forward
  const otherSide = side === 'l' ? 'r' : 'l';
  if (p2pSide(otherSide).dataChannel?.readyState === 'open' && msg.ttl > 1) {
    chainSendToSide(otherSide, { ...msg, ttl: msg.ttl - 1 });
  }
}

// Claim hub role for a network and broadcast the claim
function netClaimHub(networkId) {
  const net = chainState.networks.get(networkId);
  if (!net) return;
  net.isHub = true;
  net.hubId = _p2pMachineId;
  chainState.electionInProgress = false;
  chainBroadcastNeighbors({ type: NET_MSG.HUB_CLAIM, networkId, newHubId: _p2pMachineId,
    newHubHandle: p2pGetLocalIdentity(), ttl: NET_TTL_MAX });
  netStartHeartbeat(networkId);
  netDistributeMemberList(networkId);
  netUpdateMyNets();
  log('"' + net.name + '": hub election won — now hub', 'ok');
  // Drain any chat messages that were queued while the network had no hub
  netDrainChatOutboundQueue(networkId);
}

// Handle a hub claim message from another machine
function netHandleHubClaim(side, msg) {
  const net = chainState.networks.get(msg.networkId);
  if (net) {
    net.hubId = msg.newHubId;
    net.isHub = (msg.newHubId === _p2pMachineId);
    net.routeTable.set(msg.newHubId, side);
    if (!net.isHub) { net.missedHeartbeats = 0; netStartWatchdog(msg.networkId); }
    netUpdateMyNets();
    log('"' + net.name + '": new hub is ' + (msg.newHubHandle || msg.newHubId), 'info');
    // Drain any chat messages that were queued while the network had no hub.
    // Route table now includes the new hub, so delivery can proceed.
    netDrainChatOutboundQueue(msg.networkId);
  }
  const otherSide = side === 'l' ? 'r' : 'l';
  if (p2pSide(otherSide).dataChannel?.readyState === 'open' && msg.ttl > 1) {
    chainSendToSide(otherSide, { ...msg, ttl: msg.ttl - 1 });
  }
}

// ══ MEMBER LIST / ROUTE TABLE ══
function netDistributeMemberList(networkId) {
  const net = chainState.networks.get(networkId);
  if (!net || !net.isHub) return;
  const memberArray = Array.from(net.members.entries()).map(([id, info]) => ({ id, ...info }));
  const routeArray = Array.from(net.routeTable.entries()).map(([id, side]) => ({ id, side }));
  netBroadcast(networkId, {
    type: NET_MSG.MEMBER_LIST,
    networkId, networkName: net.name,
    members: memberArray, routeTable: routeArray,
  });
}

// Handle a member list update from the hub
function netHandleMemberList(side, msg) {
  if (msg.dest && msg.dest !== _p2pMachineId) { chainForward(msg.dest, msg, side); return; }
  const net = chainState.networks.get(msg.networkId);
  if (!net) return;
  net.name = msg.networkName || net.name;
  (msg.members || []).forEach(m => {
    net.members.set(m.id, { handle: m.handle, position: m.position });
  });
  (msg.routeTable || []).forEach(r => {
    net.routeTable.set(r.id, r.side);
  });
  netUpdateMyNets();
  chatRefreshPeerList();
}

// Handle a route table update from the hub
function netHandleRouteTable(side, msg) {
  netHandleMemberList(side, msg); // same structure
}

// Handle a member-dropped notification from the hub
function netHandleDropNotify(side, msg) {
  const net = chainState.networks.get(msg.networkId);
  if (!net) return;
  net.members.delete(msg.droppedId);
  net.routeTable.delete(msg.droppedId);
  chatPeers.delete(msg.droppedId);
  netUpdateMyNets();
  chatRefreshPeerList();
  log('"' + net.name + '": ' + (msg.droppedHandle || msg.droppedId) + ' left', 'info');
  notifFireNetDrop();
}

// ══ ANNOUNCE (hub announces network existence during scans) ══
function netHandleAnnounce(side, msg) {
  if (!chainState.topology.detectedNetworks.find(n => n.id === msg.networkId)) {
    chainState.topology.detectedNetworks.push({
      id: msg.networkId, name: msg.networkName,
      hubId: msg.hubId, hubHandle: msg.hubHandle, memberCount: msg.memberCount,
    });
    netUpdateAvailableNets();
  }
}

// ══ CHAT ROUTING ══
function netHandleChatMessage(side, msg) {
  if (msg.dest === _p2pMachineId) {
    // Network Monitor capture — inbound chat
    netmonCaptureChatInbound(side, msg);
    chatReceiveMessage(msg.src, msg.srcHandle, msg.text);
    return;
  }
  chainForward(msg.dest, msg, side);
}

// Handle a forwarded network packet (relay toward destination)
function netHandleForward(side, msg) {
  if (msg.inner) chainReceiveMessage(side, msg.inner);
}

// ══ UI REFRESH FUNCTIONS ══
function netUpdateMyNets() {
  const listEl = document.getElementById('net-my-nets-list');
  const countEl = document.getElementById('net-my-count');
  if (!listEl) return;

  if (chainState.networks.size === 0) {
    listEl.innerHTML = '<div class="chain-status-line">Not a member of any named network.</div>';
    if (countEl) countEl.textContent = '';
    return;
  }

  if (countEl) countEl.textContent = '(' + chainState.networks.size + ')';
  listEl.innerHTML = '';

  for (const [netId, net] of chainState.networks) {
    const block = document.createElement('div');
    block.style.cssText = 'border:1px solid var(--border3);padding:5px 6px;margin-bottom:5px;';

    const header = document.createElement('div');
    header.style.cssText = 'display:flex;align-items:center;gap:4px;margin-bottom:4px;';
    const nameSpan = document.createElement('span');
    nameSpan.style.cssText = 'font-size:9px;font-weight:bold;letter-spacing:1px;color:var(--fg);flex:1;';
    nameSpan.textContent = net.name;
    const roleBadge = document.createElement('span');
    roleBadge.className = 'net-badge ' + (net.isHub ? 'hub' : 'member');
    roleBadge.textContent = net.isHub ? 'HUB' : 'MEMBER';
    header.appendChild(nameSpan);
    header.appendChild(roleBadge);
    block.appendChild(header);

    // Member count
    const info = document.createElement('div');
    info.className = 'chain-status-line';
    info.textContent = net.members.size + ' member(s)';
    block.appendChild(info);

    // Member list
    for (const [memberId, member] of net.members) {
      const row = document.createElement('div');
      row.className = 'net-member-row';
      const handleSpan = document.createElement('span');
      handleSpan.className = 'net-member-handle';
      handleSpan.textContent = (memberId === _p2pMachineId ? '★ ' : '') + (member.handle || memberId);
      const posSpan = document.createElement('span');
      posSpan.className = 'net-member-pos';
      posSpan.textContent = member.position !== null ? (member.position > 0 ? '+' : '') + member.position : '—';
      const roleSpan = document.createElement('span');
      roleSpan.className = 'net-member-role';
      roleSpan.textContent = memberId === net.hubId ? 'HUB' : '';
      row.appendChild(handleSpan);
      row.appendChild(posSpan);
      row.appendChild(roleSpan);
      block.appendChild(row);
    }

    // Leave button
    const leaveBtn = document.createElement('button');
    leaveBtn.className = 'pm-toggle-btn pm-destr-off';
    leaveBtn.style.cssText = 'width:100%;margin-top:4px;font-size:7px;';
    leaveBtn.textContent = net.isHub ? 'DISSOLVE NETWORK' : 'LEAVE NETWORK';
    leaveBtn.onclick = () => netLeave(netId);
    block.appendChild(leaveBtn);

    listEl.appendChild(block);
  }
}

// Leave a network and clean up local state
function netLeave(networkId) {
  const net = chainState.networks.get(networkId);
  if (!net) return;
  if (net.isHub) {
    // Dissolve — notify all members
    netBroadcast(networkId, {
      type: NET_MSG.DROP_NOTIFY, networkId,
      droppedId: _p2pMachineId, droppedHandle: p2pGetLocalIdentity(),
    });
    clearInterval(net.heartbeatTimer);
  }
  clearInterval(net.watchdogTimer);
  clearTimeout(chainState.electionTimer);
  chainState.networks.delete(networkId);
  netUpdateMyNets();
  chatRefreshPeerList();
  log('Left network "' + (net.name) + '"', 'info');
}

// Refresh the join requests panel (hub only)
function netUpdateJoinRequests() {
  const section = document.getElementById('net-requests-section');
  const listEl = document.getElementById('net-requests-list');
  const countEl = document.getElementById('net-req-count');
  if (!section || !listEl) return;

  const reqs = chainState.pendingRequests;
  section.style.display = reqs.length > 0 ? '' : 'none';
  if (countEl) countEl.textContent = reqs.length > 0 ? '(' + reqs.length + ')' : '';
  listEl.innerHTML = '';

  reqs.forEach((req, i) => {
    const row = document.createElement('div');
    row.className = 'net-request-row';
    const info = document.createElement('div');
    info.className = 'net-request-info';
    info.innerHTML = '<strong>' + (req.fromHandle || req.fromId) + '</strong> ' +
      '<span class="net-request-pos">pos ' + req.fromPosition + '</span><br>' +
      '<span style="font-size:7px;color:var(--fg-dim);">' + req.networkName + '</span>';
    const approveBtn = document.createElement('button');
    approveBtn.className = 'net-approve-btn';
    approveBtn.textContent = 'APPROVE';
    approveBtn.onclick = () => netApproveJoinRequest(i);
    const denyBtn = document.createElement('button');
    denyBtn.className = 'net-deny-btn';
    denyBtn.textContent = 'DENY';
    denyBtn.onclick = () => netDenyJoinRequest(i);
    row.appendChild(info);
    row.appendChild(approveBtn);
    row.appendChild(denyBtn);
    listEl.appendChild(row);
  });

  // Auto-open sub-section if requests arrived
  if (reqs.length > 0) {
    const body = document.getElementById('net-sub-requests');
    const title = body ? body.previousElementSibling : null;
    if (body && !body.classList.contains('open')) {
      body.classList.add('open');
      if (title) title.classList.add('open');
    }
  }
}

// Refresh the invitations panel with pending invites
function netUpdateInviteList() {
  const listEl = document.getElementById('net-invite-list');
  if (!listEl) return;
  const machines = chainState.topology.detectedMachines;
  if (machines.length === 0) {
    listEl.innerHTML = '<div class="chain-status-line">No machines detected. Run SCAN NETWORK.</div>';
    return;
  }
  listEl.innerHTML = '';
  machines.forEach(m => {
    const row = document.createElement('div');
    row.className = 'net-invite-row';
    const cb = document.createElement('input');
    cb.type = 'checkbox'; cb.className = 'net-invite-check'; cb.value = m.id;
    const label = document.createElement('span');
    label.className = 'net-invite-label';
    label.textContent = m.handle || m.id;
    const pos = document.createElement('span');
    pos.className = 'net-invite-pos';
    pos.textContent = (m.position > 0 ? '+' : '') + m.position;
    row.appendChild(cb); row.appendChild(label); row.appendChild(pos);
    listEl.appendChild(row);
  });
}

// Refresh the available networks panel from scan results
function netUpdateAvailableNets() {
  const listEl = document.getElementById('net-available-list');
  if (!listEl) return;
  const nets = chainState.topology.detectedNetworks.filter(n => !chainState.networks.has(n.id));
  if (nets.length === 0) {
    listEl.innerHTML = '<div class="chain-status-line">No external networks detected.</div>';
    return;
  }
  listEl.innerHTML = '';
  nets.forEach(n => {
    const row = document.createElement('div');
    row.style.cssText = 'padding:4px 0;border-bottom:1px solid var(--border3);font-size:8px;';
    row.innerHTML = '<strong style="color:var(--fg);">' + n.name + '</strong> ' +
      '<span style="color:var(--fg-dim);">' + n.memberCount + ' member(s) · hub: ' + (n.hubHandle || n.hubId) + '</span>';
    const reqBtn = document.createElement('button');
    reqBtn.className = 'pm-toggle-btn pm-destr-off';
    reqBtn.style.cssText = 'width:100%;margin-top:3px;font-size:7px;';
    reqBtn.textContent = 'REQUEST TO JOIN';
    reqBtn.onclick = () => netRequestJoin(n);
    row.appendChild(reqBtn);
    listEl.appendChild(row);
  });
}

// Send a join request to a discovered network
function netRequestJoin(networkInfo) {
  const route = chainState.topology.detectedMachines.find(m => m.id === networkInfo.hubId);
  const side = route ? (route.position > 0 ? 'r' : 'l') : 'r';
  chainSendToSide(side, {
    type: NET_MSG.JOIN_REQ,
    networkId: networkInfo.id, dest: networkInfo.hubId,
    fromId: _p2pMachineId, fromHandle: p2pGetLocalIdentity(),
    ttl: NET_TTL_MAX,
  });
  log('Join request sent to "' + networkInfo.name + '"', 'info');
}

// Toggle visibility of a networking sub-section panel
function netToggleSubsection(name) {
  const body = document.getElementById('net-sub-' + name);
  const title = body ? body.previousElementSibling : null;
  if (!body) return;
  const open = body.classList.toggle('open');
  if (title) title.classList.toggle('open', open);
}

// ── Auto-scan on P2P connection ──
function chainOnPeerConnected(side) {
  chatRefreshPeerList();
  // Brief delay then auto-scan to pick up new topology
  setTimeout(() => { if (!chainState.scanInFlight) chainScan(); }, 800);
}

// Handle peer disconnection during a chain challenge
function chainOnPeerDisconnected(side) {
  chatRefreshPeerList();
}

// ── Init ──
function chainInit() {
  // Passive scan on load if neighbors already connected (page reload scenario)
  setTimeout(() => {
    const hasLeft  = p2pSide('l').dataChannel?.readyState === 'open';
    const hasRight = p2pSide('r').dataChannel?.readyState === 'open';
    if (hasLeft || hasRight) chainScan();
    else chainUpdateTopologyDisplay('no connections yet');
  }, 1200);
}


// Start periodic latency measurement pings to a peer
function p2pStartLatencyPing(side) {
  p2pStopLatencyPing(side);
  p2pSide(side).latencyInterval = setInterval(() => {
    const dc = p2pSide(side).dataChannel;
    if (dc && dc.readyState === 'open') {
      dc.send(JSON.stringify({ type: 'ping', timestamp: performance.now() }));
    }
  }, 3000);
}

// Stop latency measurement pings to a peer
function p2pStopLatencyPing(side) {
  const s = p2pSide(side);
  if (s.latencyInterval) { clearInterval(s.latencyInterval); s.latencyInterval = null; }
  const el = document.getElementById('p2p-latency-' + side);
  if(el) el.textContent = '';
  const netEl = document.getElementById('chain-latency-' + side + '-val');
  if(netEl) netEl.textContent = '—';
}

async function p2pCreateOffer(side) {
  p2pDisconnect(side);
  p2pUpdateStatus(side, 'connecting');
  const s = p2pSide(side);
  s.isInitiator = true;
  s.connection = new RTCPeerConnection(P2P_STUN);
  const channel = s.connection.createDataChannel('loop21-' + side, { ordered: true });
  p2pSetupDataChannel(channel, side);

  s.connection.onicecandidate = (e) => {
    if (e.candidate === null) {
      const compressed = p2pCompressSDP(s.connection.localDescription.sdp);
      const localEl = document.getElementById('p2p-local-sdp-' + side);
      if(localEl) { localEl.value = 'OFFER:' + compressed; localEl.select(); }
      log(`P2P ${side.toUpperCase()} offer ready`, 'ok');
    }
  };
  s.connection.onconnectionstatechange = () => {
    if (s.connection.connectionState === 'disconnected' || s.connection.connectionState === 'failed') {
      p2pUpdateStatus(side, 'disconnected');
      log(`P2P ${side.toUpperCase()} connection ${s.connection.connectionState}`, 'err');
    }
  };
  try {
    const offer = await s.connection.createOffer();
    await s.connection.setLocalDescription(offer);
  } catch(e) {
    log(`P2P ${side.toUpperCase()} offer failed: ` + e.message, 'err');
    p2pUpdateStatus(side, 'disconnected');
  }
}

async function p2pAcceptRemote(side) {
  const remoteEl = document.getElementById('p2p-remote-sdp-' + side);
  const raw = (remoteEl ? remoteEl.value.trim() : '');
  if (!raw) { log('Paste the peer\'s text first', 'err'); return; }

  const isOffer  = raw.startsWith('OFFER:');
  const isAnswer = raw.startsWith('ANSWER:');
  if (!isOffer && !isAnswer) { log('Invalid P2P text — must start with OFFER: or ANSWER:', 'err'); return; }

  const compressed = raw.replace(/^(OFFER:|ANSWER:)/, '');
  const sdpText = p2pDecompressSDP(compressed);
  if (!sdpText) { log('Failed to decode P2P text', 'err'); return; }

  const s = p2pSide(side);
  if (isOffer) {
    p2pDisconnect(side);
    p2pUpdateStatus(side, 'connecting');
    s.isInitiator = false;
    s.connection = new RTCPeerConnection(P2P_STUN);
    s.connection.ondatachannel = (event) => { p2pSetupDataChannel(event.channel, side); };
    s.connection.onicecandidate = (e) => {
      if (e.candidate === null) {
        const answerCompressed = p2pCompressSDP(s.connection.localDescription.sdp);
        const localEl = document.getElementById('p2p-local-sdp-' + side);
        if(localEl) { localEl.value = 'ANSWER:' + answerCompressed; localEl.select(); }
        log(`P2P ${side.toUpperCase()} answer ready`, 'ok');
      }
    };
    s.connection.onconnectionstatechange = () => {
      if (s.connection.connectionState === 'disconnected' || s.connection.connectionState === 'failed') {
        p2pUpdateStatus(side, 'disconnected');
      }
    };
    try {
      await s.connection.setRemoteDescription(new RTCSessionDescription({ type: 'offer', sdp: sdpText }));
      const answer = await s.connection.createAnswer();
      await s.connection.setLocalDescription(answer);
      if (remoteEl) remoteEl.value = ''; // consumed — clear it
    } catch(e) {
      log(`P2P ${side.toUpperCase()} accept offer failed: ` + e.message, 'err');
      p2pUpdateStatus(side, 'disconnected');
    }
  } else if (isAnswer) {
    if (!s.connection || !s.connection.localDescription) {
      log('No pending offer — create an offer first', 'err'); return;
    }
    try {
      await s.connection.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: sdpText }));
      if (remoteEl) remoteEl.value = ''; // consumed — clear it
      log(`P2P ${side.toUpperCase()} answer accepted`, 'info');
    } catch(e) {
      log(`P2P ${side.toUpperCase()} accept answer failed: ` + e.message, 'err');
      p2pUpdateStatus(side, 'disconnected');
    }
  }
}

// Copy the local SDP offer/answer to the clipboard
function p2pCopyLocal(side) {
  const el = document.getElementById('p2p-local-sdp-' + side);
  if (!el || !el.value) { log('Nothing to copy', 'err'); return; }
  navigator.clipboard.writeText(el.value).then(() => {
    log('P2P text copied to clipboard', 'ok');
  }).catch(() => {
    el.select();
    log('Auto-copy failed — text selected, use Ctrl+C', 'info');
  });
}

// Disconnect from a P2P peer and clean up state
function p2pDisconnect(side) {
  const s = p2pSide(side);
  p2pStopLatencyPing(side);
  p2pClearPeerName(side);
  if (s.dataChannel) { try { s.dataChannel.close(); } catch(e) {} s.dataChannel = null; }
  if (s.connection)  { try { s.connection.close();  } catch(e) {} s.connection  = null; }
  s.isInitiator = false;
  if (side === 'r') { L21.buses.g.outBuf.length = 0; L21.buses.g.inQueue.length = 0; L21.buses.g.wordBuf.length = 0; }
  else              { L21.buses.f.outBuf.length = 0; L21.buses.f.inQueue.length = 0; L21.buses.f.wordBuf.length = 0; }
  p2pUpdateBufferDisplay(side);
  p2pUpdateStatus(side, 'disconnected');
  // Clear BOTH textareas so no stale blobs remain after disconnect or refresh
  const localEl  = document.getElementById('p2p-local-sdp-'  + side);
  const remoteEl = document.getElementById('p2p-remote-sdp-' + side);
  if (localEl)  localEl.value  = '';
  if (remoteEl) remoteEl.value = '';
  log(`P2P ${side.toUpperCase()} disconnected`, 'info');
}

// Check if either side is connected (used by renderBusF/G)
function p2pIsConnected(side) {
  const dc = p2pSide(side).dataChannel;
  return dc !== null && dc.readyState === 'open';
}

// Hard reset — called on every page load to guarantee clean P2P state.
// Browser form autocomplete can repopulate textareas after a refresh; this
// explicitly clears them before the operator sees anything.  WebRTC connections
// from a previous session are invalid after a page reload regardless, so closing
// them is safe and correct.
function p2pHardReset() {
  ['l', 'r'].forEach(side => {
    const s = p2pSide(side);
    // Close any zombie connections left over from before the reload
    if (s.dataChannel) { try { s.dataChannel.close(); } catch(e) {} s.dataChannel = null; }
    if (s.connection)  { try { s.connection.close();  } catch(e) {} s.connection  = null; }
    s.isInitiator = false;
    s.peerName = '';
    s.peerId   = null;
    p2pStopLatencyPing(side);
    // Clear all four textarea fields
    ['p2p-local-sdp-', 'p2p-remote-sdp-'].forEach(prefix => {
      const el = document.getElementById(prefix + side);
      if (el) el.value = '';
    });
    // Hide peer name line
    const nameLine = document.getElementById('p2p-peer-name-line-' + side);
    if (nameLine) nameLine.style.display = 'none';
    // Reset status display
    p2pUpdateStatus(side, 'disconnected');
    // Clear word buffers
    const bus = L21.buses[side === 'r' ? 'g' : 'f'];
    bus.outBuf.length = 0; bus.inQueue.length = 0; bus.wordBuf.length = 0;
    p2pUpdateBufferDisplay(side);
  });
}


// ================================================================
//  FILTER ORDER — PM/TG position swap on Big Loop
// ================================================================
function toggleFilterOrder() {
  L21.filterOrder = L21.filterOrder === 'pm_first' ? 'tg_first' : 'pm_first';
  const label = L21.filterOrder === 'pm_first' ? 'PM → TG' : 'TG → PM';
  const btn = document.getElementById('filter-order-btn');
  if (btn) {
    btn.textContent = 'FILTER ORDER: ' + label;
    btn.classList.toggle('active', L21.filterOrder === 'tg_first');
  }
  log('FILTER ORDER: ' + label, 'info');
  logSetup('OP.FILTER_ORDER ' + L21.filterOrder.toUpperCase(), 'Operator sets filter order to ' + label);
  renderAllComponents();
}

// ================================================================
//  PATTERN MATCHER — Unified helpers + PM1/PM2 delegates
// ================================================================
const PM1_EJECT_IDX = 359; // default position — PM1 encountered first
const PM2_EJECT_IDX = 342; // one word (17 bits) to the right of PM1 — encountered second

// Dynamic eject index lookup — respects filter order toggle.
// Positions 359, 342, 325, 308 are fixed slots on the Big Loop.
// What changes is which peripheral occupies which slot.
function getFilterEjectIndex(filterId) {
  if (L21.filterOrder === 'tg_first') {
    switch (filterId) {
      case 'tg1': return 359;
      case 'tg2': return 342;
      case 'pm1': return 325;
      case 'pm2': return 308;
    }
  }
  switch (filterId) {
    case 'pm1': return 359;
    case 'pm2': return 342;
    case 'tg1': return 325;
    case 'tg2': return 308;
  }
}

// ── Unified PM helpers ──

// Compute a 16-bit register value from a PM's bit array
function pmComputeRegisterValue(pmState, regName) {
  return pmState[regName].reduce((a, b, i) => a | (b << (15 - i)), 0);
}

// Flip a single bit in a PM register and update display
function flipPatternMatcherBit(pmState, pmLabel, reg, i, wrapEl) {
  if (_drag.handled) return;
  pmState[reg][i] ^= 1;
  wrapEl.classList.toggle('on', pmState[reg][i] === 1);
  refreshPatternMatcherDisplayGeneric(pmState, pmLabel);
  let val, label;
  if      (reg === 'maskBits')       { val = pmComputeRegisterValue(pmState, 'maskBits');       label = 'MASK'; }
  else if (reg === 'matchBits')      { val = pmComputeRegisterValue(pmState, 'matchBits');      label = 'MATCH'; }
  else if (reg === 'changeMaskBits') { val = pmComputeRegisterValue(pmState, 'changeMaskBits'); label = 'CHANGE_MASK'; }
  else                               { val = pmComputeRegisterValue(pmState, 'changeValBits');  label = 'CHANGE_VAL'; }
  logSetup(`OP.${pmLabel}_${label} ${val}`, `Operator sets ${pmLabel} ${label.toLowerCase()} to ${val} (0x${val.toString(16).toUpperCase().padStart(4,'0')})`);
}

// Check whether a pattern matcher has any mask bits set
function isPatternMatcherActiveGeneric(pmState) {
  return pmComputeRegisterValue(pmState, 'maskBits') !== 0;
}

// Toggle destructive/copy eject mode
function togglePatternMatcherDestructive(pmState, pmLabel, buttonId) {
  pmState.destructive = !pmState.destructive;
  const btn = document.getElementById(buttonId);
  btn.textContent = pmState.destructive ? 'OUTFLOW: DESTRUCTIVE' : 'OUTFLOW: COPY';
  btn.className   = pmState.destructive ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  logSetup(`OP.${pmLabel}_DESTRUCT ${pmState.destructive?'ON':'OFF'}`, `Operator sets ${pmLabel} eject mode to ${pmState.destructive?'destructive':'copy'}`);
}

// Clear match flag and count
function clearPatternMatcherFlag(pmState, pmLabel) {
  pmState.matchFlag  = false;
  pmState.matchCount = 0;
  refreshPatternMatcherDisplayGeneric(pmState, pmLabel);
  log(`${pmLabel} flag cleared`, 'info');
}

// Send match count to a bus
function sendPatternMatcherCountToBus(pmState, pmLabel, busId) {
  const count = pmState.matchCount;
  serializeCounterToBus(busId, count);
  log(`${pmLabel} match count (${count}) → Bus ${busId.toUpperCase()}`, 'info');
  logSetup(`OP.${pmLabel}.SEND_COUNT BUS=${busId.toUpperCase()} VAL=${count}`, `Operator sends ${pmLabel} match count ${count} to Bus ${busId.toUpperCase()}`);
}

// Refresh the sidebar display for a pattern matcher
function refreshPatternMatcherDisplayGeneric(pmState, pmLabel) {
  const prefix = pmLabel === 'PM' ? 'pm' : pmLabel.toLowerCase();
  const mask       = pmComputeRegisterValue(pmState, 'maskBits');
  const match      = pmComputeRegisterValue(pmState, 'matchBits');
  const changeMask = pmComputeRegisterValue(pmState, 'changeMaskBits');
  const changeVal  = pmComputeRegisterValue(pmState, 'changeValBits');
  const fmt = v => `${v} / 0x${v.toString(16).toUpperCase().padStart(4,'0')}`;
  const el = id => document.getElementById(id);
  if (el(`${prefix}-mask-val`))        el(`${prefix}-mask-val`).textContent        = fmt(mask);
  if (el(`${prefix}-match-val`))       el(`${prefix}-match-val`).textContent       = fmt(match);
  if (el(`${prefix}-changemask-val`))  el(`${prefix}-changemask-val`).textContent  = fmt(changeMask);
  if (el(`${prefix}-changeval-val`))   el(`${prefix}-changeval-val`).textContent   = fmt(changeVal);
  const cntEl = el(`${prefix}-count`);
  if (cntEl) cntEl.textContent = `matches: ${pmState.matchCount}`;
  // PM2-specific: reject count visibility (only meaningful in cascade mode)
  if (pmLabel === 'PM2') {
    const rejEl = el('pm2-reject-count');
    if (rejEl) {
      const rejectCount = pmState.rejectOutBuf ? Math.floor(pmState.rejectOutBuf.length / 12) : 0;
      rejEl.style.display = pmState.cascadeMode ? '' : 'none';
    }
  }
}

// Advance bridge output buffer — drains outBuf and (for PM2) cascade match/reject bridges
function advancePatternMatcherBridgeGeneric(pmState) {
  pmState.bridge[0] = pmState.outBuf.length > 0 ? pmState.outBuf.shift() : 0;
  if (pmState.bridge[0] !== 0) pmState.bridgeFlash = 1.0;
  // Cascade-mode bridges (only present on PM2 state objects)
  if (pmState.matchOutBuf !== undefined) {
    pmState.matchBridge[0]  = pmState.matchOutBuf.length  > 0 ? pmState.matchOutBuf.shift()  : 0;
    pmState.rejectBridge[0] = pmState.rejectOutBuf.length > 0 ? pmState.rejectOutBuf.shift() : 0;
    if (pmState.matchBridge[0]  !== 0) pmState.matchBridgeFlash  = 1.0;
    if (pmState.rejectBridge[0] !== 0) pmState.rejectBridgeFlash = 1.0;
  }
}


// ================================================================
//  PM1 — state alias + delegate functions
// ================================================================
const pm = L21.pm;

// Get PM1 mask register as a 16-bit value
function pmGetMask()       { return pmComputeRegisterValue(pm, 'maskBits'); }
// Get PM1 match register as a 16-bit value
function pmGetMatch()      { return pmComputeRegisterValue(pm, 'matchBits'); }
// Get PM1 change-mask register as a 16-bit value
function pmGetChangeMask() { return pmComputeRegisterValue(pm, 'changeMaskBits'); }
// Get PM1 change-value register as a 16-bit value
function pmGetChangeVal()  { return pmComputeRegisterValue(pm, 'changeValBits'); }

// Flip a single lever bit in a PM1 register
function flipPMBit(reg, i, wrapEl)  { flipPatternMatcherBit(pm, 'PM', reg, i, wrapEl); }
// Return true if PM1 is enabled and has a non-zero mask
function isPatternMatcherActive()   { return isPatternMatcherActiveGeneric(pm); }
// Toggle PM1 destructive mode (eject matched words from loop)
function togglePMDestructive()      { togglePatternMatcherDestructive(pm, 'PM', 'pm-destr-btn'); }
// Clear the PM1 match flag
function clearPMFlag()              { clearPatternMatcherFlag(pm, 'PM'); }
// Serialize PM1 match count as a word onto a bus
function sendPM1MatchCountToBus(busId) { sendPatternMatcherCountToBus(pm, 'PM1', busId); }
// Refresh the PM1 sidebar display
function refreshPatternMatcherDisplay() { refreshPatternMatcherDisplayGeneric(pm, 'PM'); }
// Advance PM1 output bridge by one tick
function advancePatternMatcherOutputBridge() { advancePatternMatcherBridgeGeneric(pm); }

// Called each tick — check eject point on Big Loop
function pmTick() {
  if (!isPatternMatcherActive()) return;
  // Decrement cooldown — prevents data bits of a just-matched word from
  // being mistaken for a new marker as the word scrolls past the eject point.
  if (pm.cooldown > 0) { pm.cooldown--; return; }
  const big = loops['big'];
  const idx = getFilterEjectIndex('pm1');
  if (big.bits[idx] !== 1) return;          // no marker at eject point

  // Read 16-bit word at eject position (1 marker + 16 data)
  let data = 0;
  for (let b=0;b<16;b++) data = (data<<1) | big.bits[idx+1+b];

  // Always set cooldown when a marker is detected — prevents data bits (which
  // may be 1) from being misread as new markers on subsequent ticks.
  pm.cooldown = BPW - 1;  // must cover all 16 data bits to prevent spurious re-triggers

  const mask  = pmGetMask();
  const match = pmGetMatch();
  if ((data & mask) !== (match & mask)) return;  // no match

  // ── MATCH ──
  pm.matchFlag = true;
  pm.matchCount++;
  ctrFire('big', 'pm1Match');
  refreshPatternMatcherDisplay();

  // ── BIT REWRITE (if armed) — applied before eject/copy decision ──
  let rewrittenData = data;
  if (pmGetChangeMask() !== 0) {
    const changeMask = pmGetChangeMask();
    const changeVal  = pmGetChangeVal();
    rewrittenData = (data & ~changeMask) | (changeVal & changeMask);
    // Write rewritten bits back into Big Loop at eject position
    for (let b=0;b<16;b++) big.bits[idx+1+b] = (rewrittenData>>(15-b))&1;
    if(logger.active) stats.pmRewrites++;
    ctrFire('big', 'pm1Rewrite');
    log(`PM REWRITE: ${data} → ${rewrittenData} (changeMask=${pmGetChangeMask()} changeVal=${pmGetChangeVal()})`, 'ok');
    logOp(`PM.REWRITE OLD=${formatWordAsBinary(data|0x10000)} NEW=${formatWordAsBinary(rewrittenData|0x10000)} CMASK=${pmGetChangeMask()} CVAL=${pmGetChangeVal()}`,
          `PM rewrote ${data} → ${rewrittenData}`);
  }

  log(`PM MATCH: ${data} (mask=${mask} match=${match})`, 'ok');
  logOp(`PM.MATCH DATA=${formatWordAsBinary(data|0x10000)} MASK=${mask} PATTERN=${match} COUNT=${pm.matchCount}`,
        `Pattern Matcher match: ${data} (mask ${mask}, pattern ${match}), total matches: ${pm.matchCount}`);

  // Push to PM output buffer → bus (use rewritten value)
  // In cascade mode: route to PM2's input instead of directly to the bus
  if (pm2.cascadeMode) {
    // Feed the word into PM2's cascade input buffer (17 bits: marker + 16 data)
    const cascadeWord = [1];
    for (let b=0;b<16;b++) cascadeWord.push((rewrittenData>>(15-b))&1);
    pm2.cascadeInBuf.push(cascadeWord);
    logOp(`PM1.CASCADE DATA=${formatWordAsBinary(rewrittenData|0x10000)}`,
          `PM1 match forwarded to PM2 cascade input`);
  } else {
    if (pm.outBuf.length === 0) {
      pm.outBuf = [1];
      for (let b=0;b<16;b++) pm.outBuf.push((rewrittenData>>(15-b))&1);
    }
  }

  // Destructive: zero out the matched word in the loop
  if (pm.destructive) {
    for (let b=0;b<BPW;b++) big.bits[idx+b] = 0;
    ctrFire('big', 'pm1Eject');
  }
}

// Build a row of 16 lever toggles for a PM register
function buildPatternMatcherLeverRow(reg, containerId, color, flipFn = flipPMBit, prefix = 'pm') {
  const row = document.getElementById(containerId);
  if (!row || row.children.length) return;
  for (let i=0;i<16;i++) {
    const bit = 15-i;
    // Visual gap between bits 12 and 11 (i=3→4) — top 4 address bits
    if(i===4){const sp=document.createElement('div');sp.style.cssText='width:3px;flex-shrink:0;';row.appendChild(sp);}
    const wrap = document.createElement('div');
    wrap.className = `pm-lever-wrap`;
    wrap.id = `${prefix}-${reg}-${i}`;
    wrap.title = `bit ${bit}`;
    // Pass wrap reference directly to avoid getElementById lookup in the flip function
    const capturedWrap = wrap;
    const capturedI = i;
    wrap.addEventListener('click', () => flipFn(reg, capturedI, capturedWrap));
    wrap.innerHTML = `
      <div class="pm-lever-pip" style="--pc:${color}"></div>
      <div class="pm-lever-slot" style="--pc:${color}"><div class="pm-lever-arm" style="--pc:${color}"></div></div>
      <div class="pm-lever-num">b${bit}</div>
    `;
    row.appendChild(wrap);
  }
}


// ================================================================
//  PM2 — state alias + delegate functions
// ================================================================
const pm2 = L21.pm2;

// Get PM2 mask register as a 16-bit value
function pm2GetMask()       { return pmComputeRegisterValue(pm2, 'maskBits'); }
// Get PM2 match register as a 16-bit value
function pm2GetMatch()      { return pmComputeRegisterValue(pm2, 'matchBits'); }
// Get PM2 change-mask register as a 16-bit value
function pm2GetChangeMask() { return pmComputeRegisterValue(pm2, 'changeMaskBits'); }
// Get PM2 change-value register as a 16-bit value
function pm2GetChangeVal()  { return pmComputeRegisterValue(pm2, 'changeValBits'); }

// Flip a single lever bit in a PM2 register
function flipPMBit2(reg, i, wrapEl)  { flipPatternMatcherBit(pm2, 'PM2', reg, i, wrapEl); }
// Return true if PM2 is enabled and has a non-zero mask
function isPatternMatcher2Active()   { return isPatternMatcherActiveGeneric(pm2); }
// Toggle PM2 destructive mode
function togglePMDestructive2()      { togglePatternMatcherDestructive(pm2, 'PM2', 'pm2-destr-btn'); }
// Clear the PM2 match flag
function clearPMFlag2()              { clearPatternMatcherFlag(pm2, 'PM2'); }
// Serialize PM2 match count as a word onto a bus
function sendPM2MatchCountToBus(busId) { sendPatternMatcherCountToBus(pm2, 'PM2', busId); }
// Refresh the PM2 sidebar display
function refreshPatternMatcher2Display() { refreshPatternMatcherDisplayGeneric(pm2, 'PM2'); }
// Advance PM2 output bridge by one tick
function advancePatternMatcher2OutputBridge() { advancePatternMatcherBridgeGeneric(pm2); }

// TG match count senders (placed here alongside PM senders for locality)
function sendTG1MatchCountToBus(busId) {
  const count = tg1.matchCount || 0;
  serializeCounterToBus(busId, count);
  log(`TG1 match count (${count}) → Bus ${busId.toUpperCase()}`, 'info');
  logSetup(`OP.TG1.SEND_COUNT BUS=${busId.toUpperCase()} VAL=${count}`, `Operator sends TG1 match count ${count} to Bus ${busId.toUpperCase()}`);
}
// Serialize TG2 match count as a word onto a bus
function sendTG2MatchCountToBus(busId) {
  const count = tg2.matchCount || 0;
  serializeCounterToBus(busId, count);
  log(`TG2 match count (${count}) → Bus ${busId.toUpperCase()}`, 'info');
  logSetup(`OP.TG2.SEND_COUNT BUS=${busId.toUpperCase()} VAL=${count}`, `Operator sends TG2 match count ${count} to Bus ${busId.toUpperCase()}`);
}
// Serialize a 16-bit value as a 17-bit word onto a bus outBuf
function serializeCounterToBus(busId, val) {
  const word = val & 0xFFFF;
  const bits = [1];
  for(let b = 15; b >= 0; b--) bits.push((word >> b) & 1);
  switch(busId) {
    case 'a': ctr['working'].outBufA.push(...bits); break;
    case 'b': ctr['working'].outBuf.push(...bits);  break;
    case 'c': ctr['working'].outBufC.push(...bits); break;
    case 'd': ctr['working'].outBufD.push(...bits); break;
  }
}


// Toggle PM cascade mode (PM2 reads from PM1 match output)
function toggleCascadeMode() {
  pm2.cascadeMode = !pm2.cascadeMode;
  // Clear cascade buffers on mode change to avoid stale data
  pm2.cascadeInBuf  = [];
  pm2.matchOutBuf   = [];
  pm2.rejectOutBuf  = [];
  pm2.matchBridge   = [0];
  pm2.rejectBridge  = [0];
  const btn = document.getElementById('pm2-cascade-btn');
  btn.textContent = pm2.cascadeMode ? 'MODE: CASCADE (PM1→PM2)' : 'MODE: STANDALONE';
  btn.className   = pm2.cascadeMode ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  // Show/hide the PM2 head on the big loop (standalone needs it visible; cascade hides it)
  logSetup(`OP.PM2_CASCADE ${pm2.cascadeMode?'ON':'OFF'}`,
           `Operator sets PM2 mode to ${pm2.cascadeMode?'cascade (receives PM1 matches)':'standalone (reads Big Loop directly)'}`);
  log(`PM2 cascade mode: ${pm2.cascadeMode?'ON — PM2 evaluates PM1 matches':'OFF — PM2 standalone'}`, 'info');
}

// Run one tick of PM2 — cascade or standalone mode
function pm2Tick() {
  if (!isPatternMatcher2Active()) return;

  // ── CASCADE MODE: evaluate words arriving from PM1's match output
  if (pm2.cascadeMode) {
    if (pm2.cascadeInBuf.length === 0) return;
    // Process one word per tick from the cascade input buffer
    const wordBits = pm2.cascadeInBuf.shift(); // [marker, b15..b0]
    let data = 0;
    for (let b=0;b<16;b++) data = (data<<1) | wordBits[1+b];

    const mask  = pm2GetMask();
    const match = pm2GetMatch();
    const isMatch = (data & mask) === (match & mask);

    // Rewrite if armed (applied before routing)
    let rewrittenData = data;
    if (pm2GetChangeMask() !== 0) {
      const changeMask = pm2GetChangeMask();
      const changeVal  = pm2GetChangeVal();
      rewrittenData = (data & ~changeMask) | (changeVal & changeMask);
      if(logger.active) stats.pmRewrites++;
      ctrFire('big', 'pm2Rewrite');
      log(`PM2 CASCADE REWRITE: ${data} → ${rewrittenData}`, 'ok');
      logOp(`PM2.CASCADE.REWRITE OLD=${formatWordAsBinary(data|0x10000)} NEW=${formatWordAsBinary(rewrittenData|0x10000)}`,
            `PM2 cascade rewrote ${data} → ${rewrittenData}`);
    }

    if (isMatch) {
      pm2.matchFlag = true;
      pm2.matchCount++;
      ctrFire('big', 'pm2Match');
      refreshPatternMatcher2Display();
      log(`PM2 CASCADE MATCH: ${data} (mask=${mask} pattern=${match})`, 'ok');
      logOp(`PM2.CASCADE.MATCH DATA=${formatWordAsBinary(rewrittenData|0x10000)} MASK=${mask} PATTERN=${match} COUNT=${pm2.matchCount}`,
            `PM2 cascade match: ${data}, total: ${pm2.matchCount}`);
      // Route matched word to pm2match output buffer
      if (pm2.matchOutBuf.length === 0) {
        pm2.matchOutBuf = [1];
        for (let b=0;b<16;b++) pm2.matchOutBuf.push((rewrittenData>>(15-b))&1);
      }
    } else {
      log(`PM2 CASCADE REJECT: ${data} (mask=${mask} pattern=${match})`, 'info');
      logOp(`PM2.CASCADE.REJECT DATA=${formatWordAsBinary(rewrittenData|0x10000)} MASK=${mask} PATTERN=${match}`,
            `PM2 cascade reject: ${data}`);
      // Route non-matched word to pm2reject output buffer
      if (pm2.rejectOutBuf.length === 0) {
        pm2.rejectOutBuf = [1];
        for (let b=0;b<16;b++) pm2.rejectOutBuf.push((rewrittenData>>(15-b))&1);
      }
    }
    return;
  }

  // ── STANDALONE MODE: PM2 operates directly on the Big Loop (original behavior)
  if (pm2.cooldown > 0) { pm2.cooldown--; return; }
  const big = loops['big'];
  const idx = getFilterEjectIndex('pm2');
  if (big.bits[idx] !== 1) return;

  let data = 0;
  for (let b=0;b<16;b++) data = (data<<1) | big.bits[idx+1+b];

  // Always set cooldown when a marker is detected — prevents data bits (which
  // may be 1) from being misread as new markers on subsequent ticks.
  pm2.cooldown = BPW - 1;  // must cover all 16 data bits

  const mask  = pm2GetMask();
  const match = pm2GetMatch();
  if ((data & mask) !== (match & mask)) return;

  pm2.matchFlag = true;
  pm2.matchCount++;
  ctrFire('big', 'pm2Match');
  refreshPatternMatcher2Display();

  let rewrittenData = data;
  if (pm2GetChangeMask() !== 0) {
    const changeMask = pm2GetChangeMask();
    const changeVal  = pm2GetChangeVal();
    rewrittenData = (data & ~changeMask) | (changeVal & changeMask);
    for (let b=0;b<16;b++) big.bits[idx+1+b] = (rewrittenData>>(15-b))&1;
    if(logger.active) stats.pmRewrites++;
    ctrFire('big', 'pm2Rewrite');
    log(`PM2 REWRITE: ${data} → ${rewrittenData} (changeMask=${pm2GetChangeMask()} changeVal=${pm2GetChangeVal()})`, 'ok');
    logOp(`PM2.REWRITE OLD=${formatWordAsBinary(data|0x10000)} NEW=${formatWordAsBinary(rewrittenData|0x10000)} CMASK=${pm2GetChangeMask()} CVAL=${pm2GetChangeVal()}`,
          `PM2 rewrote ${data} → ${rewrittenData}`);
  }

  log(`PM2 MATCH: ${data} (mask=${mask} match=${match})`, 'ok');
  logOp(`PM2.MATCH DATA=${formatWordAsBinary(data|0x10000)} MASK=${mask} PATTERN=${match} COUNT=${pm2.matchCount}`,
        `Pattern Matcher 2 match: ${data} (mask ${mask}, pattern ${match}), total matches: ${pm2.matchCount}`);

  if (pm2.outBuf.length === 0) {
    pm2.outBuf = [1];
    for (let b=0;b<16;b++) pm2.outBuf.push((rewrittenData>>(15-b))&1);
  }

  if (pm2.destructive) {
    for (let b=0;b<BPW;b++) big.bits[idx+b] = 0;
    ctrFire('big', 'pm2Eject');
  }
}

// ================================================================
//  THRESHOLD GATES — Unified helpers + TG1/TG2 delegates
//  Downstream of PM1/PM2. Each compares passing values against
//  an operator-set threshold using GT, LT, GTE, or LTE.
// ================================================================
const TG1_EJECT_IDX = 325; // default position — downstream of PM2
const TG2_EJECT_IDX = 308; // default position — downstream of TG1

// Threshold gate state — short aliases for L21.tg1 / L21.tg2
const tg1 = L21.tg1;
const tg2 = L21.tg2;

// Compare a value against a threshold using the given mode (gt/lt/gte/lte)
function tgCompare(value, threshold, mode) {
  switch(mode) {
    case 'gt':  return value >  threshold;
    case 'lt':  return value <  threshold;
    case 'gte': return value >= threshold;
    case 'lte': return value <= threshold;
    default:    return false;
  }
}

// Return a human-readable label for a TG comparison mode
function tgModeLabel(mode) {
  switch(mode) {
    case 'gt':  return '>';
    case 'lt':  return '<';
    case 'gte': return '≥';
    case 'lte': return '≤';
    default:    return '?';
  }
}

// ── Unified TG helpers ──

function toggleThresholdGateEnabled(tgState, tgLabel, prefix) {
  tgState.enabled = !tgState.enabled;
  const btn = document.getElementById(`${prefix}-enable-btn`);
  if (btn) {
    btn.textContent = tgState.enabled ? 'TURN OFF' : 'TURN ON';
    btn.className = tgState.enabled ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  }
  refreshThresholdGateDisplayGeneric(tgState, tgLabel, prefix);
  logSetup(`OP.${tgLabel}_ENABLE ${tgState.enabled?'ON':'OFF'}`, `Operator ${tgState.enabled?'enables':'disables'} Threshold Gate ${tgLabel.slice(-1)}`);
}

// Toggle destructive mode for a threshold gate
function toggleThresholdGateDestructive(tgState, tgLabel, prefix) {
  tgState.destructive = !tgState.destructive;
  const btn = document.getElementById(`${prefix}-destr-btn`);
  if (btn) {
    btn.textContent = tgState.destructive ? 'OUTFLOW: DESTRUCTIVE' : 'OUTFLOW: COPY';
    btn.className = tgState.destructive ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  }
  logSetup(`OP.${tgLabel}_DESTRUCT ${tgState.destructive?'ON':'OFF'}`, `Operator sets ${tgLabel} eject to ${tgState.destructive?'destructive':'copy'}`);
}

// Set the comparison mode for a threshold gate
function setThresholdGateMode(tgState, tgLabel, prefix, mode) {
  tgState.mode = mode;
  document.querySelectorAll(`#${prefix}-mode-sel .tg-mode-btn`).forEach(b => {
    b.classList.toggle('active', b.dataset.mode === mode);
  });
  refreshThresholdGateDisplayGeneric(tgState, tgLabel, prefix);
  logSetup(`OP.${tgLabel}_MODE ${mode.toUpperCase()}`, `Operator sets ${tgLabel} comparison to ${tgModeLabel(mode)}`);
}

// Set the threshold value for a threshold gate
function setThresholdGateThreshold(tgState, tgLabel, prefix, val) {
  val = Math.max(0, Math.min(65535, parseInt(val) || 0));
  tgState.threshold = val;
  const inp = document.getElementById(`${prefix}-threshold-input`);
  if (inp && document.activeElement !== inp) inp.value = val;
  refreshThresholdGateDisplayGeneric(tgState, tgLabel, prefix);
  logSetup(`OP.${tgLabel}_THRESHOLD ${val}`, `Operator sets ${tgLabel} threshold to ${val}`);
}

// Load a threshold gate value from a WSCR register
function loadThresholdGateFromRegister(tgLabel, setFn, reg) {
  const val = alu[reg];
  if (val === undefined || val === null) { log('ALU register ' + reg.toUpperCase() + ' is empty', 'err'); return; }
  setFn(val);
  log(`${tgLabel} threshold loaded from ALU ${reg.toUpperCase()}: ${val}`, 'info');
}

// Toggle one-shot capture mode for a threshold gate
function toggleThresholdGateCapture(tgState, tgLabel, prefix) {
  tgState.captureNext = !tgState.captureNext;
  tgState.capPos = -1;
  tgState.capBuf = [];
  const btn = document.getElementById(`${prefix}-capture-btn`);
  if (btn) {
    btn.textContent = tgState.captureNext ? 'CAPTURING…' : 'LOAD FROM BIG';
    btn.classList.toggle('active', tgState.captureNext);
  }
  logSetup(`OP.${tgLabel}_CAPTURE ${tgState.captureNext?'ON':'OFF'}`, `Operator ${tgState.captureNext?'arms':'disarms'} ${tgLabel} threshold capture from Big Loop`);
}

// Clear the match flag for a threshold gate
function clearThresholdGateFlag(tgState, tgLabel, prefix) {
  tgState.matchFlag = false;
  tgState.matchCount = 0;
  if (tgState.rejectCount !== undefined) tgState.rejectCount = 0;
  refreshThresholdGateDisplayGeneric(tgState, tgLabel, prefix);
  log(`${tgLabel} flag cleared`, 'info');
}

// Toggle clamp mode for a threshold gate
function toggleThresholdGateClamp(tgState, tgLabel, prefix) {
  tgState.clampEnabled = !tgState.clampEnabled;
  const btn = document.getElementById(`${prefix}-clamp-btn`);
  if (btn) {
    btn.textContent = tgState.clampEnabled ? 'CLAMP: ON' : 'CLAMP: OFF';
    btn.className = tgState.clampEnabled ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  }
  const row = document.getElementById(`${prefix}-clamp-row`);
  if (row) row.style.display = tgState.clampEnabled ? '' : 'none';
  logSetup(`OP.${tgLabel}_CLAMP ${tgState.clampEnabled?'ON':'OFF'}`, `Operator ${tgState.clampEnabled?'enables':'disables'} ${tgLabel} clamp`);
}

// Set the clamp value for a threshold gate
function setThresholdGateClampValue(tgState, tgLabel, prefix, val) {
  val = Math.max(0, Math.min(65535, parseInt(val) || 0));
  tgState.clampValue = val;
  const inp = document.getElementById(`${prefix}-clamp-input`);
  if (inp && document.activeElement !== inp) inp.value = val;
  logSetup(`OP.${tgLabel}_CLAMP_VAL ${val}`, `Operator sets ${tgLabel} clamp value to ${val}`);
}

// Refresh the sidebar display for a threshold gate
function refreshThresholdGateDisplayGeneric(tgState, tgLabel, prefix) {
  const el = id => document.getElementById(id);
  const valEl = el(`${prefix}-threshold-display`);
  if (valEl) valEl.textContent = `${tgState.threshold} / 0x${tgState.threshold.toString(16).toUpperCase().padStart(4,'0')} (${tgModeLabel(tgState.mode)})`;
  const cntEl = el(`${prefix}-count`);
  if (cntEl) cntEl.textContent = `matches: ${tgState.matchCount}`;
  // TG2-specific: reject count visibility (only meaningful in cascade mode)
  if (tgState.cascadeMode !== undefined) {
    const rejEl = el(`${prefix}-reject-count`);
    if (rejEl) {
      rejEl.style.display = tgState.cascadeMode ? '' : 'none';
      rejEl.textContent = `rejects: ${tgState.rejectCount || 0}`;
    }
  }
}

// Advance the output bridge for a threshold gate by one tick
function advanceThresholdGateBridgeGeneric(tgState) {
  tgState.bridge[0] = tgState.outBuf.length > 0 ? tgState.outBuf.shift() : 0;
  if (tgState.bridge[0] !== 0) tgState.bridgeFlash = 1.0;
  // Cascade-mode bridges (only present on TG2 state objects)
  if (tgState.matchOutBuf !== undefined) {
    tgState.matchBridge[0]  = tgState.matchOutBuf.length  > 0 ? tgState.matchOutBuf.shift()  : 0;
    tgState.rejectBridge[0] = tgState.rejectOutBuf.length > 0 ? tgState.rejectOutBuf.shift() : 0;
    if (tgState.matchBridge[0]  !== 0) tgState.matchBridgeFlash  = 1.0;
    if (tgState.rejectBridge[0] !== 0) tgState.rejectBridgeFlash = 1.0;
  }
}


// ================================================================
//  TG1 — delegate functions
// ================================================================
function toggleTG1Enabled()          { toggleThresholdGateEnabled(tg1, 'TG1', 'tg1'); }
// Delegate: toggle TG1 destructive mode
function toggleTG1Destructive()      { toggleThresholdGateDestructive(tg1, 'TG1', 'tg1'); }
// Delegate: set TG1 comparison mode
function setTG1Mode(mode)            { setThresholdGateMode(tg1, 'TG1', 'tg1', mode); }
// Delegate: set TG1 threshold value
function setTG1Threshold(val)        { setThresholdGateThreshold(tg1, 'TG1', 'tg1', val); }
// Delegate: load TG1 threshold from a WSCR register
function loadTG1FromRegister(reg)    { loadThresholdGateFromRegister('TG1', setTG1Threshold, reg); }
// Delegate: toggle TG1 capture mode
function toggleTG1Capture()          { toggleThresholdGateCapture(tg1, 'TG1', 'tg1'); }
// Delegate: clear TG1 match flag
function clearTG1Flag()              { clearThresholdGateFlag(tg1, 'TG1', 'tg1'); }
// Delegate: toggle TG1 clamp mode
function toggleTG1Clamp()            { toggleThresholdGateClamp(tg1, 'TG1', 'tg1'); }
// Delegate: set TG1 clamp value
function setTG1ClampValue(val)       { setThresholdGateClampValue(tg1, 'TG1', 'tg1', val); }
// Delegate: refresh TG1 display
function refreshThresholdGate1Display() { refreshThresholdGateDisplayGeneric(tg1, 'TG1', 'tg1'); }
// Delegate: advance TG1 output bridge
function advanceThresholdGate1OutputBridge() { advanceThresholdGateBridgeGeneric(tg1); }

// Called each tick — check eject point on Big Loop
function tg1Tick() {
  const tg = tg1;
  if(!tg.enabled) return;

  if(tg.cooldown > 0) { tg.cooldown--; return; }
  const big = loops['big'];
  const idx = getFilterEjectIndex('tg1');
  if(big.bits[idx] !== 1) return;

  let data = 0;
  for(let b = 0; b < 16; b++) data = (data << 1) | big.bits[idx + 1 + b];

  tg.cooldown = BPW - 1;

  if(!tgCompare(data, tg.threshold, tg.mode)) return;

  // ── MATCH ──
  tg.matchFlag = true;
  tg.matchCount++;
  ctrFire('big', 'tg1Match');
  refreshThresholdGate1Display();

  // If clamp is enabled, rewrite the matched word in-place on the Big Loop
  // before routing it anywhere, so the clamped value propagates everywhere.
  const outputData = tg.clampEnabled ? tg.clampValue : data;
  if(tg.clampEnabled) {
    for(let b = 0; b < 16; b++) big.bits[idx + 1 + b] = (tg.clampValue >> (15 - b)) & 1;
  }

  log(`TG1 MATCH: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold}${tg.clampEnabled ? ' → CLAMP ' + tg.clampValue : ''}`, 'ok');
  logOp(`TG1.MATCH DATA=${formatWordAsBinary(data|0x10000)} MODE=${tg.mode.toUpperCase()} THRESHOLD=${tg.threshold} COUNT=${tg.matchCount}${tg.clampEnabled?' CLAMP='+tg.clampValue:''}`,
        `Threshold Gate 1 match: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold}${tg.clampEnabled ? ', clamped to ' + tg.clampValue : ''}, total: ${tg.matchCount}`);

  // In cascade mode: route to TG2's input instead of directly to the bus
  if (tg2.cascadeMode) {
    const cascadeWord = [1];
    for (let b = 0; b < 16; b++) cascadeWord.push((outputData >> (15 - b)) & 1);
    tg2.cascadeInBuf.push(cascadeWord);
    logOp(`TG1.CASCADE DATA=${formatWordAsBinary(outputData|0x10000)}`,
          `TG1 match forwarded to TG2 cascade input`);
  } else {
    if(tg.outBuf.length === 0) {
      tg.outBuf = [1];
      for(let b = 0; b < 16; b++) tg.outBuf.push((outputData >> (15 - b)) & 1);
    }
  }

  if(tg.destructive) {
    for(let b = 0; b < BPW; b++) big.bits[idx + b] = 0;
    ctrFire('big', 'tg1Eject');
  }
}


// ================================================================
//  TG2 — delegate functions
// ================================================================
function toggleTG2Enabled()          { toggleThresholdGateEnabled(tg2, 'TG2', 'tg2'); }
// Delegate: toggle TG2 destructive mode
function toggleTG2Destructive()      { toggleThresholdGateDestructive(tg2, 'TG2', 'tg2'); }
// Delegate: set TG2 comparison mode
function setTG2Mode(mode)            { setThresholdGateMode(tg2, 'TG2', 'tg2', mode); }
// Delegate: set TG2 threshold value
function setTG2Threshold(val)        { setThresholdGateThreshold(tg2, 'TG2', 'tg2', val); }
// Delegate: load TG2 threshold from a WSCR register
function loadTG2FromRegister(reg)    { loadThresholdGateFromRegister('TG2', setTG2Threshold, reg); }
// Delegate: toggle TG2 capture mode
function toggleTG2Capture()          { toggleThresholdGateCapture(tg2, 'TG2', 'tg2'); }
// Delegate: clear TG2 match flag
function clearTG2Flag()              { clearThresholdGateFlag(tg2, 'TG2', 'tg2'); }
// Delegate: toggle TG2 clamp mode
function toggleTG2Clamp()            { toggleThresholdGateClamp(tg2, 'TG2', 'tg2'); }
// Delegate: set TG2 clamp value
function setTG2ClampValue(val)       { setThresholdGateClampValue(tg2, 'TG2', 'tg2', val); }
// Delegate: refresh TG2 display
function refreshThresholdGate2Display() { refreshThresholdGateDisplayGeneric(tg2, 'TG2', 'tg2'); }
// Delegate: advance TG2 output bridge
function advanceThresholdGate2OutputBridge() { advanceThresholdGateBridgeGeneric(tg2); }

// Toggle TG cascade mode (TG2 reads from TG1 match output)
function toggleTG2CascadeMode() {
  tg2.cascadeMode = !tg2.cascadeMode;
  tg2.cascadeInBuf  = [];
  tg2.matchOutBuf   = [];
  tg2.rejectOutBuf  = [];
  tg2.matchBridge   = [0];
  tg2.rejectBridge  = [0];
  tg2.rejectCount   = 0;
  const btn = document.getElementById('tg2-cascade-btn');
  btn.textContent = tg2.cascadeMode ? 'MODE: CASCADE (TG1→TG2)' : 'MODE: STANDALONE';
  btn.className   = tg2.cascadeMode ? 'pm-toggle-btn pm-destr-on' : 'pm-toggle-btn pm-destr-off';
  // Cascade mode requires TG2 to be enabled — auto-enable when cascade turns on
  if (tg2.cascadeMode && !tg2.enabled) {
    tg2.enabled = true;
    const enBtn = document.getElementById('tg2-enable-btn');
    if(enBtn) { enBtn.textContent = 'ENABLED'; enBtn.className = 'pm-toggle-btn pm-destr-on'; }
    log('TG2 auto-enabled for cascade mode', 'info');
  }
  logSetup(`OP.TG2_CASCADE ${tg2.cascadeMode?'ON':'OFF'}`,
           `Operator sets TG2 mode to ${tg2.cascadeMode?'cascade (receives TG1 matches)':'standalone (reads Big Loop directly)'}`);
  log(`TG2 cascade mode: ${tg2.cascadeMode?'ON — TG2 evaluates TG1 matches':'OFF — TG2 standalone'}`, 'info');
  refreshThresholdGate2Display();
}

// Run one tick of TG2 — cascade or standalone mode
function tg2Tick() {
  const tg = tg2;
  if(!tg.enabled) return;

  // ── CASCADE MODE: evaluate words arriving from TG1's match output
  if (tg.cascadeMode) {
    if (tg.cascadeInBuf.length === 0) return;
    const wordBits = tg.cascadeInBuf.shift();
    let data = 0;
    for (let b = 0; b < 16; b++) data = (data << 1) | wordBits[1 + b];

    const isMatch = tgCompare(data, tg.threshold, tg.mode);

    if (isMatch) {
      tg.matchFlag = true;
      tg.matchCount++;
      ctrFire('big', 'tg2Match');
      refreshThresholdGate2Display();
      const outputData = tg.clampEnabled ? tg.clampValue : data;
      log(`TG2 CASCADE MATCH: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold}${tg.clampEnabled ? ' → CLAMP ' + tg.clampValue : ''}`, 'ok');
      logOp(`TG2.CASCADE.MATCH DATA=${formatWordAsBinary(data|0x10000)} MODE=${tg.mode.toUpperCase()} THRESHOLD=${tg.threshold} COUNT=${tg.matchCount}${tg.clampEnabled?' CLAMP='+tg.clampValue:''}`,
            `TG2 cascade match: ${data}${tg.clampEnabled ? ', clamped to ' + tg.clampValue : ''}, total: ${tg.matchCount}`);
      if (tg.matchOutBuf.length === 0) {
        tg.matchOutBuf = [1];
        for (let b = 0; b < 16; b++) tg.matchOutBuf.push((outputData >> (15 - b)) & 1);
      }
    } else {
      tg.rejectCount = (tg.rejectCount || 0) + 1;
      refreshThresholdGate2Display();
      log(`TG2 CASCADE REJECT: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold} (reject #${tg.rejectCount})`, 'ok');
      logOp(`TG2.CASCADE.REJECT DATA=${formatWordAsBinary(data|0x10000)} MODE=${tg.mode.toUpperCase()} THRESHOLD=${tg.threshold} REJECTS=${tg.rejectCount}`,
            `TG2 cascade reject: ${data}, total rejects: ${tg.rejectCount}`);
      if (tg.rejectOutBuf.length === 0) {
        tg.rejectOutBuf = [1];
        for (let b = 0; b < 16; b++) tg.rejectOutBuf.push((data >> (15 - b)) & 1);
      }
    }
    return;
  }

  // ── STANDALONE MODE: TG2 reads Big Loop directly
  if(tg.cooldown > 0) { tg.cooldown--; return; }
  const big = loops['big'];
  const idx = getFilterEjectIndex('tg2');
  if(big.bits[idx] !== 1) return;

  let data = 0;
  for(let b = 0; b < 16; b++) data = (data << 1) | big.bits[idx + 1 + b];

  tg.cooldown = BPW - 1;

  if(!tgCompare(data, tg.threshold, tg.mode)) return;

  tg.matchFlag = true;
  tg.matchCount++;
  ctrFire('big', 'tg2Match');
  refreshThresholdGate2Display();

  // If clamp is enabled, rewrite the matched word in-place on the Big Loop
  const outputData = tg.clampEnabled ? tg.clampValue : data;
  if(tg.clampEnabled) {
    for(let b = 0; b < 16; b++) big.bits[idx + 1 + b] = (tg.clampValue >> (15 - b)) & 1;
  }

  log(`TG2 MATCH: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold}${tg.clampEnabled ? ' → CLAMP ' + tg.clampValue : ''}`, 'ok');
  logOp(`TG2.MATCH DATA=${formatWordAsBinary(data|0x10000)} MODE=${tg.mode.toUpperCase()} THRESHOLD=${tg.threshold} COUNT=${tg.matchCount}${tg.clampEnabled?' CLAMP='+tg.clampValue:''}`,
        `Threshold Gate 2 match: ${data} ${tgModeLabel(tg.mode)} ${tg.threshold}${tg.clampEnabled ? ', clamped to ' + tg.clampValue : ''}, total: ${tg.matchCount}`);

  if(tg.outBuf.length === 0) {
    tg.outBuf = [1];
    for(let b = 0; b < 16; b++) tg.outBuf.push((outputData >> (15 - b)) & 1);
  }

  if(tg.destructive) {
    for(let b = 0; b < BPW; b++) big.bits[idx + b] = 0;
    ctrFire('big', 'tg2Eject');
  }
}

// ================================================================
//  COUNTER FUNCTIONS
// ================================================================

function buildCounterTriggersPanel() {
  const panel = document.getElementById('ctr-triggers-panel');
  if(!panel || panel.children.length) return;
  const LOOP_COLORS = { working:'#4a90d9', alu:'#f0a000', memory:'#00c864', big:'#00b8e0' };
  for(const id of ['working','alu','memory','big']) {
    const group = document.createElement('div');
    group.className = 'ctr-trigger-group';
    const title = document.createElement('div');
    title.className = 'ctr-trigger-group-title';
    title.textContent = id.toUpperCase();
    title.style.color = LOOP_COLORS[id];
    group.appendChild(title);
    const btns = document.createElement('div');
    btns.className = 'ctr-trigger-btns';
    for(const trig of CTR_TRIGGERS[id]) {
      const btn = document.createElement('button');
      btn.className = 'ctr-trig-btn';
      btn.id = `ctr-trig-${id}-${trig}`;
      btn.textContent = CTR_TRIGGER_LABELS[trig];
      btn.onclick = () => toggleCtrTrigger(id, trig);
      btns.appendChild(btn);
    }
    group.appendChild(btns);
    panel.appendChild(group);
  }
}

// Toggle a counter trigger on/off for a given loop
function toggleCtrTrigger(id, trig) {
  ctr[id].triggers[trig] = !ctr[id].triggers[trig];
  const btn = document.getElementById(`ctr-trig-${id}-${trig}`);
  if(btn) btn.classList.toggle('active', ctr[id].triggers[trig]);
  if(logger.active) logSetup(
    `OP.CTR_TRIG ${id.toUpperCase()} ${trig} ${ctr[id].triggers[trig]?'ON':'OFF'}`,
    `Operator ${ctr[id].triggers[trig]?'enables':'disables'} ${trig} trigger for ${id} counter`
  );
}


// Reset a loop counter to zero
function ctrReset(id) {
  ctr[id].val = 0;
  ctr[id].rot = 0;
  if(id !== 'global') ctr[id].readPos = -1;
  refreshCounterDisplay(id);
  // Release halt if reset moves counter away from op-count value
  if(opCount.halted[id] && ctr[id].val !== opCount.val) {
    opCount.halted[id] = false;
    if(id === 'global') {
      for(const lid of ['working','alu','memory','big']) opCount.halted[lid] = false;
      log('All loops released — global op-count halt released (counter reset)', 'info');
    } else {
      log(`${id.toUpperCase()} op-count halt released (counter reset)`, 'info');
    }
    refreshOperatorCountDisplay();
  }
  // Or re-engage if reset lands on op-count value
  haltLoopsWhenCountersMatch();
  log(`Counter ${id.toUpperCase()} reset`, 'info');
  logSetup(`OP.CTR_RESET ${id.toUpperCase()}`, `Operator resets ${id} counter to 0`);
}

// Load a specific value into a loop counter
function ctrLoad(id, val) {
  ctr[id].val = val;
  refreshCounterDisplay(id);
  if(opCount.halted[id] && ctr[id].val !== opCount.val) {
    opCount.halted[id] = false;
    refreshOperatorCountDisplay();
  }
  haltLoopsWhenCountersMatch();
}

// Load a value into the global counter (sets all loop counters proportionally)
function ctrLoadGlobal(val) {
  ctr.global.val = val;  // global can accept arbitrary value
  refreshCounterDisplay('global');
}

// Toggle destructive counter eject mode for a loop
function toggleCtrDestructive(id) {
  ctr[id].destructive = !ctr[id].destructive;
  const btn = document.getElementById(`ctr-destr-${id}`);
  if(btn) {
    btn.textContent = ctr[id].destructive ? 'EJECT:DESTR' : 'EJECT:COPY';
    btn.className   = ctr[id].destructive ? 'ctr-btn ctr-destr-on' : 'ctr-btn ctr-destr-off';
  }
}

// ── Unified counter eject/drain helpers ──

// Map bus ID to the outBuf property name on counter state objects
function counterOutBufKey(busId) {
  switch (busId) {
    case 'b': return 'outBuf';
    case 'a': return 'outBufA';
    case 'c': return 'outBufC';
    case 'd': return 'outBufD';
    default:  return 'outBuf';
  }
}

// Eject a counter value to the specified bus
function ctrEjectGeneric(id, busId) {
  if (logger.active) stats.ctrEjects++;
  const bufKey = counterOutBufKey(busId);
  const buf = ctr[id][bufKey];
  if (buf && buf.length > 0) {
    log(`Counter ${id} eject to Bus ${busId.toUpperCase()} already pending`, 'err'); return;
  }
  const busLabel = busId.toUpperCase();
  const logSuffix = busId === 'b' ? '' : `_${busLabel}`;
  if (id === 'global') {
    const val = ctr.global.val;
    const words = [];
    if (val === 0) { words.push(0); }
    else { let v = val; while (v > 0) { words.unshift(v & 0xFF); v = Math.floor(v / 256); } }
    for (let w = 0; w < words.length; w++) {
      if (w > 0) ctr.global[bufKey].push(0, 0);
      ctr.global[bufKey].push(1);
      for (let b = 15; b >= 0; b--) ctr.global[bufKey].push((words[w] >> b) & 1);
    }
    if (ctr.global.destructive) { ctr.global.val = 0; refreshCounterDisplay('global'); }
    log(`Global counter → Bus ${busLabel}: ${val} (${words.length} word${words.length > 1 ? 's' : ''})`, 'info');
  } else {
    const val = ctr[id].val;
    ctr[id][bufKey].push(1);
    for (let b = 15; b >= 0; b--) ctr[id][bufKey].push((val >> b) & 1);
    if (ctr[id].destructive) { ctr[id].val = 0; refreshCounterDisplay(id); }
    log(`Counter ${id.toUpperCase()} → Bus ${busLabel}: ${val}`, 'info');
    logSetup(`OP.CTR_EJECT${logSuffix} ${id.toUpperCase()} ${formatWordAsBinary(val|0x10000)} DESTRUCT=${ctr[id].destructive?'Y':'N'}`,
             `Operator ejects ${id} counter (${val}) to Bus ${busLabel}`);
  }
}

// Drain counter output buffer onto a bus (called each tick)
function drainCounterQueueGeneric(busId) {
  const bufKey = counterOutBufKey(busId);
  for (const id of ['working', 'alu', 'memory', 'big', 'global']) {
    const buf = ctr[id][bufKey];
    if (buf && buf.length > 0) {
      const bit = buf.shift();
      const dir = getBusFlowDirection(busId);
      if (dir !== 'invalid') {
        if (dir === 'ltr') L21.buses[busId].bits[0] = bit;
        else L21.buses[busId].bits[BUS_N - 1] = bit;
      } else {
        L21.buses[busId].bits[0] = bit;
      }
      if (bit) L21.buses[busId].flash = 1.0;
      return;
    }
  }
}

// ── Delegate functions (preserve original call-site names) ──
function ctrEject(id)  { ctrEjectGeneric(id, 'b'); }
// Delegate: eject counter value to Bus A
function ctrEjectA(id) { ctrEjectGeneric(id, 'a'); }
// Delegate: eject counter value to Bus C
function ctrEjectC(id) { ctrEjectGeneric(id, 'c'); }
// Delegate: eject counter value to Bus D
function ctrEjectD(id) { ctrEjectGeneric(id, 'd'); }

// Delegate: drain counter outBuf into Bus A
function drainCounterQueueToBusA() { drainCounterQueueGeneric('a'); }
// Delegate: drain counter outBuf into Bus B
function drainCounterQueueToBusB() { drainCounterQueueGeneric('b'); }
// Delegate: drain counter outBuf into Bus C
function drainCounterQueueToBusC() { drainCounterQueueGeneric('c'); }
// Delegate: drain counter outBuf into Bus D
function drainCounterQueueToBusD() { drainCounterQueueGeneric('d'); }


// Called each tick: increment loop counters based on rotations
function advanceLoopCountersOnTick() {
  for(const id of ['working','alu','memory','big']) {
    const lp = loops[id];
    if(lp.paused || opCount.halted[id]) continue;
    const def = DEF_BY_ID[id];

    // fullCycle trigger
    ctr[id].rot++;
    if(ctr[id].rot >= def.wordCap * BPW) {
      ctr[id].rot = 0;
      ctrFire(id, 'fullCycle');
      notifFire(id, 'fullCycle');
    }

    // read-head triggers: sample R dot post-rotate
    const rBit = lp.bits[readHeadBitIndex(id)];
    if(rBit === 1 && ctr[id].readPos < 0) {
      ctr[id].readPos = 0;
    }
    if(ctr[id].readPos >= 0) {
      ctrFire(id, 'bitsRead');
      ctr[id].readPos++;
      if(ctr[id].readPos >= BPW) {
        ctr[id].readPos = -1;
        ctrFire(id, 'wordRead'); // fires on final bit of word, not the marker
        notifFire(id, 'wordRead');
      }
    }
  }
  haltLoopsWhenCountersMatch();
}


// Capture states for Bus → TG threshold destinations (same 17-bit word protocol as counters)

// Shared helper: capture 17-bit word from bus exit bit into TG threshold
function deliverBitToTGThreshold(exitBit, captureState, busLabel) {
  if(!captureState.active && exitBit === 1) {
    captureState.active = true;
    captureState.buf = [1];
    return true; // flash
  } else if(captureState.active) {
    captureState.buf.push(exitBit);
    if(captureState.buf.length === BPW) {
      let val = 0;
      for(let b = 0; b < 16; b++) val = (val << 1) | captureState.buf[1 + b];
      if(captureState.target === 'tg1-threshold') {
        setTG1Threshold(val);
        log(`${busLabel} → TG1 threshold: ${val}`, 'info');
        logOp(`${busLabel}.XFER → TG1.THRESHOLD VAL=${val}`, `${busLabel} loads ${val} into TG1 threshold`);
      } else if(captureState.target === 'tg2-threshold') {
        setTG2Threshold(val);
        log(`${busLabel} → TG2 threshold: ${val}`, 'info');
        logOp(`${busLabel}.XFER → TG2.THRESHOLD VAL=${val}`, `${busLabel} loads ${val} into TG2 threshold`);
      } else if(captureState.target === 'tg1-clamp') {
        setTG1ClampValue(val);
        log(`${busLabel} → TG1 clamp value: ${val}`, 'info');
        logOp(`${busLabel}.XFER → TG1.CLAMP VAL=${val}`, `${busLabel} loads ${val} into TG1 clamp value`);
      } else if(captureState.target === 'tg2-clamp') {
        setTG2ClampValue(val);
        log(`${busLabel} → TG2 clamp value: ${val}`, 'info');
        logOp(`${busLabel}.XFER → TG2.CLAMP VAL=${val}`, `${busLabel} loads ${val} into TG2 clamp value`);
      }
      captureState.active = false;
      captureState.buf = [];
    }
    return exitBit === 1;
  }
  return false;
}

const counterDisplayElements = {};
const counterLastDisplayedValue = {};
// Update the counter display element for a loop or global counter
function refreshCounterDisplay(id) {
  if(!counterDisplayElements[id]) counterDisplayElements[id] = document.getElementById('ctr-val-'+id);
  const el = counterDisplayElements[id];
  if(!el) return;
  const v = ctr[id].val;
  if(counterLastDisplayedValue[id] === v) return; // skip DOM write if unchanged
  counterLastDisplayedValue[id] = v;
  if(id==='global') {
    el.textContent = v + ' / 0x' + v.toString(16).toUpperCase();
  } else {
    el.textContent = v + ' / 0x' + v.toString(16).toUpperCase().padStart(2,'0');
  }
}

const MAX_VISIBLE_LOG_MESSAGES=6;let activeLogMessages=[];
// Write a message to the operator log panel
function log(msg,type='info'){
  activeLogMessages.unshift({msg,type});
  if(activeLogMessages.length>MAX_VISIBLE_LOG_MESSAGES)activeLogMessages.pop();
  activeLogMessages.forEach((l,i)=>{const el=document.getElementById('log'+i);if(!el)return;el.textContent=l.msg;el.className='status-line show '+l.type;});
  for(let i=activeLogMessages.length;i<MAX_VISIBLE_LOG_MESSAGES;i++){const el=document.getElementById('log'+i);if(el)el.className='status-line';}
}

// ================================================================
//  GEOMETRY
// ================================================================
const loopGeometryCache={};
// Compute the rounded-rectangle point array for rendering a loop on canvas
function buildLoopGeometry(id,W,H){
  const key=`${id}-${W}-${H}`;if(loopGeometryCache[key])return loopGeometryCache[key];
  const def=loops[id].def;const N=def.wordCap*BPW;
  const pad=26;const lw=W-pad*2,lh=H-pad*2;
  const r=Math.min(lw*0.15,lh*0.22,32);
  const tw=lw-2*r,th=lh-2*r;const qc=0.5*Math.PI*r;
  const perim=2*(tw+th)+4*qc;const step=perim/N;
  const segs=[
    {type:'L',x0:0,      y0:-lh/2,dx:1, dy:0,len:tw/2},
    {type:'A',cx:lw/2-r, cy:-lh/2+r,a0:-Math.PI/2,da:Math.PI/2,len:qc},
    {type:'L',x0:lw/2,   y0:-lh/2+r,dx:0,dy:1, len:th},
    {type:'A',cx:lw/2-r, cy:lh/2-r, a0:0,       da:Math.PI/2,len:qc},
    {type:'L',x0:lw/2-r, y0:lh/2,   dx:-1,dy:0,len:tw},
    {type:'A',cx:-lw/2+r,cy:lh/2-r, a0:Math.PI/2,da:Math.PI/2,len:qc},
    {type:'L',x0:-lw/2,  y0:lh/2-r, dx:0,dy:-1,len:th},
    {type:'A',cx:-lw/2+r,cy:-lh/2+r,a0:Math.PI,  da:Math.PI/2,len:qc},
    {type:'L',x0:-lw/2+r,y0:-lh/2,  dx:1,dy:0, len:tw/2},
  ];
  const cx=W/2,cy=H/2;const rawPts=[];
  for(let i=0;i<N;i++){
    let d=i*step,x=0,y=0;
    for(const s of segs){
      if(d<=s.len+1e-9){const t=Math.min(d/s.len,1);
        if(s.type==='L'){x=s.x0+s.dx*d;y=s.y0+s.dy*d;}
        else{const a=s.a0+t*s.da;x=s.cx+Math.cos(a)*r;y=s.cy+Math.sin(a)*r;}break;}
      d-=s.len;
    }
    rawPts.push({x:x+cx,y:y+cy});
  }
  // headPos='top'    → slot 0 at top    (default, no rotation needed)
  // headPos='bottom' → slot 0 at bottom
  let pts=rawPts;
  if(def.headPos==='bottom'){const off=Math.round(N/2);pts=[...rawPts.slice(off),...rawPts.slice(0,off)];}
  const dotR=Math.min(Math.max((perim/N)*0.32,2.0),7.0);
  loopGeometryCache[key]={pts,lw,lh,r,cx,cy,dotR};return loopGeometryCache[key];
}

// ================================================================
//  RENDER
// ================================================================
function resizeCanvasToContainer(id){
  const canvas=document.getElementById('canvas-'+id);
  const wrap=document.getElementById('wrap-'+id);
  const W=Math.max(wrap.clientWidth-2,10),H=Math.max(wrap.clientHeight-2,10);
  if(canvas.width!==W||canvas.height!==H){canvas.width=W;canvas.height=H;for(const k of Object.keys(loopGeometryCache))if(k.startsWith(id+'-'))delete loopGeometryCache[k];}
  return canvas;
}

// Pre-parse skin colors into RGB arrays for use in canvas batch drawing
function buildSkinColorCache(){
  SK._dotOffRgb = `rgb(${SK.dotOff[0]},${SK.dotOff[1]},${SK.dotOff[2]})`;
  SK._dotOffRgba = `rgba(${SK.dotOff[0]+20},${SK.dotOff[1]+20},${SK.dotOff[2]+20},0.8)`;
}
// Re-render all loops, buses, inject channel, ALU, memory, and WSCR displays
function renderAllComponents() {
  DEFS.forEach(def => { renderLoop(def); updateLoopHeadDetailDisplay(def); });
  renderBusA(); renderBusB(); renderBusC(); renderBusD();
  renderBusE(); renderBusF(); renderBusG(); renderBusH(); renderBusI();
  renderInjectChannel();
  aluUpdateDisplay(); refreshMemoryDisplay(); refreshWorkingScratchDisplay();
}

// ── Dot geometry ratios ──
// Four visual layers create the lit/unlit dot appearance:
//   Outer ring (off dots): the main circle visible when bit=0
//   Inner highlight (off): smaller bright center on unlit dots
//   Lit body: the filled circle when bit=1
//   Lit specular: small white highlight on lit dots for 3D look
const DOT_OFF_OUTER    = 0.72;  // off-state circle radius as fraction of dotR
const DOT_OFF_INNER    = 0.38;  // off-state inner highlight radius
const DOT_LIT_BODY     = 0.78;  // lit circle radius
const DOT_LIT_SPEC     = 0.28;  // lit specular highlight radius
const DOT_LIT_SPEC_OFS = 0.22;  // specular offset from center
const DOT_MK_OFF       = 0.88;  // marker square size as fraction of dotR
const DOT_MK_OFF_INNER = 0.45;  // marker inner highlight as fraction of marker size
const DOT_MK_LIT       = 0.92;  // lit marker square size
const DOT_MK_LIT_SPEC  = 0.38;  // lit marker specular ratio
const DOT_MK_LIT_OFS   = 0.22;  // lit marker specular offset ratio
const DOT_BRIDGE_SCALE = 0.85;  // bridge dots drawn slightly smaller than loop dots

// Simulation limit constants
const MAX_TICK_COUNT = 1000000000;  // tick counter wraps at this value

// Draw a rounded rectangle path on a canvas context (does not fill/stroke)
function drawRoundedRect(ctx,x,y,w,h,r){
  r=Math.max(Math.min(r,w/2,h/2),1);
  ctx.beginPath();ctx.moveTo(x+r,y);
  ctx.arcTo(x+w,y,x+w,y+h,r);ctx.arcTo(x+w,y+h,x,y+h,r);
  ctx.arcTo(x,y+h,x,y,r);ctx.arcTo(x,y,x+w,y,r);ctx.closePath();
}

// Draw a single bit dot (circle or marker square) on canvas at the given position
function drawBitDot(ctx,px,py,dotR,bitVal,isMk,color,rgb,flash){
  if(bitVal===0){
    if(isMk){const s=dotR*0.88;ctx.fillStyle=`rgb(${SK.dotOff[0]},${SK.dotOff[1]},${SK.dotOff[2]})`;ctx.fillRect(px-s/2,py-s/2,s,s);const si=s*0.45;ctx.fillStyle=`rgba(${SK.dotOff[0]+20},${SK.dotOff[1]+20},${SK.dotOff[2]+20},0.8)`;ctx.fillRect(px-si/2,py-si/2,si,si);}
    else{ctx.beginPath();ctx.arc(px,py,dotR*0.72,0,Math.PI*2);ctx.fillStyle=`rgb(${SK.dotOff[0]},${SK.dotOff[1]},${SK.dotOff[2]})`;ctx.fill();ctx.beginPath();ctx.arc(px,py,dotR*0.38,0,Math.PI*2);ctx.fillStyle=`rgba(${SK.dotOff[0]+20},${SK.dotOff[1]+20},${SK.dotOff[2]+20},0.8)`;ctx.fill();}
  } else {
    const boost=flash*0.6;const[rr,gg,bb]=rgb;
    const g=ctx.createRadialGradient(px,py,0,px,py,dotR*3.0);
    g.addColorStop(0,`rgba(${rr},${gg},${bb},1.0)`);
    g.addColorStop(0.4,`rgba(${rr},${gg},${bb},0.70)`);
    g.addColorStop(1,`rgba(${rr},${gg},${bb},0.05)`);
    ctx.beginPath();ctx.arc(px,py,dotR*5.0,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
    if(isMk){const s=dotR*0.92;ctx.fillStyle=color;ctx.fillRect(px-s/2,py-s/2,s,s);ctx.fillStyle=`rgba(255,255,255,${0.7+boost*0.2})`;ctx.fillRect(px-s*0.22,py-s*0.22,s*0.38,s*0.38);}
    else{ctx.beginPath();ctx.arc(px,py,dotR*0.78,0,Math.PI*2);ctx.fillStyle=color;ctx.fill();ctx.beginPath();ctx.arc(px-dotR*0.22,py-dotR*0.22,dotR*0.28,0,Math.PI*2);ctx.fillStyle=`rgba(255,255,255,${0.7+boost*0.2})`;ctx.fill();}
  }
}

// ── Render sub-function: peripheral head bracket + bridge dots (PM/TG) ──
function drawPeripheralHead(ctx, pts, cx, cy, dotR, peripheralObj, getMaskFn, isActiveFn, ejIdx, label, forceDown) {
  const ep = pts[ejIdx];
  const ejColor = isActiveFn() ? (peripheralObj.matchFlag ? '#cc1828' : '#0080a8') : '#304860';
  const ejAlpha = isActiveFn() ? 'ff' : 'bb';
  const dx = ep.x - cx, dy = ep.y - cy;
  const absDx = Math.abs(dx), absDy = Math.abs(dy);
  const bOff = dotR + 5;
  ctx.lineWidth = 1.5;

  if (forceDown || absDy > absDx) {
    const dir2 = forceDown ? -1 : (dy < 0 ? -1 : 1);
    const bracketY = ep.y + dir2 * bOff;
    ctx.strokeStyle = ejColor + ejAlpha;
    ctx.beginPath();
    ctx.moveTo(ep.x-7, bracketY + dir2*6); ctx.lineTo(ep.x-7, bracketY);
    ctx.lineTo(ep.x+7, bracketY); ctx.lineTo(ep.x+7, bracketY + dir2*6);
    ctx.stroke();
    ctx.fillStyle = ejColor + ejAlpha; ctx.font = 'bold 8px monospace';
    ctx.textAlign = 'center'; ctx.textBaseline = dir2 > 0 ? 'top' : 'bottom';
    ctx.fillText(label, ep.x, bracketY + dir2*8);
    if (peripheralObj.matchFlag) {
      ctx.fillStyle = '#cc1828ff'; ctx.font = '11px monospace';
      ctx.fillText('★', ep.x, bracketY + dir2*18);
    }
    const nBridge = peripheralObj.bridge.length;
    const bridgeStart = bracketY + dir2 * 14;
    const bridgeStep  = dir2 * (dotR * 2.2);
    ctx.strokeStyle = ejColor + '99'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(ep.x, bracketY + dir2*12);
    ctx.lineTo(ep.x, bridgeStart + bridgeStep * (nBridge-1)); ctx.stroke();
    for (let bi=0; bi<nBridge; bi++) {
      drawBitDot(ctx, ep.x, bridgeStart + bridgeStep * bi, dotR*0.85,
        peripheralObj.bridge[bi], bi===0 && peripheralObj.bridge[bi]===1,
        SK.pmBridgeDot, SK.pmBridgeRgb, peripheralObj.bridgeFlash);
    }
  } else {
    const dir2 = dx < 0 ? -1 : 1;
    const bracketX = ep.x + dir2 * bOff;
    ctx.strokeStyle = ejColor + ejAlpha;
    ctx.beginPath();
    ctx.moveTo(bracketX + dir2*6, ep.y-7); ctx.lineTo(bracketX, ep.y-7);
    ctx.lineTo(bracketX, ep.y+7); ctx.lineTo(bracketX + dir2*6, ep.y+7);
    ctx.stroke();
    ctx.fillStyle = ejColor + ejAlpha; ctx.font = 'bold 8px monospace';
    ctx.textAlign = dx < 0 ? 'right' : 'left'; ctx.textBaseline = 'middle';
    ctx.fillText(label, bracketX + dir2*10, ep.y);
    if (peripheralObj.matchFlag) {
      ctx.fillStyle = '#cc1828ff'; ctx.font = '11px monospace';
      ctx.fillText('★', bracketX + dir2*20, ep.y);
    }
    const nBridge = peripheralObj.bridge.length;
    const bridgeStart = bracketX + dir2 * 14;
    const bridgeStep  = dir2 * (dotR * 2.2);
    ctx.strokeStyle = ejColor + '99'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(bracketX + dir2*12, ep.y);
    ctx.lineTo(bridgeStart + bridgeStep*(nBridge-1), ep.y); ctx.stroke();
    for (let bi=0; bi<nBridge; bi++) {
      drawBitDot(ctx, bridgeStart + bridgeStep * bi, ep.y, dotR*0.85,
        peripheralObj.bridge[bi], bi===0 && peripheralObj.bridge[bi]===1,
        SK.pmBridgeDot, SK.pmBridgeRgb, peripheralObj.bridgeFlash);
    }
  }
}

// ── Render sub-function: cascade link arc between two peripheral heads ──
function drawCascadeLink(ctx, pts, ejIdx1, ejIdx2, color) {
  const ep1 = pts[ejIdx1], ep2 = pts[ejIdx2];
  ctx.save();
  ctx.strokeStyle = color + 'aa'; ctx.lineWidth = 1.5; ctx.setLineDash([3,3]);
  ctx.beginPath();
  const midX = (ep1.x + ep2.x) / 2;
  const midY = Math.min(ep1.y, ep2.y) - 20;
  ctx.moveTo(ep1.x, ep1.y - 10);
  ctx.quadraticCurveTo(midX, midY, ep2.x, ep2.y - 10);
  ctx.stroke(); ctx.setLineDash([]);
  ctx.fillStyle = color + 'aa';
  ctx.beginPath();
  ctx.moveTo(ep2.x, ep2.y - 10);
  ctx.lineTo(ep2.x - 5, ep2.y - 5);
  ctx.lineTo(ep2.x - 5, ep2.y - 15);
  ctx.closePath(); ctx.fill();
  ctx.restore();
}

// ── Render sub-function: cascade head with match/reject bridges ──
function drawCascadeHeadWithBridges(ctx, pts, ejIdx, dotR, state, label, isActive) {
  const ep = pts[ejIdx];
  const caColor = isActive ? (state.matchFlag ? '#cc1828' : '#00a080') : '#304860';
  const bOff = dotR + 5;
  ctx.save();
  ctx.strokeStyle = caColor + 'ff'; ctx.lineWidth = 1.5;
  const bracketY = ep.y - bOff;
  ctx.setLineDash([2,2]);
  ctx.beginPath();
  ctx.moveTo(ep.x - 7, bracketY - 6); ctx.lineTo(ep.x - 7, bracketY);
  ctx.lineTo(ep.x + 7, bracketY); ctx.lineTo(ep.x + 7, bracketY - 6);
  ctx.stroke(); ctx.setLineDash([]);
  ctx.fillStyle = caColor + 'ff'; ctx.font = 'bold 8px monospace';
  ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
  ctx.fillText(label, ep.x, bracketY - 8);
  if (state.matchFlag) {
    ctx.fillStyle = '#cc1828ff'; ctx.font = '11px monospace';
    ctx.fillText('★', ep.x, bracketY - 18);
  }
  // Match (left) and Reject (right) bridges
  const matchColor = '#007850', rejectColor = '#b04030';
  const bridgeY = bracketY - 30;
  ctx.font = '7px monospace'; ctx.textBaseline = 'middle';
  ctx.fillStyle = matchColor + '99'; ctx.textAlign = 'right';
  ctx.fillText('M', ep.x - 5, bridgeY);
  const mBit = state.matchBridge[0];
  drawBitDot(ctx, ep.x - (dotR*1.5), bridgeY, dotR*0.85, mBit, mBit===1,
    matchColor + '88', [0x4f, 0xcc, 0xa0], state.matchBridgeFlash || 0);
  ctx.fillStyle = rejectColor + '99'; ctx.textAlign = 'left';
  ctx.fillText('R', ep.x + 5, bridgeY);
  const rBit = state.rejectBridge[0];
  drawBitDot(ctx, ep.x + (dotR*1.5), bridgeY, dotR*0.85, rBit, rBit===1,
    rejectColor + '88', [0xf8, 0x70, 0x60], state.rejectBridgeFlash || 0);
  ctx.restore();
}

// ── Render sub-function: Big Loop peripheral heads (PM1, PM2, TG1, TG2) ──
function drawBigLoopPeripherals(ctx, pts, cx, cy, dotR) {
  const pm1Idx = getFilterEjectIndex('pm1');
  const pm2Idx = getFilterEjectIndex('pm2');
  const tg1Idx = getFilterEjectIndex('tg1');
  const tg2Idx = getFilterEjectIndex('tg2');
  // PM1 — always standalone head
  drawPeripheralHead(ctx, pts, cx, cy, dotR, pm, pmGetMask, isPatternMatcherActive, pm1Idx, 'PM1', true);
  // PM2 — cascade or standalone
  if (pm2.cascadeMode) {
    drawCascadeLink(ctx, pts, pm1Idx, pm2Idx,
      isPatternMatcher2Active() ? '#a0e8ff' : '#405060');
    drawCascadeHeadWithBridges(ctx, pts, pm2Idx, dotR, pm2, 'PM2', isPatternMatcher2Active());
  } else {
    drawPeripheralHead(ctx, pts, cx, cy, dotR, pm2, pm2GetMask, isPatternMatcher2Active, pm2Idx, 'PM2', true);
  }
  // TG1 — always standalone head
  drawPeripheralHead(ctx, pts, cx, cy, dotR, tg1, ()=>tg1.enabled?1:0, ()=>tg1.enabled, tg1Idx, 'TG1', true);
  // TG2 — cascade or standalone
  if (tg2.cascadeMode) {
    drawCascadeLink(ctx, pts, tg1Idx, tg2Idx,
      tg2.enabled ? '#a0ffe0' : '#405060');
    drawCascadeHeadWithBridges(ctx, pts, tg2Idx, dotR, tg2, 'TG2', tg2.enabled);
  } else {
    drawPeripheralHead(ctx, pts, cx, cy, dotR, tg2, ()=>tg2.enabled?1:0, ()=>tg2.enabled, tg2Idx, 'TG2', true);
  }
}

// ── Render sub-function: R/G/W head bracket ──
function drawLoopHeadBracket(ctx, pR, pG, pW, cx, cy, dotR, gateOpen, def, isBottom) {
  const readColor  = def.color+'dd';
  const gateColor  = gateOpen ? SK.gateOpenColor : SK.gateClosedColor;
  const writeColor = def.color+'99';
  ctx.lineWidth = 1.5;
  const spanX0 = Math.min(pR.x, pW.x) - dotR - 2;
  const spanX1 = Math.max(pR.x, pW.x) + dotR + 2;
  const headBracketColor = gateOpen ? def.color+'cc' : SK.gateClosedColor;
  ctx.strokeStyle = headBracketColor;
  const midBracketX = (spanX0 + spanX1) / 2;

  if (!isBottom) {
    const bY = Math.min(pR.y, pG.y, pW.y) - dotR - 4;
    ctx.beginPath();
    ctx.moveTo(spanX0, bY-6); ctx.lineTo(spanX0, bY);
    ctx.lineTo(spanX1, bY); ctx.lineTo(spanX1, bY-6); ctx.stroke();
    ctx.font='bold 8px monospace'; ctx.textBaseline='bottom'; ctx.textAlign='center';
    ctx.fillStyle=writeColor; ctx.fillText('W', spanX0, bY-7);
    ctx.fillStyle=gateColor;  ctx.fillText('G', midBracketX, bY-7);
    ctx.fillStyle=readColor;  ctx.fillText('R', spanX1, bY-7);
    if (!gateOpen) {
      ctx.fillStyle=SK.pmEjectColor+'99'; ctx.font='bold 11px monospace'; ctx.textBaseline='bottom';
      ctx.fillText('⊗', pG.x, bY-17);
    }
  } else {
    const bY = Math.max(pR.y, pG.y, pW.y) + dotR + 4;
    ctx.beginPath();
    ctx.moveTo(spanX0, bY+6); ctx.lineTo(spanX0, bY);
    ctx.lineTo(spanX1, bY); ctx.lineTo(spanX1, bY+6); ctx.stroke();
    ctx.font='bold 8px monospace'; ctx.textBaseline='top'; ctx.textAlign='center';
    ctx.fillStyle=writeColor; ctx.fillText('W', spanX0, bY+7);
    ctx.fillStyle=gateColor;  ctx.fillText('G', midBracketX, bY+7);
    ctx.fillStyle=readColor;  ctx.fillText('R', spanX1, bY+7);
    if (!gateOpen) {
      ctx.fillStyle=SK.pmEjectColor+'99'; ctx.font='bold 11px monospace'; ctx.textBaseline='top';
      ctx.fillText('⊗', pG.x, bY+17);
    }
  }
}

// ── Render sub-function: batched bit drawing (4 passes) ──
function drawLoopBits(ctx, pts, lp, N, def, dotR) {
  if (!SK._dotOffRgb) buildSkinColorCache();
  const TWO_PI = Math.PI*2;
  const dotR72 = dotR*0.72, dotR38 = dotR*0.38, dotR78 = dotR*0.78, dotR28 = dotR*0.28;
  const hasFlash = lp.flash > 0.01;
  const [rr, gg, bb] = def.rgb;
  const litColor = def.color;
  const litColorAlpha = `rgba(${rr},${gg},${bb},0.7)`;

  // Pass 1: off data dots (outer)
  ctx.beginPath(); ctx.fillStyle = SK._dotOffRgb;
  for (let i=0; i<N; i++) {
    if (lp.bits[i]!==0 || i%BPW===0) continue;
    const p=pts[i]; ctx.moveTo(p.x+dotR72,p.y); ctx.arc(p.x,p.y,dotR72,0,TWO_PI);
  }
  ctx.fill();

  // Pass 2: off data dots (inner highlight)
  ctx.beginPath(); ctx.fillStyle = SK._dotOffRgba;
  for (let i=0; i<N; i++) {
    if (lp.bits[i]!==0 || i%BPW===0) continue;
    const p=pts[i]; ctx.moveTo(p.x+dotR38,p.y); ctx.arc(p.x,p.y,dotR38,0,TWO_PI);
  }
  ctx.fill();

  // Pass 3: off marker dots (squares)
  ctx.fillStyle = SK._dotOffRgb;
  for (let i=0; i<N; i++) {
    if (lp.bits[i]!==0 || i%BPW!==0) continue;
    const p=pts[i]; const s=dotR*0.88; ctx.fillRect(p.x-s/2,p.y-s/2,s,s);
  }
  ctx.fillStyle = SK._dotOffRgba;
  for (let i=0; i<N; i++) {
    if (lp.bits[i]!==0 || i%BPW!==0) continue;
    const p=pts[i]; const s=dotR*0.88*0.45; ctx.fillRect(p.x-s/2,p.y-s/2,s,s);
  }

  // Pass 4: lit bits (glow + dot)
  for (let i=0; i<N; i++) {
    if (lp.bits[i]===0) continue;
    const p=pts[i]; const isMk=i%BPW===0;
    if (hasFlash) {
      const g=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,dotR*3.0);
      g.addColorStop(0,`rgba(${rr},${gg},${bb},1.0)`);
      g.addColorStop(0.4,litColorAlpha);
      g.addColorStop(1,`rgba(${rr},${gg},${bb},0.05)`);
      ctx.beginPath(); ctx.arc(p.x,p.y,dotR*5.0,0,TWO_PI); ctx.fillStyle=g; ctx.fill();
    }
    if (isMk) {
      const s=dotR*0.92; ctx.fillStyle=litColor; ctx.fillRect(p.x-s/2,p.y-s/2,s,s);
      ctx.fillStyle='rgba(255,255,255,0.8)'; ctx.fillRect(p.x-s*0.22,p.y-s*0.22,s*0.38,s*0.38);
    } else {
      ctx.beginPath(); ctx.arc(p.x,p.y,dotR78,0,TWO_PI); ctx.fillStyle=litColor; ctx.fill();
      ctx.beginPath(); ctx.arc(p.x-dotR*0.22,p.y-dotR*0.22,dotR28,0,TWO_PI);
      ctx.fillStyle='rgba(255,255,255,0.8)'; ctx.fill();
    }
  }
}

// ── Render sub-function: center letter + word count overlay ──
function drawLoopCenterOverlay(ctx, cx, cy, lw, lh, def, lp, N) {
  // Center letter
  if (def.letter) {
    const fontSize = Math.min(lw,lh) * 0.55;
    ctx.font = `bold ${fontSize}px monospace`;
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillStyle = def.color + 'ff';
    ctx.fillText(def.letter, cx, cy);
  }
  // Word count overlay
  let wc = 0;
  for (let i=0; i<N; i+=BPW) if (lp.bits[i]===1) wc++;
  const md = Math.min(lw, lh);
  const [rr, gg, bb] = def.rgb;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  ctx.fillStyle = `rgba(${rr},${gg},${bb},0.13)`;
  ctx.font = `bold ${Math.round(md*0.12)}px monospace`;
  ctx.fillText(def.wordCap, cx, cy);
  ctx.fillStyle = `rgba(${rr},${gg},${bb},0.20)`;
  ctx.font = `${Math.round(md*0.048)}px monospace`;
  ctx.fillText('WORDS', cx, cy + Math.round(md*0.076));
  ctx.fillStyle = `rgba(${rr},${gg},${bb},0.16)`;
  ctx.font = `${Math.round(md*0.040)}px monospace`;
  ctx.fillText(`${wc} data`, cx, cy - Math.round(md*0.076));
}

// ── renderLoop coordinator ──
function renderLoop(def) {
  const canvas = resizeCanvasToContainer(def.id);
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const lp = loops[def.id];
  ctx.clearRect(0, 0, W, H);
  if (W < 30 || H < 30) return;
  const { pts, lw, lh, r, cx, cy, dotR } = buildLoopGeometry(def.id, W, H);
  const N = def.wordCap * BPW;
  const isBottom = (def.headPos === 'bottom');

  // Track
  const band = dotR + 5, ox = cx - lw/2, oy = cy - lh/2;
  drawRoundedRect(ctx, ox-band, oy-band, lw+band*2, lh+band*2, r+band);
  ctx.fillStyle = SK.loopTrackOuter; ctx.fill();
  const inn = dotR + 3;
  if (lw-inn*2 > 8 && lh-inn*2 > 8) {
    drawRoundedRect(ctx, ox+inn, oy+inn, lw-inn*2, lh-inn*2, Math.max(r-inn, 2));
    ctx.fillStyle = SK.loopTrackInner; ctx.fill();
  }

  // Big Loop peripherals (PM/TG heads + bridges)
  if (def.id === 'big') drawBigLoopPeripherals(ctx, pts, cx, cy, dotR);

  // Center letter + word count
  drawLoopCenterOverlay(ctx, cx, cy, lw, lh, def, lp, N);

  // R/G/W head bracket
  drawLoopHeadBracket(ctx, pts[2], pts[1], pts[0], cx, cy, dotR, lp.gateOpen, def, isBottom);

  // Bit dots (4-pass batched draw)
  drawLoopBits(ctx, pts, lp, N, def, dotR);
}


// ── Inject channel canvas
function renderInjectChannel(){
  const wrap=EL.injWrap;
  const canvas=EL.canvasInj;
  if(!canvas||!wrap)return;
  const W=Math.max(wrap.clientWidth-24,60),H=64;
  if(canvas.width!==W)canvas.width=W;
  if(canvas.height!==H)canvas.height=H;
  const ctx=canvas.getContext('2d');
  ctx.clearRect(0,0,W,H);

  const N=INJ_N;
  const slotStep=W/N;
  const dotR=Math.min(Math.max(slotStep*0.34,3),8);
  const cy=H/2;

  // Track band
  drawRoundedRect(ctx,2,cy-dotR-6,W-4,(dotR+6)*2,6);
  ctx.fillStyle=SK.injTrackOuter;ctx.fill();
  drawRoundedRect(ctx,dotR+4,cy-dotR-1,W-(dotR+4)*2,(dotR+1)*2,4);
  ctx.fillStyle=SK.injTrackInner;ctx.fill();

  // Direction arrow
  ctx.fillStyle=inj.active?SK.injActive+'ff':SK.injInactive;
  ctx.font='bold 9px monospace';ctx.textAlign='center';ctx.textBaseline='top';
  ctx.fillText('→ Working Loop R/W',W/2,cy+dotR+5);

  // Slots — batched (inject channel)
  if(!SK._dotOffRgb)buildSkinColorCache();
  const _iTPI=Math.PI*2,_id72=dotR*0.72,_id38=dotR*0.38,_id78=dotR*0.78;
  const _ifl=inj.flash>0.01;
  ctx.beginPath();ctx.fillStyle=SK._dotOffRgb;for(let i=0;i<N;i++){if(inj.buffer[i]===0){const bx=slotStep*(i+0.5);ctx.moveTo(bx+_id72,cy);ctx.arc(bx,cy,_id72,0,_iTPI);}}ctx.fill();
  ctx.beginPath();ctx.fillStyle=SK._dotOffRgba;for(let i=0;i<N;i++){if(inj.buffer[i]===0){const bx=slotStep*(i+0.5);ctx.moveTo(bx+_id38,cy);ctx.arc(bx,cy,_id38,0,_iTPI);}}ctx.fill();
  for(let i=0;i<N;i++){if(inj.buffer[i]===0)continue;const bx=slotStep*(i+0.5);if(_ifl){const g=ctx.createRadialGradient(bx,cy,0,bx,cy,dotR*3);g.addColorStop(0,SK.injActive);g.addColorStop(1,'rgba(0,0,0,0)');ctx.beginPath();ctx.arc(bx,cy,dotR*5,0,_iTPI);ctx.fillStyle=g;ctx.fill();}ctx.beginPath();ctx.arc(bx,cy,_id78,0,_iTPI);ctx.fillStyle=SK.injActive;ctx.fill();}

  // Input label (left) / Output label (right)
  ctx.fillStyle=SK.labelText;ctx.font='bold 8px monospace';
  ctx.textAlign='left';ctx.textBaseline='bottom';ctx.fillText('IN',4,cy-dotR-4);
  ctx.textAlign='right';ctx.fillText('OUT→',W-4,cy-dotR-4);
}

// ── Bus canvas


// ── Unified unidirectional bus render (A-D) ──────────────────────────────────
// ── Bus canvas label helpers ──────────────────────────────────────────────────
// Arrow spec: shaft AL=6px, head AH=2.5px, gap-track GAP_TK=3px,
// gap-text GAP_TX=3px, line-width LW=1.2px.
// Total horizontal space per label = GAP_TK + AL + GAP_TX + textWidth = 12 + textWidth.

// Draw [ABBREV]→ to the LEFT of the track face.
// xFace = track left edge (xLeft). Arrow points right, tip 3px from track.
// invalid=true replaces the arrow with a dim red ✗.
function drawBusLabelLeft(ctx, abbrev, color, xFace, busY, active, invalid) {
  const alpha = active ? 'ff' : '55';
  ctx.font = 'bold 9px monospace';
  ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
  ctx.fillStyle = color + alpha;
  ctx.fillText(abbrev, xFace - 12, busY);
  if (invalid) {
    ctx.fillStyle = '#ee4444' + (active ? 'cc' : '55');
    ctx.textAlign = 'center';
    ctx.fillText('\u2717', xFace - 6, busY);
  } else {
    ctx.strokeStyle = color + (active ? '88' : '30');
    ctx.lineWidth = 1.2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
    ctx.beginPath(); ctx.moveTo(xFace - 9, busY); ctx.lineTo(xFace - 3, busY); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(xFace - 5.5, busY - 2.5); ctx.lineTo(xFace - 3, busY); ctx.lineTo(xFace - 5.5, busY + 2.5); ctx.stroke();
  }
}

// Draw →[ABBREV] to the RIGHT of the track face.
// xFace = track right edge (xRight). Arrow points right, tail 3px from track.
function drawBusLabelRight(ctx, abbrev, color, xFace, busY, active, invalid) {
  const alpha = active ? 'ff' : '55';
  ctx.font = 'bold 9px monospace';
  ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
  ctx.fillStyle = color + alpha;
  ctx.fillText(abbrev, xFace + 12, busY);
  if (invalid) {
    ctx.fillStyle = '#ee4444' + (active ? 'cc' : '55');
    ctx.textAlign = 'center';
    ctx.fillText('\u2717', xFace + 6, busY);
  } else {
    ctx.strokeStyle = color + (active ? '88' : '30');
    ctx.lineWidth = 1.2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
    ctx.beginPath(); ctx.moveTo(xFace + 3, busY); ctx.lineTo(xFace + 9, busY); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(xFace + 6.5, busY - 2.5); ctx.lineTo(xFace + 9, busY); ctx.lineTo(xFace + 6.5, busY + 2.5); ctx.stroke();
  }
}

// Render a unidirectional bus (A–D) on its canvas element
function renderUnidirectionalBus(busId) {
  const cfg = BUS_CONFIGS[busId];
  const bus = L21.buses[busId];
  const row = EL.busRow[busId];
  if(!row) return;
  const canvas = EL.busCanvas[busId];
  const W = row.clientWidth, H = row.clientHeight;
  if(canvas.width !== W || canvas.height !== H) { canvas.width = W; canvas.height = H; }
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, W, H);
  if(W < 60 || H < 10) return;

  const busY = H/2;
  const dir = getBusFlowDirection(busId), isValid = dir !== 'invalid';
  const LABEL_W = 48, PAD = 4, MARGIN = W * 0.05;
  const xLeft = MARGIN + LABEL_W + PAD, xRight = W - MARGIN - LABEL_W - PAD, busW = xRight - xLeft;
  const N = BUS_N, slotStep = busW / N, dotR = Math.min(Math.max(slotStep * 0.28, 2), 4);

  // Skin colors via naming convention: SK.bus{X}TrackOuter etc.
  const X = busId.toUpperCase();
  const trackOuter  = SK['bus' + X + 'TrackOuter'];
  const trackBorder = SK['bus' + X + 'TrackBorder'];
  const trackInner  = SK['bus' + X + 'TrackInner'];
  const dotColor    = SK['bus' + X + 'Dot'];
  const dotRgb      = SK['bus' + X + 'DotRgb'];

  // Track
  const band = dotR + 4;
  drawRoundedRect(ctx, xLeft - 4, busY - band, busW + 8, band * 2, 5);
  ctx.fillStyle = trackOuter; ctx.fill();
  ctx.strokeStyle = trackBorder; ctx.lineWidth = 1; ctx.stroke();
  const inn = dotR + 2;
  if(busW - inn * 2 > 10) { drawRoundedRect(ctx, xLeft + inn, busY - dotR - 1, busW - inn * 2, (dotR + 1) * 2, 4); ctx.fillStyle = trackInner; ctx.fill(); }

  // Dots
  for(let i = 0; i < N; i++) {
    const bx = xLeft + (i + 0.5) * slotStep;
    drawBitDot(ctx, bx, busY, dotR, bus.bits[i], i % BPW === 0, dotColor, dotRgb, bus.flash);
  }

  // End labels — arrow notation: [DST]← = ←[SRC]
  // Always rendered so operator sees config even when invalid (src === dst).
  {
    const active = bus.active;
    const dstEp = resolveBusEndpoint(bus.dst);
    const srcEp = resolveBusEndpoint(bus.src);
    const invalid = (bus.src === bus.dst);
    // Separator = at canvas center
    ctx.font = 'bold 9px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillStyle = SK.labelText.slice(0, 7) + (active ? 'cc' : '44');
    ctx.fillText('=', W / 2, busY);
    drawBusLabelLeft(ctx, dstEp.abbrev, dstEp.color, xLeft, busY, active, invalid);
    drawBusLabelRight(ctx, srcEp.abbrev, srcEp.color, xRight, busY, active, invalid);
  }

  // Bus label
  ctx.fillStyle = SK.labelText; ctx.font = 'bold 7px monospace';
  ctx.textAlign = 'left'; ctx.textBaseline = 'top';
  ctx.fillText('BUS ' + X, 4, 2);
}

// ── Dual-channel bus endpoint label rendering ─────────────────────────────────
// Draws source/destination arrow labels at either end of a dual-channel bus.
// H/I: network label on left, loop src/dst on right.
// E/F/G: loop src/dst on left, external/P2P label on right.
function renderDualChannelBusLabels(ctx, busId, bus, xLeft, xRight, busY, PAD) {
  const active = bus.active;
  const alpha55 = active ? 'ff' : '55';
  const sepColor = SK.labelText.slice(0, 7) + (active ? 'cc' : '44');

  if(busId === 'h' || busId === 'i') {
    // ── H/I left side: network endpoint label only, no arrow
    const netLabel = busId === 'h' ? 'NT0' : 'NT1';
    const netColor = busId === 'h' ? '#c87800' : '#60c020';
    ctx.font = 'bold 9px monospace'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
    ctx.fillStyle = netColor + alpha55;
    ctx.fillText(netLabel, xLeft - PAD - 2, busY);

    // ── H/I right side: = [DST]← = ←[SRC]
    const dstEp = resolveBusEndpoint(bus.dst);
    const srcEp = resolveBusEndpoint(bus.src);
    ctx.font = 'bold 9px monospace';
    const dstTW = ctx.measureText(dstEp.abbrev).width;
    const eqW   = ctx.measureText('=').width;
    let rx = xRight + PAD + 2;
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillStyle = sepColor;
    ctx.fillText('=', rx, busY);
    rx += eqW + 5;
    ctx.fillStyle = dstEp.color + alpha55;
    ctx.textAlign = 'left';
    ctx.fillText(dstEp.abbrev, rx, busY);
    rx += dstTW + 3;
    const dstArrowTail = rx + 6, dstArrowTip = rx;
    ctx.strokeStyle = dstEp.color + (active ? '88' : '30');
    ctx.lineWidth = 1.2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
    ctx.beginPath(); ctx.moveTo(dstArrowTail, busY); ctx.lineTo(dstArrowTip, busY); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(dstArrowTip + 2.5, busY - 2.5); ctx.lineTo(dstArrowTip, busY); ctx.lineTo(dstArrowTip + 2.5, busY + 2.5); ctx.stroke();
    rx = dstArrowTail + 5;
    ctx.fillStyle = sepColor; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillText('=', rx, busY);
    rx += eqW + 5;
    const srcArrowTail = rx + 6, srcArrowTip = rx;
    ctx.strokeStyle = srcEp.color + (active ? '88' : '30');
    ctx.beginPath(); ctx.moveTo(srcArrowTail, busY); ctx.lineTo(srcArrowTip, busY); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(srcArrowTip + 2.5, busY - 2.5); ctx.lineTo(srcArrowTip, busY); ctx.lineTo(srcArrowTip + 2.5, busY + 2.5); ctx.stroke();
    rx = srcArrowTail + 3;
    ctx.fillStyle = srcEp.color + alpha55;
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillText(srcEp.abbrev, rx, busY);

  } else {
    // ── E/F/G left side: loop endpoint(s)
    const dstEp = resolveBusEndpoint(bus.dst);
    const srcEp = resolveBusEndpoint(bus.src);
    if(bus.src === bus.dst) {
      drawBusLabelLeft(ctx, dstEp.abbrev, dstEp.color, xLeft, busY, active, false);
    } else {
      drawBusLabelLeft(ctx, dstEp.abbrev, dstEp.color, xLeft, busY, active, false);
      ctx.font = 'bold 9px monospace';
      const dstTW2 = ctx.measureText(dstEp.abbrev).width;
      const sepX = xLeft - 12 - dstTW2 - 6;
      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillStyle = sepColor;
      ctx.fillText('=', sepX, busY);
      const srcArrowTip2 = sepX - 5, srcArrowTail2 = srcArrowTip2 - 6;
      ctx.strokeStyle = srcEp.color + (active ? '88' : '30');
      ctx.lineWidth = 1.2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
      ctx.beginPath(); ctx.moveTo(srcArrowTail2, busY); ctx.lineTo(srcArrowTip2, busY); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(srcArrowTip2 - 2.5, busY - 2.5); ctx.lineTo(srcArrowTip2, busY); ctx.lineTo(srcArrowTip2 - 2.5, busY + 2.5); ctx.stroke();
      ctx.font = 'bold 9px monospace'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
      ctx.fillStyle = srcEp.color + alpha55;
      ctx.fillText(srcEp.abbrev, srcArrowTail2 - 3, busY);
    }

    // ── E/F/G right side: external/P2P abbreviation
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.font = 'bold 9px monospace';
    if(busId === 'e') {
      const extAbbrev = bus.extDst === 'challenge' ? 'CH' : 'NT';
      const extColor  = bus.extDst === 'challenge' ? '#b03070' : '#4a68b8';
      ctx.fillStyle = extColor + alpha55;
      ctx.fillText('\u2194 ' + extAbbrev, xRight + PAD + 2, busY);
    } else {
      const side = busId === 'f' ? 'l' : 'r';
      const peerLabel = busId === 'f' ? 'PL' : 'PR';
      const peerColor = busId === 'f' ? '#1868c0' : '#8020c0';
      const connected = p2pIsConnected(side);
      ctx.fillStyle = (connected ? peerColor : '#808080') + alpha55;
      ctx.fillText('\u2194 ' + peerLabel + (connected ? '' : '?'), xRight + PAD + 2, busY);
    }
  }
}

// ── Unified dual-channel bus render (E-I) ────────────────────────────────────
function renderDualChannelBus(busId) {
  const cfg = BUS_CONFIGS[busId];
  const bus = L21.buses[busId];
  const row = EL.busRow[busId];
  if(!row) return;
  const canvas = EL.busCanvas[busId];
  if(!canvas) return;
  const W = row.clientWidth, H = row.clientHeight;
  if(canvas.width !== W || canvas.height !== H) { canvas.width = W; canvas.height = H; }
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, W, H);
  if(W < 60 || H < 10) return;

  const busY = H/2;
  // Geometry varies by bus type: E-G need wider left zone; H-I need wider right zone
  const PAD = 4;
  let LEFT_W, RIGHT_W, MARGIN;
  if(busId === 'e' || busId === 'f' || busId === 'g') {
    LEFT_W = 60; RIGHT_W = 44; MARGIN = W * 0.03;
  } else { // h, i
    LEFT_W = 36; RIGHT_W = 72; MARGIN = W * 0.02;
  }
  const xLeft = MARGIN + LEFT_W + PAD, xRight = W - MARGIN - RIGHT_W - PAD, busW = xRight - xLeft;
  const N = BUS_N, slotStep = busW / N, dotR = Math.min(Math.max(slotStep * 0.28, 2), 4);

  // Colors: from SK properties or from cfg.renderColors for H/I
  const X = busId.toUpperCase();
  const rc = cfg.renderColors;
  const trackOuter  = rc ? rc.trackOuter  : SK['bus' + X + 'TrackOuter'];
  const trackBorder = rc ? rc.trackBorder : SK['bus' + X + 'TrackBorder'];
  const trackInner  = rc ? rc.trackInner  : SK['bus' + X + 'TrackInner'];
  const outDot      = rc ? rc.outDot      : SK['bus' + X + 'OutDot'];
  const inDot       = rc ? rc.inDot       : SK['bus' + X + 'InDot'];

  // Track
  const band = dotR + 4;
  drawRoundedRect(ctx, xLeft - 4, busY - band, busW + 8, band * 2, 5);
  ctx.fillStyle = trackOuter; ctx.fill();
  ctx.strokeStyle = trackBorder; ctx.lineWidth = 1.5; ctx.stroke();
  const inn = dotR + 2;
  if(busW - inn * 2 > 10) { drawRoundedRect(ctx, xLeft + inn, busY - dotR - 1, busW - inn * 2, (dotR + 1) * 2, 4); ctx.fillStyle = trackInner; ctx.fill(); }

  if(!SK._dotOffRgb) buildSkinColorCache();
  const TWO_PI = Math.PI * 2, dr72 = dotR * 0.72, dr38 = dotR * 0.38, dr78 = dotR * 0.78;
  const hasOutFlash = bus.outFlash > 0.01, hasInFlash = bus.inFlash > 0.01;

  // Off dots (batched)
  ctx.beginPath(); ctx.fillStyle = SK._dotOffRgb;
  for(let i = 0; i < N; i++) {
    if(bus.outBits[i] === 0 && bus.inBits[i] === 0 && i % BPW !== 0) {
      const bx = xLeft + (i + 0.5) * slotStep; ctx.moveTo(bx + dr72, busY); ctx.arc(bx, busY, dr72, 0, TWO_PI);
    }
  }
  ctx.fill();
  ctx.beginPath(); ctx.fillStyle = SK._dotOffRgba;
  for(let i = 0; i < N; i++) {
    if(bus.outBits[i] === 0 && bus.inBits[i] === 0 && i % BPW !== 0) {
      const bx = xLeft + (i + 0.5) * slotStep; ctx.moveTo(bx + dr38, busY); ctx.arc(bx, busY, dr38, 0, TWO_PI);
    }
  }
  ctx.fill();

  // Outbound dots
  for(let i = 0; i < N; i++) {
    if(!bus.outBits[i]) continue;
    const bx = xLeft + (i + 0.5) * slotStep, isMk = i % BPW === 0;
    if(hasOutFlash) { const g = ctx.createRadialGradient(bx, busY, 0, bx, busY, dotR * 3); g.addColorStop(0, outDot); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.beginPath(); ctx.arc(bx, busY, dotR * 5, 0, TWO_PI); ctx.fillStyle = g; ctx.fill(); }
    if(isMk) { const s = dotR * 0.92; ctx.fillStyle = outDot; ctx.fillRect(bx - s/2, busY - s/2, s, s); }
    else { ctx.beginPath(); ctx.arc(bx, busY, dr78, 0, TWO_PI); ctx.fillStyle = outDot; ctx.fill(); }
  }
  // Inbound dots (screen blend)
  ctx.globalCompositeOperation = 'screen';
  for(let i = 0; i < N; i++) {
    if(!bus.inBits[i]) continue;
    const bx = xLeft + (i + 0.5) * slotStep, isMk = i % BPW === 0;
    if(hasInFlash) { const g = ctx.createRadialGradient(bx, busY, 0, bx, busY, dotR * 3); g.addColorStop(0, inDot); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.beginPath(); ctx.arc(bx, busY, dotR * 5, 0, TWO_PI); ctx.fillStyle = g; ctx.fill(); }
    if(isMk) { const s = dotR * 0.92; ctx.fillStyle = inDot; ctx.fillRect(bx - s/2, busY - s/2, s, s); }
    else { ctx.beginPath(); ctx.arc(bx, busY, dr78, 0, TWO_PI); ctx.fillStyle = inDot; ctx.fill(); }
  }
  ctx.globalCompositeOperation = 'source-over';

  // End labels
  renderDualChannelBusLabels(ctx, busId, bus, xLeft, xRight, busY, PAD);

  // Bus label
  ctx.fillStyle = outDot; ctx.font = 'bold 7px monospace';
  ctx.textAlign = 'left'; ctx.textBaseline = 'top';
  ctx.fillText('BUS ' + X, 4, 2);
}


// Delegate: render Bus E (dual-channel)
function renderBusE(){ renderDualChannelBus("e"); }

// Delegate: render Bus F (P2P Left, dual-channel)
function renderBusF(){ renderDualChannelBus("f"); }

// Delegate: render Bus G (P2P Right, dual-channel)
function renderBusG(){ renderDualChannelBus("g"); }


// Delegate: render Bus H (Net0, dual-channel)
function renderBusH(){ renderDualChannelBus("h"); }

// Delegate: render Bus I (Net1, dual-channel)
function renderBusI(){ renderDualChannelBus("i"); }

// Delegate: render Bus B (unidirectional)
function renderBusB(){ renderUnidirectionalBus("b"); }

// Delegate: render Bus C (unidirectional)
function renderBusC(){ renderUnidirectionalBus("c"); }


// Delegate: render Bus D (unidirectional)
function renderBusD(){ renderUnidirectionalBus("d"); }
// Delegate: render Bus A (unidirectional)
function renderBusA(){ renderUnidirectionalBus("a"); }

// ── Word detail strips
const loopHeadBitElements={};
const loopHeadWordLastDisplayed = {};  // per-loop word hash for dirty skip
// Update the R/G/W head bit display strip for a loop
function updateLoopHeadDetailDisplay(def){
  const id=def.id,lp=loops[id];
  // Skip if word hasn't changed
  const w=lp.lastWord;
  const wHash = w ? (w.marker*2097152 + w.data) : -1;
  if(loopHeadWordLastDisplayed[id]===wHash) return;
  loopHeadWordLastDisplayed[id]=wHash;
  const bitsEl=EL['bits'+id.charAt(0).toUpperCase()+id.slice(1)]||document.getElementById('bits-'+id);
  if(!loopHeadBitElements[id]){
    loopHeadBitElements[id]={};
    // Marker bit element (stored under key 'mk')
    const mk=document.createElement('div');mk.className='bit mk';mk.title='Marker';
    bitsEl.appendChild(mk);loopHeadBitElements[id]['mk']=mk;
    bitsEl.appendChild(Object.assign(document.createElement('div'),{className:'bit-gap'}));
    for(let b=15;b>=0;b--){
      // Gap between bit 12 and bit 11 (top 4 addr bits vs bottom 12 data bits)
      if(b===11)bitsEl.appendChild(Object.assign(document.createElement('div'),{className:'bit-gap'}));
      const el=document.createElement('div');el.className='bit';el.title=`Bit ${b}`;
      bitsEl.appendChild(el);loopHeadBitElements[id][b]=el;
    }
  }
  const vEl=EL['vals'+id.charAt(0).toUpperCase()+id.slice(1)]||document.getElementById('vals-'+id);
  if(!w){
    const mkEl=loopHeadBitElements[id]['mk'];if(mkEl)mkEl.style.background=mkEl.style.boxShadow=mkEl.style.borderColor='';
    for(let b=15;b>=0;b--){const el=loopHeadBitElements[id][b];if(el)el.style.background=el.style.boxShadow=el.style.borderColor='';}
    vEl.innerHTML=`<span class="wait">—</span>`;return;
  }
  // Update marker dot
  const mkEl=loopHeadBitElements[id]['mk'];
  if(mkEl){if(w.marker){mkEl.style.background=def.color;mkEl.style.boxShadow=`0 0 4px ${def.color}`;mkEl.style.borderColor=def.color;}
  else{mkEl.style.background=mkEl.style.boxShadow=mkEl.style.borderColor='';}}
  // Update 16 data bit dots
  for(let b=15;b>=0;b--){
    const el=loopHeadBitElements[id][b];if(!el)continue;
    const val=(w.data>>b)&1;
    if(val){el.style.background=def.color;el.style.boxShadow=`0 0 4px ${def.color}`;el.style.borderColor=def.color;}
    else{el.style.background=el.style.boxShadow=el.style.borderColor='';}
  }
  if(!w.marker)vEl.innerHTML=`<span class="empty">EMPTY</span>`;
  else{const d=w.data;vEl.innerHTML=`DEC <span class="v">${d}</span> HEX <span class="v">0x${d.toString(16).toUpperCase().padStart(4,'0')}</span> BIN <span class="v">${d.toString(2).padStart(16,'0')}</span>`;}
}

// ── Resize
const ro=new ResizeObserver(()=>{for(const k of Object.keys(loopGeometryCache))delete loopGeometryCache[k];renderAllComponents();});
// Force geometry recalc on load — ensures eject index changes take effect
for(const k of Object.keys(loopGeometryCache)) delete loopGeometryCache[k];
DEFS.forEach(def=>ro.observe(document.getElementById('wrap-'+def.id)));
ro.observe(document.getElementById('bus-row'));
ro.observe(document.querySelector('.inject-channel-wrap'));
if(document.getElementById('busb-row')) ro.observe(document.getElementById('busb-row'));
if(document.getElementById('buse-row')) ro.observe(document.getElementById('buse-row'));


let _v0 = false;

// Internal helper
function _p0() {
  // Pick a random position along the controls bar width (5%–95%)
  return Math.round(5 + Math.random() * 90) + '%';
}

// Internal helper
function _m0(pos) {
  const el = document.getElementById('_ee0');
  if(!el) return;
  el.style.left = pos;
}

// Internal helper
function _c0() {
  // Disappear briefly, reappear somewhere else
  const el = document.getElementById('_ee0');
  if(!el) return;
  el.classList.remove('visible');
  el.classList.add('hiding');
  setTimeout(() => {
    el.style.left = _p0();
    el.classList.remove('hiding');
    void el.offsetWidth;
    el.classList.add('visible');
  }, 350);
}

// Internal helper
function _k0() {
  const _s = !([alu.a,alu.b,alu.c,alu.d].some(r=>r!==42));
  if(_s === _v0) return;
  _v0 = _s;
  const el = document.getElementById('_ee0');
  if(!el) return;
  if(_s) {
    el.style.left = _p0();
    el.classList.remove('hiding');
    void el.offsetWidth;
    el.classList.add('visible');
  } else {
    el.classList.remove('visible');
    el.classList.add('hiding');
  }
}


// ══════════════════════════════════════════════════════════════
// DRAG-TO-SET: click and drag across toggles to set them all
// ══════════════════════════════════════════════════════════════
const _drag = {
  active:      false,
  handled:     false,  // true if drag applied at least one toggle this gesture
  targetState: 1,   // 1 = turning ON, 0 = turning OFF
  visited:     new Set(),
};

// Apply drag to a toggle element based on its type
function _dragApply(el) {
  if(_drag.visited.has(el)) return;
  _drag.visited.add(el);
  _drag.handled = true;

  // Operator input lever (sw-N)
  if(el.classList.contains('lever-wrap')) {
    const id = el.id; // 'sw-0' .. 'sw-15'
    const idx = parseInt(id.replace('sw-',''));
    if(isNaN(idx)) return;
    if(switchBits[idx] === _drag.targetState) return;
    switchBits[idx] = _drag.targetState;
    el.classList.toggle('on', _drag.targetState === 1);
    refreshInputSwitchDisplay();
    return;
  }

  // PM lever (pm-maskBits-N etc)
  if(el.classList.contains('pm-lever-wrap')) {
    // id format: pm-{reg}-{i} or pm2-{reg}-{i}
    const parts = el.id.split('-');
    // parts: ['pm','maskBits','0'] or ['pm2','maskBits','0']
    const prefix = parts[0]; // 'pm' or 'pm2'
    const reg    = parts.slice(1, parts.length-1).join('-'); // e.g. 'maskBits'
    const i      = parseInt(parts[parts.length-1]);
    if(isNaN(i) || !reg) return;
    const pmObj  = prefix === 'pm2' ? pm2 : pm;
    if(!pmObj[reg] || pmObj[reg][i] === _drag.targetState) return;
    pmObj[reg][i] = _drag.targetState;
    el.classList.toggle('on', _drag.targetState === 1);
    if(prefix === 'pm2') refreshPatternMatcher2Display(); else refreshPatternMatcherDisplay();
    // Log the change
    const val = prefix === 'pm2'
      ? (reg==='maskBits'?pm2GetMask():reg==='matchBits'?pm2GetMatch():reg==='changeMaskBits'?pm2GetChangeMask():pm2GetChangeVal())
      : (reg==='maskBits'?pmGetMask():reg==='matchBits'?pmGetMatch():reg==='changeMaskBits'?pmGetChangeMask():pmGetChangeVal());
    const label = reg==='maskBits'?'MASK':reg==='matchBits'?'MATCH':reg==='changeMaskBits'?'CHANGE_MASK':'CHANGE_VAL';
    logSetup(`OP.${prefix.toUpperCase()}_${label} ${val}`, `Operator sets ${prefix} ${label.toLowerCase()} to ${val}`);
    return;
  }

  // Memory address lever (maddr-N)
  if(el.classList.contains('mem-addr-wrap')) {
    const id  = el.id; // 'maddr-0' .. 'maddr-3'
    const bit = parseInt(id.replace('maddr-',''));
    if(isNaN(bit)) return;
    const idx = 3 - bit;
    if(mem.addrBits[idx] === _drag.targetState) return;
    mem.addrBits[idx] = _drag.targetState;
    el.classList.toggle('on', _drag.targetState === 1);
    const newAddr = getCurrentMemoryAddress();
    const dispEl = document.getElementById('mem-addr-display');
    if(dispEl) dispEl.textContent = newAddr;
    flagMemoryDisplayAsStale(); refreshMemoryDisplay();
    logSetup(`OP.MEM_ADDR ${newAddr}`, `Operator sets memory address to ${newAddr}`);
    return;
  }
}

// Start drag on mousedown on any toggle
document.addEventListener('mousedown', function(e) {
  const tgt = e.target.closest('.lever-wrap, .pm-lever-wrap, .mem-addr-wrap');
  if(!tgt) return;
  // Determine target state: opposite of current state
  let currentState = 0;
  if(tgt.classList.contains('lever-wrap')) {
    const idx = parseInt(tgt.id.replace('sw-',''));
    if(!isNaN(idx)) currentState = switchBits[idx];
  } else if(tgt.classList.contains('pm-lever-wrap')) {
    const parts = tgt.id.split('-');
    const prefix = parts[0];
    const reg    = parts.slice(1, parts.length-1).join('-');
    const i      = parseInt(parts[parts.length-1]);
    if(!isNaN(i) && reg) {
      const pmObj = prefix === 'pm2' ? pm2 : pm;
      currentState = pmObj[reg] ? pmObj[reg][i] : 0;
    }
  } else if(tgt.classList.contains('mem-addr-wrap')) {
    const bit = parseInt(tgt.id.replace('maddr-',''));
    if(!isNaN(bit)) currentState = mem.addrBits[3 - bit];
  }
  _drag.active      = true;
  _drag.targetState = currentState === 1 ? 0 : 1;
  _drag.visited     = new Set();
  _dragApply(tgt);
  e.preventDefault(); // prevent text selection during drag
}, { passive: false });

document.addEventListener('mouseover', function(e) {
  if(!_drag.active) return;
  const tgt = e.target.closest('.lever-wrap, .pm-lever-wrap, .mem-addr-wrap');
  if(tgt) _dragApply(tgt);
});

document.addEventListener('mouseup', function() {
  _drag.active = false;
  _drag.visited.clear();
  // Clear handled flag after click event has fired
  setTimeout(() => { _drag.handled = false; }, 0);
});

// Also cancel drag if mouse leaves the window
document.addEventListener('mouseleave', function() {
  _drag.active = false;
  _drag.visited.clear();
});

// ── Init
generateBusSidebarPanels();
cacheFrequentlyAccessedDOMElements();
initializeLookupTables();
// challenge init — no-op for add2-only module
buildInputSwitchLevers();
refreshInputSwitchDisplay();
aluUpdateDisplay();
setRoute(null);
challInitRegistry();
filesRefreshList();
buildMemorySlotElements();
refreshMemoryDisplay();
buildPatternMatcherLeverRow('maskBits',       'pm-mask-row',       '#00b8e0');
buildPatternMatcherLeverRow('matchBits',      'pm-match-row',      '#f0a000');
buildPatternMatcherLeverRow('changeMaskBits', 'pm-changemask-row', '#e08030');
buildPatternMatcherLeverRow('changeValBits',  'pm-changeval-row',  '#e08030');
refreshPatternMatcherDisplay();
buildPatternMatcherLeverRow('maskBits',       'pm2-mask-row',       '#00b8e0', flipPMBit2, 'pm2');
buildPatternMatcherLeverRow('matchBits',      'pm2-match-row',      '#f0a000', flipPMBit2, 'pm2');
buildPatternMatcherLeverRow('changeMaskBits', 'pm2-changemask-row', '#e08030', flipPMBit2, 'pm2');
buildPatternMatcherLeverRow('changeValBits',  'pm2-changeval-row',  '#e08030', flipPMBit2, 'pm2');
refreshPatternMatcher2Display();
refreshThresholdGate1Display();
refreshThresholdGate2Display();
for(const id of ['working','alu','memory','big','global']) refreshCounterDisplay(id);
buildCounterTriggersPanel();
buildNotifPanel();
p2pInitMachineIdDisplay();
p2pHardReset();   // always clear P2P state on load — refresh = clean slate
cbxRefreshAvailabilityDisplay();
chainInit();
// Build comparator result bit display (12 divs: marker + 11 data)
(function buildCmpBits() {
  const el = document.getElementById('cmp-result-bits');
  if(!el) return;
  for(let i=0;i<12;i++) {
    const d = document.createElement('div');
    d.className = 'alu-bit' + (i===0?' mk':'');
    d.style.width  = '8px';
    d.style.height = '8px';
    d.style.borderRadius = i===0 ? '1px' : '50%';
    el.appendChild(d);
  }
})();
cmpCompute();
log('Loop 2.1 ready — set switches and SEND','info');
updateLoggerStatusDisplay();
scriptsInitSkins();
scriptsInitCbx();
scriptsReVerifyAll();
applyInitialSkin();
renderAllComponents();

// ── Sidebar section collapse ──────────────────────────────────────

function expandAllSidebarSections() {
  document.querySelectorAll('.sb-section.sb-collapsed').forEach(s => s.classList.remove('sb-collapsed'));
  document.getElementById('sb-bus-group')?.classList.remove('sb-bus-collapsed');
  document.getElementById('sb-filter-group')?.classList.remove('sb-filter-collapsed');
  document.getElementById('sb-chain-net-group')?.classList.remove('sb-chain-net-collapsed');
  document.getElementById('sb-scripts-group')?.classList.remove('sb-scripts-collapsed');
  if (typeof window._annoSetLibraryCollapsed === 'function') {
    window._annoSetLibraryCollapsed(false);
  }
}
// Collapse all collapsible sidebar sections
function collapseAllSidebarSections() {
  document.querySelectorAll('.sb-section:not(.sb-sec-log)').forEach(s => s.classList.add('sb-collapsed'));
  document.getElementById('sb-bus-group')?.classList.add('sb-bus-collapsed');
  document.getElementById('sb-filter-group')?.classList.add('sb-filter-collapsed');
  document.getElementById('sb-chain-net-group')?.classList.add('sb-chain-net-collapsed');
  document.getElementById('sb-scripts-group')?.classList.add('sb-scripts-collapsed');
  if (typeof window._annoSetLibraryCollapsed === 'function') {
    window._annoSetLibraryCollapsed(true);
  }
}

// Toggle a sidebar section between expanded and collapsed
function toggleSidebarSection(btn) {
  const section = btn.closest('.sb-section');
  if (!section) return;
  section.classList.toggle('sb-collapsed');
}

// Toggle the bus group wrapper between expanded and collapsed
function toggleBusGroup(btn) {
  const group = document.getElementById('sb-bus-group');
  if (!group) return;
  group.classList.toggle('sb-bus-collapsed');
}

// Toggle the filter group (PM/TG) wrapper between expanded and collapsed
function toggleFilterGroup(btn) {
  const group = document.getElementById('sb-filter-group');
  if (!group) return;
  group.classList.toggle('sb-filter-collapsed');
}

// Toggle the chain/networking group between expanded and collapsed
function toggleChainNetGroup(btn) {
  const group = document.getElementById('sb-chain-net-group');
  if (!group) return;
  group.classList.toggle('sb-chain-net-collapsed');
}

// Toggle the scripts group between expanded and collapsed
function toggleScriptsGroup(btn) {
  const group = document.getElementById('sb-scripts-group');
  if (!group) return;
  group.classList.toggle('sb-scripts-collapsed');
}

// ================================================================
//  ANNOTATION SYSTEM
// ================================================================

(function() {
  const PALETTE_KEY = 'anno_palette';
  const LIBRARY_KEY = 'anno_library_collapsed';

  let annoIsRecording       = false;
  let annoLibraryCollapsed  = false;
  let annoDragPayload       = null;
  let annoPalette           = [];
  let annoAnnotations       = [];
  const annoFileApiSupported   = (typeof window.showSaveFilePicker === 'function');
  let annoFileHandle           = null;
  let annoSessionHeaderWritten = false;

  // Initialize the annotation system — set up File System Access API handles
  function annoInit() {
    annoUpdateRecordingIndicator(false);
    const savedPalette = localStorage.getItem(PALETTE_KEY);
    if (savedPalette) {
      try { annoPalette = JSON.parse(savedPalette); } catch (e) { annoPalette = []; }
    }
    annoRenderPalette();
    annoRenderRecent();
  }

  // Update the recording indicator LED for annotation state
  function annoUpdateRecordingIndicator(recording) {
    const dot  = document.getElementById('anno-status-dot');
    const text = document.getElementById('anno-status-text');
    if (!dot || !text) return;
    if (recording) {
      dot.style.background = '#00aa00';
      text.textContent     = 'REC';
    } else {
      dot.style.background = '#557090';
      text.textContent     = 'OFF';
    }
  }

  window.annoHandleRecordToggle = async function() {
    const checkbox = document.getElementById('recording-checkbox');
    if (checkbox.checked) {
      if (annoFileApiSupported) {
        let newHandle = null;
        try {
          newHandle = await window.showSaveFilePicker({
            suggestedName: annoBuildSuggestedFilename(),
            types: [{ description: 'Loopscript Annotation File', accept: { 'text/plain': ['.loopscript', '.txt'] } }]
          });
        } catch (error) {
          if (error.name === 'AbortError') { checkbox.checked = false; return; }
          console.error('File picker error:', error);
          checkbox.checked = false;
          return;
        }
        annoFileHandle           = newHandle;
        annoSessionHeaderWritten = false;
        annoIsRecording          = true;
        await annoWriteSessionHeader();
        annoUpdateRecordingIndicator(true);
        annoUpdateFileStatus(annoFileHandle.name, 'open');
      } else {
        checkbox.checked = false;
        annoUpdateFileStatus('browser unsupported — use Chrome', 'error');
      }
    } else {
      annoFileHandle           = null;
      annoSessionHeaderWritten = false;
      annoIsRecording          = false;
      annoUpdateRecordingIndicator(false);
      annoUpdateFileStatus('no file open', '');
    }
  };

  window.annoInsert = function(symbol) {
    const textarea = document.getElementById('anno-textarea');
    if (!textarea) return;
    const start    = textarea.selectionStart;
    const end      = textarea.selectionEnd;
    textarea.value = textarea.value.substring(0, start) + symbol + textarea.value.substring(end);
    textarea.selectionStart = textarea.selectionEnd = start + symbol.length;
    textarea.focus();
  };

  window.annoSaveAnnotation = async function() {
    const textarea = document.getElementById('anno-textarea');
    if (!textarea) return;
    const text = textarea.value.trim();
    if (!text || !annoIsRecording) return;
    const tick = clock.tickCount || 0;
    annoAnnotations.unshift({ tick, text });
    if (annoAnnotations.length > 10) annoAnnotations.pop();
    annoRenderRecent();
    if (annoFileHandle) await annoAppendAnnotationToFile(tick, text);
    // Write to session log if active
    if (typeof logOp === 'function' && typeof logger !== 'undefined' && logger.active) {
      if (typeof L21 !== 'undefined') L21.operatorActionCount++;
      logOp('ANNO.NOTE ' + text, 'Annotation: ' + text);
    }
    textarea.value = '';
    textarea.focus();
  };

  window.annoClearTextarea = function() {
    const textarea = document.getElementById('anno-textarea');
    if (!textarea) return;
    textarea.value = '';
    textarea.focus();
  };

  async function annoWriteSessionHeader() {
    if (!annoFileHandle || annoSessionHeaderWritten) return;
    try {
      const writable = await annoFileHandle.createWritable();
      await writable.write(annoFormatSessionHeader());
      await writable.close();
      annoSessionHeaderWritten = true;
    } catch (error) {
      console.error('Anno header write error:', error);
      annoHandleWriteError();
    }
  }

  async function annoAppendAnnotationToFile(tick, text) {
    if (!annoFileHandle) return;
    try {
      const existingFile = await annoFileHandle.getFile();
      const writable     = await annoFileHandle.createWritable({ keepExistingData: true });
      await writable.seek(existingFile.size);
      await writable.write(annoFormatAnnotationLine(tick, text));
      await writable.close();
    } catch (error) {
      console.error('Anno append error:', error);
      if (error.name === 'NotAllowedError') annoHandleWriteError();
    }
  }

  // Handle a file write error during annotation recording
  function annoHandleWriteError() {
    annoFileHandle = null;
    annoSessionHeaderWritten = false;
    annoUpdateFileStatus('write error — open new file', 'error');
  }

  // Format the session header block for a new annotation file
  function annoFormatSessionHeader() {
    const now        = new Date();
    const dateString = now.toISOString().replace('T', ' ').substring(0, 19);
    return `# Loop 2.1 Annotation Log\n# Session: ${dateString}\n# ${'─'.repeat(40)}\n\n`;
  }

  // Format a single annotation entry line with tick count
  function annoFormatAnnotationLine(tick, text) {
    return `T:${String(tick).padStart(6, ' ')}  ${text}\n`;
  }

  // Build a suggested filename for a new annotation file
  function annoBuildSuggestedFilename() {
    const now  = new Date();
    const date = now.toISOString().substring(0, 10).replace(/-/g, '');
    return `annotations-${date}.loopscript`;
  }

  // Update the annotation file status display text and color
  function annoUpdateFileStatus(text, state) {
    const nameEl = document.getElementById('anno-file-status-name');
    if (!nameEl) return;
    nameEl.textContent = text;
    nameEl.className   = 'file-status-name' + (state ? ` ${state}` : '');
  }

  window.annoToggleLibrary = function() {
    annoLibraryCollapsed = !annoLibraryCollapsed;
    annoApplyLibraryState();
  };

  window._annoSetLibraryCollapsed = function(collapsed) {
    annoLibraryCollapsed = collapsed;
    annoApplyLibraryState();
  };

  // Apply the symbol library state (show/hide panels, update counts)
  function annoApplyLibraryState() {
    const libraryBody = document.getElementById('library-body');
    const collapsible = document.getElementById('library-collapsible');
    const header      = document.getElementById('library-header');
    if (!libraryBody) return;
    if (annoLibraryCollapsed) {
      libraryBody.classList.add('collapsed');
      collapsible?.classList.add('collapsed');
      header?.classList.add('library-collapsed');
    } else {
      libraryBody.classList.remove('collapsed');
      collapsible?.classList.remove('collapsed');
      header?.classList.remove('library-collapsed');
    }
  }

  window.annoStartDrag = function(event) {
    const button = event.currentTarget;
    annoDragPayload = { symbol: button.dataset.symbol, label: button.dataset.label };
    button.classList.add('dragging');
    event.dataTransfer.effectAllowed = 'copy';
    event.dataTransfer.setData('text/plain', JSON.stringify(annoDragPayload));
    button.addEventListener('dragend', () => button.classList.remove('dragging'), { once: true });
  };

  window.annoHandleDragOver = function(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
    document.getElementById('palette-zone')?.classList.add('drag-over');
  };

  window.annoHandleDragLeave = function(event) {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      document.getElementById('palette-zone')?.classList.remove('drag-over');
    }
  };

  window.annoHandleDrop = function(event) {
    event.preventDefault();
    document.getElementById('palette-zone')?.classList.remove('drag-over');
    let payload = null;
    try { payload = JSON.parse(event.dataTransfer.getData('text/plain')); } catch (e) { return; }
    if (!payload || !payload.symbol) return;
    if (annoPalette.some(item => item.symbol === payload.symbol)) return;
    annoPalette.push({ symbol: payload.symbol, label: payload.label });
    annoSavePalette();
    annoRenderPalette();
  };

  // Render the symbol palette grid in the annotation panel
  function annoRenderPalette() {
    const zone = document.getElementById('palette-zone');
    if (!zone) return;
    zone.innerHTML = '';
    if (annoPalette.length === 0) { zone.classList.add('empty'); return; }
    zone.classList.remove('empty');
    annoPalette.forEach((item, index) => {
      const button = document.createElement('button');
      button.className = 'palette-item';
      button.title = item.label;
      button.innerHTML = `${annoEscapeHtml(item.symbol)}<small>${annoEscapeHtml(item.label)}</small><span class="palette-remove" onclick="annoRemovePaletteItem(event,${index})">×</span>`;
      button.onclick = (event) => {
        if (event.target.classList.contains('palette-remove')) return;
        annoInsert(item.symbol);
      };
      zone.appendChild(button);
    });
  }

  window.annoRemovePaletteItem = function(event, index) {
    event.stopPropagation();
    annoPalette.splice(index, 1);
    annoSavePalette();
    annoRenderPalette();
  };

  window.annoClearPalette = function() {
    annoPalette = [];
    annoSavePalette();
    annoRenderPalette();
  };

  // Save the current symbol palette to localStorage
  function annoSavePalette() {
    localStorage.setItem(PALETTE_KEY, JSON.stringify(annoPalette));
  }

  // Render the recently-used symbols strip
  function annoRenderRecent() {
    const list = document.getElementById('anno-recent-list');
    if (!list) return;
    list.innerHTML = annoAnnotations.map(anno => `
      <li class="anno-recent-item">
        <span class="anno-recent-tick">${anno.tick}</span>
        <span class="anno-recent-text">${annoEscapeHtml(anno.text)}</span>
      </li>
    `).join('');
  }

  // Escape HTML special characters in annotation text
  function annoEscapeHtml(text) {
    return String(text)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  window.annoSwitchTab = function(tab, btn) {
    document.querySelectorAll('.anno-symbol-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById(tab + '-panel')?.classList.add('active');
    btn.classList.add('active');
  };

  // Ctrl+Enter / Cmd+Enter — only fires when anno textarea has focus
  document.addEventListener('keydown', event => {
    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
      if (document.activeElement === document.getElementById('anno-textarea')) {
        annoSaveAnnotation();
      }
    }
  });

  // Wire tick and op context display — update on a 100ms interval
  setInterval(() => {
    const tickEl = document.getElementById('anno-current-tick');
    const opEl   = document.getElementById('anno-current-op');
    if (tickEl && typeof clock !== 'undefined') {
      tickEl.textContent = clock.tickCount;
    }
    if (opEl) {
      const logEl = document.getElementById('log0');
      if (logEl) opEl.textContent = logEl.textContent || '—';
    }
  }, 100);

  // Init after DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', annoInit);
  } else {
    annoInit();
  }

})();

// ── Event delegation ─────────────────────────────────────────────
// Single top-level click listener replaces all inline onclick= handlers.
// Buttons use data-action with optional data-arg, data-arg2, data-source-id attributes.
const ELEMENT_RECEIVER_ACTIONS = new Set(['toggleSidebarSection', 'toggleBusGroup', 'toggleFilterGroup', 'toggleChainNetGroup', 'toggleScriptsGroup', 'selfSelect']);

// Parse a raw action argument string into a typed value
function parseActionArg(raw) {
  if (raw === undefined || raw === null) return undefined;
  if (raw === 'null') return null;
  if (/^\d+$/.test(raw)) return Number(raw);
  return raw;
}

document.addEventListener('click', function(e) {
  const el = e.target.closest('[data-action]');
  if (!el) return;
  const action = el.dataset.action;
  const fn = window[action];
  if (typeof fn !== 'function') return;

  if (ELEMENT_RECEIVER_ACTIONS.has(action)) {
    fn(el);
    return;
  }

  // Special case: notifPreviewSound with data-source-id
  if (el.dataset.sourceId) {
    const srcEl = document.getElementById(el.dataset.sourceId);
    fn(srcEl ? srcEl.value : '');
    return;
  }

  const arg1 = parseActionArg(el.dataset.arg);
  const arg2 = parseActionArg(el.dataset.arg2);
  if (arg2 !== undefined) fn(arg1, arg2);
  else if (arg1 !== undefined) fn(arg1);
  else fn();
});


// ══════════════════════════════════════════════════════════════════════════════
// KEYBINDING SYSTEM
// ══════════════════════════════════════════════════════════════════════════════
//
// Three layers:
//   Flat layer   — single-key commands always active
//   Shift layer  — Shift + key variants
//   Chord layer  — bus key (1–4) + source key + dest key configures a bus
//
// Net bus toggle keys (5–9): double-tap only, no chord entry.
// Chat key (T): focuses chat input, Enter sends+exits if entered via keyboard.
// Challenge keys (N/Shift+N/H/Enter): conditional on challenge state.
//
// Keys P, T, K, F in chords map to fixed endpoints:
//   P → pm1       (source only — primary pattern matcher)
//   T → tg1       (source only — primary threshold gate; note: T is also flat chat key
//                  but chord context takes over once a chord is active)
//   K → ctr-global (source and dest — global counter)
//   F → file-save  (dest only)
//
// All modifier keys (Ctrl, Alt, Meta) are ignored entirely — reserved for browser/OS.
// ══════════════════════════════════════════════════════════════════════════════

const KEYBINDING_CHORD_BUS_KEYS = {
  'Digit1': 'a',
  'Digit2': 'b',
  'Digit3': 'c',
  'Digit4': 'd',
};

const KEYBINDING_NET_BUS_TOGGLE_KEYS = {
  'Digit5': 'e',
  'Digit6': 'f',
  'Digit7': 'g',
  'Digit8': 'h',
  'Digit9': 'i',
};

// Chord target key → endpoint descriptor.
// validSource: key is legal in the source position.
// validDest:   key is legal in the destination position.
const KEYBINDING_CHORD_TARGETS = {
  'KeyW': { endpointId: 'working',    label: 'WORKING',    validSource: true,  validDest: true  },
  'KeyA': { endpointId: 'alu',        label: 'ALU',        validSource: true,  validDest: true  },
  'KeyM': { endpointId: 'memory',     label: 'MEMORY',     validSource: true,  validDest: true  },
  'KeyB': { endpointId: 'big',        label: 'BIG',        validSource: true,  validDest: true  },
  'KeyP': { endpointId: 'pm1',        label: 'PM1',        validSource: true,  validDest: false },
  'KeyT': { endpointId: 'tg1',        label: 'TG1',        validSource: true,  validDest: false },
  'KeyK': { endpointId: 'ctr-global', label: 'CTR·GLB',    validSource: true,  validDest: true  },
  'KeyF': { endpointId: 'file-save',  label: 'FILE SAVE',  validSource: false, validDest: true  },
};

// Clock speed step ladder used by [ and ] keys.
const KEYBINDING_CLOCK_SPEED_STEPS = [1, 2, 3, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 144];

// ALU operation cycle order used by V and Shift+V keys.
const KEYBINDING_ALU_OPS_SEQUENCE = ['ADD','SUB','AND','OR','XOR','NOT','SHL','SHR','NEG','INC','DEC','MOD','ROR','ABS','NAND','NOR','XNOR'];

// Capture route cycle order used by C and Shift+C keys.
// null represents the OFF state.
const KEYBINDING_CAPTURE_ROUTE_SEQUENCE = [null, 'a', 'b', 'c', 'd'];

const KEYBINDING_DOUBLE_TAP_THRESHOLD_MS = 300;
const KEYBINDING_CHORD_TIMEOUT_MS = 2000;

// ── Chord state ───────────────────────────────────────────────────────────────

const keybindingChordState = {
  active:      false,
  busId:       null,   // 'a' | 'b' | 'c' | 'd'
  source:      null,   // endpointId string or null
  timeoutId:   null,   // auto-cancel setTimeout handle
  lastKeyCode: null,   // event.code of most recent digit key press (for double-tap)
  lastKeyTime: 0,      // performance.now() of that press
};

// ── Chat via keyboard flag ────────────────────────────────────────────────────

let keybindingChatEnteredViaKeyboard = false;

// ── Chord status display ──────────────────────────────────────────────────────
// A small fixed overlay that shows active chord state (e.g. "BUS A:  ALU → _").
// Created lazily on first chord entry.

let keybindingChordDisplayElement = null;

// Get or create the chord status overlay element
function keybindingGetOrCreateChordDisplay() {
  if (keybindingChordDisplayElement) return keybindingChordDisplayElement;
  keybindingChordDisplayElement = document.createElement('div');
  keybindingChordDisplayElement.id = 'kb-chord-display';
  Object.assign(keybindingChordDisplayElement.style, {
    position:        'fixed',
    bottom:          '20px',
    left:            '50%',
    transform:       'translateX(-50%)',
    background:      'rgba(10, 10, 20, 0.92)',
    color:           '#c0d8f0',
    fontFamily:      "'Courier New', Consolas, monospace",
    fontSize:        '13px',
    letterSpacing:   '2px',
    padding:         '7px 20px',
    border:          '1px solid #3060a0',
    zIndex:          '9999',
    pointerEvents:   'none',
    display:         'none',
    whiteSpace:      'nowrap',
  });
  document.body.appendChild(keybindingChordDisplayElement);
  return keybindingChordDisplayElement;
}

// Show the chord status overlay with the given text
function keybindingShowChordDisplay(text) {
  const el = keybindingGetOrCreateChordDisplay();
  el.textContent = text;
  el.style.display = 'block';
}

// Hide the chord status overlay
function keybindingHideChordDisplay() {
  if (keybindingChordDisplayElement) {
    keybindingChordDisplayElement.style.display = 'none';
  }
}

// ── Chord management ─────────────────────────────────────────────────────────

function keybindingCancelChord(keepDisplayVisible) {
  if (keybindingChordState.timeoutId) {
    clearTimeout(keybindingChordState.timeoutId);
  }
  keybindingChordState.active    = false;
  keybindingChordState.busId     = null;
  keybindingChordState.source    = null;
  keybindingChordState.timeoutId = null;
  if (!keepDisplayVisible) {
    keybindingHideChordDisplay();
  }
}

// Restart the chord input timeout timer
function keybindingRestartChordTimeout() {
  if (keybindingChordState.timeoutId) clearTimeout(keybindingChordState.timeoutId);
  keybindingChordState.timeoutId = setTimeout(() => {
    keybindingCancelChord(false);
  }, KEYBINDING_CHORD_TIMEOUT_MS);
}

// Begin a chord sequence for a bus (first key was the bus letter)
function keybindingStartChord(busId) {
  keybindingCancelChord(false);
  keybindingChordState.active  = true;
  keybindingChordState.busId   = busId;
  keybindingChordState.source  = null;
  keybindingRestartChordTimeout();
  keybindingShowChordDisplay('BUS ' + busId.toUpperCase() + ':  _ → _');
}

// ── Action helpers ────────────────────────────────────────────────────────────

function keybindingStepClockSpeedUp() {
  const current = clock.hz;
  const next = KEYBINDING_CLOCK_SPEED_STEPS.find(step => step > current);
  if (next !== undefined) handleSpeedSliderChange(next);
}

// Decrease the clock speed by one step
function keybindingStepClockSpeedDown() {
  const current = clock.hz;
  const prev = [...KEYBINDING_CLOCK_SPEED_STEPS].reverse().find(step => step < current);
  if (prev !== undefined) handleSpeedSliderChange(prev);
}

// Cycle to the next ALU operation
function keybindingCycleAluOperationForward() {
  const currentOp = alu.op || 'ADD';
  const currentIndex = KEYBINDING_ALU_OPS_SEQUENCE.indexOf(currentOp);
  const nextOp = KEYBINDING_ALU_OPS_SEQUENCE[(currentIndex + 1) % KEYBINDING_ALU_OPS_SEQUENCE.length];
  selOp(nextOp);
}

// Cycle to the previous ALU operation
function keybindingCycleAluOperationBackward() {
  const currentOp = alu.op || 'ADD';
  const currentIndex = KEYBINDING_ALU_OPS_SEQUENCE.indexOf(currentOp);
  const length = KEYBINDING_ALU_OPS_SEQUENCE.length;
  const prevOp = KEYBINDING_ALU_OPS_SEQUENCE[(currentIndex - 1 + length) % length];
  selOp(prevOp);
}

// Cycle to the next ALU capture route
function keybindingCycleCaptureRouteForward() {
  const currentRoute = alu.route;
  const currentIndex = KEYBINDING_CAPTURE_ROUTE_SEQUENCE.indexOf(currentRoute);
  const length = KEYBINDING_CAPTURE_ROUTE_SEQUENCE.length;
  const nextRoute = KEYBINDING_CAPTURE_ROUTE_SEQUENCE[(currentIndex + 1) % length];
  setRoute(nextRoute);
}

// Cycle to the previous ALU capture route
function keybindingCycleCaptureRouteBackward() {
  const currentRoute = alu.route;
  const currentIndex = KEYBINDING_CAPTURE_ROUTE_SEQUENCE.indexOf(currentRoute);
  const length = KEYBINDING_CAPTURE_ROUTE_SEQUENCE.length;
  const prevRoute = KEYBINDING_CAPTURE_ROUTE_SEQUENCE[(currentIndex - 1 + length) % length];
  setRoute(prevRoute);
}

// Focus the chat input field via keyboard shortcut
function keybindingOpenChat() {
  const input = document.getElementById('chat-input');
  if (!input) return;
  keybindingChatEnteredViaKeyboard = true;
  input.focus();
  input.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// Trigger challenge answer release via keyboard shortcut
function keybindingTriggerChallengeRelease() {
  const releaseButton = document.getElementById('cbx-release-btn');
  if (releaseButton && !releaseButton.disabled) {
    cbxReleaseChainValue();
  }
}

// ── Chord target processing ───────────────────────────────────────────────────

function keybindingProcessChordTargetKey(code) {
  const target = KEYBINDING_CHORD_TARGETS[code];
  const busId = keybindingChordState.busId;
  const busLabel = 'BUS ' + busId.toUpperCase();

  if (!target) {
    // Not a recognised chord target key — chord stays open, key is suppressed.
    return;
  }

  if (keybindingChordState.source === null) {
    // Source position: validate and record.
    if (!target.validSource) {
      keybindingShowChordDisplay(busLabel + ':  ' + target.label + ' → _  ✗ INVALID SOURCE');
      keybindingCancelChord(true);
      setTimeout(() => keybindingHideChordDisplay(), 900);
      return;
    }
    keybindingChordState.source = target.endpointId;
    keybindingRestartChordTimeout();
    keybindingShowChordDisplay(busLabel + ':  ' + target.label + ' → _');

  } else {
    // Destination position: validate, apply, complete.
    const sourceLabelEntry = Object.values(KEYBINDING_CHORD_TARGETS).find(
      t => t.endpointId === keybindingChordState.source
    );
    const sourceLabel = sourceLabelEntry ? sourceLabelEntry.label : keybindingChordState.source.toUpperCase();

    if (!target.validDest) {
      keybindingShowChordDisplay(busLabel + ':  ' + sourceLabel + ' → ' + target.label + '  ✗ INVALID DEST');
      keybindingCancelChord(true);
      setTimeout(() => keybindingHideChordDisplay(), 900);
      return;
    }

    selBusSrc(busId, keybindingChordState.source);
    selBusDst(busId, target.endpointId);

    keybindingCancelChord(true);
    keybindingShowChordDisplay(busLabel + ':  ' + sourceLabel + ' → ' + target.label + '  ✓');
    setTimeout(() => keybindingHideChordDisplay(), 700);
  }
}

// ── Flat and shift action maps ────────────────────────────────────────────────

const KEYBINDING_FLAT_ACTIONS = {
  'Space':         () => toggleMasterClock(),
  'Period':        () => stepMachineOneTick(),
  'BracketLeft':   () => keybindingStepClockSpeedDown(),
  'BracketRight':  () => keybindingStepClockSpeedUp(),
  'KeyS':          () => togglePause('working'),
  'KeyD':          () => togglePause('alu'),
  'KeyF':          () => togglePause('memory'),
  'KeyG':          () => togglePause('big'),
  'KeyR':          () => aluWriteback(),
  'KeyV':          () => keybindingCycleAluOperationForward(),
  'KeyC':          () => keybindingCycleCaptureRouteForward(),
  'KeyE':          () => injectSwitchValueIntoWorkingLoop(),
  'KeyQ':          () => clearAllInputSwitches(),
  'KeyX':          () => toggleWriteToSlots(),
  'KeyZ':          () => sendMemorySlotToLoopBatch(getCurrentMemoryAddress()),
  'KeyT':          () => keybindingOpenChat(),
  'KeyN':          () => { if (!CHALL.active) challStart(); },
  'KeyH':          () => {
    const spoilerButton = document.getElementById('chall-spoiler-btn');
    if (spoilerButton && spoilerButton.style.display !== 'none') challToggleSpoiler();
  },
};

const KEYBINDING_SHIFT_ACTIONS = {
  'KeyS':    () => toggleGate('working'),
  'KeyD':    () => toggleGate('alu'),
  'KeyF':    () => toggleGate('memory'),
  'KeyG':    () => toggleGate('big'),
  'KeyR':    () => cmpWriteback(),
  'KeyV':    () => keybindingCycleAluOperationBackward(),
  'KeyC':    () => keybindingCycleCaptureRouteBackward(),
  'KeyE':    () => rngSend(),
  'KeyX':    () => toggleAutoInc(),
  'KeyZ':    () => memBatchWrite(),
  'Digit1':  () => toggleBusGeneric('a'),
  'Digit2':  () => toggleBusGeneric('b'),
  'Digit3':  () => toggleBusGeneric('c'),
  'Digit4':  () => toggleBusGeneric('d'),
  'Digit5':  () => toggleBusGeneric('e'),
  'Digit6':  () => toggleBusGeneric('f'),
  'Digit7':  () => toggleBusGeneric('g'),
  'Digit8':  () => toggleBusGeneric('h'),
  'Digit9':  () => toggleBusGeneric('i'),
  'KeyN':    () => { if (CHALL.active) challAbort(); },
};

// ── Main keydown handler ──────────────────────────────────────────────────────

function handleKeydown(event) {
  // Step 1: Ignore all Ctrl / Alt / Meta combinations — reserved for browser and OS.
  if (event.ctrlKey || event.altKey || event.metaKey) return;

  const activeElement = document.activeElement;
  const activeTag = activeElement ? activeElement.tagName : '';
  const inputIsFocused = ['INPUT', 'TEXTAREA', 'SELECT'].includes(activeTag) ||
                         (activeElement && activeElement.isContentEditable);

  // Step 2: Handle focused input elements.
  if (inputIsFocused) {
    if (event.key === 'Escape') {
      activeElement.blur();
      event.preventDefault();
      return;
    }
    // Special case: Enter in chat input when opened via keyboard — send then return focus to machine.
    if (event.key === 'Enter' &&
        activeElement.id === 'chat-input' &&
        keybindingChatEnteredViaKeyboard) {
      keybindingChatEnteredViaKeyboard = false;
      // The inline onkeydown handler on chat-input fires chatSendMessage().
      // We defer the blur so it runs after the send completes.
      setTimeout(() => {
        const chatInput = document.getElementById('chat-input');
        if (chatInput) chatInput.blur();
      }, 0);
      return; // let the inline handler send the message
    }
    // All other keys in focused inputs pass through untouched.
    return;
  }

  // Step 3: Escape — cancel chord if active; otherwise nothing else to dismiss yet.
  if (event.key === 'Escape') {
    if (keybindingChordState.active) {
      keybindingCancelChord(false);
      event.preventDefault();
    }
    return;
  }

  // Step 4: Active chord — all keys are consumed here (valid targets advance the
  // chord; invalid keys are suppressed but the chord stays open).
  if (keybindingChordState.active) {
    // A rapid second press of the same bus key cancels the chord and toggles instead.
    if (event.code in KEYBINDING_CHORD_BUS_KEYS &&
        KEYBINDING_CHORD_BUS_KEYS[event.code] === keybindingChordState.busId &&
        (performance.now() - keybindingChordState.lastKeyTime) < KEYBINDING_DOUBLE_TAP_THRESHOLD_MS) {
      const busToToggle = keybindingChordState.busId;
      keybindingCancelChord(false);
      keybindingChordState.lastKeyCode = null;
      toggleBusGeneric(busToToggle);
      event.preventDefault();
      return;
    }
    keybindingProcessChordTargetKey(event.code);
    event.preventDefault();
    return;
  }

  // Step 5: Digit keys 1–9 — chord entry (1–4) or net bus double-tap toggle (5–9).
  // Shift+digit is handled in the shift map below; this block only fires without Shift.
  if (!event.shiftKey && (event.code in KEYBINDING_CHORD_BUS_KEYS || event.code in KEYBINDING_NET_BUS_TOGGLE_KEYS)) {
    const now = performance.now();
    const isDoubleTap = event.code === keybindingChordState.lastKeyCode &&
                        (now - keybindingChordState.lastKeyTime) < KEYBINDING_DOUBLE_TAP_THRESHOLD_MS;

    keybindingChordState.lastKeyCode = event.code;
    keybindingChordState.lastKeyTime = now;

    if (isDoubleTap) {
      const busId = KEYBINDING_CHORD_BUS_KEYS[event.code] || KEYBINDING_NET_BUS_TOGGLE_KEYS[event.code];
      keybindingChordState.lastKeyCode = null;
      toggleBusGeneric(busId);
      event.preventDefault();
      return;
    }

    if (event.code in KEYBINDING_CHORD_BUS_KEYS) {
      // Single press of 1–4: enter chord mode.
      keybindingStartChord(KEYBINDING_CHORD_BUS_KEYS[event.code]);
      event.preventDefault();
    }
    // Single press of 5–9: recorded for double-tap detection; no immediate action.
    return;
  }

  // Step 6: Enter — challenge release (only when no input is focused and release is ready).
  if (event.key === 'Enter') {
    keybindingTriggerChallengeRelease();
    event.preventDefault();
    return;
  }

  // Step 7: Shift layer.
  if (event.shiftKey) {
    const shiftAction = KEYBINDING_SHIFT_ACTIONS[event.code];
    if (shiftAction) {
      shiftAction();
      event.preventDefault();
      return;
    }
    // If no shift binding exists, fall through to flat layer (Shift does not
    // block flat bindings for keys that have no shift variant).
  }

  // Step 8: Flat layer.
  const flatAction = KEYBINDING_FLAT_ACTIONS[event.code];
  if (flatAction) {
    flatAction();
    event.preventDefault();
    return;
  }

  // Step 9: Nothing matched — key passes through to the browser.
}

document.addEventListener('keydown', handleKeydown);
</script>
</body>
</html>