/* ============================================================
   heute.css — Ansicht „Heute“
   Baut ausschließlich auf system.css auf; hier stehen nur die
   Anordnung des Blatts und die wenigen eigenen Züge der Ansicht:
   Kopf, Morgen-Zeile, Morgen-Eingabe, Trainingskarte,
   „Was noch fehlt“ samt Nachtrag, Tagesabschluss.
   ============================================================ */

/* Blattaufbau: gestaffelte Sektionen, eine Spalte */
.heute { display: grid; gap: 16px; }

/* Kopf: Begrüßung + Datum klein — die Karte darunter dominiert */
.heute-kopf { display: grid; gap: 2px; padding: 6px 2px 2px; }
/* Die Begrüßung ist die Überschrift des Schirms und trägt ihn auch optisch:
   Titelstufe (28px), nicht Fließtextgröße. Vorher stand sie auf 17px und war
   damit so groß wie ein gewöhnlicher Satz — als erste Zeile am Morgen zu
   wenig. */
.heute-gruss {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Morgenwerte als stille Zeile (nachdem sie eingetragen sind);
   rückt eng an den Kopf heran — sie gehört zu ihm */
.heute-morgen-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 56px;
  margin-top: -12px; padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 15px; color: var(--tinte-gedimmt);
  text-align: left;
  transition: background-color var(--wechsel), color var(--wechsel);
}
@media (hover: hover) {
  .heute-morgen-zeile:hover { background: var(--flaeche-hoch); color: var(--tinte); }
}
.heute-morgen-zeile .symbol { width: 18px; height: 18px; color: var(--tinte-leise); }

/* Morgen-Eingabe: zwei beschriftete Reihen, ein „Fertig“ */
.heute-feld { display: grid; gap: 8px; }
.heute-feld-name { font-size: 15px; color: var(--tinte-gedimmt); }
.heute-morgen { outline: none; }
.heute-morgen .knopf { margin-top: 4px; }

/* Trainings- bzw. Ruhetagskarte */
.heute-hinweis { font-size: 15px; color: var(--tinte-gedimmt); }
.heute-erledigt { display: flex; align-items: center; gap: 10px; }
.heute-erledigt .symbol { color: var(--akzent); }

/* „Was noch fehlt”: drei Zeilen, Tippen öffnet den Nachtrag */
.heute-fehlt { display: grid; padding: 12px 10px; }

/* Kalorien über dem Rahmen: die Zeile wird still („132 kcal drüber”),
   nur die 2px-Leiste kippt in die Warnfarbe */
.zeile-fehlt--drueber .zeile-fehlt-rest {
  font-size: 17px; font-weight: 500; color: var(--tinte-gedimmt);
}
.zeile-fehlt--drueber .leiste-fuellung { background: var(--warnung); }
.heute-fehlt-titel {
  font-size: 15px; font-weight: 600; color: var(--tinte-gedimmt);
  padding: 6px 10px 10px;
}
.heute-nachtrag { display: grid; gap: 8px; padding: 6px 10px 14px; }
.heute-nachtrag:not([hidden]) { animation: heute-auftauchen 160ms ease-out; }
.heute-nachtrag-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.heute-nachtrag .eingabe[aria-invalid="true"] { border-color: var(--warnung); }
.heute-nachtrag .hinweis:not([hidden]) { animation: heute-auftauchen 160ms ease-out; }

@keyframes heute-auftauchen {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Tagesabschluss: vor dem Review nur ein kleiner, leiser Griff */
.heute-abschluss { display: flex; justify-content: center; padding: 2px 0; }
.heute-review { outline: none; }  /* bekommt nach dem Abschließen den Fokus */
.heute-review-kopf { display: flex; align-items: center; gap: 14px; }
.heute-review-titel-block { display: grid; gap: 1px; }
.heute-review-text { line-height: 1.5; }
.heute-review .knopf--schmal { justify-self: start; }

/* Die drei Drittel: dasselbe Muster wie „Was noch fehlt" — Wort, Leiste,
   Zahl. Wer den Tageswert nicht nachvollziehen kann, hält ihn für ausgedacht. */
.heute-teile {
  display: grid; gap: 8px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--linie);
}
.heute-teil {
  display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 12px;
}
.heute-teil-wort { font-size: 15px; color: var(--tinte-gedimmt); }
.heute-teil-wert {
  font-size: 17px; font-weight: 600;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Ein fehlender Bereich wird benannt, nicht versteckt — er kostet ja Punkte. */
.heute-teil--fehlt .heute-teil-wert {
  font-size: 13px; font-weight: 500;
  color: var(--warnung);
}
.heute-teile-fuss { margin-top: 2px; }