/* Bone-marrow-specific visual language. Shared learning controls live in learning_components.css. */

.marrow-hero {
  background:
    linear-gradient(118deg, rgba(55, 109, 105, 0.09), transparent 56%),
    var(--color-surface);
}

.marrow-visual {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: #f3f7f6;
}

.marrow-visual::before {
  content: "";
  position: absolute;
  inset: 2.7rem 7% 1rem;
  border: 10px solid rgba(71, 104, 100, 0.28);
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(circle at 20% 25%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 70% 68%, #fff 0 9%, transparent 10%),
    rgba(205, 226, 220, 0.46);
}

.marrow-visual[data-landmark="bone_trabeculae"]::after,
.marrow-visual[data-landmark="endosteal_interface"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 54%;
  height: 18px;
  left: 22%;
  top: 51%;
  border: 5px double rgba(91, 111, 106, 0.55);
  border-radius: 40%;
  transform: rotate(-13deg);
}

.marrow-visual[data-landmark="sinusoids"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 34% 18% 28%;
  border: 5px solid rgba(128, 76, 70, 0.35);
  border-width: 5px 0;
  border-radius: 50%;
  transform: rotate(8deg);
}

.marrow-visual[data-landmark="megakaryocytes"] .marrow-cell:nth-of-type(4n) {
  width: 29px;
  height: 29px;
  border: 5px dotted rgba(95, 68, 100, 0.62);
  background: rgba(189, 152, 190, 0.66);
}

.marrow-cell {
  position: absolute;
  z-index: 2;
  left: var(--cell-x);
  top: var(--cell-y);
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 50%;
  background: var(--cell-color);
  opacity: 0.76;
}