/**
 * idf-autosave-badge - die Speicher-Pille (Issue 1427, Issue 1450)
 *
 * Logik: idf-autosave-badge.js (`IDF.badge.pille`). Laedt immer
 * (page-styles), weil die Pille im Kopf jeder Seite und in jedem
 * Detail-Fenster steht. Dieselbe Pille an beiden Orten (Joerg,
 * 03.10.2026: „Ueberall gleich"); wo sie steht, sagt der Ort:
 * blocks/app-header (neben den Werkzeugen), functions/detail-modal
 * (Fensterkopf).
 *
 * Ein Zeichen statt eines Worts: Diskette grau = wird gespeichert,
 * Diskette gruen = gespeichert, Warndreieck rot = Fehler. Das Wort steht
 * im Tooltip und versteckt fuer Screenreader. Opake Pastelltoene, weil
 * die Pille im Seitenkopf ueber dem Ende des Namens liegen kann.
 * Bis Issue 1427 stand das Wort selbst da („Gespeichert", „Änderungen ...",
 * „Fehler"), im Kopf mit 130 px reserviertem Platz, im Fenster in Gelb,
 * Gruen und Rot mit eigener Regel.
 */

.idf-save-pill {
  position: relative;   /* Anker des versteckten Worts */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 32px;
  height: 28px;
  margin: 0;
  padding: 0 var(--space-2, 8px);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: var(--font-md, 0.875rem);
  line-height: 1;
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* Geleert (kein Zustand, oder die gruene nach dem Ausblenden) verschwindet
   sie; im Seitenkopf steuert das Skript zusaetzlich `display`, weil sein
   Markup mit `display:none` startet. */
.idf-save-pill:empty {
  display: none;
}
.idf-save-pill.is-dirty {
  background: var(--ink-4);
  color: var(--ink-75);
}
.idf-save-pill.is-saved {
  background: var(--confirm-10);
  color: var(--confirm);
}
.idf-save-pill.is-error {
  background: var(--primary-10);
  color: var(--primary);
}
.idf-save-pill.fade-out {
  opacity: 0;
}

/* Das Wort zum Zeichen: fuer Screenreader da, zu sehen nur als Tooltip
   (Technik wie blocks/time-grid). */
.idf-save-pill-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}