/* --- Ilustracje (maskotka „ziarenko”, makro _ilustracje.html): pusty stan = obrazek + jedno ciepłe zdanie + najwyżej jeden przycisk.
   Ruch tylko w obrazku, łagodny, startuje po pojawieniu się na ekranie; przy prefers-reduced-motion postać stoi i się uśmiecha. --- */
.ilu { display: block; width: 100%; max-width: 210px; margin: 0 auto; line-height: 0; }
.ilu svg { display: block; width: 100%; height: auto; overflow: visible; }
.ilu-sm { max-width: 170px; }
.ilu-xs { max-width: 130px; }
.ilu-wait svg * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ilu svg * { animation: none !important; }
}

.ilu-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 12px 18px; }
.ilu-empty p { margin: 0; max-width: 34em; color: var(--ink-2); font-style: normal; }
.ilu-empty .ilu-say { font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--ink); }
.ilu-empty .btn { margin-top: 4px; }
.ibx-empty.ilu-empty { font-style: normal; }

/* Strona błędu i logowanie: postać nad tytułem */
.error-card .ilu { max-width: 190px; margin: 0 auto 6px; }
.login-card .ilu { max-width: 132px; margin: -6px auto -4px; }

/* Zamknięty miesiąc: mała karta sukcesu obok kroków */
.ilu-done { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ilu-done .ilu { flex: none; width: 118px; margin: 0; }
.ilu-done b { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); }
.ilu-done p { margin: 2px 0 0; color: var(--ink-2); }

/* Sukces po ciężkim zadaniu i spokój (makro karta): mała karta obok liczb albo obrazek w miejscu pustej listy — nic nie zasłania */
.ilu-win { margin: 0 0 16px; }
/* przekierowanie po zapisie prowadzi kotwicą na kartę (np. #zakup-zapisany, #podatki-zaplacone): pod przyklejonym paskiem menu (.nav)
   zostaje miejsce, więc karta jest w całości na ekranie */
.ilu-win[id], .ilu-win-empty[id] { scroll-margin-top: 112px; }
.recon-item[id] { scroll-margin-top: 112px; }  /* po „Potwierdź saldo” kotwica prowadzi na miesiąc, w którym stoi karta */
.tm-stack > .ilu-win, .fp-main > .ilu-win { margin-bottom: 0; }
.ilu-win .ilu { width: 104px; }
.ilu-win .ilu-win-text { min-width: 0; }
.ilu-win .btn { margin-top: 8px; }
.recon-detail .ilu-win { margin: 4px 0 12px; box-shadow: none; }
/* CIT: karta na początku sekcji #wynik (base.html przewija do niej stronę) — oddzielona linią od zdania o zaliczce */
#wynik > .ilu-win { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#wynik:has(> .ilu-win) { scroll-margin-top: 112px; }  /* przewinięcie do #wynik nie chowa karty pod przyklejonym menu */
.ilu-empty.ilu-win-empty .ilu-say { color: var(--ink); }
.fp-card .ilu-empty.ilu-win-empty { padding: 6px 8px 4px; }
.tm-calm { padding-top: 10px; }

@media (max-width: 480px) {
  .ilu-empty .ilu-say { font-size: 17px; }
  .ilu-done { gap: 10px; }
  .ilu-done .ilu { width: 92px; }
  .error-card .ilu { max-width: 160px; }
  /* telefon (375 px): obrazek sukcesu i kawy mniejszy, liczby strony zostają na pierwszym ekranie */
  .ilu-win .ilu { width: 72px; }
  .ilu-win b { font-size: 17px; }
  .ilu-win-empty .ilu-sm { max-width: 124px; }
  .ilu-win-empty .ilu-xs { max-width: 96px; }
}