html {
  color-scheme: light dark;
}

.table {
  zoom: 150%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

.table__cell {
  padding: 4px;
}

.table__cell--servings-header {
  width: 2ch;
}

.table__cell--nutrient-header {
  border-bottom-style: solid;
  border-collapse: collapse;
}

.table__cell--nutrient {
  border-bottom-style: dotted;
  width: 5ch;
}

.table__cell--rate {
  border-bottom-style: dotted;
  opacity: 0;
}

.table__cell--rate:focus-within {
  opacity: 1;
}

.table__goal-input {
  width: 2.5rem;
}

.table__servings-slider {
  width: 100px;
}

.table__name {
  background-color: color-mix(in srgb, silver 50%, transparent);
}

.table__name--fruit {
  background-color: hsl(330 80% 80% / 50%);
}

.table__name--veg {
  background-color: hsl(99 50% 80% / 50%);
}

.table__name--milk {
  background-color: hsl(212 100% 70% / 50%);
}

.table__name--starch {
  background-color: hsl(33 100% 70% / 50%);
}

.table__name--pro {
  background-color: hsl(0 100% 80% / 50%);
}

.table__name--fat {
  background-color: hsl(47 100% 75% / 50%);
}

.table__nutrient {
  white-space: nowrap;
}

.table__rate-input {
  width: 2rem;
}

.table__rate-label {
  font-size: 0.7rem;
  display: inline-block;
  width: min-content;
  vertical-align: bottom;
}