/* =========================================================
   Life Archive – Nutrition

   Baut auf den geteilten Bausteinen aus styles/components.css auf:
   `mnt`, `mnt-card`, `mnt-add`, `fit-select`, `fit-field`, `pop`.
   Hier steht nur, was dazukommt – Fortschrittsbalken, Einträge,
   Rezeptraster, Wochenplan.

   Alle Flächen sind mindestens 40 px hoch, damit sie sich mit dem
   Daumen treffen lassen.
   ========================================================= */

.nu {
  --accent-app: var(--c-nutrition);
  --accent-deep: var(--c-nutrition-stroke);
}

/* Popups des Bereichs erben dessen Akzente über die Ebenen-Klasse. */
.modal-layer.nu {
  --accent-app: var(--c-nutrition);
  --accent-deep: var(--c-nutrition-stroke);
}

/* ---------- Datumsleiste ------------------------------------------------- */

.nu-datebar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--accent-app);
}

.nu-arrow {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--text-dim);
  -webkit-mask: var(--m) center / 15px no-repeat;
          mask: var(--m) center / 15px no-repeat;
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-arrow:hover { background: var(--accent-app); }
.nu-arrow:active { transform: scale(.9); }
.nu-arrow--flip { transform: scaleX(-1); }
.nu-arrow--flip:active { transform: scaleX(-1) scale(.9); }

.nu-datebar__body { text-align: center; min-width: 0; }

.nu-datebar__label {
  display: block;
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 500;
  color: var(--accent-app);
}

.nu-datebar__sub {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
}

.nu-today {
  font-size: 12px;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nu-planmark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease-out);
}

.nu-planmark img { width: 19px; opacity: .85; }
.nu-planmark:hover { border-color: var(--accent-app); }
.nu-planmark.is-off { border-style: dashed; opacity: .35; }

/* ---------- Fortschrittsbalken --------------------------------------------- */

.nu-bars { display: grid; gap: 14px; }

.nu-bar { display: grid; gap: 5px; }

.nu-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.nu-bar__label { font-size: 14px; color: var(--g-09); }

.nu-bar__value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.nu-bar__goal { font-weight: 400; color: var(--text-faint); }

.nu-bar__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--o), .07);
  overflow: hidden;
}

.nu-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}

.nu-bar.is-over .nu-bar__fill { background: var(--c-fitness-stroke) !important; }

.nu-bar__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-faint);
}

/* ---------- Nährwerte ------------------------------------------------------ */

.nu-macros { font-size: 12.5px; color: var(--text-dim); }
.nu-macros b { color: var(--accent-app); font-weight: 600; }
.nu-macros__sep { margin: 0 5px; opacity: .5; }

.nu-tiles {
  display: grid;
  /* minmax(0, …): sonst setzt die längste Beschriftung („CALORIES")
     die Mindestbreite, und in einem schmalen Fenster lief die Reihe
     über den Rand – mit seitlichem Rollbalken. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 4px;
}

.nu-tile {
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  text-align: center;
}

.nu-tile__value {
  font-family: var(--font-mono);
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.nu-tile__label {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Einträge einer Mahlzeit ----------------------------------------- */

.nu-entries { display: grid; }

.nu-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.nu-entry:last-child { border-bottom: 0; }

.nu-entry__body { min-width: 0; }

.nu-entry__title {
  display: block;
  font-size: 14.5px;
  color: var(--g-08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-entry__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
}

.nu-entry__acts { display: flex; gap: 4px; }

.nu-sum {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1.5px solid var(--accent-deep);
  text-align: end;
}

/* ---------- Hydration -------------------------------------------------------- */

.nu-quicks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

.nu-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-quick:hover { background: var(--surface-3); border-color: var(--accent-deep); }
.nu-quick:active { transform: scale(.95); }
.nu-quick img { width: 15px; opacity: .8; }
.nu-quick--soon { color: var(--text-dim); border-style: dashed; }

.nu-drinks { display: grid; margin-top: 12px; }

.nu-drink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.nu-drink:last-child { border-bottom: 0; }

.nu-drink__amount { font-size: 14px; font-weight: 600; color: var(--c-calendar); }
.nu-drink__body { min-width: 0; }

.nu-drink__type {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-drink__macros { display: block; margin-top: 2px; }

/* Gewählte Menge im Getränkedialog */
.nu-quick.is-on {
  background: var(--accent-app);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Bilder ----------------------------------------------------------- */

.nu-thumb {
  --nu-thumb: 46px;
  position: relative;
  display: block;
  flex: none;
  width: var(--nu-thumb);
  height: var(--nu-thumb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.nu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nu-thumb--empty {
  display: grid;
  place-items: center;
  border-style: dashed;
}

.nu-thumb--empty img {
  width: 52%;
  height: 52%;
  object-fit: contain;
  opacity: .35;
}

.nu-thumb--xs  { --nu-thumb: 40px; }
.nu-thumb--sm  { --nu-thumb: 64px; }
.nu-thumb--lg  { --nu-thumb: 100%; height: 118px; border-radius: 12px 12px 0 0; }
.nu-thumb--hero { --nu-thumb: 100%; height: clamp(150px, 42vw, 210px); border-radius: 12px; }

/* ---------- Knöpfe ------------------------------------------------------------ */

.nu-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-icon img { width: 17px; opacity: .8; }
.nu-icon:hover { background: rgba(var(--o), .08); }
.nu-icon:hover img { opacity: 1; }
.nu-icon:active { transform: scale(.9); }
.nu-icon--danger:hover { background: rgba(var(--t-fitness-stroke), .18); }

.nu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 500;
  transition: filter var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-btn:hover { background: var(--surface-3); }
.nu-btn:active { transform: scale(.96); }
.nu-btn[disabled] { opacity: .4; cursor: not-allowed; }
.nu-btn[disabled]:active { transform: none; }

.nu-btn--primary {
  background: var(--accent-app);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

.nu-btn--primary:hover { background: var(--accent-app); filter: brightness(1.08); }

.nu-btn--danger {
  border-color: rgba(var(--t-fitness-stroke), .5);
  color: #ffb1b1;
  background: transparent;
}

.nu-btn--danger:hover { background: rgba(var(--t-fitness-stroke), .14); }

.nu-btn--sm { min-height: 36px; padding: 7px 13px; font-size: 13px; }

/* Ein Zeichen vor der Beschriftung (Kamera an „Add photo" und „Use the
   camera instead") – klein, damit das Wort der Knopf bleibt. */
.nu-btn > img { width: 16px; height: 16px; flex: none; }
.nu-btn--sm > img { width: 15px; height: 15px; }

/* Erledigt heißt hier nicht ausgegraut: der Knopf ist zwar gesperrt,
   aber seine Meldung ist das Ergebnis der Handlung – sie muss lesbar
   bleiben. Deshalb voller Kontrast statt der üblichen .4 Deckung. */
.nu-btn.is-done[disabled] {
  opacity: 1;
  cursor: default;
  border-color: var(--accent-deep);
  color: var(--accent-app);
}

.nu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.nu-actions--tight { margin-top: 12px; }
.nu-actions .nu-btn { flex: 1 1 140px; }

.nu-foot {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.nu-foot .nu-btn { flex: 1; min-width: 0; }   /* lange Beschriftungen (Deutsch) brechen um, statt das Fenster zu weiten */
/* „Goal & reminders" bleibt auf einer Zeile – bei 375 px fehlten zwei Pixel */
.nu-foot [data-remind] { padding-inline: 10px; white-space: nowrap; }
.nu-foot__wrap { padding: 0 20px 20px; }

/* ---------- Formularteile ------------------------------------------------------ */

.nu-field { min-width: 0; }

.nu-field__hint {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-faint);
}

.nu-input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  background: var(--field-bg, var(--g-47));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.nu-input:focus { border-color: var(--accent-app); }
.nu-input::placeholder { color: var(--text-faint); }

.nu-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nu-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 14px;
  color: var(--g-13);
  cursor: pointer;
}

.nu-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-app);
}

.nu-search { margin: 10px 0; }
.nu-search--wide { flex: 1; margin: 0; }

.nu-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.nu-note--tight { margin-top: 10px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }
/* Warum ein Gewicht nicht gespeichert wurde (app/nutrition/weight.js). */
.nu-note--error { font-size: 12.5px; color: var(--danger); }

.nu-empty {
  padding: 14px 0;
  font-size: 13.5px;
  color: var(--text-faint);
}

.nu-empty a { color: var(--accent-app); text-decoration: underline; }

/* ---------- Popups ---------------------------------------------------------------- */

.pop--nu { width: min(460px, 100%); }
.pop--nu .pop__body { gap: 16px; }
.nu-body { max-height: 62dvh; overflow-y: auto; scrollbar-width: thin; }

/* EIN Rollbereich pro Fenster. Kopf, Reiter und Fußleiste stehen fest,
   nur der Körper rollt. Vorher rollte zusätzlich das Fenster selbst
   (max-height 88dvh), sobald Kopf + Körper + Fuß darüber lagen – zwei
   Balken nebeneinander, und der äußere kam und ging bei jeder kleinen
   Höhenänderung (z. B. beim Ziehen des Löffelreglers): das Fenster
   zitterte. Jetzt ist das Fenster eine Spalte ohne eigenes Rollen; der
   Körper nimmt den Rest und hält den Platz seines Balkens. */
.modal-panel.pop--nu:has(> .nu-body) { display: flex; flex-direction: column; overflow: hidden; }
.modal-panel.pop--nu:has(> .nu-body) > * { flex: none; }
.modal-panel.pop--nu > .nu-body { flex: 0 1 auto; min-height: 0; scrollbar-gutter: stable; }

.nu-tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.nu-tab {
  flex: 1;
  min-height: 42px;
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

.nu-tab.is-on { color: var(--accent-app); border-bottom-color: var(--accent-app); }

.nu-portion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* min-width: 0 auch an den Kindern: sonst bestimmt die breiteste Zeile
   (die fünf Makro-Kacheln) die Spalte, und das Fenster rollte seitlich. */
.nu-compose { display: grid; gap: 4px; min-width: 0; }
.nu-compose > * { min-width: 0; }
.nu-keep { display: grid; gap: 12px; margin-top: 6px; }

.nu-photo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nu-photo__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Auswahllisten ----------------------------------------------------------- */

.nu-picklist { display: grid; }

/* Zwei Wege aus einer Zeile: die Zeile selbst nimmt das Lebensmittel in
   den Tag, der Knopf rechts setzt es auf die Einkaufsliste. Sie liegen
   nebeneinander statt ineinander – ein Knopf in einem Knopf ist kein
   gültiges Markup und für Hilfstechnik nicht bedienbar. */
.nu-pickrow { display: flex; align-items: stretch; min-width: 0; }
.nu-pickrow .nu-pick { flex: 1; min-width: 0; }

.nu-pickshop {
  flex: none;
  width: 40px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(var(--o), .06);
  transition: background-color var(--dur) var(--ease-out);
}

.nu-pickshop img { width: 17px; opacity: .5; transition: opacity var(--dur) var(--ease-out); }
.nu-pickshop:hover { background: rgba(var(--o), .06); }
.nu-pickshop:hover img { opacity: .85; }

/* Aufgenommen: der Knopf blitzt einmal in der Bereichsfarbe auf.
   Schon vorhanden: derselbe Weg, nur in Grau – die Rückmeldung ist
   dieselbe Geste, die Aussage eine andere. */
.nu-pickshop.is-added img,
.nu-pickshop.is-known img { opacity: 1; }
.nu-pickshop.is-added { animation: nu-shop-in var(--dur-slow, .5s) var(--ease-out); }
.nu-pickshop.is-known { animation: nu-shop-known var(--dur-slow, .5s) var(--ease-out); }

@keyframes nu-shop-in {
  from { background: color-mix(in srgb, var(--accent-deep) 55%, transparent); }
  to   { background: transparent; }
}

@keyframes nu-shop-known {
  from { background: rgba(var(--o), .16); }
  to   { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .nu-pickshop.is-added, .nu-pickshop.is-known { animation: none; }
}

.nu-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(var(--o), .06);
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.nu-pick:hover { background: rgba(var(--o), .04); }
.nu-pick:active { background: rgba(var(--o), .07); }

.nu-pick__body { flex: 1; min-width: 0; }

.nu-pick__name {
  display: block;
  font-size: 14.5px;
  color: var(--g-08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-pick__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
}

.nu-pick__add {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--t-nutrition), .14);
  color: var(--accent-app);
  font-size: 18px;
  line-height: 1;
}

.nu-star { color: var(--c-journal); font-style: normal; }
.nu-heart { color: var(--c-cue-diary); font-style: normal; }

/* ---------- Entwurfszeilen (Zutaten) -------------------------------------------------- */

.nu-drafts { display: grid; gap: 10px; }

.nu-draft {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-deep);
  border-radius: 10px;
  background: var(--surface-2);
}

.nu-draft__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nu-draft__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--g-08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-draft__name i { font-style: normal; color: var(--text-faint); font-size: 12px; }

.nu-draft__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.nu-draft__macros { margin-top: 8px; }

/* ---------- Rezeptbuch ------------------------------------------------------------------ */

.nu-bookbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.nu-viewtoggle {
  display: flex;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}

.nu-viewbtn {
  min-height: 42px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-dim);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.nu-viewbtn.is-on { background: var(--accent-app); color: var(--ink); font-weight: 600; }

.nu-bookmeta {
  margin: 12px 0 4px;
  font-size: max(var(--fs-floor), 11.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nu-newrecipe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  margin-top: 10px;
  border: 1px dashed var(--accent-deep);
  border-radius: 10px;
  background: rgba(var(--t-nutrition), .05);
  font-size: 14.5px;
  color: var(--accent-app);
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-newrecipe:hover { background: rgba(var(--t-nutrition), .12); }
.nu-newrecipe:active { transform: scale(.98); }
.nu-newrecipe img { width: 19px; }

/* Neben dem neuen Rezept steht der Weg zu den Plänen – dorthin, wo
   aus Rezepten eine Woche wird. Er ist der ruhigere von beiden:
   durchgezogener Rand statt gestrichelt, kein Akzentton. */
.nu-bookacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.nu-bookacts .nu-newrecipe { margin-top: 0; }

.nu-meals { margin-top: 14px; display: grid; gap: 12px; }

.nu-meals--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nu-meal {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.nu-meal:hover { border-color: var(--accent-deep); transform: translateY(-2px); }

.nu-meal__link { display: block; }

.nu-meal--list .nu-meal__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.nu-meal__body { display: block; padding: 10px 12px 12px; min-width: 0; }
.nu-meal--list .nu-meal__body { padding: 0; flex: 1; }

.nu-meal__title {
  display: block;
  font-size: 14.5px;
  color: var(--g-06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-meal__meta {
  display: block;
  margin-top: 3px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-faint);
}

.nu-marks {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: flex;
  gap: 2px;
}

.nu-meal--list .nu-marks { position: static; margin-inline-end: 6px; }

.nu-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(var(--o-bg), .62);
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  transition: color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nu-meal--list .nu-mark { background: transparent; }
.nu-mark:active { transform: scale(.88); }
.nu-mark.is-on { color: var(--c-journal); }
.nu-mark--like.is-on { color: var(--c-cue-diary); }

/* ---------- Rezept: Detail ------------------------------------------------------------- */

.nu-hero { margin-top: 16px; display: grid; gap: 12px; }

.nu-hero__body {
  position: relative;
  display: grid;
  gap: 4px;
  padding-inline-end: 78px;
}

.nu-hero__body .nu-marks { top: -2px; inset-inline-end: 0; }

.nu-hero__title {
  font-size: clamp(19px, 5.4vw, 23px);
  font-weight: 500;
  color: var(--accent-app);
}

.nu-hero__meta { font-size: 12.5px; color: var(--text-faint); }

.nu-ingredients { display: grid; }

.nu-ingredient {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
  font-size: 14px;
}

.nu-ingredient:last-child { border-bottom: 0; }
.nu-ingredient__amount { color: var(--accent-app); font-weight: 600; font-size: 13px; }
.nu-ingredient__name { color: var(--g-09); overflow: hidden; text-overflow: ellipsis; }
.nu-ingredient__macros { font-size: 12px; color: var(--text-faint); }

.nu-doc { margin-top: 4px; }
.nu-doc--edit { min-height: 160px; }

/* ---------- Ernährungspläne -------------------------------------------------------------- */

.nu-plans { display: grid; gap: 10px; }

.nu-plan {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
}

.nu-plan.is-active { border-inline-start-color: var(--accent-app); }

.nu-plan__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--g-06);
}

.nu-plan__flag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-app);
  color: var(--ink);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nu-plan__meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-faint);
}

.nu-plan__acts { display: flex; align-items: center; gap: 6px; }
.nu-plan__acts .nu-btn { flex: 1; }

/* ---------- Plan-Editor: die Woche als Klappen ------------------------------
   Sieben Tage × vier Mahlzeiten liegen sonst gleichzeitig offen. Die
   Klappe zeigt je Tag eine Zeile – Kalorien und Anzahl –, und nur der
   Tag, an dem gearbeitet wird, ist aufgeschlagen. */

.nu-week { display: grid; gap: 8px; margin-top: 12px; }

.nu-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.nu-day.is-open { border-top: 1.5px solid var(--accent-app); }

.nu-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: none;
  text-align: start;
}

.nu-day__name { flex: 1; font-size: 14.5px; color: var(--g-09); }

.nu-day__meta {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Der Winkel dreht sich, statt zwei Zeichen zu brauchen. */
.nu-day__chev {
  flex: none;
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease-out);
}

.nu-day.is-open .nu-day__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.nu-day.is-open .nu-day__name { color: var(--accent-app); }

.nu-day__body {
  display: grid;
  gap: 12px;
  padding: 4px 12px 12px;
  border-top: 1px solid var(--line);
}

.nu-day__copy { justify-self: start; }

/* Ein Fach: eine Mahlzeit mit ihrer Liste. */
.nu-slot { display: grid; gap: 8px; }

.nu-slot__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nu-slot__name { flex: 1; font-size: 13.5px; color: var(--g-08); }

.nu-slot__kcal { font-size: 13px; font-weight: 600; color: var(--accent-app); }
.nu-slot__kcal i { font-style: normal; font-size: max(var(--fs-floor), 11px); color: var(--text-faint); }

.nu-hexmark--sm { width: 26px; height: 26px; --cut: 5px; }
.nu-hexmark--sm img { width: 13px; }

.nu-copydays { display: grid; gap: 2px; margin: 8px 0 4px; }

/* ---------- Gewicht ------------------------------------------------------------------------ */

.nu-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.nu-choice {
  flex: 1 1 100px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.nu-choice.is-on {
  background: var(--accent-app);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

.nu-weights { display: grid; }

.nu-weight {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.nu-weight:last-child { border-bottom: 0; }

.nu-weight__value { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent-app); }
.nu-weight__date { display: block; font-size: 13.5px; color: var(--g-09); }
.nu-weight__note { display: block; font-size: 12px; color: var(--text-faint); }

/* ---------- Lebensmitteldatenbank ------------------------------------------------------------ */

.nu-foods { display: grid; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }

.nu-food {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.nu-food:last-child { border-bottom: 0; }

.nu-food__name {
  display: block;
  font-size: 14px;
  color: var(--g-08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-food__name i { font-style: normal; color: var(--text-faint); font-size: 12px; }

.nu-food__meta {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-faint);
}

.nu-food__acts { display: flex; gap: 4px; }

/* ---------- Ampel und Bewertung ------------------------------------------------------------------ */

.nu-lights { display: inline-flex; gap: 3px; vertical-align: middle; }

.nu-light {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
}

.nu-score {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #08120c;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 800;
  line-height: 1;
}

.nu-rates { display: grid; margin-top: 10px; }

.nu-rate {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
  font-size: 13px;
}

.nu-rate:last-child { border-bottom: 0; }
.nu-rate.is-unknown { opacity: .5; }
.nu-rate__label { color: var(--g-09); }
.nu-rate__value { color: var(--text-dim); font-size: 12.5px; }
.nu-rate__level { font-size: max(var(--fs-floor), 11.5px); font-weight: 600; text-transform: uppercase; }

/* ---------- Mikronährstoffe ---------------------------------------------------------------------- */

.nu-micros { display: grid; gap: 12px; }

.nu-micro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: baseline;
}

.nu-micro.is-unknown { opacity: .45; }

.nu-micro__label { font-size: 13.5px; color: var(--g-09); }
.nu-micro__label b { color: var(--c-fitness); font-size: max(var(--fs-floor), 11px); text-transform: uppercase; }
.nu-micro__value { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); white-space: nowrap; }

.nu-micro__track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--o), .07);
  overflow: hidden;
}

.nu-micro__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}

/* Warnung über knappen Nährstoffen */
.nu-warn {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--t-fitness-stroke), .45);
  border-radius: 10px;
  background: rgba(var(--t-fitness-stroke), .10);
}

.nu-warn__mark {
  width: 18px;
  height: 18px;
  background: var(--c-fitness);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.nu-warn__body { display: grid; gap: 2px; min-width: 0; }
.nu-warn__title { font-size: 13.5px; color: #ffd9d9; }
.nu-warn__hint { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* Einstellungszeilen je Nährstoff */
.nu-microsets { display: grid; gap: 4px; }

.nu-microset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
  opacity: .55;
  transition: opacity var(--dur) var(--ease-out);
}

.nu-microset:last-child { border-bottom: 0; }
.nu-microset.is-on { opacity: 1; }

.nu-check--tight { min-height: 36px; font-size: 13.5px; }

.nu-microset__goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
}

.nu-microset__goal .nu-input { min-height: 36px; padding: 6px 8px; font-size: 16px; }
.nu-microset__goal i { font-style: normal; font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* ---------- Diagramme ---------------------------------------------------------------------------- */

.nc-donut {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.nc-ring { width: 100%; height: auto; }
.nc-ring__value { fill: var(--g-04); font-size: 30px; font-weight: 700; font-family: var(--font-mono); }
.nc-ring__unit { fill: var(--g-30); font-size: max(var(--fs-floor), 9.5px); font-family: var(--font-mono); }

.nc-legend { display: grid; gap: 8px; min-width: 0; }

.nc-legend--row {
  grid-auto-flow: column;
  justify-content: start;
  gap: 16px;
  margin-top: 10px;
}

.nc-legend__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.nc-legend--row .nc-legend__row { grid-template-columns: 10px auto; }

.nc-legend__dot { width: 10px; height: 10px; border-radius: 3px; }
.nc-legend__label { color: var(--g-09); }
.nc-legend__value { grid-column: 2; font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }
.nc-legend--row .nc-legend__value { display: none; }

.nc-goal {
  stroke: rgba(var(--o), .45);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

/* „goal 2000" steht über dem letzten Balken – eine Kontur in der Farbe
   des Diagrammkastens hebt die Schrift vom Balken ab. */
.nc-goal__label {
  paint-order: stroke;
  stroke: var(--field-bg, var(--g-47));
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* ---------- Statistik ----------------------------------------------------------------------------- */

.nu-headline {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--accent-app);
}

.nu-weightnow { display: grid; gap: 3px; }

.nu-weightnow__value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-app);
}

.nu-weightnow__meta { font-size: 12.5px; color: var(--text-faint); }

/* ---------- Kalorienrechner ------------------------------------------------------------------------ */

.nu-calc { display: grid; margin: 14px 0 4px; }

.nu-calc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.nu-calc__row:last-child { border-bottom: 0; }

.nu-calc__label { display: grid; gap: 1px; font-size: 13.5px; color: var(--g-09); }
.nu-calc__label i { font-style: normal; font-size: max(var(--fs-floor), 11px); color: var(--text-faint); }
.nu-calc__value { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }

.nu-calc__target {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 14px 0 4px;
  padding: 16px 12px;
  border: 1.5px solid var(--accent-app);
  border-radius: 12px;
  background: rgba(var(--t-nutrition), .06);
}

.nu-calc__big {
  font-family: var(--font-mono);
  font-size: clamp(30px, 9vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-app);
}

.nu-calc__unit {
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nu-calc__hint { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* ---------- Suchfläche, Open Food Facts, Scanner ---------------------------------------------------- */

.nu-search--picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  align-items: center;
  gap: 8px;
}

.nu-search--noscan { grid-template-columns: minmax(0, 1fr) auto; }

/* „+ New" neben der Suche: derselbe Sockelknopf wie jeder andere des
   Bereichs, nur in der Bereichsfarbe getönt – er ist der zweite Weg
   aus dieser Fläche, nicht der erste. Die volle Höhe des Suchfelds,
   damit die Reihe eine Linie bleibt. */
.nu-btn.nu-newfood {
  --btn-face: rgba(var(--t-nutrition), .16);
  --btn-face-hover: rgba(var(--t-nutrition), .26);
  height: 42px;
  min-height: 42px;
  padding: 0 12px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-app);
  white-space: nowrap;
}

.nu-newfood__plus { font-size: 18px; font-weight: 500; line-height: 1; }

/* „Create …" am Ende der Treffer: dieselbe Zeile wie ein Lebensmittel,
   damit der Blick sie beim Suchen mitnimmt – vorn statt des Bildes ein
   gestricheltes Feld mit Plus: hier fehlt noch etwas. */
.nu-pick--create .nu-pick__name { color: var(--accent-app); font-weight: 600; }

.nu-pick__new {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px dashed color-mix(in srgb, var(--accent-app) 60%, transparent);
  color: var(--accent-app);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--dur) var(--ease-out);
}

.nu-pick--create:hover .nu-pick__new { background: rgba(var(--t-nutrition), .14); }

.nu-empty + .nu-picklist { margin-top: 4px; }

.nu-icon--scan {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-2);
}

.nu-icon--scan:hover { border-color: var(--accent-deep); }

.nu-offbox {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.nu-offbox__head {
  margin-bottom: 4px;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nu-tagmark {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--t-nutrition), .16);
  color: var(--accent-app);
  font-size: max(var(--fs-floor), 10px);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.nu-pick__marks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.nu-pick--static { cursor: default; }
.nu-pick--static:hover { background: none; }

.nu-food__marks { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* Gruppen im Auswahldialog */
.nu-group + .nu-group { margin-top: 14px; }

.nu-group__head {
  margin-bottom: 2px;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nu-group--plan {
  padding: 10px 12px;
  border: 1px dashed var(--accent-deep);
  border-radius: 10px;
  background: rgba(var(--t-nutrition), .05);
}

.nu-group--plan .nu-group__head { color: var(--accent-app); }

/* Scanner */
.nu-scan__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--g-50);
  border: 1px solid var(--line);
}

.nu-scan__video { width: 100%; height: 100%; object-fit: cover; }

.nu-scan__frame {
  position: absolute;
  inset: 22% 12%;
  border: 2px solid var(--accent-app);
  border-radius: 10px;
  box-shadow: 0 0 0 2000px rgba(var(--o-bg2), .35);
}

.nu-scan__manual { display: grid; gap: 12px; }

/* Die zwei Auswege unter der Kamera: Nummer tippen, oder ganz ohne
   Strichcode anlegen. Nebeneinander, solange sie passen. */
.nu-scan__alts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nu-scan__manual .nu-scan__alts { margin-top: 0; }
.nu-scan__alts .nu-btn { flex: 1 1 150px; gap: 5px; }

.nu-scan__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.nu-scan__status {
  min-height: 20px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--accent-app);
}

.nu-scan__status.is-busy { color: var(--text-faint); }

.nu-scan__head {
  margin: 14px 0 2px;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Aufklappbare Abschnitte ---------------------------------------------------------------- */

.nu-details {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Der Kopf ist .la-fold (styles/components.css) wie jede „mehr davon"-
   Klappe; hier nur der Innenabstand der Karte und die Bereichsfarbe. */
.nu-details { --fold-accent: var(--c-nutrition); }
.nu-details > .la-fold__sum { padding-inline: 14px; }
.nu-details[open] > .la-fold__sum { margin-bottom: 14px; }

.nu-details__body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.nu-foodpic {
  max-height: 160px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.nu-foodpic img { width: 100%; height: 160px; object-fit: contain; }

/* Zeile mit Pfeil, die in einen Dialog führt */
.set-row[data-open-reminders] { cursor: pointer; }
.set-row[data-open-reminders]:hover { background: rgba(var(--o), .04); }
.nu-rowmark { color: var(--text-faint); font-size: 20px; line-height: 1; }

/* Erinnerungs-Banner erbt die Akzente des Bereichs. */
.nt-toast.nu {
  --accent-app: var(--c-nutrition);
  --accent-deep: var(--c-nutrition-stroke);
}

/* ---------- Schmale Geräte ---------------------------------------------------------------------- */

@media (max-width: 400px) {
  /* Ring und Legende nebeneinander wird zu eng – untereinander bleibt
     beides lesbar. */
  .nc-donut { grid-template-columns: 1fr; justify-items: center; }
  .nc-ring { max-width: 190px; }
  .nc-legend { width: 100%; }
  .nc-legend--row { grid-auto-flow: row; justify-content: stretch; gap: 6px; }
}

@media (max-width: 360px) {
  .nu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nu-meals--grid { grid-template-columns: 1fr; }
  .nu-grid2 { grid-template-columns: 1fr; }
  .nu-item__row { grid-template-columns: 1fr; }
  .nu-microset { grid-template-columns: minmax(0, 1fr) 96px; }
}

/* =========================================================
   Rezeptbuch: das eine Raster, das mitwachsen darf

   Am Telefon sind es zwei feste Spalten – die Karte mit Bild und
   Nährwerten braucht rund 170px, zwei davon füllen die 350px in der
   Hand genau aus. Ab 640 hat das Raster mehr Platz, und statt zwei
   breitere Karten zu zeigen (Yazio zeigt sie nicht breiter, es zeigt
   mehr), zählt es einfach weiter: 3 auf dem Tablet, 4 auf dem
   Rechner.

   auto-fill statt auto-fit: bei drei Rezepten sollen drei Karten in
   ihrer Breite stehenbleiben und nicht auf die halbe Seite gezogen
   werden.

   Der Bildschirm des Rezeptbuchs nimmt dafür --shell ganz – siehe
   die Ausnahmeliste bei .mnt in styles/components.css. Das einzelne
   Rezept und der Editor bleiben Fluss.
   ========================================================= */

@media (min-width: 640px) {
  .nu-meals--grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}


/* =========================================================
   TEIL 2 – Der neugebaute Tagesbildschirm

   Alles ab hier gehört zum Umbau: die Formen, die es vorher
   nicht gab (Sechseck-Ring, Mahlzeitzeile, Gläserreihe), und
   danach ein Block, der die alten Regeln darüber auf die
   Formensprache zurückholt.

   Warum der Korrekturblock am ENDE steht und nicht oben in den
   Regeln selbst: er soll gewinnen. Eine spätere Regel gleicher
   Spezifität sticht die frühere – und so steht in einer einzigen
   Liste, was die Formensprache verlangt, statt an achtundvierzig
   Stellen verstreut.
   ========================================================= */

/* ---------- Datumszeile ---------------------------------------------------- */

.nu-datebar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px auto;
  align-items: center;
  gap: 6px;
  margin: 4px 0 18px;
}

.nu-datebar__body {
  display: grid;
  gap: 1px;
  padding: 4px 6px;
  border: 0;
  background: none;
  text-align: center;
  min-width: 0;
}

/* Das Datum war der hellste Fleck des Bildschirms – in der
   Akzentfarbe, 21px, fett. „Welcher Tag ist heute" ist aber die
   Frage, die man hier am seltensten hat. Also: normale Textfarbe,
   normale Größe. Der Akzent gehört dem Ring. */
.nu-datebar__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-datebar__sub { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

.nu-datebar__body:not([disabled]) .nu-datebar__sub { color: var(--accent-app); }
.nu-datebar__body[disabled] { cursor: default; }

/* Der Plan steht jetzt mit Namen da statt als stummes Zeichen –
   „welcher Plan" war vorher nur als Tooltip zu haben, und einen
   Tooltip hat ein Telefon nicht. */
.nu-planmark {
  --cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 116px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: max(var(--fs-floor), 11.5px);
  clip-path: var(--cut-clip);
}

.nu-planmark img { width: 14px; opacity: .8; }
.nu-planmark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-planmark.is-off { display: none; }

/* ---------- Der Ring: Kalorienbilanz --------------------------------------- */

.nu-budget { margin-bottom: 22px; }

/* Ein Knopf, aber einer, der eine Grafik umschließt – kein Sockel
   darunter, sonst stünde der Ring auf einem Podest. Er zählt zu den
   Zeilen, nicht zu den handelnden Knöpfen. */
.nu-budget__hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Die Makrobalken als Weg zu den Zielen: still wie vorher, nur beim
   Zeigen/Drücken ein Schimmer, damit es sich als Fläche zu erkennen gibt. */
.nu-budget__targets {
  display: block;
  margin: 0 -8px;
  padding: 2px 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nu-budget__targets:hover,
.nu-budget__targets:active { background: var(--surface); }
.nu-budget__targets:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* Der Weg zu den Zielen in Worten, unter den Balken: klein und rechts,
   unter den Zahlen, die er ändert. In voller Breite war er so laut wie
   eine Mahlzeit – der Ring bleibt der Blickfang. */
.nu-budget__change {
  display: flex;
  width: max-content;
  margin: 8px 0 0 auto;
  min-height: 32px;
  padding: 5px 11px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.nu-budget__change:hover { color: var(--text); }
.nu-budget__change > img { width: 13px; height: 13px; opacity: .7; }

/* ---------- Tagesziele: vier Schritte (app/nutrition/targets.js) ------------- */

/* Kopf eines Schritts: Nummer im Sechseck, Name, Ergebnis rechts. Die
   Nummer ist Information – die Reihenfolge IST die Rechnung. */
.nu-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sheet-fold__body > .sheet-free:first-child .nu-step { border-top: 0; margin-top: 4px; padding-top: 0; }
.nu-step__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 21px;
  flex: none;
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono);
  color: var(--ink);
  background: var(--c-nutrition);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.nu-step__t { font-size: 13px; font-weight: 600; color: var(--text); }
.nu-step__v {
  margin-inline-start: auto;
  font: 500 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Das Tempo als Leiste: fünf Stufen von Heavy cut bis Heavy bulk. */
.nu-pace { display: grid; gap: 6px; padding: 4px 0; }
.nu-pace__track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.nu-pace__step,
.nu-pace__own {
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nu-pace__step {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 46px;
  padding: 6px 2px;
}
.nu-pace__step b { font-size: 12px; font-weight: 600; }
.nu-pace__step i { font: max(var(--fs-floor), 10px)/1 var(--font-mono); font-style: normal; color: var(--text-subtle); }
/* Fünf schmale Zellen: ein langes Wort einer anderen Sprache läuft nie hinaus. */
.nu-pace__step { min-width: 0; }
.nu-pace__step b, .nu-pace__step i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-pace__step:hover,
.nu-pace__own:hover { color: var(--text); background: var(--surface-2); }
.nu-pace__step.is-on {
  background: var(--c-nutrition);
  color: var(--ink);
}
.nu-pace__step.is-on i { color: var(--ink); opacity: .7; }
.nu-pace__own { min-height: 34px; font-size: 12.5px; }
.nu-pace__own.is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--c-nutrition); }
.nu-pace__step:focus-visible,
.nu-pace__own:focus-visible { outline: 2px solid var(--c-nutrition); outline-offset: 2px; }
.nu-pace__out {
  margin: 2px 0 0;
  font: max(var(--fs-floor), 11.5px)/1.4 var(--font-mono);
  color: var(--text-muted);
  text-align: center;
}

/* Das Ziel: die eine große Zahl der Gruppe. */
.nu-target {
  --cut: 10px;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  background: var(--surface-3);
  box-shadow: inset 0 2px 0 var(--c-nutrition);
  clip-path: var(--cut-clip);
}
.nu-target.is-hand { box-shadow: inset 0 2px 0 var(--text-subtle); }
.nu-target__num { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.nu-target__num b { font: 700 30px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.nu-target__num span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nu-target__chip {
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  padding: 5px 8px;
  color: var(--c-nutrition);
  background: color-mix(in srgb, var(--c-nutrition) 14%, transparent);
  white-space: nowrap;
}
.nu-target.is-hand .nu-target__chip { color: var(--text); background: var(--surface-2); }
.nu-target__eq,
.nu-target__warn {
  justify-self: stretch;
  margin: 0;
  font: max(var(--fs-floor), 11.5px)/1.4 var(--font-mono);
  color: var(--text-muted);
}
.nu-target__warn { font-family: var(--font); color: var(--state-over, var(--text-muted)); }

/* Die Aufteilung als ein Balken – Anteile an den Kalorien. */
.nu-splitbar { display: flex; height: 8px; gap: 2px; margin: 8px 0 4px; }
.nu-splitbar span { display: block; min-width: 2px; }

/* ---------- Einrichten beim ersten Mal --------------------------------------- */

.nu-setup { max-height: min(90vh, 760px); overflow-y: auto; }
.nu-setup__body { display: grid; gap: 14px; }
.nu-setup__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.nu-setup__dots li { height: 3px; background: var(--surface-3); }
.nu-setup__dots li.is-done,
.nu-setup__dots li.is-on { background: var(--c-nutrition); }
.nu-setup__dots span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.nu-setup .nu-setup__modes { grid-template-columns: 1fr; }
.nu-setup .nu-setup__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nu-setup .pf-choice small {
  display: block;
  margin-top: 3px;
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
}
.nu-setup .nu-setup__modes .pf-choice {
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  padding: 10px 12px;
}
.nu-setup__result {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.nu-setup__result b { font: 700 16px/1 var(--font-mono); color: var(--text); }
.nu-setup__own { display: grid; gap: 10px; }
.nu-setup__macros { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nu-setup__macros li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
}
.nu-setup__macros i { height: 22px; }
.nu-setup__macros span { font-size: 13px; }
.nu-setup__macros small { display: block; font: max(var(--fs-floor), 10.5px)/1.3 var(--font-mono); color: var(--text-subtle); }
.nu-setup__macros b { font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.nu-setup__foot { margin-top: 4px; }

/* Protein und Fett zum Tippen: ein schmales Feld an der Stelle der Zahl. */
.nu-setup__gram { display: flex; align-items: center; gap: 6px; }
.nu-setup__gram .acct-input {
  width: 72px;
  min-height: 36px;
  padding: 6px 8px;
  text-align: end;
  font: 600 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.nu-setup__gram span { font: 600 13px/1 var(--font-mono); color: var(--text-muted); }

/* Eigene Kalorien: leise angeboten, mit dem Preis davor. */
.nu-setup__ownbtn { justify-self: start; }
.nu-setup__kcal {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--state-over, var(--text-subtle));
}
.nu-setup__risk { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.nu-setup__risk b { color: var(--text); font-weight: 600; }

/* ---------- Tagesziele seit 0.6.0 beta: Überblick, Kette, ein Fenster je Schritt -----
   Im Sheet steht nur noch das Ergebnis mit seiner Rechnung und darunter
   die fünf Schritte als Kette; jeder öffnet sein eigenes Fenster
   (.nu-flow), unten darin dieselbe Rechnung, die beim Wählen mitgeht. */

.nu-target__top {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Die Rechnung: Verbrauch ± Tempo = Ziel. Drei Felder, zwei Zeichen. */
.nu-eq {
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: stretch;
  gap: 5px;
}
.nu-eq__t {
  --cut: 6px;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px 6px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nu-eq__t b {
  font: 600 13.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.nu-eq__t i {
  font: 400 max(var(--fs-floor), 10.5px)/1.1 var(--font);
  font-style: normal;
  color: var(--text-subtle);
  white-space: nowrap;
}
.nu-eq__t--sum b { color: var(--text-strong); }
.nu-eq__t.is-focus {
  background: color-mix(in srgb, var(--c-nutrition) 16%, var(--surface-2));
  box-shadow: inset 0 2px 0 var(--c-nutrition);
}
.nu-eq__t.is-focus i { color: var(--text-muted); }
.nu-eq__t.is-muted b { color: var(--text-muted); }
.nu-eq__op {
  align-self: center;
  font: 600 14px/1 var(--font-mono);
  color: var(--text-subtle);
}
.nu-eq__empty { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* Unter dem Balken: die Gramm in den Farben der Makros. */
.nu-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.nu-legend li { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-muted); }
.nu-legend i { align-self: center; width: 8px; height: 8px; flex: none; }
.nu-legend b { font: 600 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.nu-target .nu-splitbar { justify-self: stretch; margin: 2px 0 0; }

/* Die Kette: fünf Schritte, verbunden durch eine Linie durch die Sechsecke. */
.nu-chain { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.nu-chain__item { position: relative; }
.nu-chain__item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-start: 21px;
  top: 50%;
  height: calc(100% + 2px);
  width: 2px;
  background: color-mix(in srgb, var(--c-nutrition) 35%, var(--line-strong));
  pointer-events: none;
}
.nu-chain__row {
  --cut: 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  clip-path: var(--cut-clip);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nu-chain__row .nu-step__n { position: relative; z-index: 2; }
.nu-chain__row:hover { background: var(--surface-2); }
.nu-chain__row:hover .sheet-row__chev { border-color: var(--c-nutrition); }
.nu-chain__row:active { background: var(--surface-3); }
.nu-chain__row:focus-visible { outline: 2px solid var(--c-nutrition); outline-offset: -2px; }
.nu-chain__text { display: grid; gap: 3px; min-width: 0; }
.nu-chain__text b { font-size: 14px; font-weight: 600; color: var(--text); }
.nu-chain__text small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nu-chain__val {
  font: 600 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
/* Fehlt etwas, sagt die Zeile es in der Farbe des Bereichs. */
.nu-chain__row.is-due { background: color-mix(in srgb, var(--c-nutrition) 10%, transparent); }
.nu-chain__row.is-due .nu-chain__text b { color: var(--c-nutrition); }

/* ---------- Das Fenster eines Schritts ------------------------------------------ */

.nu-flow { display: flex; flex-direction: column; overflow: hidden; }
.nu-flow > [data-flow] { display: flex; flex-direction: column; min-height: 0; }
.nu-flow .nu-setup__body { gap: 16px; padding-bottom: 16px; }
.nu-flow__where {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-subtle);
}
.nu-flow__lead { margin: -6px 0 0; }
.nu-flow__under { margin-top: -8px; }

/* Unten fest: die Rechnung, dann Cancel · Save. */
.nu-flow__dock {
  flex: none;
  display: grid;
  gap: 12px;
  padding: 12px 20px 18px;
  box-shadow: inset 0 1px 0 var(--line-strong);
}
.nu-flow__dock .nu-setup__foot { margin-top: 0; }
.nu-flow__sum { display: grid; gap: 6px; }
.nu-flow__basal { margin: 0; font-size: 12px; color: var(--text-muted); }
.nu-flow__basal b { font: 600 12.5px/1 var(--font-mono); color: var(--text); }

/* Große Wahlen: Name oben, ein Satz darunter, linksbündig. */
.nu-flow .pf-choice { text-align: start; }
.nu-flow .pf-choice__t { display: block; }
.nu-flow .pf-choice small {
  display: block;
  margin-top: 3px;
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
}
.nu-flow .pf-choice.is-on small { color: var(--text); }
.nu-flow .nu-flow__acts,
.nu-flow .nu-flow__two,
.nu-flow .nu-flow__presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nu-flow .nu-setup__modes .pf-choice,
.nu-flow .nu-flow__acts .pf-choice,
.nu-flow .nu-flow__two .pf-choice,
.nu-flow .nu-flow__presets .pf-choice {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 11px;
}
/* Trainingstage: acht kleine Knöpfe in einer Reihe, 0 bis 7. */
.nu-flow .nu-flow__days { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 0 3px 3px 0; }
.nu-flow .nu-flow__days .pf-choice {
  min-height: 42px;
  padding: 0;
  text-align: center;
  font: 600 14px/1 var(--font-mono);
}
.nu-flow .nu-flow__calc li { padding-inline-start: 0; }

/* Das Tempo im Fenster: Richtung über der Leiste, Zahl in jeder Stufe. */
.nu-flow .nu-flow__pace { margin: 0; gap: 8px; }
.nu-pace__ends {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.nu-pace__ends::before {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--c-nutrition), var(--line-strong));
}
.nu-pace__ends span:last-child { order: 2; }
.nu-flow .nu-pace__step { min-height: 64px; gap: 3px; padding: 8px 2px; }
.nu-flow .nu-pace__step em {
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.nu-flow .nu-pace__step.is-on em { color: var(--ink); }
.nu-flow .nu-pace__own { margin-top: 0; }
.nu-flow__out {
  margin: -6px 0 0;
  font: 12px/1.4 var(--font-mono);
  color: var(--text-muted);
  text-align: center;
}

/* Makros im Fenster: Balken mit Legende, Felder rechts. */
.nu-flow__bar { display: grid; gap: 8px; }
.nu-flow__bar .nu-splitbar { margin: 0; height: 10px; }
.nu-flow .nu-setup__macros li { grid-template-columns: 8px minmax(0, 1fr) auto; min-height: 52px; }
.nu-flow__pin { display: flex; align-items: center; gap: 6px; }
.nu-flow .nu-setup__gram .acct-input { width: 68px; }
.nu-flow .nu-setup__gram span { min-width: 18px; }
/* Beim Protein sagt der Schalter daneben die Einheit – nicht zweimal. */
.nu-flow__pin .nu-setup__gram span { display: none; }

/* g ⇄ g/kg: zwei Segmente, flach wie jeder Segmentschalter. */
.nu-unit { display: inline-grid; grid-template-columns: auto auto; gap: 2px; }
.nu-unit__b {
  min-width: 34px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text-muted);
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono);
  cursor: pointer;
}
.nu-unit__b.is-on { background: var(--c-nutrition); color: var(--ink); }
.nu-unit__b:focus-visible { outline: 2px solid var(--c-nutrition); outline-offset: 2px; }

@media (max-width: 360px) {
  .nu-eq__t { padding-inline: 6px; }
  .nu-eq__t b { font-size: 12px; }
  .nu-flow .nu-setup__gram .acct-input { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .nu-pace__step, .nu-pace__own { transition: none; }
  .nu-eq__t, .nu-chain__row { transition: none; }
}

.nc-hex {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) minmax(0, 196px) minmax(52px, 1fr);
  align-items: center;
  gap: 4px;
}

.nc-hex__ring { grid-column: 2; grid-row: 1; width: 100%; height: auto; }
.nc-hex__side--in  { grid-column: 1; grid-row: 1; }
.nc-hex__side--out { grid-column: 3; grid-row: 1; }

.nc-hex__side { display: grid; gap: 2px; text-align: center; }

.nc-hex__num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.nc-hex__cap {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Die eine Zahl. Sie ist mit Abstand das Größte auf dem Bildschirm –
   das ist Absicht und der ganze Zweck des Blocks. */
.nc-hex__value {
  fill: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
}

.nc-hex__unit {
  fill: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .04em;
}

/* Über dem Ziel wechselt nicht nur die Farbe, sondern auch der Text
   („kcal over" statt „kcal left") – Farbe allein wäre für jeden, der
   sie nicht unterscheidet, gar keine Ansage. */
.nc-hex.is-over .nc-hex__value { fill: var(--state-over); }

.nc-hex__arc { transition: stroke-dasharray var(--dur-slow) var(--ease-out); }

/* ---------- Die drei Makrobalken ------------------------------------------- */

.nu-mini { display: grid; gap: 9px; margin-top: 16px; }
.nu-mini--solo { margin-top: 4px; }

.nu-mini__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

/* Die Spalte der Namen ist so breit wie der längste – „Kohlenhydrate"
   bricht sonst mitten im Wort. Alle Zeilen teilen sie (subgrid), damit
   die Balken bündig beginnen. */
@supports (grid-template-columns: subgrid) {
  .nu-mini { grid-template-columns: minmax(62px, max-content) minmax(0, 1fr) auto; column-gap: 10px; }
  .nu-mini__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

.nu-mini__label { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

.nu-mini__track {
  height: 5px;
  background: var(--grid-line);
  overflow: hidden;
}

.nu-mini__fill {
  display: block;
  height: 100%;
  transition: width var(--dur-slow) var(--ease-out);
}

.nu-mini__value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}

.nu-mini__value i { font-style: normal; color: var(--text-subtle); }
.nu-mini__row.is-over .nu-mini__value { color: var(--state-over); }

/* ---------- Mahlzeiten als Zeilen ------------------------------------------ */

.nu-mealist { display: grid; gap: 8px; }

.nu-mealrow {
  --cut: 12px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.nu-mealrow__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;
}

/* Die ganze Zeile ist das Ziel, nicht nur das kleine Pluszeichen –
   56px hoch, damit ein Daumen sie trifft. Sie ist eine Zeile und
   damit eine Fläche: kein Sockel, keine eigene Kontur. */
.nu-mealrow__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px 8px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
  min-width: 0;
}

.nu-mealrow__hit:hover { background: rgba(var(--o), .04); }

.nu-mealrow__name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-mealrow__kcal {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.nu-mealrow__kcal i {
  font-style: normal;
  margin-inline-start: 4px;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
}

/* Ohne Eintrag steht dort kein „0" – eine Null ist eine Messung,
   „noch nichts" ist der Zustand. */
.nu-mealrow__kcal i:only-child {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
}

/* Der Plus-Knopf HANDELT – also Rechteck mit Sockel. */
/* Das „+" einer Mahlzeit: getönt wie das „+" einer Kachel auf Home –
   derselbe Knopf, dieselbe Handlung („trag hier etwas ein"). */
.nu-mealrow__add {
  --depth: 2.5px;
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  filter: var(--tint-glow);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 36px;
  height: 36px;
  margin-inline-end: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nu-mealrow__add::before,
.nu-mealrow__add::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.nu-mealrow__add::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nu-mealrow__add::after { background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface)); }
.nu-mealrow__add:hover::after { background: var(--btn-face-hover); }
.nu-mealrow__add:active { transform: translate(var(--depth), var(--depth)); }
.nu-mealrow__add:active::before { opacity: 0; }
.nu-mealrow__add img { width: 16px; opacity: .85; }
.nu-mealrow__add::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }
.nu-mealrow__add .la-glyph { width: 16px; height: 16px; }

/* Das Zeichen einer Mahlzeit. Klein, aber dieselbe Silhouette wie
   alles andere – bei 34px läuft der 7px-Schnitt neben dem Symbol
   vorbei und nicht hindurch. */
.nu-hexmark {
  --cut: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--mark, rgba(var(--t-nutrition), .16));
  clip-path: var(--cut-clip);
}

.nu-hexmark img { width: 17px; opacity: .9; }

/* ---------- Einträge in einer aufgeklappten Mahlzeit ------------------------ */

.nu-mealrow .nu-entries { padding: 0 10px 8px; }

.nu-mealrow .nu-entry {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.nu-mealrow .nu-entry:last-child { border-bottom: 0; }

.nu-entry__body {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
  min-width: 0;
}

/* Die Geisterzeile aus dem Plan: dieselbe Form wie ein Eintrag, nur
   blass. Ein eigener Kasten mit eigenem Rahmen sagte dasselbe und
   kostete an einem leeren Tag viermal 64 Pixel. */
.nu-entry--ghost .nu-entry__title,
.nu-entry--ghost .nu-entry__meta { color: var(--text-subtle); }
.nu-entry--ghost .nu-thumb { opacity: .5; }
.nu-mealrow .nu-entry--ghost { grid-template-columns: 40px minmax(0, 1fr) auto; }

/* ---------- Wasser als Gläserreihe ------------------------------------------ */

.nu-block { margin-top: 22px; }

.nu-water { display: grid; gap: 8px; }

.nu-water__strip { display: flex; gap: 5px; }

/* Jedes Glas trägt 250 ml ein – es HANDELT, also Sockel. Kein
   Eckschnitt: dafür ist es zu schmal, der Schnitt fräse das halbe
   Glas weg. Ein Rechteck ist immer noch nicht rund. */
.nu-glass {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-lift: var(--g-42);

  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nu-glass::before,
.nu-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.nu-glass::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nu-glass::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

.nu-glass.is-on { --btn-face: var(--c-calendar); }
.nu-glass:hover::after { filter: brightness(1.2); }
.nu-glass:active { transform: translate(var(--depth), var(--depth)); }
.nu-glass:active::before { opacity: 0; }

.nu-water__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.nu-water__now {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.nu-water__now i { font-style: normal; color: var(--text-subtle); }
.nu-water__step { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

/* ---------- Abschnittsüberschrift und Zeile --------------------------------- */

.nu-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}

/* Zeichen vor der Überschrift, wo es eines gibt. Als Maske gezeichnet,
   damit es die Textfarbe der Zeile annimmt - ein zweites Grau neben dem
   der Überschrift wäre eines zu viel. Zentriert statt auf der
   Grundlinie: ein Symbol hat keine. */
.nu-sec__mark {
  width: 15px;
  height: 15px;
  flex: none;
  align-self: center;
  margin-inline-end: -4px;
  background: var(--text-muted);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* Die Überschrift teilt sich die Zeile jetzt mit dem Zeichen - beide
   zusammen links, der Wert rechts. */
.nu-sec > .nu-sec__mark + .nu-sec__title { margin-inline-end: auto; }

.nu-sec__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nu-seclink {
  /* 19 px hoch war zu knapp zum Treffen – innen Luft, außen zurück. */
  padding: 6px 0;
  margin: -6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-app);
  font-size: 12.5px;
  font-weight: 500;
}

.nu-seclink:hover { text-decoration: underline; }

.nu-row {
  --cut: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  background: var(--surface);
  text-align: start;
  color: var(--text);
  clip-path: var(--cut-clip);
}

.nu-row:hover { background: var(--surface-2); }

.nu-row__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
}

.nu-row__mark img { width: 18px; opacity: .7; }
.nu-row__body { flex: 1; display: grid; gap: 2px; min-width: 0; }

.nu-row__title { font-size: 14.5px; font-weight: 500; }

.nu-row__meta {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-row__value { font-family: var(--font-mono); font-size: 13px; }
.nu-row__tail { color: var(--text-subtle); font-size: 18px; line-height: 1; }

/* Die Mikronährstoffzeile nimmt Farbe NUR an, wenn wirklich etwas
   fehlt – und dann in der Fläche, nicht im Rand: ein Rand überlebt
   den Eckschnitt nicht (siehe components.css). */
.nu-row--micro.is-low { background: rgba(var(--t-fitness-stroke), .14); }
.nu-row--micro.is-low .nu-row__meta { color: var(--state-over); }
.nu-row--micro.is-low .nu-row__mark img { opacity: 1; }

/* ---------- Segmentschalter -------------------------------------------------- */

.nu-seg {
  --cut: 9px;
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  padding: 3px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

/* Ein Segment SCHALTET UM, es handelt nicht – also kein Sockel. Und
   keinen eigenen Schnitt: den trägt der Rahmen darum, sonst stünden
   drei Sechsecke in einem Sechseck. */
.nu-seg__item {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}

.nu-seg__item:hover { background: rgba(var(--o), .05); }

.nu-seg__item.is-on {
  background: var(--accent-app);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Aufschlüsselung im Tagesdetail ------------------------------------ */

.nu-splits { display: grid; }

.nu-split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.nu-split:last-child { border-bottom: 0; }
.nu-split__name { font-size: 13.5px; color: var(--text); }
.nu-split__macros { font-size: 12px; color: var(--text-subtle); text-align: end; }

.nu-drink__amount i {
  font-style: normal;
  margin-inline-start: 3px;
  font-size: max(var(--fs-floor), 11px);
  opacity: .7;
}


/* =========================================================
   TEIL 3 – Die Formensprache, nachgezogen

   Der Bereich trug achtundvierzig Stellen, die der Regel
   widersprachen: 38 × border-radius (darunter siebenmal 999px
   und zweimal 50 %) und neun Druckzustände, die den Knopf
   kleiner skalierten, statt ihn einsinken zu lassen.

   Die Regel, in einem Satz:

     Flächen bekommen zwei geschnittene Ecken – oben links und
     unten rechts, immer dieselbe Diagonale. Knöpfe sind rechte
     Winkel mit einem Sockel dahinter und sinken beim Druck um
     genau die Sockeltiefe ein. Nichts ist rund.

     Unter etwa 30px mit einem Zeichen darin entfällt der
     Schnitt – die Diagonale führe sonst durch das Zeichen. Ein
     Rechteck ist immer noch nicht rund.

   Warum das hier unten steht und nicht oben in den Regeln
   selbst: gleiche Spezifität, spätere Regel gewinnt. So steht
   die Entscheidung je Baustein an EINER Stelle und ist
   nachlesbar, statt über 1 400 Zeilen verteilt zu sein.

   Drei Fallen, die hier schon zugeschlagen haben:
     · clip-path schneidet border UND box-shadow mit weg. Eine
       Kontur muss deshalb als zweite Lage dahinter liegen.
     · z-index:-1-Pseudoelemente brauchen isolation:isolate am
       Element, sonst schluckt sie der nächste Stapelkontext –
       ein Popup zum Beispiel.
     · Jeder neue Sockel braucht eine E-ink-Fassung, sonst
       verschwindet er auf Papier (styles/eink.css).
   ========================================================= */

/* ---------- Knöpfe: rechter Winkel, Sockel dahinter ------------------------ */

/* Die gemeinsame Grundlage. Jeder Knopf des Bereichs holt sie sich,
   setzt seine Tiefe und seine beiden Farben – und sonst nichts. */
.nu-icon,
.nu-btn,
.nu-quick,
.nu-mark,
.nu-choice,
.nu-newrecipe,
.nu-pick__add {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}


.nu-icon::before,     .nu-icon::after,
.nu-btn::before,      .nu-btn::after,
.nu-quick::before,    .nu-quick::after,
.nu-mark::before,     .nu-mark::after,
.nu-choice::before,   .nu-choice::after,
.nu-newrecipe::before,.nu-newrecipe::after,
.nu-pick__add::before,.nu-pick__add::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* KEIN clip-path. Ein Rechteck mit geschnittenen Ecken ist ein
     Sechseck – und Sechsecke sind in dieser App Flächen, nicht
     Knöpfe. Der Schnitt an dieser Stelle wäre genau der Fehler,
     den die ganze Unterscheidung verhindern soll. */
}

.nu-icon::before,
.nu-btn::before,
.nu-quick::before,
.nu-mark::before,
.nu-choice::before,
.nu-newrecipe::before,
.nu-pick__add::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nu-icon::after,
.nu-btn::after,
.nu-quick::after,
.nu-mark::after,
.nu-choice::after,
.nu-newrecipe::after,
.nu-pick__add::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

.nu-icon:hover::after,
.nu-btn:hover::after,
.nu-quick:hover::after,
.nu-mark:hover::after,
.nu-choice:hover::after,
.nu-newrecipe:hover::after,
.nu-pick__add:hover::after { background: var(--btn-face-hover); }

/* Eingedrückt: der Knopf wandert auf den Sockel, der Sockel geht weg.
   Ein Knopf, der beim Druck nicht sichtbar einsinkt, ist ein
   Aufkleber. Vorher schrumpften diese neun auf 88–98 % – eine
   Bewegung, die in keiner Oberfläche der Welt etwas bedeutet. */
.nu-icon:active,
.nu-btn:active,
.nu-quick:active,
.nu-mark:active,
.nu-choice:active,
.nu-newrecipe:active,
.nu-pick__add:active { transform: translate(var(--depth), var(--depth)); }

.nu-icon:active::before,
.nu-btn:active::before,
.nu-quick:active::before,
.nu-mark:active::before,
.nu-choice:active::before,
.nu-newrecipe:active::before,
.nu-pick__add:active::before { opacity: 0; }

/* Die Tagespfeile sind ein Sonderfall und stehen deshalb NICHT in der
   Sockelgruppe darüber.

   Ihr Glyph IST ihr Hintergrund: die Fläche wird durch eine Maske
   (--m) zur Pfeilform gestanzt. Eine Maske schneidet aber alles mit,
   was das Element rendert – auch ::before und ::after. Ein Sockel
   dahinter würde also selbst zum Pfeil gestanzt und läge als zweiter,
   versetzter Pfeil darunter.

   Ein blanker Glyph ohne Fläche kann keinen Sockel tragen. Er bekommt
   deshalb den Druck, den ein Glyph tragen kann: er rutscht um die
   Sockeltiefe und wird dunkler. Kein Schrumpfen – eine Verkleinerung
   auf 90 % bedeutet in keiner Oberfläche etwas.

   Der border-radius von vorher war ohnehin wirkungslos: eine Maske
   hatte die Ecken längst weggenommen. */
.nu-arrow {
  --depth: 1.5px;
  border-radius: 0;
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nu-arrow:active { transform: translate(var(--depth), var(--depth)); }
.nu-arrow--flip { transform: scaleX(-1); }
.nu-arrow--flip:active {
  transform: scaleX(-1) translate(calc(var(--depth) * -1), var(--depth));
}

/* Abgeschaltet heißt: kein Sockel, keine Bewegung. WCAG nimmt
   abgeschaltete Bedienelemente vom Kontrastminimum aus. */
.nu-btn[disabled] { color: var(--text-disabled); }
.nu-btn[disabled]::before { opacity: 0; }
.nu-btn[disabled]:active { transform: none; }
.nu-btn[disabled]::after { background: var(--surface); }

/* Night Pond (0.6.0 beta): die Knöpfe der zweiten Reihe sind getönt wie
   das „+" auf Home – „Change targets", „Create your own …", die Plus-
   Knöpfe einer Auswahlzeile. Fläche im Ton, Kante in voller Stärke,
   Sockel im Ton (--tint-*, styles/pond.css). Primary und Danger
   darunter nehmen das zurück. */
.nu-btn,
.nu-newrecipe,
.nu-pick__add {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  filter: var(--tint-glow);
}

.nu-btn::after,
.nu-newrecipe::after,
.nu-pick__add::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }

.nu-btn--primary::after { box-shadow: none; }
.nu-btn--danger::after { box-shadow: inset 0 0 0 1.5px rgba(var(--t-fitness-stroke), .9); }
.nu-btn[disabled]::after { box-shadow: inset 0 0 0 1.5px rgba(var(--o), .12); }
.nu-btn--primary,
.nu-btn--danger,
.nu-btn[disabled] { filter: none; }

/* Der handelnde Knopf: Akzentfläche, dunkler Sockel, dunkle Schrift.
   #82f5cb trägt schwarze Glyphen mit 15:1 – auf hellem Grün ist
   helle Schrift der klassische Kontrastfehler. */
.nu-btn--primary {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
  font-weight: 600;
}

.nu-btn--danger {
  --btn-face: rgba(var(--t-fitness-stroke), .16);
  --btn-face-hover: rgba(var(--t-fitness-stroke), .28);
  color: var(--c-fitness);
}

.nu-btn--sm { --depth: 2px; }

.nu-icon { --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }
.nu-icon--danger { --btn-face-hover: rgba(var(--t-fitness-stroke), .22); }
.nu-icon--scan  { --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }

/* Stern und Herz: eingeschaltet trägt die Fläche die Aussage, nicht
   ein Rand – ein Rand überlebt weder Schnitt noch Sockel. */
.nu-mark { --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }
.nu-mark.is-on { --btn-face: rgba(var(--t-journal), .18); color: var(--c-journal); }
.nu-mark--like.is-on { --btn-face: rgba(var(--t-cue-diary), .18); color: var(--c-cue-diary); }

.nu-quick.is-on { --btn-face: var(--accent-deep); color: var(--on-accent); }
.nu-choice.is-on { --btn-face: var(--accent-deep); color: var(--on-accent); font-weight: 600; }

/* .nu-newrecipe: getönt wie jeder Knopf der zweiten Reihe (oben). */

/* Der Plus-Knopf einer Auswahlzeile stand auf border-radius:50 % –
   ein Kreis, mitten in einer App, in der nichts rund ist. */
.nu-pick__add { --depth: 2px; }

/* ---------- Flächen: zwei geschnittene Ecken -------------------------------- */

.nu-tile,
.nu-draft,
.nu-warn,
.nu-plan,
.nu-daycard,
.nu-calc__target,
.nu-group--plan,
.nu-scan__stage,
.nu-scan__frame,
.nu-details,
.nu-foodpic,
.nu-offbox,
.nu-meal,
.nu-viewtoggle {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.nu-tile        { --cut: 9px; }
.nu-draft       { --cut: 10px; }
.nu-warn        { --cut: 10px; }
.nu-plan        { --cut: 10px; }
.nu-daycard     { --cut: 9px; }
.nu-calc__target{ --cut: 12px; }
.nu-group--plan { --cut: 10px; }
.nu-scan__stage { --cut: 12px; }
.nu-scan__frame { --cut: 10px; }
.nu-details     { --cut: 10px; }
.nu-foodpic     { --cut: 10px; }
.nu-offbox      { --cut: 10px; }
.nu-meal        { --cut: 12px; }
.nu-viewtoggle  { --cut: 8px; }

/* Der aktive Plan trug seine Aussage auf einem linken Rand. Unter dem
   Schnitt bricht ein Rand auf beiden Diagonalen ab und lässt farbige
   Splitter stehen – also wandert sie in die Fläche. */
.nu-plan { border-inline-start: 0; }
.nu-plan.is-active { background: rgba(var(--t-nutrition), .10); }

/* Bilder: der Schnitt sitzt an der Kachel, nicht am Bild darin. Die
   Rezeptkachel hatte oben zwei runde Ecken und unten zwei eckige –
   eine Form, die es in dieser Sprache gar nicht gibt. */
.nu-thumb { --cut: 9px; border-radius: 0; clip-path: var(--cut-clip); }
.nu-thumb--lg   { --cut: 12px; border-radius: 0; }
.nu-thumb--hero { --cut: 14px; border-radius: 0; }

/* Innerhalb einer Kachel, die schon geschnitten ist, wäre ein zweiter
   Schnitt am Bild eine doppelte Kante. */
.nu-meal .nu-thumb { clip-path: none; }

/* Das Segment im Umschalter schneidet nicht selbst – der Rahmen
   darum tut es. Sonst stünden zwei Sechsecke in einem. */
.nu-viewbtn { border-radius: 0; clip-path: none; }

/* Eingabefelder sind Flächen.

   Ihr Fokus lag auf border-color, und ein Rand überlebt den Schnitt
   nicht. Ein <input> kann außerdem keine Pseudoelemente tragen, mit
   denen sich eine Kontur als zweite Lage bauen ließe. Also liegt der
   Fokus als innerer Schatten an: er folgt der Fläche und wird an den
   beiden Diagonalen mitgeschnitten – auf vier der sechs Kanten
   sichtbar, und damit deutlich genug, um die Tastaturbedienung nicht
   blind zu machen. */
.nu-input {
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.nu-input:focus {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

/* ---------- Unter der Größenschwelle: Rechteck, ohne Schnitt ---------------- */

/* Ein 5px hoher Balken mit einem 9px-Schnitt hätte keine Fläche mehr
   übrig. Ein Punkt von 8px auch nicht. Sie bleiben rechteckig – und
   damit weiterhin nicht rund, was der eigentliche Punkt ist. */
.nu-bar__track,
.nu-bar__fill,
.nu-micro__track,
.nu-micro__fill,
.nu-light,
.nc-legend__dot,
.nu-score,
.nu-plan__flag,
.nu-tagmark {
  border-radius: 0;
  clip-path: none;
}

/* Über dem Ziel: die eigene Zustandsfarbe statt der Fitness-Farbe,
   die vorher nur zufällig rot war. */
.nu-bar.is-over .nu-bar__fill { background: var(--state-over) !important; }

/* ---------- E-ink: jeder Sockel braucht seine Fassung ----------------------- */

/* Auf Papier ist ein voller schwarzer Sockel das schärfste Mittel –
   die Graustufen-Leiter dreht sich um, und ein --g-33 wäre dort ein
   heller Ton, also unsichtbar. */
html[data-eink] .nu-arrow,
html[data-eink] .nu-icon,
html[data-eink] .nu-btn,
html[data-eink] .nu-quick,
html[data-eink] .nu-mark,
html[data-eink] .nu-choice,
html[data-eink] .nu-newrecipe,
html[data-eink] .nu-pick__add,
html[data-eink] .nu-mealrow__add,
html[data-eink] .nu-glass {
  --btn-lift: #000000;
}

html[data-eink] .nu-btn--primary,
html[data-eink] .nu-quick.is-on,
html[data-eink] .nu-choice.is-on,
html[data-eink] .nu-mark.is-on,
html[data-eink] .nu-mark--like.is-on,
html[data-eink] .nu-glass.is-on {
  --btn-face: #1c1c1c;
  --btn-face-hover: #000000;
  color: var(--eink-paper);
}

html[data-eink] .nu-mark.is-on img,
html[data-eink] .nu-glass.is-on { filter: none; }

/* Der Ring: auf Papier trägt die Füllung Tinte, die Rinne bleibt
   hell. Ohne das stünden zwei Grautöne nebeneinander, die sich auf
   E-ink kaum unterscheiden. */
html[data-eink] .nc-hex__value { fill: #1c1c1c; }
html[data-eink] .nu-row--micro.is-low { background: #dcdbd9; }
html[data-eink] .nu-plan.is-active { background: #dcdbd9; }

/* Der Beschriftung unter der Zahl im Makro-Ring wurde es eng: das
   Sechseck ist an dieser Höhe schon schmaler als in der Mitte
   (x = r − dy/√3), und „kcal from macros" stieß rechts und links an
   die Kontur. Eine halbe Stufe kleiner, und sie läuft frei. */
.nc-ring__unit { font-size: max(var(--fs-floor), 8.5px); letter-spacing: -.01em; }


/* =========================================================
   TEIL 4 – Der Sockel darf nicht durchscheinen

   Auf Papier fiel auf, was im Dunkeln keiner sah: die
   Wassergläser waren ALLE schwarz, gefüllt wie leer.

   Der Grund ist die Bauweise des Knopfes selbst. Fläche und
   Sockel sind zwei gleich große Lagen; der Sockel liegt nur um
   --depth verschoben dahinter. Solange die Fläche deckend ist,
   sieht man vom Sockel genau den Streifen rechts unten, der
   herausschaut – das ist die Absicht.

   Ist die Fläche aber durchsichtig oder nur leicht getönt,
   scheint der Sockel auf voller Größe durch, und aus dem Knopf
   wird ein Block in der Sockelfarbe. Im Dunkeln war die
   Sockelfarbe ein dunkles Grau und das fiel nicht auf. Auf
   Papier ist sie Schwarz, und der Fehler stand sofort da.

   Zwei Sorten Knopf, zwei Lösungen:

     Zeichen ohne Fläche (Papierkorb, Stern, Herz) haben im
     Ruhezustand gar keinen Sockel. Er kommt erst beim
     Berühren – dann gibt es auch eine Fläche, die ihn deckt.

     Getönte Flächen (Glas, Neu-Knopf, Löschknopf) bekommen
     eine deckende Unterlage: der Farbton läuft als
     Verlaufsbild über eine volle Hintergrundfarbe. Der Ton
     bleibt, was er war, aber nichts scheint mehr hindurch.
   ========================================================= */

/* --- Sorte 1: Zeichen ohne eigene Fläche ------------------------------- */

.nu-icon::before,
.nu-mark::before { opacity: 0; }

.nu-icon:hover::before,
.nu-icon:focus-visible::before,
.nu-mark:hover::before,
.nu-mark:focus-visible::before,
.nu-mark.is-on::before { opacity: 1; }

/* --- Sorte 2: getönte Flächen brauchen eine deckende Unterlage --------- */

/* background-image trägt den Ton, background-color die Deckung. Damit
   bleibt --btn-face genau der Wert, der überall sonst gesetzt wird –
   die Regel muss nirgends doppelt gepflegt werden. */
.nu-newrecipe::after,
.nu-pick__add::after,
.nu-btn--danger::after,
.nu-mark.is-on::after,
.nu-glass::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
}

/* Die Gläser stehen auf dem Seitengrund, nicht auf einer Karte. */
.nu-glass { --btn-under: var(--bg); --btn-face: var(--line); }
.nu-glass.is-on { --btn-face: var(--c-calendar); }

/* Ein gefülltes Glas ist auf Papier Tinte, ein leeres bleibt Papier mit
   einer Kontur. Ohne diese Zeile trügen beide denselben Ton, und die
   Reihe könnte nicht mehr zählen, was sie zählen soll. */
html[data-eink] .nu-glass { --btn-face: #ffffff; --btn-under: var(--eink-paper); }
html[data-eink] .nu-glass.is-on { --btn-face: #1c1c1c; }
html[data-eink] .nu-glass::after { box-shadow: inset 0 0 0 1.5px #1c1c1c; }

/* Das letzte Feld der Reihe ist kein Glas, sondern der Weg ins
   Hydration-Fenster: breiter, getönt in der Farbe des Wassers, mit „+".
   Es muss sich von den Gläsern unterscheiden, sonst hält man es für
   das zehnte Glas. */
.nu-glass--more {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  --btn-face: color-mix(in srgb, var(--c-calendar) 26%, transparent);
  --btn-lift: color-mix(in srgb, var(--c-calendar) 55%, var(--bg));
}
.nu-glass--more img { width: 16px; height: 16px; }
.nu-glass--more:focus-visible { outline: 2px solid var(--c-calendar); outline-offset: 2px; }
html[data-eink] .nu-glass--more { --btn-face: #1c1c1c; --btn-lift: #000000; }
html[data-eink] .nu-glass--more img { filter: invert(1); }


/* =========================================================
   Bausteine: ein Lebensmittel ODER ein Meal

   Dieselbe Zeile im Plan-Fach und in den Bausteinen eines Meals –
   Menge und Einheit stehen darin, weil man sie dort ändert, wo sie
   stehen. Die Form ist die der Entwurfszeile (.nu-draft), damit
   nichts Neues zu lernen ist.
   ========================================================= */

.nu-items { display: grid; gap: 8px; }

.nu-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-deep);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Ein gelöschtes Lebensmittel lässt die Zeile stehen, blass. */
.nu-item.is-missing { border-inline-start-color: var(--line-strong); opacity: .65; }

.nu-item__top { display: flex; align-items: center; gap: 8px; }

.nu-item__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--g-08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* „meal" vor dem Namen: das hier ist keine Zutat, sondern etwas,
   das selbst aus Zutaten besteht. */
.nu-item__kind {
  padding: 1px 5px;
  border: 1px solid var(--accent-deep);
  border-radius: 3px;
  color: var(--accent-app);
  font-size: max(var(--fs-floor), 9.5px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nu-item__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.nu-item__macros { margin-top: 8px; }

/* Der Knopf, der eine Liste wachsen lässt. Gestrichelt, damit er
   nicht mit „Speichern" um die Aufmerksamkeit streitet. */
.nu-additem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: none;
  color: var(--text-dim);
  font-size: 13.5px;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.nu-additem:hover {
  border-color: var(--accent-deep);
  background: rgba(var(--t-nutrition), .08);
  color: var(--accent-app);
}

.nu-additem:active { transform: scale(.99); }
.nu-additem img { width: 15px; opacity: .8; }

/* =========================================================
   Ein Meal im Meal: die Klappe im Lesemodus

   Aufgeklappt stehen Zutaten und Schritte des Bausteins an Ort und
   Stelle – die Pizza lässt sich von einem Bildschirm kochen. Eine
   Ebene wird ausgebreitet, tiefer führt der Verweis hinein.
   ========================================================= */

.nu-ingredient--sub { display: block; padding: 0; }

.nu-sub summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}

.nu-sub summary::-webkit-details-marker { display: none; }

/* Die Klappe zeigt sich als Winkel vor dem Namen. */
.nu-sub summary .nu-ingredient__name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 7px;
  border-inline-end: 1.5px solid var(--accent-app);
  border-bottom: 1.5px solid var(--accent-app);
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease-out);
}

.nu-sub[open] summary .nu-ingredient__name::before { transform: rotate(45deg); }

.nu-sub__body {
  padding: 4px 0 12px 13px;
  border-inline-start: 1.5px solid var(--accent-deep);
  margin-inline-start: 3px;
}

.nu-sublist, .nu-substeps { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; }
.nu-sublist { list-style: none; }
.nu-substeps { padding-inline-start: 18px; }

.nu-sublist li, .nu-substeps li {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.nu-sublist li span { color: var(--accent-app); font-weight: 600; }
.nu-substeps__more { color: var(--text-faint); }

/* Wo dieses Meal drinsteckt – die Gegenrichtung der Verschachtelung. */
.nu-usedin { display: grid; gap: 2px; list-style: none; }

.nu-usedin a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
  color: var(--accent-app);
  font-size: 13.5px;
}

.nu-usedin li:last-child a { border-bottom: 0; }

/* Zeit und Schwierigkeit eines Rezepts – nur, was dasteht. */
.nu-recipemarks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.nu-recipemarks i {
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: max(var(--fs-floor), 11.5px);
  font-style: normal;
}

/* Zeit und Schwierigkeit stehen am Telefon untereinander – drei
   Chips und ein Zahlenfeld nebeneinander brechen auf 375px um. */
.nu-recipefields { display: grid; gap: 12px; margin-bottom: 12px; }

@media (min-width: 480px) {
  .nu-recipefields { grid-template-columns: 120px minmax(0, 1fr); }
}

.nu-seclabel { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* „Add all" steht unter den Vorschlägen und nimmt die ganze Breite –
   dieselbe gestrichelte Form wie der Hinzufügen-Knopf im Plan. */
.nu-mealrow .nu-entry--all { display: block; padding: 0 0 4px; border-bottom: 0; }
.nu-additem--tight { min-height: 38px; margin-top: 6px; font-size: 13px; }

/* Die Schritte eines Bausteins zählen sichtbar mit. */
.nu-substeps { list-style: decimal; }

/* =========================================================
   Sirup und Konzentrat: die Aufteilung des Glases

   Der Block erscheint NUR für Konzentrate. Für Wasser, Saft und
   Kaffee bleibt der Getränkedialog exakt so lang wie vorher.
   ========================================================= */

.nu-mix {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--c-calendar);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Beschriftung über die Reihe, nicht daneben: drei Verhältnisse und
   ein Zahlenfeld füllen die 390 Pixel sonst nicht mehr. */
.nu-mix__head { display: grid; gap: 6px; }

.nu-mix__label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nu-quicks--tight { margin: 0; gap: 6px; align-items: center; }

.nu-quick--sm { min-height: 32px; padding: 4px 12px; font-size: 12.5px; }

.nu-mix__pct { display: inline-flex; align-items: center; gap: 4px; }

.nu-mix__pct .nu-input {
  width: 58px;
  min-height: 32px;
  padding: 4px 8px;
  text-align: end;
}

.nu-mix__pct i { font-size: 12.5px; font-style: normal; color: var(--text-dim); }

.nu-mix__split {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.nu-mix__split strong { color: var(--g-09); font-weight: 600; }
.nu-mix__part { color: var(--accent-app); font-weight: 600; }
.nu-mix__part--water { color: var(--c-calendar); }

.nu-mixdefault { margin: 4px 0 10px; }

/* `hidden` muss gegen ein gesetztes `display` gewinnen – das Häkchen
   „Mixed with water" ist eine Flex-Zeile und bliebe sonst stehen,
   auch wenn das Lebensmittel gar kein Getränk ist. */
.nu-check[hidden], .nu-mixdefault[hidden] { display: none; }

.nu-drink__mix {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-faint);
}

/* ---------- Ziel: fünf Tempi und ein eigener Betrag -------------------------
   Fünf Knöpfe in einer Reihe, links abnehmen, rechts zunehmen – die
   Richtung steht als Skala darüber, damit „Heavy" nicht zweimal gleich
   aussieht. Es sind Knöpfe (.nu-choice): Rechteck mit Sockel, kein
   Schnitt. Die Zahl darunter ist das Tagesdefizit beim HEUTIGEN
   Gewicht und wandert mit, wenn es sich ändert. */

.nu-pace { display: grid; gap: 8px; margin: 16px 0 4px; }

.nu-pace__scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Die Linie zwischen den beiden Enden – ohne Pfeilspitzen aus Grafik,
   nur ein Verlauf von leise zu leise über den Akzent in der Mitte. */
.nu-pace__scale::before {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--accent-deep), var(--line-strong));
}
.nu-pace__scale span:last-child { order: 2; }

.nu-pace__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  /* Luft für den Sockel des letzten Knopfs */
  padding: 0 3px 3px 0;
}

.nu-pace__btn {
  min-width: 0;
  min-height: 60px;
  padding: 8px 2px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  font-size: max(var(--fs-floor), 11.5px);
  line-height: 1.15;
  text-align: center;
}

.nu-pace__name { text-wrap: balance; }

.nu-pace__kcal {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  color: var(--g-09);   /* --text-dim hielt auf der Knopffläche nur 4,1:1 */
  white-space: nowrap;
}
.nu-pace__btn.is-on .nu-pace__kcal { color: inherit; }
.nu-pace__btn[disabled] { opacity: .45; }
.nu-pace__btn[disabled]:active { transform: none; }

.nu-pace__hint { min-height: 2.6em; }

.nu-pace__own { margin-top: 6px; }

.nu-sign {
  display: grid;
  grid-template-columns: auto auto minmax(72px, 1fr);
  gap: 7px;
  align-items: stretch;
  padding-bottom: 3px;
}

.nu-sign__btn {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

.nu-sign__input { min-width: 0; font-family: var(--font-mono); }

@media (max-width: 360px) {
  .nu-pace__btn { font-size: max(var(--fs-floor), 10.5px); }
  .nu-sign__btn { padding: 0 9px; font-size: 12px; }
}

.nu-note--warn { color: var(--state-warn); }

/* ---------- Ungespeicherte Tagesziele --------------------------------------- */

.nu-unsaved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-app);
  animation: nu-unsaved-in var(--dur) var(--ease-out) both;
}

/* Ein kleines Quadrat statt eines Punkts – rund ist hier nichts. */
.nu-unsaved::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
}
.nu-unsaved[hidden] { display: none; }

@keyframes nu-unsaved-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Solange etwas offen ist, zieht „Save targets" den Blick auf sich. */
.mnt-card.is-dirty [data-save-goals] { animation: nu-save-nudge 1.6s var(--ease-out) 2; }

@keyframes nu-save-nudge {
  0%, 100% { transform: none; }
  12%      { transform: translate(var(--depth), var(--depth)); }
  24%      { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nu-unsaved,
  .mnt-card.is-dirty [data-save-goals] { animation: none; }
}

html[data-eink] .nu-unsaved { color: var(--text); }

/* =========================================================
   Snack und Supplements: eine Reihe, zwei Kacheln
   ---------------------------------------------------------
   Unter den drei Hauptmahlzeiten, mit mehr Abstand als zwischen
   ihnen: das Paar ist „zwischendurch", nicht die vierte Mahlzeit.
   Kacheln und die Fläche darunter sind FLÄCHEN – Eckschnitt, kein
   Sockel. Das „+" und der Haken sind KNÖPFE – Rechteck mit Sockel.
   ========================================================= */

.nu-pair { display: grid; gap: 8px; margin-top: 18px; }

.nu-pair__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nu-tile {
  --cut: 12px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  background: var(--surface);
  clip-path: var(--cut-clip);
  transition: background-color var(--dur) var(--ease-out);
}

/* Die offene Kachel trägt den Akzent als Fläche und als Kante unten –
   sie zeigt auf die Liste darunter. Kein Rand: den schnitte der
   clip-path an den Diagonalen weg. */
/* Offen: die Kachel bleibt auf ihrer Fläche und bekommt nur eine
   Akzentkante links – dieselbe Kante trägt die Fläche darunter, so
   liest man die beiden als ein Stück. Der Name nimmt die Akzentfarbe
   an. Die andere Kachel tritt zurück, statt dass die offene laut
   wird: das Hervorheben geschieht durch Ruhe ringsum. */
.nu-tile.is-on {
  background: linear-gradient(90deg, var(--accent-app) 0 3px, transparent 3px),
              var(--surface-2);
  background-repeat: no-repeat;
}
.nu-tile.is-on .nu-tile__name { color: var(--accent-app); }

.nu-pair.has-open .nu-tile:not(.is-on) { opacity: .5; }
.nu-pair.has-open .nu-tile:not(.is-on):hover { opacity: .8; }
.nu-tile { transition: background-color var(--dur) var(--ease-out),
                       opacity var(--dur) var(--ease-out); }

.nu-tile__hit {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 104px;
  padding: 12px 4px 12px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
}

.nu-tile__hit:hover { background: rgba(var(--o), .04); }

.nu-tile__name {
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-tile__value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.nu-tile__value i {
  margin-inline-start: 4px;
  font-style: normal;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
}

.nu-tile__value i:only-child { margin: 0; font-family: var(--font-ui); font-size: 12.5px; }

/* Fällig gegen genommen – kleine Quadrate, gefüllt, was erledigt ist. */
.nu-tile__meter { display: flex; flex-wrap: wrap; gap: 3px; }
.nu-tile__meter i {
  width: 9px;
  height: 9px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.nu-tile__meter i.is-on { background: var(--accent-app); }

.nu-tile__add { width: 44px; height: 44px; margin: 8px 8px 0 0; }

/* Was unter dem Paar aufklappt. Eine eigene Fläche, abgesetzt von
   den Kacheln: leicht in den Akzent getönt, mit derselben Kante links
   wie die offene Kachel, einem Kopf mit deren Namen – und einer
   Spitze, die hinauf auf genau diese Kachel zeigt. Die Spitze sitzt im
   Wrapper, weil der clip-path der Fläche alles außerhalb wegschnitte. */
.nu-pane-wrap {
  position: relative;
  animation: nu-pane-in var(--dur) var(--ease-out) both;
}

.nu-pane__notch {
  position: absolute;
  top: -8px;
  inset-inline-start: calc(25% - 9px);
  width: 18px;
  height: 9px;
  background: var(--accent-app);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.nu-pane-wrap--supps .nu-pane__notch { inset-inline-start: calc(75% - 5px); }

.nu-pane {
  --cut: 12px;
  padding: 0 12px 12px 15px;
  background: linear-gradient(90deg, var(--accent-app) 0 3px, transparent 3px),
              linear-gradient(180deg, var(--accent-app) 0 2px, transparent 2px),
              color-mix(in srgb, var(--accent-deep) 9%, var(--surface));
  background-repeat: no-repeat;
  clip-path: var(--cut-clip);
}

.nu-pane__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--line-strong);
}
.nu-pane__title {
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-app);
}
.nu-pane__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

@keyframes nu-pane-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.nu-pane .nu-entries { padding: 0; }
.nu-pane .nu-entry {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.nu-pane .nu-entry:last-child { border-bottom: 0; }
.nu-pane .nu-entry--ghost { grid-template-columns: 40px minmax(0, 1fr) auto; }
.nu-pane__empty { margin: 8px 0 0; }

/* ---------- Die Liste der Supplements ----------------------------------------- */

.nu-supps { display: grid; margin: 0; padding: 0; list-style: none; }

.nu-supp {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.nu-supp:last-child { border-bottom: 0; }
.nu-supp.is-extra { grid-template-columns: 44px minmax(0, 1fr) 36px; }

/* Der Haken HANDELT: Rechteck mit Sockel, eingedrückt, wenn genommen. */
.nu-supp__check {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--on-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nu-supp__check::before,
.nu-supp__check::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.nu-supp__check::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nu-supp__check::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
}
.nu-supp__check:hover::after { background: var(--btn-face-hover); }
.nu-supp__check:active { transform: translate(var(--depth), var(--depth)); }
.nu-supp__check:active::before { opacity: 0; }

/* Genommen: eingesunken und im Akzent – der Zustand bleibt sichtbar
   gedrückt, wie ein eingerasteter Schalter. */
.nu-supp.is-done .nu-supp__check {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-deep);
  transform: translate(var(--depth), var(--depth));
}
.nu-supp.is-done .nu-supp__check::before { opacity: 0; }
.nu-supp__check svg { width: 20px; height: 20px; }

.nu-supp__dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--accent-app);
}
.nu-supp__dot svg { width: 18px; height: 18px; }

.nu-supp__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: start;
}

.nu-supp__title {
  font-size: 14.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-supp__meta {
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nu-supp.is-done .nu-supp__title { color: var(--text-dim); }

.nu-supp__state {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
  white-space: nowrap;
}
.nu-supp.is-done .nu-supp__state { color: var(--accent-app); }
.nu-supp__state.is-late,
.nu-supp.is-missed .nu-supp__state { color: var(--state-warn); }

.nu-supps__empty { margin: 8px 0 4px; }
.nu-supps__warn { margin: 10px 0 0; }

.nu-supps__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 0 3px 3px 0;
}
.nu-supps__foot .nu-btn { flex: 1 1 120px; }

/* ---------- Das Regal ------------------------------------------------------------ */

.nu-block--first { margin-top: 14px; }
.nu-rows { display: grid; }

.nu-supprow__routine {
  display: block;
  margin-top: 2px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--accent-app);
}

.nu-pick--ing.is-on { opacity: .5; }

/* ---------- Der Editor ------------------------------------------------------------ */

.nu-serving {
  display: grid;
  grid-template-columns: minmax(56px, .8fr) minmax(0, 1.2fr);
  gap: 6px;
}

.nu-ings { display: grid; margin: 4px 0 10px; padding: 0; list-style: none; }

/* Name oben über die ganze Breite, darunter Menge · Einheit · Löschen,
   darunter der Hinweis (% NRV, Obergrenze). Bei 390 Pixeln passt ein
   langer Wirkstoffname nicht neben ein Zahlenfeld. */
.nu-ing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, 96px) 36px;
  grid-template-areas:
    "name name name"
    "amt  unit drop"
    "hint hint hint";
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.nu-ing:last-child { border-bottom: 0; }

.nu-ing__name { grid-area: name; font-size: 14px; color: var(--text); }
.nu-ing__amount { grid-area: amt; font-family: var(--font-mono); }
.nu-ing .fit-select,
.nu-ing__unit { grid-area: unit; }
.nu-ing__unit { font-size: 13px; color: var(--text-dim); }
.nu-ing .nu-icon { grid-area: drop; }
.nu-ing__hint { grid-area: hint; font-size: max(var(--fs-floor), 11.5px); line-height: 1.45; color: var(--text-faint); }
.nu-ing__hint:empty { display: none; }

.nu-routine { display: grid; gap: 10px; margin-top: 8px; }

.nu-daychips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 0 3px 3px 0;
}
.nu-daychip { min-width: 0; min-height: 40px; padding: 0; font-size: 12.5px; }

.nu-choices--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 4px 0 8px;
  padding: 0 3px 4px 0;
  scrollbar-width: none;
}
.nu-choices--scroll::-webkit-scrollbar { display: none; }
.nu-choice--sm { flex: none; min-height: 36px; padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }

.nu-owning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px auto;
  gap: 6px;
  align-items: stretch;
  padding-bottom: 3px;
}

.nu-textarea { min-height: 76px; resize: vertical; font: inherit; }

/* ---------- „From supplements" im Mikronährstoff-Popup ----------------------------- */

.nu-suppsum { display: grid; margin: 4px 0 10px; padding: 0; list-style: none; }

.nu-suppsum__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.nu-suppsum__row:last-child { border-bottom: 0; }
.nu-suppsum__label { color: var(--text-dim); }
.nu-suppsum__value { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.nu-suppsum__value i { margin-inline-start: 8px; font-style: normal; color: var(--accent-app); }

@media (prefers-reduced-motion: reduce) {
  .nu-pane-wrap { animation: none; }
  .nu-supp__check { transition: none; }
}

/* ---------- E-ink ------------------------------------------------------------------ */

html[data-eink] .nu-supp__check { --btn-lift: #000000; }
html[data-eink] .nu-supp.is-done .nu-supp__check {
  --btn-face: #1c1c1c;
  --btn-face-hover: #000000;
  color: var(--eink-paper);
}
html[data-eink] .nu-tile.is-on {
  background: linear-gradient(90deg, var(--text) 0 4px, transparent 4px), var(--surface-2);
  background-repeat: no-repeat;
}
html[data-eink] .nu-tile.is-on .nu-tile__name,
html[data-eink] .nu-pane__title { color: var(--text); }
html[data-eink] .nu-pane__notch { background: var(--text); }
html[data-eink] .nu-pane {
  background: linear-gradient(90deg, var(--text) 0 4px, transparent 4px),
              linear-gradient(180deg, var(--text) 0 2px, transparent 2px),
              var(--surface-2);
  background-repeat: no-repeat;
}
html[data-eink] .nu-supprow__routine,
html[data-eink] .nu-suppsum__value i,
html[data-eink] .nu-supp.is-done .nu-supp__state,
html[data-eink] .nu-supp__dot { color: var(--text); }
html[data-eink] .nu-tile__meter i.is-on { background: var(--text); }

/* ---------- „Add a food or meal", „Add an ingredient" -------------------------
   War ein gestrichelter Kasten mit 10px Radius – ein runder Knopf, und
   damit genau das, was die Formensprache ausschließt. Jetzt derselbe
   Knopf wie „Create your own …" (.nu-newrecipe): Rechteck, leise
   Akzentfläche, Sockel, sinkt beim Druck ein. */
.nu-additem {
  --depth: 2.5px;
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);

  position: relative;
  isolation: isolate;
  width: calc(100% - var(--depth));
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nu-additem::before,
.nu-additem::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.nu-additem::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nu-additem::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
}
.nu-additem:hover { border: 0; background: none; color: var(--text); }
.nu-additem:hover::after { background: var(--btn-face-hover); }
.nu-additem:active { transform: translate(var(--depth), var(--depth)); }
.nu-additem:active::before { opacity: 0; }

html[data-eink] .nu-additem { --btn-lift: #000000; --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }
.nu-additem::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }

/* =========================================================
   Was in einer Portion steckt (Portions-Popup)

   Jede Zutat, auf die gewählte Menge umgerechnet – dieselben
   Zeilen wie auf der Seite des Meals, nur ohne deren Rahmen.
   Darunter ein leiser Weg auf die ganze Seite: ein Verweis,
   kein zweiter Knopf neben „Save" (genau EINE Akzentfläche).
   ========================================================= */

.nu-inside {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--o), .08);
}

.nu-inside .nu-ingredients { margin-top: 4px; }
.nu-inside .nu-sub__body .nu-ingredient { padding: 6px 0; font-size: 13px; }
.nu-inside .nu-ingredient.is-missing .nu-ingredient__name { color: var(--text-faint); font-style: italic; }

.nu-inside__open {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-app);
  cursor: pointer;
}

.nu-inside__open:hover { text-decoration: underline; text-underline-offset: 3px; }
.nu-inside__open:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* ---------- Makro-Kacheln (ui.macroGrid) ------------------------------------
   `.nu-tile` heißt auch die halbe Kachel von Snack und Supplements
   weiter oben – deren Raster (Text | 44px-Knopf) griff auf die fünf
   Makro-Kacheln über: die Zahl landete auf ihrer Beschriftung. Hier
   bekommen die Makro-Kacheln ihre eigene Form zurück, gebunden an
   ihren Behälter. Ohne `border`: der clip-path schnitte ihn an den
   Diagonalen weg, die Kante ist die Fläche selbst. */
.nu-tiles > .nu-tile {
  --cut: 8px;
  display: block;
  min-width: 0;
  padding: 9px 2px;
  border: 0;
  background: var(--surface-2);
  text-align: center;
}

.nu-tiles > .nu-tile .nu-tile__value {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

/* Im Portions-Popup stehen Mengen, Namen und kcal in EINER Flucht –
   auch die Zeile eines Bausteins, die sonst eine eigene Spalte hat. */
.nu-inside .nu-sub summary { grid-template-columns: 84px minmax(0, 1fr) auto; }
.nu-inside .nu-sub__body .nu-ingredient { grid-template-columns: 68px minmax(0, 1fr) auto; }

/* =========================================================
   Löffel: wie voll? (ui.spoonField)

   Erscheint unter einer Zutat in Teelöffel/Esslöffel. Oben die
   Ablesung – was gewählt ist, in Worten und Millilitern –, darunter
   der Regler mit einer Kerbe in der Mitte (gestrichen), ganz unten
   die drei Marken. Die Seite, der der Regler gerade näher ist,
   leuchtet; die anderen bleiben still. Farbe kommt nur aus dem
   Akzent des Bereichs.
   ========================================================= */

.nu-spoon {
  --pos: 50%;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 12px 8px;
  background: var(--surface-2);
  --cut: 10px;
  clip-path: var(--cut-clip);
}

.nu-spoon__live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.nu-spoon__live b {
  font-size: 15px;
  font-weight: 650;
  color: var(--accent-app);
}

.nu-spoon__live [data-spoon-each] { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.nu-spoon__sum { flex-basis: 100%; padding-inline-start: 42px; font-family: var(--font-mono); font-size: 12px; }

.nu-spoon__glyph {
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--accent-app);
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  transform: scale(var(--s, 1));
  transition: transform var(--dur) var(--ease-out);
}

/* Die Spur: still bis zur Mitte, ab dem Daumen leer. Die Kerbe
   markiert den gestrichenen Löffel. */
.nu-spoon__track { position: relative; height: 28px; }

.nu-spoon__rail {
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0; top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent-app) 35%, transparent) 0,
      var(--accent-app) var(--pos),
      var(--line-strong) var(--pos));
}

.nu-spoon__mid {
  position: absolute;
  inset-inline-start: 50%; top: 3px; bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--text-muted);
  pointer-events: none;
}

.nu-spoon__track input[type="range"] {
  position: relative;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

.nu-spoon__track input[type="range"]::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.nu-spoon__track input[type="range"]::-moz-range-track { height: 28px; background: transparent; }

/* Der Daumen ist ein Sechseck – die Form, die in dieser App „hier
   bist du" heißt (Bereichszeichen, Ring). */
.nu-spoon__track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 24px;
  margin-top: 2px;
  border: 0;
  background: var(--accent-app);
  clip-path: var(--hex-clip);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nu-spoon__track input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: var(--accent-app);
  clip-path: var(--hex-clip);
}
.nu-spoon__track input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.nu-spoon__track input[type="range"]:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.nu-spoon__ends {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nu-spoon__end {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--text-subtle);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nu-spoon__end--mid { justify-content: center; flex-direction: column; gap: 0; }
.nu-spoon__end--hi { justify-content: flex-start; flex-direction: row-reverse; text-align: end; }
.nu-spoon__end.is-near { color: var(--accent-app); }

.nu-spoon__endtext { display: grid; line-height: 1.2; }
.nu-spoon__end--mid .nu-spoon__endtext { text-align: center; }
.nu-spoon__endtext b { font-size: 12.5px; font-weight: 600; color: inherit; }
.nu-spoon__endtext i { font-style: normal; font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }
.nu-spoon__end.is-near .nu-spoon__endtext i { color: var(--text); }

.nu-spoon__icon {
  width: 38px;
  height: 38px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  opacity: .55;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nu-spoon__end.is-near .nu-spoon__icon { opacity: 1; transform: scale(1.08); }

.nu-spoon__notch { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nu-spoon__glyph, .nu-spoon__icon, .nu-spoon__end { transition: none; }
}

html[data-eink] .nu-spoon__rail { background: linear-gradient(90deg, currentColor var(--pos), var(--line-strong) var(--pos)); }

/* „Manage your shelf" unter der Liste im Fenster „Log a supplement". */
.nu-supps__shelf { display: block; min-height: 44px; margin: 8px auto 0; }

/* Ruhe beim Ziehen. Der Löffel wächst mit, die Ablesung ändert ihre
   Breite („Level" → „Rounded", „15 ml" → „26.4 ml"). Am Rand eines
   Fensters reichte das, um kurz Überlauf zu erzeugen: der Rollbalken
   des Fensters kam und ging, und der ganze Inhalt sprang seitlich.
   Jetzt kann nichts aus dem Block heraus (overflow + contain), die
   Ablesung hat feste Zeilen und Breiten, und ein Fenster mit Löffel
   hält den Platz seines Rollbalkens fest. */
.nu-spoon { min-width: 0; overflow: hidden; contain: layout paint; }
/* Feste Breiten statt Mindestbreiten: ob die Summe neben oder unter
   der Ablesung steht, hängt dann nur von der Fensterbreite ab, nie vom
   Wert – beim Ziehen bricht nichts um. */
.nu-spoon__live { flex-wrap: wrap; min-height: 34px; }
.nu-spoon__live b { display: inline-block; width: 4.6em; }
.nu-spoon__live [data-spoon-each] { display: inline-block; width: 9ch; white-space: nowrap; }
.nu-spoon__sum {
  flex: none;
  margin-inline-start: auto;
  padding-inline-start: 0;
  width: 13ch;
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nu-spoon__endtext i { font-variant-numeric: tabular-nums; }


/* Trefferlisten (lokal und Open Food Facts) dürfen schmaler werden als
   ihr längster Produktname: sonst wuchs die Spalte über das Fenster,
   und der Hinzufügen-Dialog rollte seitlich. */
.nu-picklist { grid-template-columns: minmax(0, 1fr); }

/* Im schmalen Hinzufügen-Fenster liefen „7.5 ml" und „15 ml" ineinander. */
.nu-spoon__ends { column-gap: 10px; }
.nu-spoon__end { gap: 6px; }
.nu-spoon__icon { width: 32px; height: 32px; }
.nu-spoon__endtext b,
.nu-spoon__endtext i { white-space: nowrap; }
.nu-spoon__end { min-width: 0; }

/* =========================================================
   Zuletzt benutzt (Foods-Reiter, foodResults)

   Die Gruppe steht vorn und sieht anders aus als der Rest, damit man
   sie erkennt, bevor man liest: getönte Fläche mit Eckschnitt, Uhr im
   Kopf in der Farbe des Bereichs, und in jeder Zeile „Used yesterday"
   als erstes Wort der Meta-Zeile. „All foods" darunter bleibt die
   gewohnte, ungetönte Liste.
   ========================================================= */

.nu-recent {
  --cut: 10px;
  margin: 4px 0 14px;
  padding: 8px 10px 4px;
  background: rgba(var(--t-nutrition), .07);
  clip-path: var(--cut-clip);
}

.nu-recent__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.nu-recent__icon {
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

.nu-recent .nu-pick,
.nu-recent .nu-pickshop { border-bottom-color: rgba(var(--t-nutrition), .12); }
.nu-recent .nu-pickrow:last-child .nu-pick,
.nu-recent .nu-pickrow:last-child .nu-pickshop { border-bottom: 0; }

.nu-pick__used { font-weight: 600; color: var(--accent-app); }

.nu-allfoods { margin-top: 2px; }

html[data-eink] .nu-recent { background: none; outline: 1.5px solid #000; outline-offset: -1.5px; clip-path: none; }
html[data-eink] .nu-recent__head,
html[data-eink] .nu-pick__used { color: #000; }

/* =========================================================
   Zutaten im Portions-Popup – änderbar

   Dieselbe Zeile wie im Meal-Editor (.nu-item). Darüber rechts ein
   leises „Reset", sobald etwas geändert ist, darunter der Hinweis,
   dass es nur für diesen Eintrag gilt, und unten der Haken, der es
   ins Meal übernimmt. Genau EINE Akzentfläche bleibt: der Knopf
   „Add to …" im Fuß.
   ========================================================= */

.nu-inside__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nu-inside__reset {
  padding: 6px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-app);
  cursor: pointer;
}

.nu-inside__reset:hover { text-decoration: underline; text-underline-offset: 3px; }
.nu-inside__reset:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.nu-inside__changed {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.nu-inside .nu-items { margin-top: 6px; }
.nu-inside__keep { margin-top: 6px; }

html[data-eink] .nu-inside__reset { color: #000; }

/* Die Zutatenzeile (.nu-item) und die Entwurfszeile (.nu-draft) trugen
   Radius und Rand – mit dem Eckschnitt darüber verschwand der Rand an
   den Diagonalen. Der Akzent links ist jetzt Teil der Fläche. */
.nu-item,
.nu-draft {
  --cut: 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: linear-gradient(90deg, var(--accent-deep) 0 3px, var(--surface-2) 3px);
}

.nu-item.is-missing {
  background: linear-gradient(90deg, var(--line-strong) 0 3px, var(--surface-2) 3px);
}

html[data-eink] .nu-item,
html[data-eink] .nu-draft {
  background: linear-gradient(90deg, #000 0 3px, var(--surface-2) 3px);
}


/* =========================================================
   Getränke (0.4.0 beta) – app/nutrition/drinks.js

   Dieselbe Sprache wie die Stats-Reiter: Flächen (Stand des Tages,
   Getränkezeilen, Ablesekacheln, Karten im Regal) tragen den
   Eckschnitt oben links und unten rechts, Rand und Fläche als zwei
   Schichten, darunter der Sockel als drop-shadow. Alles, was man
   drückt (Arten, Gefäße, Again, −/+), ist ein Rechteck mit Sockel
   und sinkt beim Druck ein.

   --f ist die Farbe der Art, gesetzt am Element. Die zehn Töne
   kommen aus den Tracker-Tönen (--tr-*), damit keine Bereichsfarbe
   doppelt belegt wird; auf Papier werden sie zu Graustufen.
   ========================================================= */

:root {
  --dr-water:   var(--tr-sky);
  --dr-tea:     var(--tr-lime);
  --dr-coffee:  var(--tr-amber);
  --dr-juice:   var(--tr-coral);
  --dr-soft:    var(--tr-orchid);
  --dr-syrup:   var(--chart-carbs);
  --dr-milk:    var(--tr-sand);
  --dr-sport:   var(--tr-teal);
  --dr-alcohol: var(--tr-iris);
  --dr-other:   var(--text-muted);
}

.nu-dk { --f: var(--dr-water); gap: 16px; }

.nu-dk-glyph,
.nu-dk-kind__glyph,
.nu-dk-chip__glyph {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--f, currentColor);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nu-dk-sec { display: grid; gap: 8px; min-width: 0; }

.nu-dk-label {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.nu-dk-label--sub { margin-top: 6px; }

.nu-dk-empty, .nu-dk-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* ---------- Flächen: Schnitt, Rand, Sockel --------------------------------- */

.nu-dk-gauge,
.nu-dk-tile,
.nu-dk-pick,
.nu-dks-card {
  --cut: 10px;
  position: relative;
  isolation: isolate;
  filter: drop-shadow(3px 4px 0 var(--py-plinth));
}

.nu-dk-gauge::before, .nu-dk-tile::before, .nu-dk-pick::before, .nu-dks-card::before,
.nu-dk-gauge::after,  .nu-dk-tile::after,  .nu-dk-pick::after,  .nu-dks-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: var(--cut-clip);
}

.nu-dk-gauge::before, .nu-dk-tile::before, .nu-dk-pick::before, .nu-dks-card::before {
  inset: 0;
  z-index: -2;
  background: var(--line-strong);
}

.nu-dk-gauge::after, .nu-dk-tile::after, .nu-dk-pick::after, .nu-dks-card::after {
  inset: 1px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--f) 10%, var(--surface)), var(--surface) 70%);
}

/* ---------- Der Stand des Tages ------------------------------------------ */

.nu-dk-gauge { --cut: 12px; display: grid; gap: 8px; padding: 12px 14px 13px; }

.nu-dk-gauge__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.nu-dk-gauge__now { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); white-space: nowrap; }
.nu-dk-gauge__now b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); }

.nu-dk-gauge__pct {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--accent-app);
}

.nu-dk-gauge__pct.is-behind,
.nu-seclink.is-behind,
.nu-water__step.is-behind { color: var(--state-warn); }

.nu-dk-gauge__bar { position: relative; display: flex; height: 10px; background: var(--surface-3); }
.nu-dk-gauge__bar > span { height: 100%; background: var(--f); transition: width var(--dur) var(--ease-out); }
.nu-dk-gauge__bar > span + span { box-shadow: inset 1px 0 0 var(--surface); }

/* Das Glas, das gerade eingetragen wird: dieselbe Farbe, gestreift. */
.nu-dk-gauge__bar > span.is-pending {
  background: repeating-linear-gradient(135deg, var(--f) 0 3px,
              color-mix(in srgb, var(--f) 35%, transparent) 3px 6px);
}

.nu-dk-gauge__pace {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-inline-start: -1px;
  background: var(--text-strong);
}

.nu-dk-gauge__note { margin: 0; font-size: 12px; color: var(--state-warn); }

/* ---------- Knöpfe: Rechteck mit Sockel ------------------------------------ */

.nu-dk-chip,
.nu-dk-kind,
.nu-dk-kindbtn,
.nu-dk-vessel {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out);
}

.nu-dk-chip::before, .nu-dk-kind::before, .nu-dk-kindbtn::before, .nu-dk-vessel::before,
.nu-dk-chip::after,  .nu-dk-kind::after, .nu-dk-kindbtn::after,  .nu-dk-vessel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.nu-dk-chip::before, .nu-dk-kind::before, .nu-dk-kindbtn::before, .nu-dk-vessel::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nu-dk-chip::after, .nu-dk-kind::after, .nu-dk-kindbtn::after, .nu-dk-vessel::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
}

.nu-dk-chip:hover::after, .nu-dk-kind:hover::after, .nu-dk-kindbtn:hover::after, .nu-dk-vessel:hover::after {
  background-image: linear-gradient(var(--btn-face-hover), var(--btn-face-hover));
}

.nu-dk-chip:active, .nu-dk-kind:active, .nu-dk-kindbtn:active, .nu-dk-vessel:active { transform: translate(var(--depth), var(--depth)); }
.nu-dk-chip:active::before, .nu-dk-kind:active::before, .nu-dk-kindbtn:active::before, .nu-dk-vessel:active::before { opacity: 0; }

.nu-dk-chip:focus-visible, .nu-dk-kind:focus-visible, .nu-dk-kindbtn:focus-visible, .nu-dk-vessel:focus-visible,
.nu-dk-pick:focus-visible, .nu-dks-card:focus-visible {
  outline: 2px solid var(--accent-app);
  outline-offset: 3px;
}

/* Again */
.nu-dk-again { display: flex; flex-wrap: wrap; gap: 8px 9px; }

.nu-dk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
}

.nu-dk-chip__glyph { width: 16px; height: 16px; }
.nu-dk-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-dk-chip i { font-style: normal; font-family: var(--font-mono); font-size: max(var(--fs-floor), 10.5px); color: var(--text-subtle); }

/* Die zehn Arten: 5 × 2 am Telefon */
.nu-dk-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 7px; }

.nu-dk-kind {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 54px;
  padding: 7px 2px 6px;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-muted);
}

.nu-dk-kind span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-dk-kind__glyph { width: 21px; height: 21px; }

/* Gewählt: die Fläche trägt den Zustand, nicht ein Rand. */
.nu-dk-kind.is-on {
  --btn-face: color-mix(in srgb, var(--f) 26%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--f) 32%, transparent);
  --btn-lift: color-mix(in srgb, var(--f) 55%, var(--bg));
  color: var(--text-strong);
  font-weight: 600;
}

.nu-dk-kinds--sm .nu-dk-kind { min-height: 48px; font-size: max(var(--fs-floor), 10.5px); }

/* ---------- Suche und Getränke -------------------------------------------- */

.nu-dk-search { display: flex; gap: 8px; align-items: stretch; }
.nu-dk-search .nu-input { flex: 1; min-width: 0; }
.nu-dk-search .nu-icon { flex: none; width: 44px; display: grid; place-items: center; }
.nu-dk-search .nu-icon img { width: 18px; }

/* „From the database": eine Zeile zum Aufklappen, keine Fläche voller Treffer. */
.nu-dk-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: start;
}
.nu-dk-fold span { flex: 1; }
.nu-dk-fold i { font-style: normal; color: var(--text-subtle); letter-spacing: 0; }
.nu-dk-fold b { color: var(--accent-app); font-size: 12px; }
.nu-dk-fold:hover { color: var(--text-strong); }
.nu-dk-fold:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.nu-dk-picks { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
[data-dk-picks] { display: grid; gap: 7px; min-width: 0; }

.nu-dk-pick {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 12px 7px 10px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: start;
}

.nu-dk-pick::after { background: var(--surface-2); }
.nu-dk-pick:hover::after { background: var(--surface-3); }

.nu-dk-pick.is-on::before { background: var(--f); }
.nu-dk-pick.is-on::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--f) 24%, var(--surface-2)),
                                      color-mix(in srgb, var(--f) 10%, var(--surface-2)));
}

.nu-dk-pick__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  background: color-mix(in srgb, var(--f) 16%, var(--surface-3));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  color: var(--text-strong);
  font-weight: 600;
}

.nu-dk-pick__mark .nu-dk-glyph { width: 15px; height: 15px; }

.nu-dk-pick__body { display: grid; min-width: 0; gap: 1px; }
.nu-dk-pick__body b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nu-dk-pick__body small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); overflow-wrap: anywhere; }

.nu-dk-custom { margin-top: 4px; }
.nu-dk-more { justify-self: start; min-height: 32px; margin: -2px 0 2px; font-family: var(--font-mono); font-size: max(var(--fs-floor), 11.5px); }

/* ---------- Menge --------------------------------------------------------- */

.nu-dk-vessels { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 8px 7px; }

.nu-dk-vessel {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 2px;
  min-height: 62px;
  padding: 6px 2px 5px;
}

.nu-dk-vessel svg { width: auto; fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linejoin: round; }
.nu-dk-vessel b { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11.5px); font-weight: 600; color: var(--text-strong); }
.nu-dk-vessel small { font-size: max(var(--fs-floor), 10px); color: var(--text-subtle); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-dk-vessel.is-own small { color: var(--accent-app); }

.nu-dk-vessel.is-on {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
}
.nu-dk-vessel.is-on b, .nu-dk-vessel.is-on small { color: var(--on-accent); }
.nu-dk-vessel.is-on svg { stroke: var(--on-accent); }

.nu-dk-fill { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.nu-dk-fill__side { display: grid; gap: 10px; min-width: 0; }

/* Das Glas: Körper, Flüssigkeit und Sirup als Verläufe, darüber ein
   schmaler Glanz von links. Die Füllung misst immer an 1 Liter und
   gleitet beim Ändern (Höhe statt Neuzeichnen). */
.nu-dk-glass { width: 88px; height: 120px; display: block; overflow: visible; }
.nu-dk-glass [data-gl] {
  transition: y var(--dur) var(--ease-out), height var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nu-dk-glass__body-top { stop-color: var(--surface-3); stop-opacity: .55; }
.nu-dk-glass__body-bot { stop-color: var(--surface-3); stop-opacity: 1; }
.nu-dk-glass__liq-top { stop-color: var(--lq, var(--f)); stop-opacity: .55; }
.nu-dk-glass__liq-bot { stop-color: var(--lq, var(--f)); stop-opacity: 1; }
.nu-dk-glass__syr-top { stop-color: var(--dr-syrup); stop-opacity: .8; }
.nu-dk-glass__syr-bot { stop-color: var(--dr-syrup); stop-opacity: 1; }
.nu-dk-glass__sheen-0 { stop-color: #ffffff; stop-opacity: 0; }
.nu-dk-glass__sheen-1 { stop-color: #ffffff; stop-opacity: .14; }
.nu-dk-glass__top { fill: #ffffff; fill-opacity: .45; }
.nu-dk-glass__tick { stroke: var(--text-subtle); stroke-opacity: .55; stroke-width: 1; }
.nu-dk-glass__lbl { font-family: var(--font-mono); font-size: max(var(--fs-floor), 7px); fill: var(--text-subtle); }
.nu-dk-glass__lbl--top { fill: var(--text-muted); font-size: max(var(--fs-floor), 7.5px); letter-spacing: .08em; }
.nu-dk-glass__rim { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .nu-dk-glass [data-gl] { transition: none; } }

.nu-dk-step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; }
.nu-dk-step__btn { min-height: 44px; font-size: 20px; font-weight: 500; color: var(--text-strong); }

.nu-dk-step__val { position: relative; display: block; }
.nu-dk-step__val .nu-input {
  width: 100%;
  height: 100%;
  padding-inline-end: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}
.nu-dk-step__val i {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
  pointer-events: none;
}

/* Mischung eines Sirups – in voller Breite unter dem Glas */
.nu-dk-mix { display: grid; gap: 8px; margin-top: 4px; }
.nu-dk-step--mix .nu-dk-step__val .nu-input { padding-inline-end: 66px; }
.nu-dk-mix__split { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.nu-dk-mix__split .is-syrup { color: var(--dr-syrup); font-weight: 600; }
.nu-dk-mix__split .is-water { color: var(--dr-water); font-weight: 600; }

.nu-dk-mix__chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; }
.nu-dk-mix__chips .nu-quick { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11.5px); }

.nu-dk-mix__pct { position: relative; display: inline-flex; align-items: center; }
.nu-dk-mix__pct .nu-input { width: 104px; padding-inline-end: 58px; font-family: var(--font-mono); }
.nu-dk-mix__pct--wide .nu-input { width: 100%; }
.nu-dk-mix__pct i {
  position: absolute;
  inset-inline-end: 10px;
  font-style: normal;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-subtle);
  pointer-events: none;
}

.nu-dk-mix__keep { font-size: 12.5px; }

/* ---------- Ablesen ------------------------------------------------------- */

.nu-dk-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.nu-dk-read--today { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }

.nu-dk-tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 9px 10px 10px; }
.nu-dk-tile b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.nu-dk-tile small {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 9px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.nu-dk-tile__bar { display: block; height: 4px; margin-top: 6px; background: var(--surface-3); }
.nu-dk-tile__bar i { display: block; height: 100%; background: var(--f); }
.nu-dk-tile__bar.is-over i { background: var(--state-warn); }

/* Der eine Handgriff klebt am unteren Rand des Fensters: wer nur Wasser
   einträgt, tippt Art und Getränk an und hat „Add" sofort unter dem
   Daumen – ohne an Menge und Ablesung vorbeizuscrollen. Die Fläche
   reicht über den Innenabstand hinaus, ein Verlauf oben lässt den
   Inhalt darunter auslaufen statt hart abzuschneiden. */
.nu-dk { padding-bottom: 0; }
.nu-dk > [data-dk-foot] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: -8px -20px 0;
  padding: 22px 20px 18px;
  background: linear-gradient(to bottom, transparent, var(--surface) 20px);
}
.nu-dk > [data-dk-foot] .nu-foot { margin-top: 0; }

/* Lange Namen werden gekürzt, nie umbrochen. */
/* Ein Raster, kein Flex: „250 ml Wasser hinzufügen" schob sonst mit seiner
   Mindestbreite das ganze Fenster seitwärts. Lange Beschriftungen brechen
   auf zwei Zeilen um, statt abgeschnitten zu werden. */
.nu-dk-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.nu-dk-foot .nu-btn { min-width: 0; }
.nu-dk-foot .nu-btn--primary span { display: block; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }

/* ---------- Oben fest: Stand + Add · Today ------------------------------------ */

/* Steht zwischen Kopf und Körper und rollt nie mit (das Fenster ist eine
   Spalte, nur .nu-body rollt). Die Linie darunter sagt, wo das Rollen
   beginnt. */
.nu-dk-top {
  display: grid;
  gap: 9px;
  padding: 10px 20px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.nu-dk-seg { margin: 0; background: var(--surface-2); }
.nu-dk-seg .nu-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.nu-dk-seg .nu-seg__item.is-on { font-weight: 600; }
.nu-dk-seg .nu-seg__item:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

/* Die Zahl der Getränke am Reiter: ein kleines Rechteck, kein Kreis. */
.nu-dk-seg__n {
  min-width: 20px;
  padding: 1px 5px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  background: rgba(var(--o), .12);
  color: var(--text-strong);
}
.nu-dk-seg .is-on .nu-dk-seg__n { background: rgba(0, 0, 0, .18); color: var(--ink); }

/* ---------- Die Art als EIN Knopf --------------------------------------------- */

.nu-dk-kindbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  max-width: 42%;
  padding: 0 10px 0 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  --btn-face: color-mix(in srgb, var(--f) 20%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--f) 28%, transparent);
  --btn-lift: color-mix(in srgb, var(--f) 45%, var(--bg));
}
.nu-dk-kindbtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-dk-kindbtn b { margin-inline-start: 1px; font-size: max(var(--fs-floor), 11px); color: var(--text-muted); }
.nu-dk-kindbtn .nu-dk-kind__glyph { width: 18px; height: 18px; }

/* Aufgeklappt: die zehn Arten, kleiner als vorher, und nur auf Wunsch. */
.nu-dk-kinds--sm { gap: 7px 6px; padding: 2px 0 4px; animation: nu-dk-drop var(--dur) var(--ease-out); }
.nu-dk-kinds--sm .nu-dk-kind { min-height: 46px; padding: 5px 2px 4px; gap: 3px; font-size: max(var(--fs-floor), 10.5px); }
.nu-dk-kinds--sm .nu-dk-kind__glyph { width: 18px; height: 18px; }

@keyframes nu-dk-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nu-dk-kinds--sm { animation: none; } }

/* ---------- Today: was der Tag schon hat --------------------------------------- */

/* Die Legende zum Balken: je Art Zeichen, Name, Menge. */
/* Oben fest heißt: so knapp wie möglich. */
.nu-dk-top .nu-dk-gauge { gap: 7px; padding: 10px 13px 11px; }

/* „Just this once" und „Create" – zwei halbe Zeilen statt zweier ganzer. */
.nu-dk-picks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nu-dk-picks--two .nu-dk-pick { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; min-height: 46px; padding: 6px 10px 6px 8px; }
.nu-dk-picks--two .nu-dk-pick__mark { width: 22px; height: 20px; }
.nu-dk-picks--two .nu-dk-pick__body b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-dk-picks--two .nu-dk-pick__body small { font-size: max(var(--fs-floor), 11px); }

.nu-dk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nu-dk-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.nu-dk-legend b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-strong); }

.nu-dk .nu-drinks { margin-top: 0; }
.nu-dk .nu-dk-read--today { margin-top: 0; }

.nu-dk-none { margin: 0; padding: 4px 0; font-size: 13px; color: var(--text-muted); }

.nu-dk-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nu-dk-links .nu-seclink { min-height: 36px; }

/* ---------- Gläserreihe auf Today ------------------------------------------ */

.nu-water__glasses { position: relative; display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; }

.nu-glass.is-on { --btn-face: var(--line); }

.nu-glass__fill {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 0;
  background: var(--f);
  pointer-events: none;
}

.nu-glass:active .nu-glass__fill { opacity: .85; }

.nu-water__pace {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-inline-start: -1px;
  background: var(--text-strong);
  pointer-events: none;
}

/* ---------- Tagesliste ------------------------------------------------------ */

.nu-drink { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.nu-drink__mark { display: grid; place-items: center; }
.nu-drink__type { color: var(--text-strong); font-weight: 500; }
.nu-drink__mix { display: block; margin-top: 2px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }
.nu-drink__amount { font-family: var(--font-mono); color: var(--text-strong); }

/* ---------- Das Regal ----------------------------------------------------- */

.nu-dks-filter { display: flex; flex-wrap: wrap; gap: 8px 7px; margin-top: 16px; }
.nu-dks-filter .nu-quick { display: inline-flex; align-items: center; gap: 6px; }
.nu-dks-filter .nu-dk-chip__glyph { width: 15px; height: 15px; }
.nu-dks-filter .nu-quick.is-on .nu-dk-chip__glyph { stroke: var(--on-accent); }

.nu-dks-sec__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nu-dks-sec__head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nu-dks-sec__head span { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }

.nu-dks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .nu-dks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nu-dks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nu-dks-card {
  display: grid;
  align-content: start;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-height: 84px;
  padding: 10px 12px 12px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: start;
}

.nu-dks-card:hover::before { background: var(--f); }
.nu-dks-card__head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nu-dks-card__head b, .nu-dks-card > b {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nu-dks-card small { font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); overflow-wrap: anywhere; }

/* Der Sirup zeigt seine Mischung als Balken: rosa Konzentrat, blaues Wasser. */
.nu-dks-card__mix { display: flex; height: 6px; margin-top: 3px; background: var(--dr-water); }
.nu-dks-card__mix i { display: block; height: 100%; background: var(--dr-syrup); }
.nu-dks-card__pct { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 600; color: var(--dr-water); }

.nu-dks-card--new { justify-items: start; }
.nu-dks-card--new::after { background: var(--surface); }
.nu-dks-card--new::before { background: color-mix(in srgb, var(--f) 45%, transparent); }

.nu-dks-vessels { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

.nu-dks-vessel {
  --cut: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  font-size: 13px;
}
.nu-dks-vessel b { font-weight: 600; color: var(--text-strong); }
.nu-dks-vessel i { font-style: normal; font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }
.nu-dks-vessel .nu-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.nu-dks-vessel .nu-icon img { width: 15px; }

/* ---------- E-ink ---------------------------------------------------------- */

html[data-eink] .nu-dk-chip,
html[data-eink] .nu-dk-kind,
html[data-eink] .nu-dk-vessel { --btn-lift: #000000; }

html[data-eink] .nu-dk-kind.is-on,
html[data-eink] .nu-dk-vessel.is-on {
  --btn-face: #1c1c1c;
  --btn-face-hover: #000000;
  color: var(--eink-paper);
}
html[data-eink] .nu-dk-kind.is-on .nu-dk-kind__glyph,
html[data-eink] .nu-dk-vessel.is-on svg { stroke: var(--eink-paper); }
html[data-eink] .nu-dk-vessel.is-on b,
html[data-eink] .nu-dk-vessel.is-on small { color: var(--eink-paper); }

html[data-eink] .nu-dk-gauge::before, html[data-eink] .nu-dk-tile::before,
html[data-eink] .nu-dk-pick::before, html[data-eink] .nu-dks-card::before { background: #1c1c1c; }
html[data-eink] .nu-dk-gauge::after, html[data-eink] .nu-dk-tile::after,
html[data-eink] .nu-dk-pick::after, html[data-eink] .nu-dks-card::after { background: var(--eink-paper); }
html[data-eink] .nu-dk-pick.is-on::after { background: #dcdbd9; }
html[data-eink] .nu-dk-gauge__bar > span + span { box-shadow: inset 2px 0 0 var(--eink-paper); }
html[data-eink] .nu-glass__fill { background: #1c1c1c; }
html[data-eink] .nu-dk-gauge__pace,
html[data-eink] .nu-water__pace { background: #000000; }

html[data-eink] .nu-dk-glass__liq-top, html[data-eink] .nu-dk-glass__liq-bot { stop-color: #1c1c1c; }
html[data-eink] .nu-dk-glass__syr-top, html[data-eink] .nu-dk-glass__syr-bot { stop-color: #6b6b6b; }
html[data-eink] .nu-dk-glass__sheen-1 { stop-opacity: 0; }
html[data-eink] .nu-dk-glass__body-top, html[data-eink] .nu-dk-glass__body-bot { stop-color: #ffffff; }
html[data-eink] .nu-dk-glass__rim { stroke: #1c1c1c; }