/* css.slopped.site exhibit: A four-bit adder. Generated by css/exhibits/adder.mjs; edit that. */
.x-adder .adder { display: grid; gap: 14px; width: max-content; max-width: 100%; margin: auto; counter-reset: a b s; }
.x-adder .row { display: grid; grid-template-columns: 3.4em auto; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
.x-adder legend, .x-adder .legend { float: left; margin: 0; padding: 0; font-weight: 700; }
.x-adder .row > legend + .bits { grid-column: 2; }
.x-adder .decimal { margin: 6px 0 0; font: 700 16px var(--mono); text-align: right; }
.x-adder .bits { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; justify-content: end; }
.x-adder .row-a .bits, .x-adder .row-b .bits { grid-template-columns: repeat(4, 44px); }
.x-adder .bit-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.x-adder .bit { display: grid; place-items: center; width: 44px; height: 54px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); font: 1000 26px var(--head); font-synthesis: none; cursor: pointer; }
.x-adder .bit::after { content: "0"; color: var(--muted); }
.x-adder .bit-input:checked + .bit { background: var(--ink); }
.x-adder .bit-input:checked + .bit::after { content: "1"; color: var(--acid); }
.x-adder .bit-input:focus-visible + .bit { outline: 3px solid var(--focus); outline-offset: 3px; }
.x-adder .row-s { padding-top: 12px; border-top: 2px solid var(--ink); }
.x-adder .sum { cursor: default; border-style: dashed; }
.x-adder .weights { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; justify-content: end; margin: -6px 0 0; color: var(--muted); font: 12px var(--mono); text-align: center; }
/* the decimal cross-check: counters add the weights of the checked bits */
.x-adder #a0:checked { counter-increment: a 1 s 1; }
.x-adder #b0:checked { counter-increment: b 1 s 1; }
.x-adder #a1:checked { counter-increment: a 2 s 2; }
.x-adder #b1:checked { counter-increment: b 2 s 2; }
.x-adder #a2:checked { counter-increment: a 4 s 4; }
.x-adder #b2:checked { counter-increment: b 4 s 4; }
.x-adder #a3:checked { counter-increment: a 8 s 8; }
.x-adder #b3:checked { counter-increment: b 8 s 8; }
.x-adder .dec-a::after { content: counter(a); }
.x-adder .dec-b::after { content: counter(b); }
.x-adder .dec-s::after { content: counter(s); }
/* key */
/* sum bit i is on when a xor b xor carry-in. carry into bit i: some lower bit j generated (a_j and b_j)
   and every bit between j and i propagated (a_k or b_k). :has(#a1:checked, #b1:checked) is "a1 or b1". */
.adder:has(#a0:checked, #b0:checked):not(:has(#a0:checked):has(#b0:checked)) #s0,
.adder:has(#a1:checked, #b1:checked):not(:has(#a1:checked):has(#b1:checked)):not(:is(:has(#a0:checked):has(#b0:checked))) #s1,
.adder:is(:not(:has(#a1:checked, #b1:checked)), :has(#a1:checked):has(#b1:checked)):is(:has(#a0:checked):has(#b0:checked)) #s1 {
  background: var(--acid);
}
/* /key */
.adder:has(#a2:checked, #b2:checked):not(:has(#a2:checked):has(#b2:checked)):not(:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked), :has(#a1:checked):has(#b1:checked))) #s2,
.adder:is(:not(:has(#a2:checked, #b2:checked)), :has(#a2:checked):has(#b2:checked)):is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked), :has(#a1:checked):has(#b1:checked)) #s2,
.adder:has(#a3:checked, #b3:checked):not(:has(#a3:checked):has(#b3:checked)):not(:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked), :has(#a2:checked):has(#b2:checked))) #s3,
.adder:is(:not(:has(#a3:checked, #b3:checked)), :has(#a3:checked):has(#b3:checked)):is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked), :has(#a2:checked):has(#b2:checked)) #s3,
.adder:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked):has(#a3:checked, #b3:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked):has(#a3:checked, #b3:checked), :has(#a2:checked):has(#b2:checked):has(#a3:checked, #b3:checked), :has(#a3:checked):has(#b3:checked)) #s4 {
  background: var(--acid);
}
.x-adder .sum::after { content: "0"; color: var(--muted); }
.adder:has(#a0:checked, #b0:checked):not(:has(#a0:checked):has(#b0:checked)) #s0::after,
.adder:has(#a1:checked, #b1:checked):not(:has(#a1:checked):has(#b1:checked)):not(:is(:has(#a0:checked):has(#b0:checked))) #s1::after,
.adder:is(:not(:has(#a1:checked, #b1:checked)), :has(#a1:checked):has(#b1:checked)):is(:has(#a0:checked):has(#b0:checked)) #s1::after,
.adder:has(#a2:checked, #b2:checked):not(:has(#a2:checked):has(#b2:checked)):not(:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked), :has(#a1:checked):has(#b1:checked))) #s2::after,
.adder:is(:not(:has(#a2:checked, #b2:checked)), :has(#a2:checked):has(#b2:checked)):is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked), :has(#a1:checked):has(#b1:checked)) #s2::after,
.adder:has(#a3:checked, #b3:checked):not(:has(#a3:checked):has(#b3:checked)):not(:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked), :has(#a2:checked):has(#b2:checked))) #s3::after,
.adder:is(:not(:has(#a3:checked, #b3:checked)), :has(#a3:checked):has(#b3:checked)):is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked), :has(#a2:checked):has(#b2:checked)) #s3::after,
.adder:is(:has(#a0:checked):has(#b0:checked):has(#a1:checked, #b1:checked):has(#a2:checked, #b2:checked):has(#a3:checked, #b3:checked), :has(#a1:checked):has(#b1:checked):has(#a2:checked, #b2:checked):has(#a3:checked, #b3:checked), :has(#a2:checked):has(#b2:checked):has(#a3:checked, #b3:checked), :has(#a3:checked):has(#b3:checked)) #s4::after { content: "1"; color: var(--on-acid); }

/* live support notes (built from css/exhibits.js) */
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }
.sup-counters .sup-no { display: none; }
@supports not (counter-increment: a) { .sup-counters .sup-yes { display: none; } .sup-counters .sup-no { display: inline; } .sup-counters { --sup: var(--no); } }