/* =========================================================
   Klar — Tagebuch und Lebensmittelwege
   ----------------------------------------------------------
   Datumsleiste, Mahlzeitenkopf, Eintragszeile mit ihrer
   Wischfläche, Suchtreffer, Scan-Vergleich, Mahlzeitenauswahl
   und Scanner.

   Aus ``klar-patterns.css`` herausgelöst, damit Tagebuch und
   Rezepte nicht dieselbe Datei teilen. Geteilt wurde entlang der
   Abschnitte, die schon dort standen; die Werte sind unverändert.
   Was hier steht, gehört dem Tagebuch- und Lebensmittelweg.
   Bausteine, die beide Bereiche benutzen, stehen weiterhin in
   ``klar.css``.
   ========================================================= */

/* ---------------------------------------------------------- date bar */

.app-main .date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.app-main .date-bar__label {
  display: grid;
  text-align: center;
  gap: 3px;
  font-size: var(--text-md);
  font-weight: 750;
  min-width: 0;
}

.app-main .date-bar input {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-md);
  max-width: 143px;
  text-align: center;
  min-height: 40px;
  font-family: inherit;
}

/* ---------------------------------------------------------- meal */

.app-main .meal {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: var(--surface);
  overflow: hidden;
}

/* The whole header folds the meal; plus and menu stay their own
   buttons. The header is a div, so nothing is nested. */
.app-main .meal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f0f0f7;
  touch-action: pan-y;
  cursor: pointer;
  position: relative;
  /* Der lange Druck hebt die Mahlzeit an. Ohne diese drei Zeilen markiert
     iOS derweil den Namen und bietet den Link an, Android das Kontextmenü --
     und der Griff fühlt sich an, als griffe er ins Leere. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.18s;
}

.app-main .meal-heading-copy {
  flex: 1;
  min-width: 0;
}

.app-main .meal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 33px;
  font-weight: 800;
  font-size: var(--text-md);
  line-height: 1.4;
  min-width: 0;
  width: auto;
  color: inherit;
  overflow-wrap: anywhere;
}

.app-main .meal-head .macro-line {
  gap: 3px 12px;
  font-size: var(--text-2xs);
}

.app-main .meal-head .macro-line i {
  display: none;
}

.app-main .meal-head .macro-line b {
  color: var(--muted);
}

.app-main .meal-head-trail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.app-main .meal-energy {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: var(--text-15);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.app-main .meal-controls {
  display: flex;
  gap: 0;
  margin-right: -6px;
}

.app-main .meal-controls .icon-button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  color: #7b8297;
}

.app-main .meal-controls .icon-button:hover {
  background: var(--tint);
  color: var(--accent);
}

/* Die Wischfläche der Mahlzeit -- dieselbe Bauform wie die Eintragszeile
   darunter: die rote Löschfläche liegt **hinter** dem Kopf, der Kopf schiebt
   sich nach links und legt sie frei. Vorher klappte hier ein Band unter dem
   Kopf auf; zwei Bauformen für dieselbe Geste auf derselben Seite, und genau
   so lautete die Beanstandung. Die Hülle gibt es nur, weil ``.meal`` den
   ganzen Körper umschließt und die Fläche nicht höher sein darf als der Kopf. */
.app-main .meal-head-swipe {
  position: relative;
  overflow: hidden;
  background: #f0f0f7;
}

.app-main .meal-delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 82px;
  border: 0;
  background: var(--danger);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--text-xs);
  visibility: hidden;
}

/* Sichtbar, sobald der Kopf zur Seite geht -- auch schon während der Finger
   zieht, damit die Geste zeigt, was sie freilegt. Bedienbar (``aria-hidden``,
   ``tabindex``) wird die Fläche erst im geöffneten Zustand; das setzt
   ``diary-meals.js``. */
.app-main .meal.is-meal-open .meal-delete,
.app-main .meal.is-meal-swiping .meal-delete {
  visibility: visible;
}

.app-main .meal.is-meal-open .meal-head {
  transform: translateX(-82px);
}

.app-main .meal.is-meal-swiping .meal-head {
  transform: translateX(var(--swipe-x, 0px));
  transition: none;
}

.app-main .meal-add {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  color: var(--muted);
  background: var(--surface);
  border-radius: 0;
  min-height: 44px;
  font-size: var(--text-xs);
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-main .meal-add:hover {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}

/* ---------------------------------------------------------- entry row
   The red surface belongs to the opened delete action only — never
   to a page. ``.entry`` is a row, and only a row. */

.app-main .entry {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.app-main .entry:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.app-main .entry.is-open {
  background: var(--danger);
}

.app-main .entry-front {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 13px 10px 13px 15px;
  touch-action: pan-y;
  transition: transform 0.18s;
  /* Wie am Mahlzeitenkopf: der lange Druck hebt den Eintrag an, und dabei
     darf weder Text markiert noch der Link angeboten werden. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.app-main .entry.is-open .entry-front {
  transform: translateX(-82px);
}

/* While the finger is down the row follows it. ``--swipe-x`` is set by
   ``diary-meals.js`` and removed again when the gesture ends, so the class
   above decides where the row rests. The rule stands after ``.is-open`` on
   purpose: both have the same specificity, and during the drag the live
   offset has to win. */
.app-main .entry.is-dragging .entry-front {
  transform: translateX(var(--swipe-x, 0px));
  transition: none;
}

.app-main .entry-content {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
  min-height: 54px;
  color: inherit;
  text-decoration: none;
  display: block;
}

.app-main .entry-brand {
  font-size: 0.5625rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.app-main .entry-content strong {
  font-size: var(--text-base);
  display: block;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.app-main .entry-content small {
  font-size: var(--text-xs);
  color: var(--muted);
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.app-main .entry-trail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  flex-shrink: 0;
}

.app-main .entry-trail > .icon-button {
  color: var(--muted);
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
}

.app-main .entry-delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 82px;
  border: 0;
  background: var(--danger);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--text-xs);
  visibility: hidden;
}

.app-main .entry.is-open .entry-delete,
.app-main .entry.is-dragging .entry-delete {
  visibility: visible;
}

/* ``.swipe-note`` ist entfallen: der Erklärsatz unter der Liste ist weg. */

/* ---------------------------------------------------------- thumb */

.app-main .thumb {
  border-radius: 12px;
  background: var(--tint);
  display: grid;
  place-items: center;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}

.app-main .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ---------------------------------------------------------- search results */

.app-main .food-results {
  display: grid;
  gap: 0;
}

.app-main .food-result {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.app-main .food-result:last-child {
  border-bottom: 0;
}

.app-main .food-result-main {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  text-align: left;
  min-height: 54px;
  color: inherit;
  text-decoration: none;
}

.app-main .food-result-main > span {
  min-width: 0;
}

.app-main .food-result-main strong {
  display: block;
  font-size: var(--text-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.app-main .food-result-main small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.app-main .food-result-main .thumb {
  width: 44px;
  height: 52px;
}

.app-main .food-result .quick-add {
  border: 1px solid var(--line);
  color: var(--accent);
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--surface);
  padding: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.app-main .food-hero {
  display: flex;
  gap: 15px;
  align-items: center;
  min-width: 0;
}

.app-main .food-hero .thumb {
  width: 72px;
  height: 82px;
}

.app-main .food-hero > div {
  min-width: 0;
  flex: 1;
}

.app-main .food-hero h2 {
  font-size: var(--text-xl);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.app-main .food-hero p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 6px 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- scan comparison
   Compact comparable rows — no large product cards with a main
   button each. The whole row opens the detail view. */

.app-main .scan-result-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
}

.app-main .scan-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.app-main .scan-result:last-child {
  border-bottom: 0;
}

.app-main .scan-result .thumb {
  width: 38px;
  height: 46px;
}

.app-main .scan-result-copy {
  flex: 1;
  min-width: 0;
  display: block;
}

.app-main .scan-result-copy > small {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-bottom: 4px;
}

.app-main .scan-result-copy > strong {
  display: block;
  font-size: var(--text-base);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.app-main .scan-result-meta {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-top: 5px;
}

.app-main .scan-result .macro-line {
  font-size: var(--text-2xs);
  gap: 4px 8px;
}

.app-main .scan-result .macro-line i {
  display: none;
}

.app-main .scan-result:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.app-main .comparison-stack {
  display: grid;
  gap: 18px;
}

.app-main .compare-energy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.app-main .compare-energy strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.3125rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- meal picker
   Meals are recognised by their content, so the picker shows the
   entries, not just the name. */

.app-main .meal-choice-list {
  display: grid;
  gap: 13px;
}

.app-main .meal-choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
}

.app-main .meal-choice.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.app-main .meal-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 0;
  text-align: left;
  padding: 15px;
  color: var(--ink);
  min-height: 60px;
}

.app-main .meal-choice.is-selected .meal-choice-head {
  background: var(--tint);
}

.app-main .meal-choice-head > span:first-child {
  flex: 1;
  min-width: 0;
}

.app-main .meal-choice-head strong {
  display: block;
  font-size: var(--text-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.app-main .meal-choice-head > span > small {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted);
  margin-bottom: 4px;
}

.app-main .meal-choice.is-selected .meal-choice-head > span > small {
  color: var(--accent);
}

.app-main .meal-choice-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.app-main .meal-choice-entries {
  padding: 0 15px 6px;
}

.app-main .meal-choice-entries > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.app-main .meal-choice-entries strong {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.app-main .meal-choice-entries small {
  display: block;
  color: var(--muted);
  font-size: var(--text-2xs);
  margin-top: 4px;
}

.app-main .meal-choice-entries > div > span:last-child {
  display: flex;
  gap: 3px;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- scanner */

.app-main .scanner-stage {
  min-height: 345px;
  position: relative;
  background: radial-gradient(ellipse at 50% 30%, #4a4c55 0, #242a38 45%, #151b29 100%);
  padding: 23px 22px;
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: center;
  overflow: hidden;
}

.app-main .scanner-stage video,
.app-main .scanner-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-main .scanner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--text-sm);
  color: #dddfe9;
  position: relative;
  z-index: 2;
}

.app-main .scanner-top .icon-button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.app-main .viewfinder {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 116px;
  border: 2px solid #c0baff;
  border-radius: 14px;
  /* Der Schatten des Konzepts: er verdunkelt alles ausserhalb des Rahmens
     und macht damit sichtbar, wohin der Barcode gehoert. Ueber einem echten
     Kamerabild tut er genau das, was er im Prototyp ueber dem gemalten
     Produkt tat. Die Statuszeile und die Kopfzeile liegen davor (z-index 1
     spaeter im Markup bzw. 2). */
  box-shadow: 0 0 0 500px #0b0e1712;
  pointer-events: none;
}

.app-main .viewfinder::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1px;
  background: #a29aff;
  box-shadow: 0 0 9px #aa9bff;
}

.app-main .scanner-stage p {
  font-size: var(--text-sm);
  color: #e7e7ef;
  text-align: center;
  line-height: 1.6;
  z-index: 1;
}

.app-main .scanner-controls {
  padding: 23px 21px;
  background: var(--surface);
  color: var(--ink);
  display: grid;
  gap: 16px;
  border-radius: 24px 24px 0 0;
}

.app-main .manual-barcode {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
}

.app-main .scan-result-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--accent);
  background: var(--tint);
  margin: auto;
}

/* Eine Mahlzeit ohne Einträge. Kein ``.empty``: das ist der große
   Leerzustand einer ganzen Seite, hier geht es um eine Zeile.
   (Stand vorher in der eigenen Datei ``components/diary.css``, die
   außer dieser Regel nichts mehr enthielt.) */
.app-main .diary-meal-empty {
  padding: 15px;
  font-size: var(--text-sm);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------- narrow phones */

@media (max-width: 350px) {
  .app-main .meal-head {
    padding: 10px;
    gap: 5px;
  }
  .app-main .meal-title {
    font-size: var(--text-base);
  }
  .app-main .meal-energy {
    font-size: var(--text-base);
  }
  .app-main .meal-controls .icon-button {
    min-width: 40px;
    padding: 8px;
  }
  .app-main .entry-front {
    padding-left: 12px;
  }
  .app-main .entry-content strong {
    font-size: var(--text-sm);
  }
  .app-main .food-result-main strong {
    font-size: var(--text-base);
  }
  .app-main .meal-choice-head {
    padding: 12px;
  }
  .app-main .meal-choice-entries {
    padding: 0 12px 5px;
  }
}

/* ---------------------------------------------------------- diary page
   Die Seitenmaße des Konzepts für genau diese Ansicht
   (``.app-content.diary { gap:17px; padding-top:19px }`` und
   ``.app-content.diary h1 { font-size:26px }``). Der Rahmen selbst gehört
   ``base.css``; ``body.diary`` ist der Haken, den die Seite setzt. */

body.diary .app-main {
  padding-top: 19px;
}

body.diary .app-container {
  gap: 17px;
}

body.diary .page-heading h1 {
  font-size: var(--text-3xl);
}

body.diary .page-heading .eyebrow {
  display: none;
}

/* ---------------------------------------------------------- gestures
   Klappen, Wischen und Umsortieren. Die Zustände setzt
   ``static/js/diary-meals.js``; was sie aussehen lassen, steht hier. */

/* Eingeklappt zeigt das Konzept einen Winkel nach rechts statt nach unten.
   Gedreht statt getauscht: dieselbe Zeichnung, dieselbe Strichstärke, und
   der Übergang ist die Bewegung, die das Klappen erklärt. */
.app-main .meal .meal-title svg {
  transition: transform var(--t-fast);
}

.app-main .meal.is-collapsed .meal-title svg {
  transform: rotate(-90deg);
}

/* Angehoben: eine Mahlzeit oder ein Eintrag, der gerade per langem Druck
   gezogen wird. ``--drag-y`` kommt aus dem Skript und folgt dem Finger; die
   Nachbarn weichen per Inline-Transform aus. ``is-settling`` gleitet die
   Karte beim Loslassen in ihren Platz, bevor das Dokument umgehängt wird. */
.app-main .meal.is-lifted,
.app-main .entry.is-lifted {
  position: relative;
  z-index: 3;
  transform: translateY(var(--drag-y, 0px));
  box-shadow: var(--shadow-md);
  cursor: grabbing;
  will-change: transform;
}

.app-main .meal.is-settling,
.app-main .entry.is-settling {
  transition: transform 0.2s var(--ease-out);
}

.app-main .meal.is-lifted .meal-head,
.app-main .meal.is-lifted .meal-head-swipe {
  background: var(--tint);
}

/* Die Eintragszeile schneidet sonst ihre Wischfläche ab; angehoben braucht
   sie den Schatten und keine Wischfläche. */
.app-main .entry.is-lifted {
  overflow: visible;
  border-bottom-color: transparent;
}

.app-main .entry.is-lifted .entry-front {
  background: var(--tint);
}

/* Solange eine Mahlzeit gezogen wird, darf die Seite nicht mitscrollen und
   nichts markiert werden. ``touch-action`` statt ``preventDefault``: die
   Zeigerereignisse bleiben passiv und der Browser weiß es vorher. */
html.is-reordering {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

html.is-reordering .app-main {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .app-main .meal .meal-title svg,
  .app-main .entry-front,
  .app-main .meal-head,
  .app-main .meal.is-settling,
  .app-main .entry.is-settling {
    transition: none;
  }
}


/* ---------------------------------------------------------- scanner overlay
   Stand bis eben in ``components/nutrition-flow.css``, das nur diese sechs
   Seiten über ``page_styles`` nachluden. Zwei Gründe für den Umzug: die
   Klassen gehören zum selben Bereich wie alles andere hier, und eine Datei,
   die nicht in ``templates/xcss.html`` steht, sieht ``stilprofil.py`` nicht —
   ``.scanner`` las sich deshalb als „in der Anwendung gar nicht gestaltet",
   obwohl es gestaltet war. */

/* Der Scanner liegt als eigene Schicht über der Seite, solange er offen
   ist -- kein eigener Bildschirm, damit der Herkunftskontext erhalten bleibt
   (ansichten/scanner.md). Er ist hier das, was das Konzept ``.scanner``
   nennt; Bühne und Steuerung stehen weiter oben in derselben Datei. */
.app-main .nutrition-scanner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  /* Die beiden Werte des Konzepts fuer ``.scanner``. */
  background: #171d2c;
  color: #fff;
  /* Safe Areas: die Schliessen-Schaltflaeche darf nicht unter der
     Statusleiste liegen, das Eingabefeld nicht unter der Home-Leiste. */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

.app-main .nutrition-scanner .scanner-stage {
  border-radius: 0;
  min-height: 0;
  height: 100%;
  justify-content: space-between;
}

/* Die Steuerung behaelt die oben gerundeten Ecken des Konzepts: sie dockt
   unten an die dunkle Buehne an, genau wie dort. Die untere Kante laeuft in
   die Safe Area, deshalb bleibt sie eckig. */
.app-main .nutrition-scanner .scanner-controls {
  border-radius: 24px 24px 0 0;
}

/* Waehrend der Scanner offen ist, scrollt die Seite darunter nicht mit. */
body.is-scanning {
  overflow: hidden;
}

/* ---------------------------------------------------------- log pages
   Mengenansicht, Eintragsbearbeitung und Anlegen packen alles in **ein**
   Formular. Im Konzept sind dieselben Blöcke direkte Kinder der Seite und
   stehen deshalb im Seitenabstand (21 px, ``.app-container`` in base.css);
   in der Hülle galten sie mit ``.stack`` als 16 px. Fünf Pixel auf jeder
   Fuge, über vier Blöcke — genau die Art Abweichung, für die es
   ``seitenabstand.py`` gibt.

   Nur die Hülle selbst, nicht ``.stack`` allgemein: innerhalb einer
   ``.panel.stack`` sind 16 px der Konzeptwert und bleiben es. */

.app-main form.stack[data-food-log-form],
.app-main form.stack[data-variant-log-form],
.app-main form.stack[data-food-create-form] {
  gap: 21px;
}

/* ---------------------------------------------------------- log pages, sizes
   Das Konzept unterscheidet die beiden Mengenansichten am Inhaltsbereich und
   gibt ihren Panel-Überschriften dort 16 px:

     .app-content.food .panel h2, .app-content.entry .panel h2 { font-size:16px }

   Bei uns ist der Haken ``body.food`` / ``body.entry`` (gesetzt in
   ``food_log_base.html`` und ``recipe_variant_log.html``), weil der
   Inhaltsrahmen ``base.html`` gehört. */

body.food .panel h2,
body.entry .panel h2 {
  font-size: var(--text-16);
}

/* Die beiden Zielband-Panels bleiben bei 12 px — das Konzept staffelt sie
   eine Stufe zurück. Die Regel steht hier noch einmal, weil ihr Gegenstück
   in ``klar.css`` dieselbe Spezifität hat und früher geladen wird: ohne
   diese Zeile gewönne die 16-px-Regel darüber. */
body.food .panel--goal-band h2,
body.entry .panel--goal-band h2 {
  font-size: var(--text-sm);
}

/* Search-specific reference styling. Keep ingredient search unchanged. */
body.search {
  --accent: #6555dd;
  --muted: #798397;
  --line: #e2e5ef;
  --bg: #f5f6fb;
  --ink: #1b2538;
  --scan-bar-h: 83px;
  --search-nav-h: calc(var(--bottom-nav-h) + max(0px, calc(var(--safe-bottom) - 12px)));
}
body.search .app-main {
  padding-top: 24px;
  padding-bottom: calc(var(--search-nav-h) + var(--scan-bar-h) + 24px);
  scroll-padding-bottom: calc(var(--search-nav-h) + var(--scan-bar-h) + 24px);
}
.app-main .search-page { display: block; min-width: 0; }
.app-main .search-page .page-heading { margin: 0 0 24px; }
.app-main .search-page .page-heading h1 { font-size: 1.75rem; letter-spacing: -1px; line-height: 1.2; margin: 9px 0 8px; }
.app-main .search-page .page-heading p { font-size: .75rem; line-height: 1.7; margin: 0; color: var(--muted); }
.app-main .search-page .search-box { min-height: 50px; padding: 0 12px; border-radius: 14px; }
.app-main .search-page .search-box input { padding: 12px 0; min-height: 48px; font-size: max(1rem,16px); }
.app-main .search-page .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #6555dd12; outline: none; }
.app-main .search-page .search-box input:focus-visible { outline: none; }
.app-main .search-page .compact-heading { margin: 23px 0 12px; }
.app-main .search-page .compact-heading h2,
.app-main .search-page .compact-heading small { font-size: .75rem; }
.app-main .search-page .compact-heading small { color: var(--muted); }
.app-main .search-page .food-results { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0; overflow: hidden; }
.app-main .search-page .food-result { padding: 0; }
.app-main .search-page .food-result-main { padding: 17px 13px; width: 100%; }
.app-main .search-page .food-result-body { flex: 1; min-width: 0; }
.app-main .search-page .food-result-main strong { font-size: .8125rem; line-height: 1.5; }
.app-main .search-page .food-result-main small { font-size: .625rem; line-height: 1.5; margin: 4px 0; }
.app-main .search-page .food-result-main .thumb { width: 36px; height: 40px; flex: 0 0 36px; border-radius: 11px; background: #f1efff; color: var(--accent); }
.app-main .search-page .food-result-main .thumb--recipe_variant { background: #e9f6f1; color: #418a73; }
.app-main .search-page .food-result-main > svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.app-main .search-page .food-result-macros { color: #697387; }
.app-main .search-page .food-result-macros b { color: #354158; font-weight: 650; }
.app-main .search-page .btn--text { background: transparent; font-size: .75rem; font-weight: 600; min-height: 44px; padding: 12px 4px; gap: 8px; color: var(--accent); }
.app-main .search-page .btn--text svg { width: 17px; height: 17px; }
.app-main .search-page__create { margin: 4px 0 0; }
.app-main .search-empty { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 28px 0 0; padding: 18px 7px 0; text-align: center; min-width: 0; }
.app-main .search-empty__art { position: relative; width: 76px; height: 76px; flex-shrink: 0; border-radius: 27px; background: #eae7fc; color: #7466cf; display: grid; place-items: center; transform: rotate(-7deg); margin: 0 auto 24px; }
.app-main .search-empty__art::after { content: ''; position: absolute; width: 15px; height: 15px; border: 4px solid var(--bg); border-radius: 50%; background: #b9afe9; right: -4px; top: 5px; }
.app-main .search-empty__art > svg { width: 33px; height: 33px; stroke-width: 1.4; transform: rotate(7deg); }
.app-main .search-empty h2 { font-size: 1.1875rem; line-height: 1.4; letter-spacing: -.6px; }
.app-main .search-empty p { font-size: .75rem; line-height: 1.8; color: var(--muted); margin: 12px 0 20px; overflow-wrap: anywhere; max-width: 100%; }
.app-main .search-empty__change { color: #5b4bc6; font-size: .75rem; font-weight: 750; min-height: 48px; border-radius: 13px; padding: 12px; margin: 0; background: white; border-color: var(--line); }
.app-main .search-empty__change svg { width: 18px; height: 18px; }
.app-main .search-empty .btn--text { margin-top: 6px; }
.app-main .search-scan-bar { position: fixed; z-index: 39; left: 0; right: 0; bottom: var(--search-nav-h); padding: 14px max(var(--page-gutter), var(--safe-right)) 14px max(var(--page-gutter), var(--safe-left)); background: var(--bg); border-top: 1px solid var(--line); }
.app-main .search-scan-bar > .btn { display: flex; width: 100%; max-width: var(--container-max); margin: 0 auto; min-height: 54px; border-radius: 16px; font-size: .875rem; font-weight: 750; gap: 12px; background: var(--accent); color: white; filter: none; }
.app-main .search-scan-bar > .btn svg { width: 24px; height: 24px; }
@media (hover: hover) {
  .app-main .search-page .food-result-main:hover { background: #faf9ff; color: inherit; }
  .app-main .search-page .btn--text:hover { background: transparent; color: #5848cf; }
  .app-main .search-empty__change:hover { border-color: var(--accent); background: white; color: #5b4bc6; }
  .app-main .search-scan-bar > .btn:hover { background: #5848cf; filter: none; }
}
/* Short phones: reduce decorative spacing, never the touch target or scroll range. */
@media (max-height: 740px) {
  body.search .app-main { padding-top: 18px; }
  .app-main .search-page .page-heading { margin-bottom: 16px; }
  .app-main .search-page .page-heading h1 { font-size: 1.625rem; }
  .app-main .search-empty { margin-top: 18px; padding-top: 8px; }
  .app-main .search-empty__art { width: 56px; height: 56px; border-radius: 20px; margin-bottom: 16px; }
  .app-main .search-empty__art > svg { width: 28px; height: 28px; }
  .app-main .search-empty h2 { font-size: 1.0625rem; }
  .app-main .search-empty p { margin: 8px 0 14px; }
}
@media (max-width: 350px) {
  .app-main .search-page .page-heading h1 { font-size: 1.5rem; }
}
@media (max-height: 420px) {
  body.search { --search-nav-h: calc(61px + max(0px, calc(var(--safe-bottom) - 12px))); }
}