/* /resources/css/converting-number-systems.css — styles for the grouping-based
   conversion step-demos on converting-number-systems.html. Button/legend/message/
   result/formula styling is shared from step-demo.css; this file only holds the
   bit-group, digit-source and growing-readout visuals specific to this page. */

.conv-groups { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 8px; }
.conv-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 12px 12px; border-radius: 10px; background: #f8fafc; border: 2px solid #cbd5e1;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.conv-group.conv-active { border-color: #3b82f6; background: #dbeafe; transform: translateY(-3px) scale(1.04); }
.conv-group.conv-done { border-color: #22c55e; background: #dcfce7; }

.conv-bits-row { display: flex; gap: 3px; }
.conv-bit {
  width: 26px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: monospace; font-size: 1.05rem; color: #1e293b;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
}
.conv-bit.conv-pad { color: #cbd5e1; }

.conv-digit-src {
  width: 44px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: monospace; font-size: 1.2rem; color: #1e293b;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
}

.conv-group-eq { font-size: 0.72rem; font-weight: 700; color: #94a3b8; }
.conv-group-out {
  font-family: monospace; font-weight: 800; font-size: 1.25rem; color: #cbd5e1;
  min-height: 1.4em; transition: color 0.4s ease;
}
.conv-group.conv-done .conv-group-out { color: #16a34a; }

.conv-readout {
  text-align: center; font-family: monospace; font-size: 1.6rem; font-weight: 800;
  letter-spacing: 3px; color: #1d4ed8; margin: 12px 0 6px; min-height: 1.4em;
}

.conv-stage-label {
  text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
  color: #64748b; text-transform: uppercase; margin: 14px 0 -4px;
}
.conv-stage2 { opacity: 0.3; transition: opacity 0.4s ease; }
.conv-stage2.conv-stage-shown { opacity: 1; }

.conv-ref-tables { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 16px 0; }
.conv-ref-tables .topic-table { max-width: 320px; }

@media (max-width: 480px) {
  .conv-bit { width: 22px; height: 26px; font-size: 0.92rem; }
  .conv-digit-src { width: 38px; height: 26px; font-size: 1.05rem; }
  .conv-readout { font-size: 1.3rem; letter-spacing: 2px; }
}