/* Portal klienta Zorny - system projektowy.
 *
 * Zrodlo: projekt Claude Design "System projektowy czterema plikami"
 * (0-system.html), zatwierdzony 18.08.2026. Ten plik jest wiernym
 * przeniesieniem wartosci projektowych i komponentow z tamtego pliku, z
 * trzema swiadomymi odstepstwami opisanymi nizej.
 *
 * DLACZEGO OSOBNY ARKUSZ, A NIE DOPISEK DO panel.css: panel.css (okolo 970
 * wierszy) trzyma caly obszar asystenta na zmiennych --za-*. Nowy system
 * wchodzi obok, wiec zmiana wygladu portalu nie moze przypadkiem ruszyc
 * dzialajacego panelu klienta asystenta. Oba arkusze wczytuja sie razem.
 *
 * ODSTEPSTWA OD PLIKU PROJEKTU (kazde ma powod):
 *   1. Przyciski nazywaja sie .przycisk, nie .btn. W panel.css istnieje juz
 *      jedenascie regul dla .btn (obszar asystenta) i przejecie tej nazwy
 *      przemalowaloby dzialajacy panel przy okazji. Ujednolicenie obu
 *      obszarow na jednym przycisku to osobna, swiadoma robota.
 *   2. Pasek kamieni na desktopie NIE ma sztywnych pieciu kolumn. Projekt
 *      zaklada repeat(5,1fr), ale liczba kamieni jest danymi (admin doda
 *      czwarty albo siodmy), wiec siatka liczy kolumny sama przez
 *      grid-auto-flow:column. Wyglad przy pieciu kamieniach jest identyczny.
 *   3. Dolozona regula prefers-reduced-motion, o ktora autor systemu prosi
 *      wprost w uwagach wdrozeniowych.
 *
 * KROJ SORA JEST HOSTOWANY U NAS od 18.08.2026 - pliki leza w
 * worker/public/panel/assets/, reguly @font-face sa zaraz pod tym
 * komentarzem. Stos --font zachowuje zapas systemowy na wypadek, gdyby plik
 * kiedys nie dojechal.
 */

/* ============ KROJ SORA, HOSTOWANY U NAS ============
 * Ten sam kroj co zorna.pl, ale plik lezy na NASZYM serwerze
 * (worker/public/panel/assets/), nie na serwerach Google. Powod jest
 * dwojaki: polityka bezpieczenstwa panelu nie wpuszcza zasobow z obcych
 * domen (default-src 'none', font-src 'self' w src/util.js), a poza tym
 * zaden adres klienta nie wycieka wtedy do zewnetrznego dostawcy przy
 * kazdym otwarciu portalu.
 *
 * Sora jest krojem zmiennym na licencji SIL Open Font License, wiec
 * hostowanie wlasnej kopii jest dozwolone. Jeden plik obsluguje caly zakres
 * wag, dlatego font-weight jest podany jako zakres, a nie pojedyncza waga.
 * Dwa podzbiory znakow: "latin" i "latin-ext" - ten drugi jest OBOWIAZKOWY,
 * bo to w nim siedza polskie znaki (a z ogonkiem, l z kreska, s z kreska...).
 * Zakresy Unicode sa przepisane z arkusza Google, zeby przegladarka
 * pobierala tylko ten podzbior, ktorego naprawde potrzebuje.
 */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('/panel/assets/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('/panel/assets/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ WARTOSCI PROJEKTOWE ============ */
:root{
  /* kolory: tlo i powierzchnie */
  --tlo:#050607;
  --tlo-szyt:#08090b;
  --karta:#0b0c0e;
  --karta-wnetrze:#101216;
  --pole:#16181b;
  /* kolory: tekst */
  --tekst:#eef0f2;
  --tekst-wygaszony:#9aa0a6;
  --tekst-slaby:#6f767c;
  /* kolory: obrysy */
  --linia:rgba(255,255,255,.08);
  --linia-mocna:rgba(255,255,255,.16);
  --linia-jasna:rgba(255,255,255,.28);
  /* kolory: znaczenie */
  --sukces:#7ee0a8;
  --blad:#ff8a80;
  --ruch:#e3a86a;             /* pilka po stronie klienta, ruch nalezy do niego */
  /* odstepy */
  --o1:4px; --o2:8px; --o3:12px; --o4:16px; --o5:20px;
  --o6:24px; --o7:32px; --o8:40px; --o9:56px; --o10:72px;
  /* promienie */
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:22px; --r-pill:999px;
  /* cienie */
  --cien-karta:0 24px 60px -34px rgba(0,0,0,.7);
  --cien-baner:0 34px 80px -44px rgba(0,0,0,.85);
  --cien-btn:0 14px 40px -12px rgba(255,255,255,.25);
  /* kroj */
  --font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}

.ikona{display:block;flex:none}

/* ============ PASEK GORNY ============ */
.szyt{
  display:flex;align-items:center;justify-content:space-between;gap:var(--o4);
  padding:14px 16px;background:var(--tlo-szyt);border-bottom:1px solid var(--linia);
}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.marka-znak{width:26px;height:26px;flex:none;display:grid;place-items:center}
.marka-znak img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,255,255,.16))}
.marka-nazwa{font:300 17px var(--font);letter-spacing:.06em}
.marka-pion{
  font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-slaby);padding-left:10px;border-left:1px solid var(--linia-mocna);
}
.szyt-prawa{display:flex;align-items:center;gap:var(--o3)}
.szyt-konto{display:none;font:300 13px var(--font);color:var(--tekst-wygaszony)}

/* ============ UKLAD ============ */
.strona{
  max-width:1160px;margin:0 auto;padding:16px 16px 56px;
  display:flex;flex-direction:column;gap:var(--o3);
}
.sekcja{display:flex;flex-direction:column;gap:var(--o3)}
.etykieta-sekcji{
  font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-slaby);padding:var(--o2) var(--o1) 0;margin:0;
}

/* ============ KARTA ============ */
.karta{
  background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-l);box-shadow:var(--cien-karta);
  padding:var(--o5);
}

/* ============ PRZYCISKI (patrz odstepstwo 1 na gorze pliku) ============ */
.przycisk{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:400 14.5px var(--font);letter-spacing:.02em;
  padding:14px 24px;border-radius:var(--r-pill);min-height:48px;
  border:0;cursor:pointer;text-decoration:none;
  transition:translate .3s var(--ease),box-shadow .3s,background .3s,color .3s;
}
.przycisk-glowny{background:var(--tekst);color:#050607}
.przycisk-glowny:hover{color:#050607;translate:0 -2px;box-shadow:var(--cien-btn)}
.przycisk-drugi{box-shadow:inset 0 0 0 1px var(--linia-jasna);color:var(--tekst);background:none}
.przycisk-drugi:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.06)}
.przycisk-szeroki{width:100%}
.przycisk-maly{font-size:13px;padding:10px 18px;min-height:40px}
.przycisk:focus-visible{outline:2px solid var(--tekst);outline-offset:3px}
.przycisk .ikona{width:18px;height:18px}

/* ============ PLAKIETKA I CHIP ============ */
.plakietka{
  display:inline-flex;align-items:center;
  font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-wygaszony);background:rgba(255,255,255,.06);
  border:1px solid var(--linia-mocna);border-radius:var(--r-pill);padding:5px 11px;
}
.chip-etap{
  display:inline-flex;align-items:center;gap:8px;
  font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tekst);border:1px solid var(--linia-jasna);
  border-radius:var(--r-pill);padding:6px 13px;
}

/* ============ BANER: CZYJA PILKA ============ */
.pilka{
  position:relative;overflow:hidden;
  background:var(--karta);border:1px solid var(--linia-mocna);
  border-radius:var(--r-xl);box-shadow:var(--cien-baner);
  padding:24px 20px 26px;
  display:flex;flex-direction:column;gap:var(--o3);
}
.pilka::before{
  content:"";position:absolute;top:-60%;right:-30%;width:90%;height:220%;
  pointer-events:none;
}
.pilka-nasza::before{background:radial-gradient(closest-side,rgba(126,224,168,.16),transparent 72%)}
.pilka-twoja::before{background:radial-gradient(closest-side,rgba(227,168,106,.2),transparent 72%)}
.pilka-gora{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--o3);flex-wrap:wrap}
.pilka-kto{display:flex;align-items:center;gap:9px;font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;margin:0}
.pilka-nasza .pilka-kto{color:var(--sukces)}
.pilka-twoja .pilka-kto{color:var(--ruch)}
.kropka{width:8px;height:8px;flex:none;border-radius:50%;background:currentColor;animation:puls 2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.pilka-znacznik{font:400 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-slaby);margin:0}
.pilka h1{position:relative;font:300 clamp(28px,8.4vw,34px)/1.08 var(--font);letter-spacing:-.02em;margin:0}
.pilka-podpis{position:relative;font:300 16px/1.5 var(--font);color:#c6cbd0;max-width:34ch;margin:0}
.pilka-nota{position:relative;font:300 15px/1.5 var(--font);color:var(--tekst-wygaszony);margin:0}

/* ============ KARTA PROJEKTU ============ */
.projekt-gora{display:flex;flex-direction:column;gap:var(--o3)}
.projekt-plakietki{display:flex;flex-wrap:wrap;gap:var(--o2);align-items:center}
.projekt-nazwa{font:400 20px/1.3 var(--font);letter-spacing:-.01em;margin:0}
.projekt-termin{
  margin-top:var(--o4);background:var(--karta-wnetrze);
  border:1px solid var(--linia);border-radius:var(--r-m);
  padding:var(--o4);display:flex;flex-direction:column;gap:var(--o4);
}
.termin-tresc{display:flex;flex-direction:column;gap:6px}
.termin-etykieta{display:flex;align-items:center;gap:8px;font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby);margin:0}
.termin-etykieta .ikona{width:15px;height:15px}
.termin-data{font:400 20px/1.2 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:0}
.termin-co{font:300 14.5px var(--font);color:var(--tekst-wygaszony);margin:0}

/* ============ KAMIENIE MILOWE ============ */
.kamienie{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.kamien{position:relative;display:grid;grid-template-columns:24px 1fr;gap:var(--o4);padding-bottom:var(--o5)}
.kamien:last-child{padding-bottom:0}
.kamien-znacznik{
  position:relative;z-index:1;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--karta);
  border:1px solid var(--linia-mocna);color:var(--tekst-slaby);
}
.kamien-znacznik .ikona{width:14px;height:14px}
.kamien:not(:last-child)::before{
  content:"";position:absolute;left:11.5px;top:24px;bottom:0;width:1px;background:var(--linia-mocna);
}
.kamien-tresc{display:flex;flex-direction:column;gap:4px;padding-top:1px}
.kamien-nazwa{font:300 15.5px/1.35 var(--font);color:var(--tekst-wygaszony)}
.kamien-data{font:400 12.5px var(--mono);letter-spacing:.04em;color:var(--tekst-wygaszony);font-variant-numeric:tabular-nums}
.kamien-stan{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby)}
.kamien-zmiana{font:300 13px/1.4 var(--font);color:var(--ruch)}
.kamien-gotowy .kamien-znacznik{background:var(--sukces);border-color:var(--sukces);color:#04150c}
.kamien-gotowy .kamien-stan{color:var(--sukces)}
.kamien-gotowy .kamien-nazwa{color:var(--tekst-wygaszony)}
.kamien-gotowy:not(:last-child)::before{background:rgba(126,224,168,.4)}
.kamien-w-toku .kamien-znacznik{border-color:#fff;color:var(--tekst)}
.kamien-w-toku .kamien-znacznik .rdzen{width:9px;height:9px;border-radius:50%;background:var(--tekst)}
.kamien-w-toku .kamien-nazwa{color:var(--tekst);font-weight:400;font-size:16.5px}
.kamien-w-toku .kamien-data{color:var(--tekst)}
.kamien-w-toku .kamien-stan{color:var(--tekst)}
.kamien-przed .kamien-nazwa{color:var(--tekst-slaby)}

/* ============ ZDARZENIA ============ */
.zdarzenia{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.zdarzenie{display:flex;flex-direction:column;gap:5px;padding:var(--o4) 0;border-top:1px solid var(--linia)}
.zdarzenie:first-child{border-top:0;padding-top:var(--o1)}
.zdarzenie:last-child{padding-bottom:var(--o1)}
.zdarzenie-data{font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-slaby);font-variant-numeric:tabular-nums}
.zdarzenie-tekst{font:300 15.5px/1.5 var(--font);color:var(--tekst)}

/* ============ POZYCJE DO DOSTARCZENIA ============ */
.dostawy{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.dostawa{display:flex;align-items:center;gap:var(--o4);padding:15px 0;border-top:1px solid var(--linia)}
.dostawa:first-child{border-top:0;padding-top:var(--o1)}
.dostawa:last-child{padding-bottom:var(--o1)}
.dostawa-znacznik{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--linia-jasna)}
.dostawa-nazwa{flex:1;font:300 15.5px/1.4 var(--font)}
.dostawa-stan{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ruch)}

/* ============ STAN PUSTY ============ */
.pusty{
  background:var(--karta-wnetrze);border:1px solid var(--linia);border-radius:var(--r-m);
  padding:var(--o5);display:flex;flex-direction:column;gap:10px;
}
.pusty .ikona{width:20px;height:20px;color:var(--tekst-slaby)}
.pusty-tytul{font:400 15.5px var(--font);color:var(--tekst);margin:0}
.pusty-tekst{font:300 14.5px/1.6 var(--font);color:var(--tekst-wygaszony);max-width:52ch;margin:0}

/* ============ POLE FORMULARZA I EKRAN LOGOWANIA ============ */
.pole-grupa{display:flex;flex-direction:column;gap:8px}
.pole-etykieta{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby)}
.pole{
  width:100%;background:var(--pole);color:var(--tekst);
  border:1px solid var(--linia-mocna);border-radius:var(--r-m);
  padding:14px 16px;min-height:50px;font:300 16px/1.4 var(--font);
  transition:border-color .25s,background .25s;
}
.pole::placeholder{color:var(--tekst-slaby)}
.pole:hover{border-color:var(--linia-jasna)}
.pole:focus{outline:2px solid var(--tekst);outline-offset:2px;border-color:transparent}
.pole-blad{border-color:var(--blad)}
.komunikat-blad{display:flex;align-items:flex-start;gap:10px;font:300 14px/1.5 var(--font);color:var(--blad);margin:0}
.komunikat-blad .ikona{width:17px;height:17px;margin-top:2px}
.logowanie{min-height:100dvh;display:flex;flex-direction:column}
.logowanie-tresc{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--o7) var(--o4) var(--o9)}
.karta-log{display:flex;flex-direction:column;gap:var(--o5);padding:var(--o6) var(--o5);width:100%;max-width:440px}
/* Stany ekranu logowania (formularz, po wyslaniu, blad) siedza w osobnych
 * kontenerach, ktore login.js przelacza klasa .hidden. Ten dodatkowy poziom
 * miedzy .karta-log a trescia zjadal odstep karty, wiec naglowek sklejal sie
 * z formularzem (znalezione przy przegladzie na zywo 18.08.2026). Kontener
 * stanu powtarza wiec uklad karty. */
.karta-log > div:not(.hidden){display:flex;flex-direction:column;gap:var(--o5)}
.log-naglowek{display:flex;flex-direction:column;gap:8px}
.log-naglowek h1{font:300 24px/1.2 var(--font);letter-spacing:-.015em;margin:0}
.log-naglowek p{font:300 15px/1.55 var(--font);color:var(--tekst-wygaszony);margin:0}
.form{display:flex;flex-direction:column;gap:var(--o4)}
.log-dol{display:flex;justify-content:center;padding-top:var(--o1)}
.log-drugie{font:300 13.5px var(--font);color:var(--tekst-wygaszony);text-decoration:underline;text-underline-offset:3px}
.log-drugie:hover{color:var(--tekst)}
.log-ikona{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--karta-wnetrze);border:1px solid var(--linia-mocna);color:var(--tekst);
}
.log-ikona .ikona{width:24px;height:24px}
.log-mail{color:var(--tekst)}
.log-stopka{
  padding:var(--o5) var(--o4) var(--o6);text-align:center;
  font:300 13px/1.6 var(--font);color:var(--tekst-slaby);border-top:1px solid var(--linia);margin:0;
}
.log-stopka a{color:var(--tekst-wygaszony);text-decoration:underline;text-underline-offset:3px}

/* ============ DESKTOP ============ */
@media (min-width:760px){
  .szyt{padding:16px 32px}
  .szyt-konto{display:block}
  .strona{padding:var(--o6) var(--o5) var(--o10);gap:var(--o4)}
  .karta{padding:var(--o6) var(--o7)}
  .etykieta-sekcji{padding:var(--o4) var(--o1) 0}

  .pilka{padding:40px 36px 42px;gap:var(--o4)}
  .pilka h1{font-size:clamp(38px,3.8vw,48px);line-height:1.02;letter-spacing:-.025em}
  .pilka-podpis{font-size:18.5px;max-width:44ch}

  .projekt-gora{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--o6)}
  /* Tylko naglowek karty projektu; w reszcie panelu .projekt-plakietki to
   * zwykly wiersz, ktory musi sie zawijac (dlugi tekst, rzedy przyciskow). */
  .projekt-gora .projekt-plakietki{flex:none;flex-wrap:nowrap}
  .projekt-nazwa{font-size:24px}
  .projekt-termin{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--o5) var(--o6)}
  .termin-data{font-size:22px}

  /* Pasek kamieni: caly projekt w jednym rzedzie, bez przewijania w bok.
   * Odstepstwo 2 z gory pliku: kolumny liczy siatka, nie sztywne piec, bo
   * liczba kamieni jest danymi z bazy. */
  .kamienie{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding-top:var(--o1)}
  .kamien{
    grid-template-columns:1fr;gap:var(--o3);padding:0 16px var(--o1);
    justify-items:start;
  }
  .kamien:not(:last-child)::before{display:none}
  .kamien:not(:last-child)::after{
    content:"";position:absolute;left:28px;width:100%;top:12px;height:1px;background:var(--linia-mocna);
  }
  .kamien-gotowy:not(:last-child)::after{background:rgba(126,224,168,.55)}
  .kamien-tresc{gap:5px}
  .kamien-nazwa{font-size:15px}
  .kamien-w-toku .kamien-nazwa{font-size:16px}
}

/* ============ MNIEJ RUCHU ============ */
@media (prefers-reduced-motion: reduce){
  .kropka{animation:none}
  .przycisk{transition:none}
  .przycisk-glowny:hover{translate:none}
}

/* ============================================================================
 * DOPISKI: SEKCJA ADMINA OBSZARU PROJEKTU (panel-projekt.js)
 *
 * Przebudowa sekcji admina (zakladanie/edycja projektow i kamieni milowych,
 * rotacja tokenow) na system projektowy powyzej ujawnila cztery naprawde
 * brakujace elementy - zaden gotowy komponent z 0-system.html ich nie
 * pokrywal. Kazdy opisany osobno przy regule. Wszystko inne w tej sekcji
 * (karty, przyciski, pola, .komunikat-blad, .pusty, .form, .projekt-plakietki
 * jako wiersz elastyczny) to komponenty juz istniejace wyzej w tym pliku,
 * uzyte wprost, bez zmian.
 * ============================================================================ */

/* .komunikat-blad juz istnial (blad na ekranie logowania), ale sekcja admina
 * pokazuje pod kazdym formularzem (projekt/kamien/token/token demo) jeden
 * wiersz statusu w trzech stanach: ukryty (klasa .hidden), blad (istniejacy
 * .komunikat-blad) i "zapisywanie.../zapisano" - na ten trzeci stan brakowalo
 * klasy. Ten sam ksztalt co .komunikat-blad, bez ikony (te komunikaty sa
 * krotkim zdaniem, bez wzoru z ikona w zadnym istniejacym miejscu portalu).
 * JS przelacza cala klase elementu (nigdy nie laczy z .komunikat-blad
 * jednoczesnie), wiec nie ma tu konfliktu kolejnosci regul. */
.komunikat-sukces{font:300 14px/1.5 var(--font);color:var(--sukces);margin:0}

/* Listy admina (wybor projektu do edycji, wybor kamienia milowego do edycji)
 * maja dokladnie ten sam uklad co .zdarzenia/.zdarzenie (dwie linie tresci
 * oddzielone gorna kreska) - jedyna roznica jest to, ze te konkretne wiersze
 * mozna kliknac. Modyfikator doklada WYLACZNIE kursor/podswietlenie, celowo
 * nie rusza border/padding, ktore i tak przychodzi z .zdarzenie. */
.zdarzenie-klik{cursor:pointer}
.zdarzenie-klik:hover{background:rgba(255,255,255,.04)}
.zdarzenie-klik:focus-visible{outline:2px solid var(--tekst);outline-offset:-2px}

/* Jedyny checkbox w calym portalu (pole "Projekt pokazowy" w formularzu
 * projektu) - system projektowy nie definiuje dla niego zadnego komponentu.
 * Prosty wiersz: naturalny checkbox w rozmiarze wygodnym do kliknięcia, obok
 * opisu, w kolorach systemu. */
.pole-checkbox{display:flex;align-items:flex-start;gap:10px;font:300 14.5px/1.4 var(--font);color:var(--tekst);cursor:pointer}
.pole-checkbox input{width:19px;height:19px;flex:none;accent-color:var(--tekst);margin-top:1px}

/* System nie ma wzorca na "pole tekstowe + przycisk w jednym rzedzie" (wszedzie
 * indziej .pole stoi samo w .pole-grupa) - potrzebny w sekcji admina do
 * pokazania nowo wygenerowanego tokenu (uwag/demo) obok przycisku Kopiuj. Na
 * bardzo waskim ekranie pole i przycisk ida pod soba, zeby przycisk mial
 * pelna szerokosc do klikniecia zamiast kurczyc sie obok dlugiego tokenu. */
.pole-z-przyciskiem{display:flex;flex-wrap:wrap;gap:var(--o3);align-items:stretch}
.pole-z-przyciskiem .pole{flex:1 1 220px;min-width:0}
.pole-z-przyciskiem .przycisk{flex:none}
@media (max-width:480px){
  .pole-z-przyciskiem{flex-direction:column}
  .pole-z-przyciskiem .przycisk{width:100%}
}

/* ============ TELEFON: DOTYK I CZYTELNOSC ============
 * Blok dopisany 18.08.2026 po pomiarach na ekranie 375 pikseli (nie na oko).
 * Uzupelnia sekcje DESKTOP wyzej: tam sa zmiany ukladu, tutaj wylacznie
 * rzeczy, ktore na telefonie sa problemem obslugi, nie estetyki.
 *
 * Zmierzone i naprawione ponizej:
 *   1. Przelacznik obszarow miał 37 pikselow wysokosci, czyli ponizej progu
 *      wygodnego dotyku (przyjmujemy 44).
 *   2. Znak marki w pasku byl paskiem wysokim na 26 pikseli, a jest linkiem.
 *   3. Pole wyboru "projekt pokazowy" mialo 19 pikselow.
 *   4. Lista firm i inne pola ponizej 16 pikselow pisma powoduja na iPhonie
 *      automatyczne powiekszenie widoku przy wejsciu w pole, po ktorym
 *      uzytkownik zostaje z rozjechanym ukladem.
 * Sprawdzone przy okazji i NIE wymagajace zmian: strona nie przewija sie w
 * poziomie, a tabele obszaru asystenta siedza w kontenerze z wlasnym
 * przewijaniem (.table-scroll), wiec nic nie jest obcinane.
 */
@media (max-width:759px){
  .marka{padding:9px 0}
  .area-nav-btn{min-height:44px;padding-left:20px;padding-right:20px}
  /* Poprawka po przegladzie 19.08.2026: etap 3 oparl na .przycisk-maly swoje
     GLOWNE akcje na telefonie (podpis akceptacji, "Mam to gotowe", "Wyslij",
     "Dodaj plik"), a ta klasa ma 40 pikseli wysokosci, czyli ponizej progu
     przyjetego w tym bloku. Na desktopie zostaje 40, bo tam myszka nie ma z
     tym klopotu i mniejszy przycisk jest celowy. */
  .przycisk-maly{min-height:44px}
  .pole-checkbox{min-height:44px;align-items:center}
  .pole-checkbox input{width:24px;height:24px;margin-top:0}
  /* 16 pikselow to prog, ponizej ktorego Safari na iOS przybliza widok przy
     wejsciu w pole, a po przyblizeniu uklad wyglada, jakby uciekal poza
     ekran. Regula CELOWO nie wymienia typow pol z nazwy - pierwsza wersja
     tak robila i przegapila haslo, telefon i liczbe, przez co ekran
     logowania haslem nadal potrafil skoczyc. Wykluczone sa tylko te typy,
     ktore nie przyjmuja tekstu, wiec przybliżenia nie wywoluja. */
  .pole,
  .firm-switcher,
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]){font-size:16px}
  .firm-switcher{min-height:44px}
  /* Przycisk zakladania nowego projektu stal wprost na etykiecie pierwszego
     pola formularza pod nim - na telefonie czytalo sie to jak jedna calosc. */
  #admin-projekt-new-btn{margin-bottom:var(--o4)}
}

/* Najwezsze telefony (iPhone SE i starsze Androidy, ponizej 360 pikseli):
 * dopisek "portal klienta" w pasku lamal sie na dwie linie i rozpychal
 * naglowek. Znak marki i slowo "zorna" wystarcza do rozpoznania, gdzie
 * jestesmy, wiec pion znika. */
@media (max-width:359px){
  .marka-pion{display:none}
}

/* ============ PASEK GORNY: LISTA FIRM NIE MOZE ROZPYCHAC STRONY ============
 * Zgloszenie z prawdziwego iPhone'a (18.08.2026): tresc zajmowala polowe
 * ekranu, a przycisk wylogowania byl poza kadrem. Zmierzone: przy oknie 390
 * pikseli strona miala 620, bo prawa strona paska (lista firm plus
 * wylogowanie) nie miescila sie i NIE mogla sie skurczyc - element listy
 * rozwijanej przyjmuje szerokosc najdluzszej nazwy firmy (tu 322 piksele), a
 * domyslne min-width:auto na elemencie flex zabrania mu zejsc ponizej tresci.
 * Deklarowane wczesniej max-width:100% nic nie dawalo, bo rodzic sam rosl
 * razem z nim.
 *
 * Naprawa jest dwuczesciowa i celowo nie polega na chowaniu przewijania:
 *   1. min-width:0 na obu grupach paska, zeby w ogole MOGLY sie kurczyc.
 *   2. Na telefonie lista firm dostaje wlasny wiersz na pelna szerokosc.
 *      Zadna nazwa firmy nie zmiesci sie obok znaku marki i wylogowania na
 *      ekranie szerokim na 375 pikseli, wiec proba upychania jej w jednym
 *      rzedzie jest z gory przegrana.
 */
.szyt{flex-wrap:wrap}
.marka{min-width:0}
.szyt-prawa{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.firm-switcher{min-width:0;max-width:100%}
@media (max-width:759px){
  .szyt{gap:var(--o2)}
  /* Lista firm kurczy sie zamiast rozpychac pasek, a wylogowanie ma
     pierwszenstwo, bo jest krotkie i musi zostac klikalne. Drugi wiersz
     robi sie SAM, dopiero gdy lista naprawde jest w pasku (konto z wieloma
     firmami albo admin) - stad :has(). Konto klienta z jedna firma nie ma
     listy w ogole i jego pasek zostaje jednowierszowy, tak jak w makiecie. */
  .firm-switcher{flex:1 1 auto;min-width:0}
  #logout-btn{flex:none}
  .szyt:has(.firm-switcher:not(.hidden)) .szyt-prawa{
    order:3;flex:1 1 100%;flex-wrap:nowrap;justify-content:space-between;gap:var(--o3);
  }
}

/* ============ ZADNE POLE NIE WYCHODZI POZA SWOJ KONTENER ============
 * Pas bezpieczenstwa dopisany 18.08.2026 po zgloszeniu "czasami pole do
 * wpisania wychodzi poza ekran". Pojedyncze przypadki naprawialismy u
 * zrodla (lista firm w pasku gornym), ale pola formularzy maja wlasna
 * szerokosc wewnetrzna, ktora rozni sie miedzy przegladarkami i systemami -
 * pole daty i pole czasu w Safari na iOS sa wyraznie szersze niz w
 * Chrome na komputerze, wiec test na komputerze moze tego nie pokazac.
 * Ponizsze trzy deklaracje sprawiaja, ze zadne pole nie moze byc szersze
 * niz miejsce, ktore dostalo, niezaleznie od tresci i systemu. */
input,
select,
textarea{max-width:100%;box-sizing:border-box}
/* min-width:0 zdejmuje domyslne "nie kurcz sie ponizej wlasnej tresci",
   ktore w ukladach elastycznych jest najczestsza przyczyna wystajacych pol. */
.form input,
.form select,
.form textarea,
.pole-grupa input,
.pole-grupa select,
.pole-grupa textarea,
.pole-z-przyciskiem .pole{min-width:0}

/* ============ POLA DATY W SAFARI NA iOS ============
 * Zgloszenie ze zrzutow z iPhone'a (18.08.2026): pola daty wystawaly poza
 * karte, podczas gdy pola tekstowe obok trzymaly szerokosc. Przyczyna jest
 * subtelna i nie widac jej w przegladarce na komputerze: Safari na iOS
 * nadaje polu daty WLASNA szerokosc wewnetrzna przez min-width, a w CSS
 * min-width wygrywa z width, wiec nasze width:100% i max-width:100% nie
 * mialy szans. Trzeba wprost zdjac te szerokosc i wylaczyc natywne
 * pudelko pola.
 *
 * appearance:none jest tu konieczne, nie kosmetyczne: bez tego Safari
 * dalej liczy szerokosc z wewnetrznych czlonow daty (dzien, miesiac, rok),
 * a nie z miejsca, ktore pole dostalo. Pseudoelementy ponizej ustawiaja
 * wartosc do lewej i zostawiaja ikone kalendarza przy prawej krawedzi, bo
 * po wylaczeniu natywnego pudelka Safari domyslnie centruje wartosc. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:0;
  max-width:100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.7}

/* Podpowiedz nad formularzem kamieni ("Wybierz projekt powyzej...") stala
 * wprost na etykiecie pierwszego pola i czytalo sie to jak jeden blok
 * (widoczne na zrzucie z telefonu 18.08.2026). Ten sam odstep co miedzy
 * polami formularza. */
#admin-kamienie-hint{margin-bottom:var(--o4)}

/* Ten sam odstep tez dla sekcji admina dziennika (dopisek etapu 2 planu
 * portalu, ponizej), z tego samego powodu. */
#admin-dziennik-hint{margin-bottom:var(--o4)}

/* ============================================================================
 * DOPISKI: DZIENNIK PRAC (etap 2 planu portalu klienta, rozdzial "Dziennik
 * prac z commitow"; panel-projekt.js, sekcja klienta i sekcja admina).
 *
 * Uklad listy wpisow (.dziennik/.wpis-dziennika) kopiuje wprost
 * .zdarzenia/.zdarzenie zdefiniowane wyzej - gorna kreska miedzy wpisami,
 * pierwszy/ostatni bez dodatkowego odstepu. Data KAZDEGO wpisu uzywa klasy
 * .zdarzenie-data wprost (zadanie: "data (mono, jak .zdarzenie-data)"), wiec
 * poza samym ukladem li ponizej naprawde nowe sa tylko dwie rzeczy: akapit
 * tresci (moze byc dluzszy niz jedna linia .zdarzenie-tekst) i rozwijane
 * "Szczegoly techniczne" pod nim.
 * ============================================================================ */
.dziennik{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.wpis-dziennika{display:flex;flex-direction:column;gap:10px;padding:var(--o4) 0;border-top:1px solid var(--linia)}
.wpis-dziennika:first-child{border-top:0;padding-top:var(--o1)}
.wpis-dziennika:last-child{padding-bottom:var(--o1)}
.wpis-dziennika-tekst{font:300 15.5px/1.6 var(--font);color:var(--tekst);margin:0}

/* Szczegoly techniczne: natywny <details>/<summary> (zadanie: "dzialaja bez
 * JavaScriptu i sa dostepne z klawiatury"), zero JS w tym pliku do ich
 * obslugi. Domyslny trojkat przegladarki jest wylaczony (list-style:none w
 * Firefoksie, ::-webkit-details-marker w Chrome/Safari) na rzecz wlasnej
 * strzalki zbudowanej z obrysu pseudoelementu, ktora obraca sie o 90 stopni
 * przy otwarciu przez selektor atrybutu [open] - ten sam jezyk co strzalka w
 * .kamien-zmiana/ICON_STRZALKA wyzej w portalu, bez dokladania kolejnej ikony
 * SVG do panel-projekt.js. */
.szczegoly-techniczne{margin-top:2px}
.szczegoly-techniczne summary{
  display:flex;align-items:center;gap:7px;width:fit-content;cursor:pointer;
  list-style:none;font:400 11px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tekst-slaby);
  transition:color .2s;
}
.szczegoly-techniczne summary:hover{color:var(--tekst)}
.szczegoly-techniczne summary::-webkit-details-marker{display:none}
.szczegoly-techniczne summary::before{
  content:"";flex:none;width:6px;height:6px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s var(--ease);
}
.szczegoly-techniczne[open] summary::before{transform:rotate(45deg)}
.szczegoly-techniczne summary:focus-visible{outline:2px solid var(--tekst);outline-offset:3px}
.komunikaty-commitow{
  list-style:none;margin:10px 0 0;padding:12px 14px;
  background:var(--karta-wnetrze);border:1px solid var(--linia);border-radius:var(--r-s);
  display:flex;flex-direction:column;gap:7px;
}
.komunikaty-commitow li{font:400 12.5px/1.5 var(--mono);color:var(--tekst-wygaszony);word-break:break-word}

@media (prefers-reduced-motion: reduce){
  .szczegoly-techniczne summary::before{transition:none}
}

/* ============================================================================
 * DOPISKI: UWAGI DO MAKIETY (etap 2.5 planu portalu klienta, rozdzial "Uwagi
 * klikane na makiecie", wersja minimalna - kotwica selektorowa i
 * podswietlenie na zywej makiecie, bez zrzutow; panel-projekt.js,
 * buildSekcjaUwagi/buildUwaga).
 *
 * Uklad listy (.uwagi/.uwaga) kopiuje wprost .zdarzenia/.zdarzenie wyzej -
 * gorna kreska miedzy pozycjami, pierwszy/ostatni bez dodatkowego odstepu -
 * data kazdej uwagi uzywa .zdarzenie-data wprost, ten sam wzorzec co
 * .wpis-dziennika powyzej. Nowe sa: gorny rzad z data i (opcjonalnie)
 * plakietka statusu, akapit tresci, dwie linie danych obcych (podstrona,
 * selektor w <code>) i rzad przyciskow na dole wiersza.
 *
 * Uwagi zamkniete (.uwaga-zamknieta) sa wizualnie wygaszone (zadanie, punkt
 * 3) - obnizona przezroczystosc calego wiersza plus stonowany kolor tresci.
 * Kolejnosc "otwarte przed zamknietymi" ustala JS (buildSekcjaUwagi), ta
 * regula odpowiada wylacznie za wyglad, nie za porzadek.
 * ============================================================================ */
.uwagi{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.uwaga{display:flex;flex-direction:column;gap:8px;padding:var(--o4) 0;border-top:1px solid var(--linia)}
.uwaga:first-child{border-top:0;padding-top:var(--o1)}
.uwaga:last-child{padding-bottom:var(--o1)}
.uwaga-gora{display:flex;align-items:center;gap:var(--o3);flex-wrap:wrap}
.uwaga-status{
  font:400 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--tekst-slaby);background:rgba(255,255,255,.06);
  border:1px solid var(--linia-mocna);border-radius:var(--r-pill);padding:3px 10px;
}
.uwaga-tresc{font:300 15.5px/1.6 var(--font);color:var(--tekst);margin:0}
.uwaga-podstrona,
.uwaga-selektor{font:300 13px/1.5 var(--font);color:var(--tekst-wygaszony);margin:0;word-break:break-word}
.uwaga-selektor code{
  font:400 12.5px var(--mono);color:var(--tekst-wygaszony);
  background:var(--karta-wnetrze);border-radius:4px;padding:1px 6px;
}
.uwaga-akcje{display:flex;flex-wrap:wrap;gap:var(--o3);margin-top:2px}
.uwaga-zamknieta{opacity:.55}
.uwaga-zamknieta .uwaga-tresc{color:var(--tekst-wygaszony)}

/* ============================================================================
 * DOPISKI: ETAP 3 I 4 PLANU PORTALU KLIENTA
 * (braki i pliki, akceptacje, harmonogram transz, watek rozmowy, kadr
 * elementu przy uwadze; panel-projekt-etap3.js oraz buildUwaga w
 * panel-projekt.js).
 *
 * ZASADA TYCH DOPISKOW: zero nowych zmiennych i zero nowych "systemow" -
 * wszystko stoi na istniejacych tokenach (--karta-wnetrze, --linia, --ruch,
 * --sukces, --mono) i na ukladach, ktore juz sa w tym pliku (.zdarzenia,
 * .dostawy, .uwagi). Kazda nowa sekcja ma wygladac jak czesc tego samego
 * portalu, a nie jak doklejony modul.
 * ============================================================================ */

/* --- Plakietki statusu (wspolne dla brakow, transz, akceptacji i watkow) ---
 * Jeden komponent zamiast trzech podobnych: rozny jest wylacznie kolor, a ten
 * niesie znaczenie - bursztyn (--ruch) znaczy "twoj ruch", zielen (--sukces)
 * "zamkniete/zaplacone", szarosc "nic nie musisz robic". */
.chip-status{
  font:400 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--tekst-slaby);background:rgba(255,255,255,.06);
  border:1px solid var(--linia-mocna);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;
}
.chip-otwarty,
.chip-do_zaplaty,
.chip-oczekuje{color:var(--ruch);border-color:rgba(227,168,106,.45)}
.chip-przyjety,
.chip-oplacona,
.chip-zaakceptowana{color:var(--sukces);border-color:rgba(126,224,168,.4)}
.chip-wycofana,
.chip-zamkniety{color:var(--tekst-slaby)}

/* --- Braki: rozbudowa istniejacej .dostawy o opis, pliki i przyciski ------
 * Wiersz przestaje byc jedna linia (znacznik + nazwa + stan), bo od etapu 3
 * niesie tez opis, liste plikow i akcje - zmieniamy wiec kierunek na
 * kolumnowy, zachowujac gorna kreske i odstepy z wersji jednolinijkowej. */
.dostawa{flex-direction:column;align-items:stretch;gap:10px}
.dostawa-gora{display:flex;align-items:center;gap:var(--o3);flex-wrap:wrap}
.dostawa-gora .dostawa-nazwa{flex:1}
.dostawa-opis{font:300 14px/1.6 var(--font);color:var(--tekst-wygaszony);margin:0;white-space:pre-wrap}
.dostawa-akcje{display:flex;flex-wrap:wrap;gap:var(--o3);align-items:center}
.dostawa-przyjety .dostawa-nazwa{color:var(--tekst-wygaszony)}
.podpis-listy{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby);margin:var(--o4) 0 0}

/* Pole wyboru pliku chowamy i klikamy przez <label class="przycisk">: natywny
 * input[type=file] ma wyglad przegladarki, ktorego nie da sie ostylowac, a w
 * ciemnym portalu wyglada jak bląd. Sam input zostaje w drzewie (jest
 * dostepny z klawiatury przez etykiete), nie jest usuwany ani ukrywany przez
 * display:none, ktory wypadlby z kolejnosci fokusu. */
.pole-plik{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pliki{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.plik{display:flex;align-items:baseline;gap:var(--o3)}
.plik-nazwa{font:300 14px/1.5 var(--font);color:var(--tekst);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.plik-nazwa:hover{color:#fff}
.plik-rozmiar{font:400 11px var(--mono);color:var(--tekst-slaby);white-space:nowrap}

/* --- Akceptacje ----------------------------------------------------------
 * Wiersz akceptacji jest cieższy niz reszta list - to jest miejsce, w ktorym
 * klient sklada podpis, wiec ma sie wyroznic tlem i ramka, a nie byc kolejna
 * pozycja listy do przewiniecia. */
.akceptacje{display:flex;flex-direction:column;gap:var(--o4);list-style:none;margin:0;padding:0}
.akceptacja{
  display:flex;flex-direction:column;gap:10px;
  background:var(--karta-wnetrze);border:1px solid var(--linia);border-radius:var(--r-m);padding:var(--o4);
}
.akceptacja-oczekuje{border-color:rgba(227,168,106,.45)}
.akceptacja-gora{display:flex;align-items:center;gap:var(--o3);flex-wrap:wrap}
.akceptacja-wersja{flex:1;font:400 15.5px/1.4 var(--font);color:var(--tekst)}
.akceptacja-transza{font:300 14px/1.5 var(--font);color:var(--ruch);margin:0}
.akceptacja-podpis{font:300 13.5px/1.5 var(--font);color:var(--tekst-wygaszony);margin:0}
.akceptacja-form{display:flex;flex-wrap:wrap;gap:var(--o3);align-items:center}
.akceptacja-form .pole{flex:1;min-width:220px}
.akceptacja-nota{flex-basis:100%;font:300 12.5px/1.5 var(--font);color:var(--tekst-slaby);margin:0}
.akceptacja-zaakceptowana{opacity:.75}

/* --- Harmonogram transz --------------------------------------------------
 * Kwoty maja font-variant-numeric:tabular-nums i wyrownanie do prawej, zeby
 * kolumna liczb czytala sie jako kolumna, a nie jako zbior napisow - to jest
 * lista, na ktorej klient sprawdza, ile juz zaplacil. */
.transze{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.transza{display:flex;align-items:flex-start;gap:var(--o4);padding:var(--o4) 0;border-top:1px solid var(--linia);flex-wrap:wrap}
.transza:first-child{border-top:0;padding-top:var(--o1)}
.transza-lewa{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.transza-etykieta{font:300 15.5px/1.4 var(--font);color:var(--tekst)}
.transza-warunek,
.transza-faktura,
.transza-oplacona{font:300 13px/1.5 var(--font);color:var(--tekst-wygaszony)}
.transza-faktura a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px}
.transza-prawa{display:flex;align-items:center;gap:var(--o3)}
.transza-kwota{font:400 15.5px var(--mono);color:var(--tekst);font-variant-numeric:tabular-nums}
.transza-akcje{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--o2)}
.transza-oplacona .transza-kwota{color:var(--sukces)}
.transze-sumy{display:flex;flex-wrap:wrap;gap:var(--o6);border-top:1px solid var(--linia-mocna);margin-top:var(--o4);padding-top:var(--o4)}
.transze-suma{display:flex;flex-direction:column;gap:2px}
.transze-suma-etykieta{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby)}
.transze-suma-wartosc{font:400 17px var(--mono);color:var(--tekst);font-variant-numeric:tabular-nums}

/* --- Watek rozmowy -------------------------------------------------------
 * Wiadomosci klienta i Zorny roznia sie tlem i wyrownaniem, ale NIE udaja
 * czatu (plan odrzuca czat na zywo wprost): sa to akapity w liscie, z data
 * przy kazdym, a nie dymki z ogonkami. white-space:pre-wrap zachowuje akapity
 * autora bez zamieniania znakow nowej linii na znaczniki. */
.watki{display:flex;flex-direction:column;gap:var(--o5);list-style:none;margin:0;padding:0}
.watek{display:flex;flex-direction:column;gap:var(--o3);padding-top:var(--o4);border-top:1px solid var(--linia)}
.watek:first-child{border-top:0;padding-top:0}
.watek-gora{display:flex;align-items:center;gap:var(--o3);flex-wrap:wrap}
.watek-tytul{flex:1;font:400 15px/1.4 var(--font);color:var(--tekst)}
.watek-zamkniety{opacity:.6}
.wiadomosci{display:flex;flex-direction:column;gap:var(--o3);list-style:none;margin:0;padding:0}
.wiadomosc{
  display:flex;flex-direction:column;gap:4px;
  background:var(--karta-wnetrze);border:1px solid var(--linia);border-radius:var(--r-m);
  padding:12px var(--o4);max-width:min(62ch,100%);
}
.wiadomosc-zorna{align-self:flex-start}
.wiadomosc-klient{align-self:flex-end;background:rgba(255,255,255,.05)}
.wiadomosc-meta{display:flex;gap:var(--o3);align-items:baseline}
.wiadomosc-autor{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tekst-slaby)}
.wiadomosc-czas{font:400 10.5px var(--mono);color:var(--tekst-slaby)}
.wiadomosc-tresc{font:300 15px/1.6 var(--font);color:var(--tekst);margin:0;white-space:pre-wrap;word-break:break-word}
.watek-form{display:flex;flex-wrap:wrap;gap:var(--o3);align-items:flex-start}
.watek-form .pole-tekst{flex:1;min-width:240px}
.pole-tekst{resize:vertical;font:300 15px/1.6 var(--font);min-height:60px}

/* --- ETAP 4: kadr elementu przy uwadze ------------------------------------
 * Miniatura jest linkiem do pelnego obrazka pobieranego z UWIERZYTELNIONEGO
 * endpointu panelu (nigdy z publicznego adresu bucketa R2 - plan, rozdzial
 * "Uwagi klikane na makiecie", punkt 5). Ograniczona wysokosc, zeby zrzut
 * dlugiej sekcji nie rozpychal listy uwag na pol ekranu. */
.uwaga-zrzut{display:block;margin-top:2px;border:1px solid var(--linia);border-radius:var(--r-s);overflow:hidden;max-width:360px}
.uwaga-zrzut img{display:block;width:100%;max-height:220px;object-fit:cover;object-position:top}
/* POPRAWKA PO SPRAWDZENIU NA PRODUKCJI 19.08.2026: obrazek ma loading="lazy",
 * ale dopoki nie zna swoich wymiarow, zajmuje ZERO pikseli wysokosci. Element o
 * zerowej wysokosci nigdy nie wchodzi w pole widzenia, wiec przegladarka nie
 * zaczynala go pobierac i zrzut po prostu sie nie pokazywal - trasa oddawala
 * poprawny obrazek, tylko nikt o niego nie prosil. Rezerwacja wysokosci i
 * proporcji sprawia, ze element ma realny rozmiar od pierwszej klatki, wiec
 * leniwe ladowanie ma co obserwowac. Przy okazji znika przeskok ukladu w
 * chwili, gdy obrazek dojdzie. */
.uwaga-zrzut img{min-height:120px;aspect-ratio:16 / 5;background:var(--karta-wnetrze)}
.uwaga-zrzut:hover{border-color:var(--linia-jasna)}

/* --- Sekcja rozliczen abonamentu (obszar asystenta, modul 10 planu) ------- */
.abonament-siatka{display:flex;flex-wrap:wrap;gap:var(--o6)}
.abonament-pozycja{display:flex;flex-direction:column;gap:2px;min-width:140px}
.abonament-etykieta{font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-slaby)}
.abonament-wartosc{font:400 17px var(--mono);color:var(--tekst);font-variant-numeric:tabular-nums}
.abonament-uwaga{font:300 14px/1.6 var(--font);color:var(--tekst-wygaszony);margin:0}
.faktury{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.faktura{display:flex;align-items:baseline;gap:var(--o4);padding:10px 0;border-top:1px solid var(--linia);flex-wrap:wrap}
.faktura:first-child{border-top:0}
.faktura-numer{flex:1;font:400 14px var(--mono);color:var(--tekst)}
.faktura-kwota{font:300 14px var(--font);color:var(--tekst-wygaszony)}
.faktura a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .transza-prawa{width:100%;justify-content:space-between}
  .wiadomosc{max-width:100%}
  .akceptacja-form .pole{min-width:100%}
}

/* Nowy watek: wlasny naglowek i kreska nad formularzem, zeby nie stal na
 * ekranie jako drugie, nieodroznialne pole tekstowe tuz pod polem odpowiedzi
 * w istniejacym watku. */
.watek-nowy{display:flex;flex-direction:column;gap:var(--o3);border-top:1px solid var(--linia-mocna);padding-top:var(--o4);margin-top:var(--o4)}
.watek-nowy .podpis-listy{margin:0}

/* ============================================================================
 * DOPISKI: NAPRAWA OBSZARU ADMINA (zgloszenie wlasciciela "nie jest to
 * logicznie zrobione", 19.08.2026) - ekran "Dzis" jako lista rzeczy do
 * zrobienia z przyciskiem, kreator "Nowy klient" i zwiniete domyslnie karty
 * admina (panel-zorna.js, dashboard.html). Zero nowych zmiennych - wszystko
 * na istniejacych tokenach, tak jak DOPISKI ETAP 3 wyzej.
 * ============================================================================ */

/* --- Ekran "Dzis": lista projektow z konkretnymi pozycjami ----------------
 * Blok projektu ma ten sam rytm co .zdarzenia/.zdarzenie (gorna kreska
 * miedzy blokami, pierwszy/ostatni bez dodatkowego odstepu) - naglowek
 * projektu reuzywa .zdarzenie-data/.zdarzenie-tekst/.projekt-plakietki/
 * .zdarzenie-klik wprost (ten sam wzorzec co lista "Admin: projekty").
 * Nowe sa wylacznie same wiersze zadan: karta w karcie (tlo
 * --karta-wnetrze, ten sam jezyk co .wiadomosc/.akceptacja wyzej), zeby
 * kazda pozycja z przyciskiem wygladala jak samodzielna rzecz do zrobienia,
 * nie jak kolejna linia tekstu. */
.dzis-projekty{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.dzis-projekt{display:flex;flex-direction:column;gap:var(--o3);padding:var(--o4) 0;border-top:1px solid var(--linia)}
.dzis-projekt:first-child{border-top:0;padding-top:var(--o1)}
.dzis-projekt:last-child{padding-bottom:var(--o1)}
.dzis-projekt-glowka{display:flex;flex-direction:column;gap:5px}
.dzis-zadania{display:flex;flex-direction:column;gap:var(--o2);list-style:none;margin:0;padding:0}
.dzis-zadanie{
  display:flex;align-items:center;gap:var(--o3);flex-wrap:wrap;
  background:var(--karta-wnetrze);border:1px solid var(--linia);border-radius:var(--r-m);
  padding:12px var(--o4);
}
.dzis-zadanie-tresc{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.dzis-zadanie-tekst{font:300 14.5px/1.5 var(--font);color:var(--tekst)}
.dzis-zadanie-kwota{font:400 13px var(--mono);color:var(--tekst-wygaszony);font-variant-numeric:tabular-nums}

/* --- Podsumowanie kreatora "Nowy klient" ----------------------------------
 * Kontener jest pusty w znaczniku (panel-zorna.js buduje tresc przez
 * createElement/textContent) - ta regula odpowiada wylacznie za odstep
 * miedzy zdaniem glownym a ewentualnymi ostrzezeniami pod nim. */
.zorna-podsumowanie{display:flex;flex-direction:column;gap:8px;margin-top:var(--o3)}

/* --- Kreator "Nowy klient": natywny <dialog> -------------------------------
 * <dialog> jest jedynym miejscem w portalu z ta forma - reszta systemu nie
 * miala potrzeby modalnego okna. showModal() centruje go i blokuje reszte
 * strony natywnie (focus, Escape), CSS ubiera go w te same tokeny co .karta,
 * zeby nie wygladal jak wypozyczony komponent przegladarki. */
.kreator-dialog{
  background:var(--karta);color:var(--tekst);
  border:1px solid var(--linia-mocna);border-radius:var(--r-l);box-shadow:var(--cien-karta);
  padding:var(--o5);width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.kreator-dialog::backdrop{background:rgba(0,0,0,.6)}
.kreator-dialog .form{gap:var(--o4)}
.kreator-dialog h2{margin:0 0 4px}
@media (min-width:760px){
  .kreator-dialog{padding:var(--o6) var(--o7)}
}

/* --- Siedem kart admina, zwiniete domyslnie --------------------------------
 * <details>/<summary> zamiast <section>/<h2> na dokladnie tych samych
 * identyfikatorach (JS admina dalej przelacza .hidden na tym samym elemencie
 * - nazwa znacznika nie ma dla niego znaczenia). Ten sam jezyk strzalki co
 * .szczegoly-techniczne wyzej (obrot 45 stopni na [open]), powiekszony do
 * roli klikalnego naglowka calej karty, w jezyku czlowieka zamiast
 * "Admin: ...". min-height:44px od razu, nie tylko na telefonie - to jest
 * GLOWNY sposob otwierania karty, nie akcja poboczna. */
.etykieta-sekcji-rozwijana{
  display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  cursor:pointer;list-style:none;min-height:44px;padding:12px var(--o1);margin:0 0 2px;
  font:400 15.5px/1.4 var(--font);color:var(--tekst);transition:color .2s;
}
.etykieta-sekcji-rozwijana::-webkit-details-marker{display:none}
.etykieta-sekcji-rozwijana::before{
  content:"";flex:none;width:8px;height:8px;
  border-right:1px solid var(--tekst-slaby);border-bottom:1px solid var(--tekst-slaby);
  transform:rotate(-45deg);transition:transform .2s var(--ease);
}
details[open] > .etykieta-sekcji-rozwijana::before{transform:rotate(45deg)}
.etykieta-sekcji-rozwijana:hover{color:#fff}
.etykieta-sekcji-rozwijana:focus-visible{outline:2px solid var(--tekst);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .etykieta-sekcji-rozwijana::before{transition:none}
}