.mixture-rows {
  display: grid;
  gap: var(--space-2);
}

.mixture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: var(--space-2);
}

.mixture-amount .input {
  padding-right: 44px;
}

.mixture-error {
  grid-column: 1 / -1;
}

.mixture-actions {
  margin-top: calc(var(--space-2) * -1);
}

.distillation-modes {
  display: flex;
  width: 100%;
}

.distillation-modes button {
  flex: 1;
  justify-content: center;
  white-space: normal;
  text-align: center;
  height: auto;
  min-height: 30px;
  padding-block: 4px;
}

.data-table [data-numeric] {
  text-align: right;
  white-space: nowrap;
}

.cell-note {
  display: block;
  margin-top: 3px;
  color: var(--text-subtle);
  font-size: 11.5px;
}

.distillation-note {
  display: block;
  margin-top: var(--space-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.curve-frame {
  margin: 0;
}

.distillation-curve {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans);
}

.distillation-curve .chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.distillation-curve .chart-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.distillation-curve .chart-tick {
  fill: var(--text-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.distillation-curve .chart-title {
  fill: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.curve-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.curve-label {
  fill: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


details.panel:not([open]) > summary {
  border-bottom: 0;
}

@media (max-width: 480px) {
  .mixture-row {
    grid-template-columns: minmax(0, 1fr) 84px auto;
  }
}