/* instalacja.css — podstrona „Dodaj do ekranu głównego" (#instaluj) i jej
   baner. OSOBNY plik z tego samego powodu, dla którego instalacja.js nie jest
   fragmentem app.js: w app.css trwają równoległe prace i dopisywanie się na
   koniec cudzego pliku to konflikt czekający na scalenie. Wszystkie kolory
   wyłącznie tokenami skórki z app.css (--tlo, --tekst, --akcent, --akcent2…),
   więc podstrona przełącza się między skórkami razem z resztą aplikacji. */

/* Widok trasy: pełny ekran nad feedem, z własnym przewijaniem. Warstwa 110 —
   nad szufladą menu (60) i zasłoną (59), pod arkuszami (120) i dymkami (130),
   żeby toast „zapisano" nadal było widać, gdyby przyszedł z tła. */
.instalacja{position:fixed;inset:0;z-index:110;overflow-y:auto;background:var(--tlo);color:var(--tekst);
  padding:calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 28px);
  box-sizing:border-box;-webkit-overflow-scrolling:touch}
/* Feed pod spodem nie przewija się razem z instrukcją — ten sam zabieg,
   którego używa ekran powitalny. */
.instalacja-otwarta .feed{overflow:hidden}

.ins-pas{display:flex;align-items:center;gap:12px;min-height:48px;max-width:520px;margin:0 auto}
.ins-wroc{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(var(--tekst-rgb),.08);color:var(--tekst);cursor:pointer}
.ins-wroc svg{width:22px;height:22px}

.ins-tresc{max-width:520px;margin:10px auto 0}
.ins-tresc h2{margin:12px 0 8px;font-size:24px;font-weight:800;line-height:1.15;color:var(--nagl)}
.ins-opis{margin:0 0 14px;font-size:15px;line-height:1.5;opacity:.85}
.ins-srodek{text-align:center}

/* Powód instalacji na iPhonie — wyróżniony kreską w barwie „60" z logo,
   bo to jest zdanie, dla którego ta podstrona istnieje. */
.ins-push{margin:0 0 18px;padding:10px 14px;border-left:3px solid var(--akcent2);
  background:rgba(var(--tekst-rgb),.06);border-radius:0 10px 10px 0;font-size:14px;line-height:1.45}

/* Kroki: licznik z CSS (numer nie jest treścią — tłumaczyć go nie trzeba),
   ikona w kaflu, opis obok. Ikony dziedziczą kolor z kafla: token --akcent2,
   ten sam co „60" w logo i strzałka podpowiedzi w feedzie. */
.ins-kroki{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:ins}
.ins-kroki li{display:flex;gap:12px;align-items:center;counter-increment:ins}
.ins-kroki li::before{content:counter(ins);flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--akcent2);color:var(--akcent2);font-size:12px;font-weight:800}
.ins-znak{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--tekst-rgb),.08);color:var(--akcent2)}
.ins-znak svg{width:26px;height:26px}
.ins-kroki p{margin:0;font-size:15px;line-height:1.45}

/* Uwaga „otwórz w Safari" — kształt kroku, ale bez numeru: to warunek
   wstępny, nie jeden z kroków. */
.ins-krok-uwaga{display:flex;gap:12px;align-items:center;margin:0 0 16px}
.ins-krok-uwaga p{margin:0;font-size:15px;line-height:1.45}

/* Przycisk natywnego monitu — kształt głównego przycisku aplikacji (.btn),
   powtórzony zamiast współdzielony, żeby nie zależeć od klas z cudzego pliku. */
.ins-przycisk{display:block;width:100%;max-width:420px;min-height:50px;margin:18px auto;border:0;border-radius:14px;
  background:var(--akcent);color:var(--na-akcencie);font:inherit;font-size:17px;font-weight:800;cursor:pointer}

/* Adres dla czytelnika przy komputerze. */
.ins-adres{display:block;margin:14px 0 18px;font-size:26px;font-weight:800;letter-spacing:.01em;color:var(--akcent2)}

/* Stan „zrobione / już zainstalowane". */
.ins-gotowe{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:26px auto 6px;
  border-radius:50%;background:rgba(var(--tekst-rgb),.08);color:var(--akcent2)}
.ins-gotowe svg{width:34px;height:34px}

/* ── Baner — pigułka nad dolną krawędzią ─────────────────────────────────
   Warstwa 25: pod górnym paskiem (30) i przyciskami akcji karty, nad tłem
   treści. Wąski, zamykalny, znika sam — patrz uzasadnienie w instalacja.js. */
.ins-baner{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:25;
  display:flex;align-items:center;gap:6px;max-width:440px;margin:0 auto;padding:6px 6px 6px 14px;
  background:var(--karta);color:var(--tekst);border:1px solid var(--kreska);border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.ins-baner-idz{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-height:44px;min-width:0;
  border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.ins-baner-idz svg{width:20px;height:20px;flex:0 0 auto;color:var(--akcent2)}
.ins-baner-idz span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-baner-zamknij{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(var(--tekst-rgb),.08);color:var(--tekst);cursor:pointer}
.ins-baner-zamknij svg{width:18px;height:18px}