/* drawer-tabs.css — Subregister-Leiste in Drawern (SSOT, LoD.DrawerTabs).

   ★ DAS AUSSEHEN KOMMT AUS `primitives/segmented.css` (`.seg-track`/`.seg-item`) —
   dieselbe Pillen-Leiste wie der ViewSwitcher. Bis 2026-08-01 standen hier
   Fluent-Underline-Tabs: transparente Buttons auf einer Haarlinie, aktiv ein
   2px-Strich. Das war eine ZWEITE Umschalter-Sprache neben der des Hauses, und
   die schwächere davon — ein Strich trägt kein Gewicht, und die Leiste hing
   ohne Container zwischen Titel und Inhalt, also las sie sich als Trennlinie,
   auf der zufällig Wörter stehen (Kyle 2026-08-01: „wirkt billig").

   Hier bleibt, was den DRAWER angeht: die klebende Hülle und der Scroll-Zustand.
   Scoped auf .shared-drawer (EntityDrawer/shared-drawer-Body). Nur Tokens. */

/* ── Die Hülle: klebt oben im Drawer-Body, blutet bis an dessen Kanten ──────
   `.drawer-body` ist der Scroll-Container (`overflow-y:auto`) und polstert
   waagerecht mit `--space-6`. Die Hülle hebt diese Polsterung negativ auf und
   setzt sie innen wieder — sonst liefe der Inhalt beim Scrollen seitlich an der
   Leiste vorbei. Die Polsterung MUSS an der Hülle sitzen und nicht am Track:
   der Track scrollt waagerecht, seine eigene Polsterung würde mitwandern. */
.shared-drawer .drawer-tabs-bar {
  position: sticky;
  /* ★★ NICHT `top: 0` — GEMESSEN, nicht angenommen. Ein klebendes Kind pinnt am
     CONTENT-Rand seines Scroll-Containers, und `.drawer-body` polstert oben mit
     `--space-4`. Mit `top: 0` blieb die Leiste beim Scrollen exakt 16px unter der
     Drawer-Kante stehen (im Browser gemessen: `bar.top − body.top === 16` bei
     scrollTop 600) — und durch diesen Spalt lief der Inhalt sichtbar hindurch.
     Der negative Wert hebt genau die Polsterung auf; er wirkt NUR im geklebten
     Zustand, an der Lage im Fluss ändert er nichts. */
  top: calc(-1 * var(--space-4));
  z-index: 5;
  /* Pflicht-Begleiter im Spalten-Flex des Bodys: ohne das darf Flex die Leiste
     plattdrücken (gemessener Altfall: `height: 1px` bei 380px Viewport). */
  flex: 0 0 auto;
  margin: 0 calc(-1 * var(--space-6)) var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  /* Trennlinie/Schatten NUR im angehefteten Zustand (`is-stuck` setzt
     drawer-tabs.js). Dauerhaft wäre es wieder der Divider von früher. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-quick) var(--ease-soft),
              box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .drawer-tabs-bar.is-stuck {
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 12px -8px rgba(15, 46, 72, 0.35);
}

/* ── Der Track ── Chrome (Fläche/Rahmen/Radius/Polsterung) liegt in
   `.seg-track`; hier nur das Drawer-Verhalten. Er ist inhaltsbreit, nicht
   vollbreit: das ist die Haus-Sprache (ViewSwitcher), und eine über die ganze
   Drawer-Breite gezogene Leiste behauptet eine Gleichverteilung, die die
   Reiter-Labels nicht haben. */
.shared-drawer .drawer-tabs {
  max-width: 100%;
  /* Unter ~600px ist jede Leiste zu schmal, egal wie kurz die Labels sind —
     dort scrollt der Track im EIGENEN Container (Repo-Regel: nie der Body).
     Am Desktop tritt das mit R-D3 (5 Register, Ein-Wort-Labels) nie auf. */
  overflow-x: auto;
  /* Nur waagerecht: `overflow-x` allein macht die Gegenachse ebenfalls
     scrollbar und würde die 28px-Pillen im 30px-Innenraum senkrecht kappen. */
  overflow-y: hidden;
  scrollbar-width: none;
}
.shared-drawer .drawer-tabs::-webkit-scrollbar { display: none; }

/* Fade-Kante NUR im wirklich scrollenden Zustand (Klasse setzt `syncScroll`).
   Immer angewandt würde sie den letzten Reiter auch dann ausblassen, wenn alles
   passt — also in der Regel, und das sähe nach einem Fehler aus. */
.shared-drawer .drawer-tabs--scroll {
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}

/* Panel-Wechsel: dezenter Fade (fill-mode ohne backwards). */
.shared-drawer .drawer-tab-panel { animation: drawerPanelIn var(--duration-fast) var(--ease-decelerate); }
@keyframes drawerPanelIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: nur die HÖHE der Hülle sinkt. Die waagerechte Bleed-Rechnung bleibt
   `--space-6` — gemessen: `.drawer-body` hat unter 600px KEINE andere Polsterung
   (kein Override in shared-drawer.css, keiner in responsive-overrides.css). Ein
   schmalerer Wert hier hätte die Hülle seitlich eingerückt, und der Inhalt wäre
   beim Scrollen links und rechts an ihr vorbeigelaufen — sichtbar nur auf dem
   Telefon und nur beim Scrollen. */
@media (max-width: 599px) {
  .shared-drawer .drawer-tabs-bar {
    margin-bottom: var(--space-3);
    padding-top: var(--space-1-5);
    padding-bottom: var(--space-1-5);
  }
}