/* Panel de lo que comiste. Las barras son de filete y relleno plano, como las
   de adherencia: la profundidad sigue saliendo de los bordes. */

.intake { display: block; }

.intake__meta {
  margin: var(--sp-6) 0 0;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
}

.intake__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-top: var(--sp-14);
}

.intake-row {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-family: var(--serif);
  color: inherit;
}

.intake-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
}

.intake-row__name { font-size: var(--size-food); }

.intake-row__count {
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
  flex: none;
}

.intake-row__track {
  position: relative;
  height: 14px;
  margin-top: var(--sp-4);
  border: 1px solid var(--rule-30);
  background: transparent;
}

.intake-row__bar {
  height: 100%;
  background: var(--paper-bar);
  transition: width .2s ease-out;
}

/* La marca de lo que pide el plan: un filete vertical sobre la barra */
.intake-row__mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--ink);
}

.intake-row__status {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-nav);
  color: var(--ink-55);
}

/* Quedarse corto y pasarse se distinguen sin depender del color solo: el texto
   lo dice, y el relleno cambia. */
.intake-row.is-under .intake-row__bar { background: var(--paper-cell); }
.intake-row.is-under .intake-row__status { color: var(--ink-60); }

.intake-row.is-over .intake-row__bar { background: var(--rust); }
.intake-row.is-over .intake-row__status { color: var(--rust-dark); }

.intake-row.is-met .intake-row__bar { background: var(--green); }
.intake-row.is-met .intake-row__status { color: var(--green-dark); }

.intake-row.is-extra .intake-row__bar { background: var(--rust); }
.intake-row.is-extra .intake-row__status { color: var(--rust-dark); }

.intake__rule { margin-top: var(--sp-16); background: var(--rule-25); }

.intake__macros { margin-top: var(--sp-12); }

.intake__kcal { font-size: var(--size-option); }

.intake__split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-6);
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-60);
}

.intake__grams {
  margin-top: var(--sp-4);
  font-family: var(--mono);
  font-size: var(--mono-meta);
  color: var(--ink-50);
}

.screen--progress .intake { margin-bottom: 0; }