/* Sub-Tabs Bar — shared pill-style segment control
 * Used by kitchen modules, settings, and any future sub-module navigation.
 * Height: --sub-tabs-height (default from tokens.css); override per context.
 */

.sub-tabs-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  /* Full-bleed-Rail wie .page-toolbar (Issue #577): Hintergrund, Akzentstreifen
   * und Trennlinie laufen bis zur Shell-Kante, der Tab-Inhalt sitzt in der
   * zentrierten Content-Spalte und fluchtet mit dem Seiten-Body darunter.
   * Das gilt für die Leiste ALS EIGENE RAIL: kitchen-tabs.js hängt sie als
   * GESCHWISTER des Modul-Roots in den Router-Wrapper, womit das `100%` die
   * volle Shell-Breite trifft. Liegt sie dagegen IM Modulkopf (health-tabs.js),
   * gibt sie das Rail-Verhalten ab - siehe die Trägerregel unten. (Settings
   * nutzt eine andere Tab-Mechanik, utils/tablist.js, und rendert keine
   * .sub-tabs-bar.) */
  padding-inline: var(--page-inline-pad);
  height: var(--sub-tabs-height);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.sub-tabs-bar::-webkit-scrollbar {
  display: none;
}

/* TRÄGERREGEL: eine Sub-Tab-Leiste IM Modulkopf ist keine eigene Rail mehr,
 * sondern dessen Bar-Zeile.
 *
 * Derselbe Satz wie beim Well (Session 5): der Träger entscheidet, nicht das
 * Bauteil. Sticky-Position, Seitengrund, Trennlinie, Höhe und die Fluchtlinie
 * gehören dem Kopf; trüge die Leiste sie ein zweites Mal, stünden zwei
 * Trennlinien untereinander, das Padding läge doppelt und die Leiste klebte
 * gegen den Kopf, in dem sie liegt.
 *
 * Was BLEIBT, ist die Bauart der Leiste: `overflow-x: auto` samt
 * Scroll-Affordanz. Genau darauf setzt die Shell-Regel „Tab-Leiste im
 * Modulkopf" (layout.css) auf, die jeder `[role="tablist"]` im Kopf eine eigene
 * Zeile gibt.
 *
 * Nutzer: health-tabs.js. Die Küchen-Leiste bleibt eine eigene Rail - sie
 * wechselt das MODUL und steht deshalb über dem Kopf, nicht in ihm. */
.page-toolbar > .sub-tabs-bar {
  /* relative statt static: klebt nicht (das tut der Kopf), bleibt aber der
   * Bezugsrahmen der Auswahl-Kapsel - static machte den Kopf zum offsetParent,
   * und in einer gescrollten Leiste stand die Kapsel um scrollLeft daneben. */
  position: relative;
  z-index: auto;
  height: auto;
  padding: 0;
  background-color: transparent;
  border-bottom: none;
}

/* Das Absender-Siegel einer Leiste, die selbst die Kopf-Navigation ist
 * (Leisten-Regel; heute die Küche). Form, Größe und Tönungsgrund kommen von
 * .module-seal--head in layout.css - hier steht nur, WESSEN Ton es trägt.
 *
 * --active-module-accent, nicht --module-accent: die Leiste hängt als
 * GESCHWISTER des Modul-Roots im Router-Wrapper (kitchen-tabs.js), also gilt
 * dort keine der Modul-Root-Variablen. Der aktive Akzent auf <html> ist
 * dieselbe Quelle, aus der schon der aktive Tab seine Füllung nimmt - womit
 * Siegel und Tab per Konstruktion denselben Ton tragen. */
.sub-tabs-bar > .module-seal--head {
  --seal-accent: var(--active-module-accent, var(--color-accent));
  /* Mit dem `gap` der Leiste ergibt das die 8px, die auch im Modulkopf
   * zwischen Siegel und Titel stehen. */
  margin-inline-end: var(--space-1);
}

/* Optionaler Modul-Titel links der Tabs (Canonical Page Head).
 * Größe/Weight aus der Kopf-Titelrolle: der Selektor steht in typography.css
 * in der Shell-Liste der Rolle - eine freie Utility dafür gibt es nicht. */
.sub-tabs-bar__title {
  flex-shrink: 0;
  margin-right: var(--space-2);
  color: var(--color-text-primary);
}

/* Ein Selektor für zwei Elementtypen: die Küchen-Leiste rendert `<a href>`
 * (Zielorte), die Gesundheits-Leiste `<button role="tab">` (Sichten) - siehe
 * den Kopf von utils/sub-tabs.js. Die Pille sieht in beiden Fällen gleich aus;
 * `text-decoration` und `font` sind die einzigen Stellen, an denen die
 * Browser-Defaults auseinanderlaufen. */
.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  height: var(--target-base);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  /* transform steht mit in der Liste: der Druck unten skalierte bis
   * 2026-09-26 ohne Transition - die Pille sprang auf 0.96 und zurueck
   * (Critique 2026-09-26, P3). Hinein kurz (--duration-2xs, Rueckmeldung
   * unter dem Finger), heraus mit der normalen Dauer. */
  transition:
    background-color var(--duration-sm) ease,
    color var(--duration-sm) ease,
    transform var(--duration-sm) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.sub-tab:active {
  transform: scale(0.96);
  transition-duration: var(--duration-2xs);
}

/* Aktiv = erhabene Surface-Pille, Modulton nur in der Tinte - die eine
 * Segment-Sprache der Shell (Rezept: tokens.css, Abschnitt 6c; Muster
 * .group-toggle__btn--active in tasks.css, .cal-toolbar__view-btn--active im
 * Kalender, .segmented__item.is-active in panel.css).
 *
 * Hier stand bis 2026-08-12 die GEFÜLLTE Fassung samt ihrer Begründung
 * („Modul-Akzent als TEXT erreicht auf Hell nur ~3.5:1"). Die Messung ist mit
 * den Familientönen (v2.1.0) abgelaufen: der rohe Ton hält 5.04:1 hell /
 * 4.82:1 dunkel, die --tint-ink-Mischung 7.37:1 / 6.61:1 über alle neun
 * Familien. Die vier Schwester-Fundstellen haben den Wechsel damals im
 * Kommentar nachgezogen, diese nicht.
 *
 * Diese Leiste liest `--active-module-accent` statt `--module-accent`: sie
 * sitzt in der Shell, nicht auf dem Page-Root, und kennt den Modulton nur
 * über das, was der Router aufs Dokument setzt. */
.sub-tab--active {
  background-color: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
  color: color-mix(in srgb, var(--active-module-accent, var(--color-accent)) var(--tint-ink), var(--color-text-primary));
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------
 * DER GLEITENDE AUSWAHL-INDIKATOR (geteilt, utils/segment-indicator.js)
 *
 * EINE Auswahl-Bewegung fuer jede Segment- und Tab-Leiste (Re-Critique
 * 2026-09-27, A1 P2-2): eine Kapsel HINTER den Labels gleitet vom alten zum
 * neuen Eintrag, die Worte stehen. Form und Flaeche sind die des aktiven
 * Eintrags (`--seg-active-bg`, `--seg-active-shadow`; den Radius liest der
 * Helfer vom Eintrag ab); der Eintrag gibt sie ab, sobald die Kapsel steht
 * (`[data-seg-active]`). Ohne JS bleibt alles wie vorher.
 *
 * `z-index: -1` legt sie ueber den Grund der Leiste und unter die Eintraege;
 * `isolation` macht die Leiste zum Stapelkontext, auch wo sie keinen z-index
 * traegt. `position: relative` nur per `:where()` (Spezifitaet 0): eine
 * klebende Leiste (`position: sticky`) bleibt klebend - positioniert ist sie
 * so oder so, und nur darauf kommt es an (Bezugsrahmen der Kapsel = der von
 * `offsetLeft` der Eintraege).
 *
 * Die Abgabe der Flaeche traegt 0,3,0: `.segmented__item.is-active`
 * (panel.css, 0,2,0) laedt nach diesem Blatt und gewaenne sonst.
 * -------------------------------------------------------- */
:where(.has-seg-indicator) {
  position: relative;
}

.has-seg-indicator {
  isolation: isolate;
}

.seg-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-full);
  background-color: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
  pointer-events: none;
}

.seg-indicator[hidden] {
  display: none;
}

.has-seg-indicator [data-seg-active][data-seg-active] {
  background-color: transparent;
  box-shadow: none;
}

.sub-tab__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sub-tab__label {
  /* --line-height-tight statt 1: bei `font-size: 14px` ergab `line-height: 1`
   * eine 14px hohe Zeilenbox für Glyphen, die 16px brauchen - gemessen
   * `scrollHeight 16 > clientHeight 14` auf JEDEM Viewport. Mobil kommt in
   * kitchen-tabs.css ein `overflow: hidden` dazu, das die 2px dann wirklich
   * abschneidet: die Unterlänge im „p" von „Rezepte" verlor ihre Spitze
   * (Critique 2026-07-30). Die Pillenhöhe steuert --target-base, nicht die
   * Zeilenhöhe, der Kopf wächst dadurch nicht. */
  line-height: var(--line-height-tight);
}

/* Zustandszahl im Tab.
 *
 * Nutzer: die Küchen-Leiste („Einkaufen 12", „Vorrat 8", „Mahlzeiten 10"). Sie
 * macht aus vier Schubladen eine Pipeline, in der der nächste Schritt sichtbar ist -
 * vorher lebte der Kreislauf nur in den vier Leerzustands-Hinweisen und verschwand
 * mit dem ersten Datensatz (Critique 2026-07-30, P1).
 *
 * DIESELBE GRAMMATIK WIE `.list-tab__count` in der Einkaufsliste: getönte
 * currentColor-Pille, tabellarische Ziffern. Der Zähler erbt damit die Farbe seines
 * Tabs und braucht keine eigene Kontrastrechnung. Auf dem AKTIVEN Tab kehrt er
 * sich um (Regel weiter unten): dort ist der Grund der Vollton-Akzent. */
.sub-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-4);
  margin-inline-start: var(--space-px);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  /* --color-text-primary, NICHT currentColor.
   *
   * Die Tönung hebt den GRUND an, der Text blieb aber die Tab-Tinte: auf einem
   * inaktiven Tab ergab das rgb(108,107,103) auf rgb(224,223,220) = **4.02:1** bei
   * 12px/600, unter der AA-Schwelle von 4.5 (Critique 2026-07-30). Auf dem aktiven
   * Tab ist currentColor ohnehin schon Ink, dort ändert sich nichts. Eine Zahl, die
   * zum Handeln auffordert, gehört ohnehin nicht in die zurückgenommene Tinte. */
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  /* Ohne sie springt die Leiste bei jeder Änderung seitlich. */
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}

/* `display: inline-flex` schlägt das UA-`[hidden] { display: none }` bei gleicher
 * Spezifität - der aktive Tab trug dadurch ein 16 × 0px breites totes Innenmaß
 * (Tab „Mahlzeiten" 137.9px aktiv gegen 143.3px mit Badge, gemessen). Fünfte
 * Fundstelle derselben Falle in diesem Repo; die geteilte Durchsetzungsliste in
 * layout.css greift hier nicht, weil sie nur App-Shell-Komponenten führt. */
.sub-tab__badge[hidden] {
  display: none;
}

/* NEUTRAL, NICHT ZWEIMAL IM MODULTON.
 *
 * Diese Regel hat zwei Fassungen hinter sich (Akzent als Ziffer auf Tint-Fläche,
 * dann getönte Marke auf der Surface-Pille) und beide nannten den Modulton
 * zweimal blass: `--tint-state` als Fläche UND `--tint-ink` als Ziffer darauf.
 * Die Skalen-Regel (v2.23.0) entscheidet den Fall über die Frage, was das
 * Etikett SAGT - und ein Zähler sagt „wie viele", keine Identität. Der dritte
 * Zweig der Regel greift zusätzlich: die Identität, die der Modulton nennen
 * würde, ist die des Raums, in dem der Zähler steht. Also neutral.
 *
 * Der Warnzähler drei Regeln weiter unten ist die Gegenprobe im selben File:
 * er SAGT etwas („hier fehlt was") und trägt seinen Ton deshalb voll.
 *
 * Der Ruhezustand oben bleibt unberührt: dort ist `currentColor` die neutrale
 * Tab-Tinte, seine 15-%-Tönung also ohnehin farblos. Nur auf dem aktiven Tab
 * wäre currentColor der Modulton - genau das fängt diese Regel ab. */
.sub-tab--active .sub-tab__badge {
  background-color: var(--color-fill-well);
  color: var(--color-text-primary);
}

/* Der Vorrats-Warnzähler bleibt sein eigenes Signal - auch auf dem aktiven Tab. */
.sub-tab--active .sub-tab__badge--warning {
  background-color: var(--color-warning);
  color: var(--color-ink-on-vivid);
}

/* Der einzige Ton-Ausschlag: der Vorrat ist das einzige Küchen-Signal mit einer
 * Frist (abgelaufen / fast leer). Volltonfläche statt currentColor-Tönung, damit er
 * sich auch auf dem INAKTIVEN Tab von den neutralen Zählern abhebt - dort steht
 * currentColor auf --color-text-secondary und eine 15%-Tönung davon ist kein
 * Signal. */
.sub-tab__badge--warning {
  background-color: var(--color-warning);
  color: var(--color-ink-on-vivid);
}

/* Vertical divider between tab groups */
.sub-tabs-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 var(--space-1);
}