/* twos_complement.css — a row of clickable bits with place values (see twos_complement.js).
   A "1" bit lights green; the sign bit (negative place value) lights red when set. */
.tc-bits { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.tc-bit {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; cursor: pointer;
  min-width: 3rem; padding: 0.45rem 0.4rem 0.55rem; border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.tc-bit:hover { border-color: rgba(255, 255, 255, 0.4); }
.tc-bit:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.tc-place { font-size: 0.72rem; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.tc-val { font-size: 1.5rem; font-weight: 800; font-family: ui-monospace, SFMono-Regular, monospace; color: #cbd5e1; line-height: 1; }
.tc-bit.is-on { border-color: #34d399; background: color-mix(in srgb, #34d399 22%, #0b1220); box-shadow: 0 0 0 2px color-mix(in srgb, #34d399 18%, transparent); }
.tc-bit.is-on .tc-val { color: #d1fae5; }
.tc-sign .tc-place { color: #fb7185; }                 /* the negative (sign) place value */
.tc-sign.is-on { border-color: #fb7185; background: color-mix(in srgb, #fb7185 22%, #0b1220); box-shadow: 0 0 0 2px color-mix(in srgb, #fb7185 18%, transparent); }
.tc-sign.is-on .tc-val { color: #fecdd3; }
.tc-actions { margin-top: 0.1rem; }
.lv-eq sub { font-size: 0.7em; }