/* Bits on the Wire (computer-science/bits-on-the-wire.php). The page chrome is the one-screen layout in
   /css/resource.css. The stage is one picture: the two hand-drawn computers at the ends, the cable between
   them (its conductors fan out of each computer's port and run bundled inside a sheath across the
   middle), and the bits riding the conductors. Under it, each computer's message and what it has
   received, then the controls. Theme tokens only (the bit colours are this page's names for theme tokens). */

:root{--bit-one:color-mix(in srgb, var(--neon-green) 60%, var(--screen-ink));--bit-one-ink:color-mix(in srgb, var(--viz-3) 40%, var(--screen-bg));--bit-zero:var(--viz-3)}

.rp-main{gap:10px}
.bw-stage{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ---------- the status chips ---------- */
.bw-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);flex:none}
.chip{font:11.5px/1.3 var(--font-mono);letter-spacing:.03em;border:1px solid var(--line);border-radius:3px;padding:3px 8px;color:var(--ink-soft);background:var(--panel);white-space:nowrap}
.chip b{color:var(--ink);font-weight:600}
.chip.wires{border-color:var(--accent);color:var(--accent)}
.chip.tick{margin-left:auto}
.chip .dim{opacity:.7}

/* ---------- the picture ---------- */
.bw-scene{position:relative;flex:1;min-height:230px;background:var(--panel)}
.bw-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#bitsSvg{pointer-events:none;will-change:transform}   /* the moving bits: a layer of their own, so the drawing under them isn't repainted */
.bw-ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.bw-body{fill:var(--panel);stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.bw-hand{font-family:'Caveat',var(--font-display);font-weight:700}
.bw-label{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.bw-lanenum{font:9px var(--font-mono);fill:var(--muted)}
.bw-sheath-fill{fill:var(--panel-2)}
.bw-sheath{fill:none;stroke:var(--ink-soft);stroke-linecap:round;stroke-linejoin:round}
.bw-wire{fill:none;stroke:var(--line-strong);stroke-linecap:round}
.bw-wire.live.ab{stroke:var(--accent)}
.bw-wire.live.ba{stroke:var(--accent-b)}
.bw-tip{fill:var(--line-strong)}
.bw-tip.live.ab{fill:var(--accent)}
.bw-tip.live.ba{fill:var(--accent-b)}
.bit circle{fill:var(--panel);stroke:var(--bit-zero);stroke-width:1.6}
.bit text{fill:var(--bit-zero);font-family:var(--font-mono);font-weight:700;text-anchor:middle;dominant-baseline:central}
.bit.one circle{fill:var(--bit-one);stroke:var(--bit-one)}
.bit.one text{fill:var(--bit-one-ink)}
.bit.glitch circle{stroke:var(--bad);stroke-dasharray:3 2;stroke-width:2;fill:var(--bad-tint)}
.bit.glitch text{fill:var(--bad)}
.bit.glitch.one circle{fill:var(--bad)}
.bit.glitch.one text{fill:var(--panel)}
.bit.smash circle{fill:var(--bad);stroke:var(--bad)}
.bit.smash text{fill:var(--panel)}
.turnbanner{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);max-width:min(92%,640px);font:11.5px/1.35 var(--font-mono);letter-spacing:.03em;color:var(--ink-soft);background:var(--panel);border:1px dashed var(--line-strong);border-radius:3px;padding:4px 9px;text-align:center}
.turnbanner.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-tint)}
.bw-legend{position:absolute;left:50%;transform:translateX(-50%);top:8px;display:flex;gap:10px;font:10.5px var(--font-mono);color:var(--muted)}
.bw-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-2px;margin-right:4px;border:1.5px solid var(--bit-zero);background:var(--panel)}
.bw-legend i.one{background:var(--bit-one);border-color:var(--bit-one)}

.commentary{margin:0;padding:7px 12px;border-top:1px solid var(--line);background:var(--panel-2);font:12.5px/1.4 var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none;min-height:33px}
.commentary .sep{opacity:.4;margin:0 6px}
.commentary b{color:var(--ink);font-weight:600}
.commentary b.err{color:var(--bad)}

/* ---------- each computer's message and what it received ---------- */
.bw-ends{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);flex:none}
.bw-end{padding:9px 12px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;align-content:start;min-width:0}
.bw-end.a{border-right:1px solid var(--line)}
.bw-end .who{grid-column:1/-1;font:700 15px/1.1 var(--font-display);color:var(--ink);display:flex;align-items:baseline;gap:8px}
.bw-end .who .role{font:600 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bw-end.a .who b{color:var(--accent)}
.bw-end.b .who b{color:var(--accent-b)}
.field label,.rx .lab{font:10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.field input[type=text]{width:100%;font:14.5px var(--font-body);padding:5px 8px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:4px}
.field input[type=text]:disabled{opacity:.45;cursor:not-allowed}
.field input[type=text]:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.meterline{font:11px var(--font-mono);color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums;margin-top:6px}
.bar{height:4px;background:var(--line-strong);border-radius:2px;overflow:hidden;margin-top:3px}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.bw-end.b .bar span{background:var(--accent-b)}
.rx{min-width:0}
.rx-text{font:500 14.5px/1.35 var(--font-mono);min-height:22px;max-height:62px;overflow-y:auto;overflow-wrap:anywhere;color:var(--ink)}
.rx-text .pend{color:var(--muted)}
.rx-text .bad{color:var(--bad);background:var(--bad-tint);border-radius:2px}
.rx-bits{font:10.5px/1.45 var(--font-mono);color:var(--muted);overflow-wrap:anywhere;max-height:31px;overflow:hidden}
.nofit{font-size:12.5px;color:var(--ink-soft);background:var(--panel-2);border:1px dashed var(--line);border-radius:4px;padding:6px 9px;line-height:1.4}

/* ---------- the controls ---------- */
.bw-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 12px;flex:none}
.bw-transport,.bw-cable{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.bw-cable{padding-left:16px;border-left:1px solid var(--line)}
.bw-cable[hidden]{display:none}
.seglabel{font:10px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-danger:hover:not(:disabled){background:var(--bad-tint)}
.slider{display:flex;align-items:center;gap:7px;font:11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.slider input[type=range]{width:96px;accent-color:var(--accent)}
.slider select{font:12px var(--font-mono);padding:3px 6px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;text-transform:none;letter-spacing:0}
.slider select:focus-visible,.slider input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.slider output{color:var(--ink);font-variant-numeric:tabular-nums;min-width:40px}

/* ---------- the Explanation: the six combinations, and the teacher notes ---------- */
.objective h4{margin:18px 0 8px;font:700 15px/1.2 var(--font-display);color:var(--accent-deep)}
.objective h5{margin:14px 0 6px;font:600 11px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 4px}
.bw-row-label{grid-column:1/-1;font:10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.bw-cell{text-align:left;display:flex;flex-direction:column;gap:4px;padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:5px;font:13px/1.4 var(--font-body);color:var(--ink-soft);cursor:pointer}
.bw-cell:hover{border-color:var(--accent)}
.bw-cell:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bw-cell[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-tint)}
.bw-cell .cname{font:600 14px var(--font-display);color:var(--ink)}
.bw-cell .cwires{font:10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mis div{border-left:3px solid var(--bad);padding:2px 0 2px 11px;margin-bottom:8px}
.mis b{display:block;color:var(--ink)}
details.qa{border-top:1px dashed var(--line);padding:6px 0}
details.qa summary{cursor:pointer;color:var(--ink);font-weight:600}
details.qa p{margin:6px 0 0}

/* ---------- smaller screens: everything stacks, and the page scrolls ---------- */
@media (max-width:900px){
  .bw-scene{flex:none;height:300px}
  .bw-cable{padding-left:0;border-left:0}
}
@media (max-width:640px){
  .bw-scene{height:205px}
  .bw-ends{grid-template-columns:1fr}
  .bw-end.a{border-right:0;border-bottom:1px solid var(--line)}
  .bw-grid{grid-template-columns:1fr}
  .bw-legend{display:none}
  .chip.tick{margin-left:0}
}
@media (max-height:620px) and (min-width:901px){
  .bw-scene{flex:none;height:300px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}