#nmr-diagram {
  flex: 1 1 55%;
  min-width: 0;
  height: 220px;
}

.nmr-label {
  font-size: 9px;
}

.nmr-cell {
  stroke: var(--color-border);
  stroke-width: 0.5;
  transition: fill 0.3s ease;
}

.nmr-cell.nmr-pending {
  fill: var(--color-bg);
}

/* Five-step diverging drift scale: cooler = blue, warmer = red. */
.nmr-cell.nmr-level-n2 { fill: var(--color-accent); }
.nmr-cell.nmr-level-n1 { fill: var(--color-accent-muted); }
.nmr-cell.nmr-level-0  { fill: var(--color-border); }
.nmr-cell.nmr-level-p1 { fill: var(--color-danger-muted); }
.nmr-cell.nmr-level-p2 { fill: var(--color-danger); }

.nmr-spectrum-bg {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 1;
}

.nmr-peak {
  fill: var(--color-fg);
}

.nmr-ghost,
.nmr-noise {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.nmr-ghost circle {
  fill: var(--color-link);
}

.nmr-noise circle {
  fill: var(--color-fg-muted);
}

.nmr-log {
  flex: 1 1 45%;
  height: 220px;
}

@media (max-width: 560px) {
  #nmr-diagram {
    height: 200px;
  }
}