/* Modul: Kitchen Tabs Bar
 * Layout-Fixes für Mahlzeiten/Rezepte/Einkauf bei aktiver Sub-Tab-Leiste.
 * Tab-Styles kommen aus sub-tabs.css; hier nur Kitchen-spezifische Overrides.
 */

/* Höhe auf --kitchen-tabs-height überschreiben (56px statt Standard 52px) */
.kitchen-tabs-bar {
  --sub-tabs-height: var(--kitchen-tabs-height);
  /* Der 3px-Akzentstreifen über der Leiste ist mit dem HIG-Rollout entfallen
   * (DESIGN.md: „Don't Akzentstreifen an Toolbars oder Köpfen"). Die
   * Modul-Identität trägt jetzt der gefüllte aktive Tab - dieselbe
   * Segment-Sprache wie überall. Der Sonderfall
   * `.page-toolbar--in-group` (layout.css) bleibt trotzdem richtig: er hält
   * den zweiten Kopf unter der Leiste flach (Issue #577). */
}

/* DIE LEISTE STEHT, DIE KAPSEL GLEITET (Critique 2026-09-26, A4 P2).
 *
 * Zwischen zwei Kuechen-Tabs ist die Leiste derselbe Knoten
 * (utils/kitchen-tabs.js), und die View Transition des Seitenwechsels zeigt
 * von ihr nur das lebende Bild (layout.css, Abschnitt Seiten-Uebergang) - sie
 * gleitet nicht mehr mit der Seite herein.
 *
 * Die Auswahl ist eine eigene Kapsel HINTER den Labels, die vom alten zum
 * neuen Tab gleitet. Seit der Re-Critique 2026-09-27 ist sie der geteilte
 * Baustein aller Segment-Leisten (utils/segment-indicator.js, Regeln in
 * sub-tabs.css) - hier steht nur noch, dass die Leiste beim Seitentausch
 * steht. */
.kitchen-tabs-bar {
  view-transition-name: kitchen-tabs;
}

@media (max-width: 639px) {
  .kitchen-tabs-bar {
    gap: var(--space-0h);
  }

  /* Der Modultitel „Küche" entfällt mobil: die Bottom-Nav zeigt dasselbe Wort
   * bereits als aktives Element, hier kostete er ~70px, die den Tab-Labels
   * fehlten. Bei drei Tabs war die Leiste damit „randvoll" (so die frühere
   * RAIL_PAD_EXCEPTIONS-Begründung); seit Vorrat als vierter Tab dazukam,
   * ellipsierten bei 393px alle drei inaktiven Labels zu „Rez…" / „Eink…"
   * (Critique 2026-07-29). Ohne den Titel reicht der Platz wieder, und die
   * Leiste kann das reguläre --page-inline-pad tragen - womit auch der
   * 8px-Versatz zum Body-Inhalt verschwindet. */
  .kitchen-tabs-bar .sub-tabs-bar__title {
    display: none;
  }

  /* NATÜRLICHE BREITE, kein Gleichverteilen - die Leiste scrollt lieber, als ein
   * Label zu kürzen.
   *
   * Hier stand `flex: 1 1 0` mit `min-width: 0` plus Ellipse am Label: alle vier
   * Tabs gleich breit, und wer nicht passt, wird gekürzt. Das ging auf, solange die
   * Tabs nur Labels trugen (gemessen: 4 × 89px bei 393px, „Mahlzeiten" brauchte
   * 72px und bekam sie knapp). Mit den Zustandszahlen kostete jeder Badge 20-22px
   * aus derselben Zelle - bei 393px war „Mahlzeiten" wieder gekürzt (61 von 72),
   * bei 320px drei von vier Labels.
   *
   * Die Rechnung ohne Gleichverteilung: 72 + 55 + 66 + 41 Label + 42 Badge + 16
   * Polster + 6 Gap = 298px. Das passt in 320px, und Deutsch ist die längste
   * Locale. Wo es doch nicht passt (längere Übersetzung, größere Systemschrift),
   * scrollt die Leiste - sie ist `overflow-x: auto`, trägt die geteilten
   * has-fade-Masken und holt den aktiven Tab per scrollActiveIntoView() ins Bild.
   *
   * Das folgt derselben Regel, mit der eine Zeile weiter unten das ICON weicht und
   * nicht das Wort: ein gekürztes „Mahlz…" kostet mehr Orientierung als ein Tab, für
   * den man wischen muss. */
  .kitchen-tabs-bar .sub-tab {
    flex: 0 0 auto;
    justify-content: center;
    gap: var(--space-0h);
    /* 8px statt 2px seit dem HIG-Rollout: der aktive Tab ist jetzt eine
     * GEFÜLLTE Kapsel (--target-base = 48px hoch auf Fingergeräten). Mit 2px
     * Polster schrumpfte sie auf Textbreite und las sich als Blase um das Wort
     * statt als Segment. Die Rechnung der obigen Notiz bleibt gültig, nur mit
     * 64px statt 16px Polster: 234 Label + 42 Badge + 64 + 6 Gap = 346px, passt
     * in 375px. Darunter greift der dort beschriebene Weg - die Leiste scrollt,
     * statt ein Wort zu kürzen. */
    padding-inline: var(--space-2);
  }

  /* Mobil weicht das Icon, nicht das Label. Vier Tabs teilen sich auf 393px
   * ~90px pro Stück; „Mahlzeiten" allein braucht 73px Label + 16px Icon + die
   * Abstände, also ~95px - beides passt nicht nebeneinander. Das Wort ist der
   * bessere Anker: die Bottom-Nav trägt dieselben Icons bereits, und ein auf
   * „Mahlz…" gekürztes Label kostet mehr Orientierung als ein fehlendes
   * Piktogramm. Gilt im ganzen 640er-Breakpoint statt ab einer eigenen
   * 480er-Schwelle - der Breakpoint-Kontrakt (tokens.css §11c) lässt nur
   * 640/768/1024/1440 zu, und ein einheitlicher Mobilzustand ist ohnehin
   * leichter zu lesen als drei Stufen. Das ellipsis oben bleibt als
   * Sicherheitsnetz für noch schmalere Geräte und lange Übersetzungen. */
  .kitchen-tabs-bar .sub-tab__icon,
  .kitchen-tabs-bar .sub-tab > svg {
    display: none;
  }
}

/* Mahlzeiten + Rezepte: Viewport-Höhe um Tab-Leiste reduzieren (Mobile).
 * Ohne diese Reduktion ist die Seite um --kitchen-tabs-height zu hoch und
 * der äußere .app-content-Scrollcontainer läuft über → beim Scrollen wandert
 * die gesamte Seite (z.B. week-nav + Tages-Header) statt nur des inneren
 * Scrollbereichs. .meals-page und .recipes-page teilen dieselbe Basisformel. */
/* Die vier Küchen-Seiten füllen den Platz UNTER der Tab-Leiste.
 *
 * Vorher rechneten diese beiden Blöcke die Viewport-Höhe nach
 * (`100dvh - safe-top - nav - safe-bottom - tabs`), und zwar in zwei leicht
 * verschiedenen Fassungen - der Einkauf ließ --safe-area-inset-top aus. Eine
 * nachgerechnete Höhe kennt nur, was zum Zeitpunkt des Schreibens unter der
 * Seite lag: die FAB-Zone (--fab-safe-zone) kam später dazu und fehlte in
 * beiden, weshalb die Seiten aus der verkürzten .app-content herausliefen und
 * sie selbst scrollbar machten.
 *
 * `100%` liest den Platz, statt ihn zu erraten - die Kette .app-content →
 * .page-transition → Seite reicht ihn durch. Jede künftige Änderung an der
 * Shell wirkt damit automatisch hier. */
.has-kitchen-tabs .meals-page,
.has-kitchen-tabs .recipes-page,
.has-kitchen-tabs .shopping-page,
.has-kitchen-tabs .pantry-page {
  height: calc(100% - var(--kitchen-tabs-height));
}

/* Mahlzeiten + Rezepte + Einkauf: Viewport-Höhe (Desktop) */
@media (min-width: 1024px) {
  .has-kitchen-tabs .meals-page,
  .has-kitchen-tabs .recipes-page,
  .has-kitchen-tabs .shopping-page,
  .has-kitchen-tabs .pantry-page {
    height: calc(100% - var(--kitchen-tabs-height));
  }
}