/* /resources/css/binary-place-value.css — styles for the two conversion
   step-demos on binary-place-value.html. Button/legend/message/result/formula
   styling is shared from step-demo.css; this file only holds the bit-cell and
   division-row visuals specific to this page. */

/* ---- Binary → Decimal: row of bit cells ---- */
.bpv-bits {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin: 16px 0 10px;
}
.bpv-bit {
  width: 62px; border-radius: 8px; border: 2px solid #cbd5e1; background: #f8fafc;
  padding: 8px 4px; text-align: center;
  transition: background 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}
.bpv-bit-place { font-size: 0.72rem; font-weight: 700; color: #64748b; }
.bpv-bit-digit { font-size: 1.5rem; font-weight: 800; font-family: monospace; color: #1e293b; margin-top: 2px; }
.bpv-bit.bpv-on {
  background: #dbeafe; border-color: #3b82f6; transform: scale(1.06);
}
.bpv-bit.bpv-on .bpv-bit-digit { color: #1d4ed8; }
.bpv-bit.bpv-off { opacity: 0.4; }

/* ---- Decimal → Binary: division steps + growing binary readout ---- */
.bpv-divsteps {
  max-width: 320px; margin: 16px auto 10px; font-family: monospace; font-size: 1rem;
}
.bpv-divstep {
  padding: 7px 10px; border-radius: 6px; margin-bottom: 4px;
  background: #f8fafc; border: 1px solid #e2e8f0; color: #94a3b8;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.bpv-divstep.bpv-shown { background: #dbeafe; border-color: #3b82f6; color: #1e293b; font-weight: 700; }
.bpv-binary-readout {
  text-align: center; font-family: monospace; font-size: 1.6rem; font-weight: 800;
  letter-spacing: 4px; color: #1d4ed8; margin: 12px 0 6px; min-height: 1.4em;
}
.bpv-binary-readout .bpv-digit-new { color: #f68a0a; }

@media (max-width: 480px) {
  .bpv-bit { width: 50px; }
  .bpv-bit-digit { font-size: 1.2rem; }
}