/* ==========================================================================
 nav-rail-tooltip.css — Nav-Rail Hover-Tooltip (Rich-Card)

 Konsument: web/js/ui/nav-rail-tooltip.js (nutzt Popover-SSOT)

 Rich-Card als Hover-Tooltip auf den Rail-Buttons. Ersetzt den frueheren
 minimalen CSS-`::after`-Tooltip aus layout.css. Optisch angelehnt an die
 Persona-Karte (.mention-user-card / .muc-*) — gleiches Vokabular fuer
 Schatten, Border, Animation, damit alle Hover-Karten konsistent wirken.

 Aus web/styles/nav-rail-tooltip.css verschoben in
 die Mirror-Topologie zu web/js/ui/.
 ========================================================================== */

/* Optik (Radius, Tooltip-Schatten, Rahmen, Flaeche, Tooltip-Layer, Animation)
   kommt aus `.app-popover--karte` (popover-menu.css) — gesetzt in
   nav-rail-tooltip.js. Hier bleibt nichts Panel-Eigenes uebrig. */

.nrt-card {
  width: 280px;
  max-width: calc(100vw - 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3-5);
  font-family: var(--font-sans, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
}

.nrt-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nrt-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
}
.nrt-icon img {
  width: 20px;
  height: 20px;
  /* Modul-Icon in Brand-Farbe (dunkelblau) tinten — gleiche Filter-Recipe
     wie Page-Header-Icons im Light-Theme (siehe layout.css). */
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}

.nrt-title {
  font-size: 15px;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
  line-height: 1.25;
}

.nrt-description {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}