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

/* ---- Octal → Decimal: row of digit cells ---- */
.opv-digits {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 10px;
}
.opv-digit {
  width: 72px; 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;
}
.opv-digit-place { font-size: 0.72rem; font-weight: 700; color: #64748b; }
.opv-digit-value { font-size: 1.5rem; font-weight: 800; font-family: monospace; color: #1e293b; margin-top: 2px; }
.opv-digit.opv-on { background: #dbeafe; border-color: #3b82f6; transform: scale(1.06); }
.opv-digit.opv-on .opv-digit-value { color: #1d4ed8; }
.opv-digit.opv-zero { opacity: 0.4; }

/* ---- Decimal → Octal: division steps + growing readout ---- */
.opv-divsteps {
  max-width: 320px; margin: 16px auto 10px; font-family: monospace; font-size: 1rem;
}
.opv-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;
}
.opv-divstep.opv-shown { background: #dbeafe; border-color: #3b82f6; color: #1e293b; font-weight: 700; }
.opv-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;
}

@media (max-width: 480px) {
  .opv-digit { width: 58px; }
  .opv-digit-value { font-size: 1.2rem; }
}