/* IWENDO - OKIENKO „CO SIĘ ZMIENIŁO". JEDEN ARKUSZ DLA DWÓCH STRON.

   Czytają go CRM (`index.html`) i panel operatora (`panel/panel.html`, przez trasę
   `/opis-zmian.css`). Powód ten sam, co przy `css/pasek-komunikatu.css`: panel obiecuje
   „tak zobaczy to biuro", więc podgląd malowany własnymi regułami byłby podglądem czegoś
   innego.

   --- DLACZEGO WŁASNY ZNACZNIK, A NIE `.badge` Z `style.css` ---

   `.badge` jest zdefiniowany TYLKO w `css/style.css`, czyli w CRM. Renderer używający go
   malowałby w panelu goły tekst bez tła - i to jest dokładnie ta pułapka, która wyszła przy
   wyciąganiu paska komunikatu: nieprawidłowe `var()` albo brakująca klasa nie krzyczą,
   tylko dają inny obrazek.

   Mamy więc `.oz-znacznik`, zdefiniowany TU - czyli w pliku, który ładują OBIE strony.
   Wygląd jest przepisany z `.badge` (ta sama wysokość, promień, kropka przed treścią, te
   same pary tint/ink), a ceną jest to, że zmiana wyglądu `.badge` nie przeniesie się tu
   sama. Wybór świadomy: ważniejsze jest, żeby podgląd i CRM zgadzały się ZE SOBĄ, niż
   żeby changelog śledził zmiany plakietek na innych ekranach. Pilnuje tego
   `opis-zmian-widok.test.js`: każdy token użyty w tym pliku musi być zdefiniowany w OBU
   miejscach, które ten plik ładują.

   Kolory są wyłącznie parami `--st-*-ink` / `--st-*-tint` - to one mają sprawdzony
   kontrast AA atramentu na własnym tincie. */

.oz-wersja { margin: 16px 0 8px; }
.oz-wersja:first-child { margin-top: 0; }
.oz-data { font-weight: 400; }

.oz-lista { margin: 0; padding-left: 0; list-style: none; }
.oz-poz { padding: 8px 0; border-bottom: 1px solid var(--line); }
.oz-poz:last-child { border-bottom: 0; }

.oz-stopka { margin-top: 16px; }

/* Znacznik rodzaju i modułu - patrz nagłówek. */
.oz-znacznik {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 99px; white-space: nowrap;
}
.oz-znacznik::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.oz-znacznik.oz-nowa { background: var(--st-ok-tint); color: var(--st-ok-ink); }
.oz-znacznik.oz-poprawka { background: var(--st-info-tint); color: var(--st-info-ink); }
.oz-znacznik.oz-zachowanie { background: var(--st-uwaga-tint); color: var(--st-uwaga-ink); }
.oz-znacznik.oz-modul { background: var(--st-cichy-tint); color: var(--st-cichy-ink); }

/* PODGLĄD W PANELU - ramka wokół tego, co zobaczy biuro, żeby było widać, gdzie się
   zaczyna i kończy. W CRM ta klasa nie występuje: tam treść wypełnia całe okienko. */
.oz-podglad {
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 16px 16px; background: var(--surface);
}
.oz-podglad-pusty { color: var(--muted); }