/* ============================================================================
   Warto Aplikować — system wizualny
   ----------------------------------------------------------------------------
   Kontekst, z ktorego wynika reszta: szukanie pracy jest stresujace i czesto
   robione w tajemnicy przed obecnym pracodawca. Interfejs ma byc spokojny
   i dyskretny - bez jaskrawych akcentow, odznak za postepy i grywalizacji.

   Zasady, ktore latwo zlamac przy dopisywaniu:
   1. KAZDY kolor przez token. Kolor wpisany na sztywno nie przelaczy sie
      w trybie ciemnym - to bylo dokladnie zrodlo poprzedniej usterki.
   2. --sygnal WYLACZNIE na ocene dopasowania i jedna akcje glowna na ekranie.
      Rozlany na odnosniki i naglowki zamieni strone w ciepla papke z terakota.
   3. Kolory semantyczne (etap w toku, zamkniety, blad) sa OSOBNE i nigdy
      nie siegaja po --sygnal.
   ========================================================================= */

:root {
  /* --- kolor: chlodne podloze, jeden sygnal ------------------------------ */
  --tlo:            #F6F7F8;   /* chlodny papier, swiadomie NIE kremowy */
  --tlo-uniesione:  #FFFFFF;
  --tekst:          #171A1F;   /* granatowa czern */
  --przygaszony:    #616B78;
  --linia:          #DFE3E8;

  --sygnal:         #C8860D;   /* gleboka ochra - tylko ocena i akcja glowna */
  --sygnal-tekst:   #FFFFFF;
  --sygnal-tlo:     #FBF3E3;

  --w-toku:         #0F6E76;   /* etapy zywe: wyslana, odpowiedz, rozmowa */
  --udane:          #146B4B;
  --blad:           #A32B22;
  --blad-tlo:       #FBEDEC;
  --uwaga:          #8A5A00;
  --uwaga-tlo:      #FBF3E3;

  /* Portale. Rozroznienie ma dzialac katem oka, ale NIE moze konkurowac z ocena -
     dlatego chlodny odcien wyprowadzony z --w-toku, a nie firmowy blekit LinkedIna
     (#0A66C2 jest tak nasycony, ze przy ochrze robi sie drugi akcent na ekranie).
     Pracuj.pl zostaje biale z wyrazna ramka: jego firmowa zolc lezy dokladnie tam,
     co --sygnal, wiec plakietka mylilaby sie z wysoka ocena. */
  --portal-chlodny-tlo: #EAF2F4;
  --portal-chlodny-ramka: #C7DDE1;

  /* --- typografia: interfejs sie skanuje, dokumenty sie czyta ------------ */
  --font-ui:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-czyt:  "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-xs:   0.8rem;
  --t-s:    0.875rem;
  --t-m:    1rem;
  --t-l:    1.25rem;
  --t-xl:   1.563rem;
  --t-xxl:  1.953rem;
  --t-hero: clamp(2.2rem, 6vw, 3.6rem);

  /* --- odstepy ----------------------------------------------------------- */
  --o1: 4px;  --o2: 8px;  --o3: 12px; --o4: 16px;
  --o5: 24px; --o6: 32px; --o7: 48px; --o8: 64px;

  --rog: 6px;
  --rog-duzy: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo:            #14171C;
    --tlo-uniesione:  #1B1F26;
    --tekst:          #E5E8ED;
    --przygaszony:    #97A1AF;
    --linia:          #2A3038;

    --sygnal:         #E0A63C;   /* rozjasniona ochra - na ciemnym tle #C8860D gasnie */
    --sygnal-tekst:   #1A1305;
    --sygnal-tlo:     #2C2314;

    --w-toku:         #4FB3BC;
    --udane:          #4FA97F;
    --blad:           #E8837A;
    --blad-tlo:       #2E1A18;
    --uwaga:          #D9A441;
    --uwaga-tlo:      #2C2314;

    --portal-chlodny-tlo: #16262A;
    --portal-chlodny-ramka: #27454A;
  }
}

/* ---------------------------------------------------------------- podstawa */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-ui);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 var(--o3); }
h1 { font-size: var(--t-xxl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: var(--t-l); font-weight: 600; }
p  { margin: 0 0 var(--o3); }

a { color: var(--tekst); text-decoration-color: var(--linia); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

/* Widoczny stan skupienia na wszystkim, po czym da sie chodzic klawiatura. */
:focus-visible {
  outline: 2px solid var(--sygnal);
  outline-offset: 2px;
  border-radius: var(--o1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

button, .przycisk {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--linia);
  background: var(--tlo-uniesione);
  color: inherit;
  border-radius: var(--rog);
  padding: var(--o2) var(--o3);
}
button:hover, .przycisk:hover { border-color: var(--przygaszony); }

/* Jedna akcja glowna na ekranie - to jedyne miejsce poza ocena, gdzie wolno
   siegnac po kolor sygnalowy. */
button.glowna, .przycisk.glowna {
  background: var(--sygnal); color: var(--sygnal-tekst); border-color: var(--sygnal);
}
button.glowna:hover, .przycisk.glowna:hover { filter: brightness(1.07); }

input, select, textarea {
  font: inherit; color: inherit;
  background: var(--tlo-uniesione);
  border: 1px solid var(--linia);
  border-radius: var(--rog);
  padding: var(--o2);
}

.muted, .przygaszony { color: var(--przygaszony); }

/* -------------------------------------------------------------- szkielet */

/* Naglowek ciagnie sie przez cala szerokosc okna, ale jego TRESC trzyma sie tej
   samej osi co main. Bez tego znak firmowy stal przy lewej krawedzi ekranu, a
   tresc zaczynala sie kilkadziesiat pikseli dalej - uklad czytal sie jak dwie
   niezalezne strony i pograbiał wrazenie pustki po prawej. */
/* WYLACZNIE naglowek strony. Bez `body >` regula lapala takze <header> wewnatrz
   tresci - naglowek oferty dostawal bialy pasek, obramowanie i uklad flex, przez
   co tytul, firma i data ustawialy sie w jednej linii obok siebie. */
body > header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--o4);
  padding: var(--o3) max(var(--o4), calc((100% - 1400px) / 2));
  border-bottom: 1px solid var(--linia);
  background: var(--tlo-uniesione);
}
body > header h1 { font-size: var(--t-m); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
body > header h1 a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--o2); }

.gora { display: flex; align-items: center; gap: var(--o3); font-size: var(--t-s); }
.gora .user { color: var(--przygaszony); }
.gora .wyloguj { display: inline; margin: 0; }
.gora .wyloguj button { font-size: var(--t-xs); padding: var(--o1) var(--o2); }
.link-admin {
  font-size: var(--t-xs); color: var(--przygaszony); text-decoration: none;
  border: 1px solid var(--linia); border-radius: var(--rog); padding: var(--o1) var(--o2);
}
.link-admin:hover { color: var(--tekst); }

/* 1400, nie 1120: przy 1120 na szerokim monitorze prawa jedna trzecia ekranu byla
   pusta, a tabela ofert i tak lamala streszczenia w waski slup. Teksty do CZYTANIA
   maja wlasne ograniczenia (72ch), wiec szersze main ich nie rozciaga. */
main { padding: var(--o5) var(--o4); max-width: 1400px; margin: 0 auto; }

/* ------------------------------------------------- znak firmowy: heksagon */

/* Sześciokat to ksztalt ciasnego upakowania - komorki przylegaja bez strat.
   Produkt jest o dopasowaniu, wiec zwiazek jest znaczeniowy, nie ozdobny. */
.znak {
  width: 18px; height: 20px; flex: none;
  background: var(--sygnal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* --------------------------------------------- ocena dopasowania: komorka */

/* Wynik to glowny artefakt produktu i doslownie odpowiedz na pytanie "czy pasuje".
   Pasma robimy JEDNYM kolorem o roznej sile, nie tecza - spokojniej i czytelniej
   w obu trybach. */
.score {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 44px; flex: none;
  font-size: var(--t-s); font-weight: 700; font-variant-numeric: tabular-nums;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.score-high { background: var(--sygnal); color: var(--sygnal-tekst); }
.score-mid  { background: var(--sygnal-tlo); color: var(--sygnal); }
.score-low  { background: var(--tlo-uniesione); color: var(--przygaszony); box-shadow: inset 0 0 0 1px var(--linia); }
.score-none { background: transparent; color: var(--przygaszony); }

/* --------------------------------------------------------------- liczniki */

.counts { display: flex; flex-wrap: wrap; gap: var(--o2); margin-bottom: var(--o4); }
.count {
  padding: var(--o2) var(--o3); border: 1px solid var(--linia); border-radius: var(--rog);
  color: inherit; text-decoration: none; font-size: var(--t-xs);
  background: var(--tlo-uniesione);
}
.count strong { font-size: var(--t-l); display: block; font-variant-numeric: tabular-nums; }
.count.warn { border-color: var(--uwaga); color: var(--uwaga); }
.count.muted { color: var(--przygaszony); }

.filters { display: flex; flex-wrap: wrap; gap: var(--o2); align-items: center; margin-bottom: var(--o4); }
.filters .reset { font-size: var(--t-s); color: var(--przygaszony); }

/* ----------------------------------------------------------- lista ofert */

.offers { width: 100%; border-collapse: collapse; }
.offers th, .offers td {
  padding: var(--o3) var(--o2); border-bottom: 1px solid var(--linia);
  text-align: left; vertical-align: top;
}
.offers th { font-size: var(--t-xs); font-weight: 600; color: var(--przygaszony); }
.offers tr:hover td { background: var(--tlo-uniesione); }

.reason { color: var(--przygaszony); font-size: var(--t-s); margin-top: var(--o1); max-width: 62ch; }

.badge {
  display: inline-block; font-size: var(--t-xs); border: 1px solid var(--linia);
  border-radius: var(--o1); padding: 1px var(--o1); margin-left: var(--o1);
  color: var(--przygaszony); white-space: nowrap;
}
.badge.few { border-color: var(--udane); color: var(--udane); }
.badge.czeka { border-color: var(--uwaga); color: var(--uwaga); }
/* Wygasa za mniej niz trzy dni - jedyny znacznik w wierszu z wypelnieniem
   bledu, bo to jedyny, ktory mowi "dzis albo nigdy". */
.badge.pilne { border-color: var(--blad); background: var(--blad-tlo); color: var(--blad); }
/* Wiek oferty bez ramki: to metadana do skanowania, nie etykieta do klikniecia.
   Ramka wokol kazdej daty zrobilaby z wiersza plot. */
.badge.znaleziona { border-color: transparent; padding-left: 0; }
/* Plakietka portalu z tlem - jedyna w wierszu, ktora je ma, wiec wpada w oko
   bez podnoszenia glosu. Reszta znacznikow zostaje przy samej ramce. */
.badge.portal-linkedin {
  background: var(--portal-chlodny-tlo);
  border-color: var(--portal-chlodny-ramka);
  color: var(--w-toku);
}
.badge.portal-pracuj {
  background: var(--tlo-uniesione);
  border-color: var(--linia);
  color: var(--tekst);
}

/* Etapy: zywe na chlodno, zamkniete przygaszone. Nigdy kolorem sygnalowym -
   ten nalezy do oceny. */
.status { font-size: var(--t-s); }
.status-DO_PRZEJRZENIA, .status-DO_APLIKACJI { color: var(--tekst); }
.status-WYSLANA, .status-ODPOWIEDZ { color: var(--w-toku); }
.status-ROZMOWA, .status-OFERTA { color: var(--udane); }
.status-ODRZUCONA, .status-PRZEGRANA, .status-PONIZEJ_PROGU, .status-NOWA { color: var(--przygaszony); }

/* Szerokosci kolumn listy ofert. Bez nich przegladarka rozdziela miejsce wedlug
   tresci, a firma ("Hays") dostawala tyle samo co streszczenie na osiem linijek. */
.kol-ocena { width: 56px; }
.kol-firma { width: 15%; min-width: 110px; }
.kol-etap  { width: 172px; }
.offers .firma { color: var(--przygaszony); }

/* Etap i decyzja w jednej komorce - stan i to, co mozna z nim zrobic. */
.etap .status { display: block; margin-bottom: var(--o2); }
.decyzje { display: flex; flex-direction: column; gap: var(--o1); align-items: stretch; }
.decyzje form { margin: 0; }
.decyzje button {
  width: 100%; font-size: var(--t-xs); padding: var(--o1) var(--o2);
  white-space: nowrap;
}

/* Droga naprzod ma wage, wyjscie jej nie ma. Wczesniej obie klasy nie mialy
   ZADNYCH regul, wiec "wyslana" i "odrzucona przeze mnie" wygladaly identycznie
   i trzeba bylo czytac, zeby odroznic awans od rezygnacji. */
.decyzje button.ok { border-color: var(--przygaszony); font-weight: 600; }
.decyzje button.ok:hover { border-color: var(--tekst); background: var(--tlo-uniesione); }
.decyzje button.no { color: var(--przygaszony); }
.decyzje button.no:hover { border-color: var(--blad); color: var(--blad); }

/* Zostaje dla panelu administracyjnego, ktory ma przyciski w wierszu. */
.actions { display: flex; flex-wrap: wrap; gap: var(--o1); }
.actions form { margin: 0; }
.actions button { font-size: var(--t-xs); padding: var(--o1) var(--o2); }

/* ------------------------------------------------------- szczegoly oferty */

.detail { max-width: none; }

/* Uklad strony oferty w trzech poziomach. Poprzednia proba - kolumna czytania
   i przyklejona kolumna dzialania - rozwiazywala pustke po prawej, ale rozdzielala
   CV od oceny ATS, ktore czyta sie RAZEM: ocena mowi, czego w CV brakuje. */

/* Naglowek oferty: kto i na jakie stanowisko po lewej, skad i od kiedy po prawej.
   Firma pod tytulem, bo to czesc odpowiedzi na pytanie "co to za oferta", a nie
   metadana. Data znalezienia jest podpisem - stad druga os, do prawej krawedzi. */
.detail-naglowek {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: var(--o4);
  margin-bottom: var(--o5);
}
.naglowek-kto { min-width: 0; }
.naglowek-kto h2 { margin-bottom: var(--o1); }
.firma { font-size: var(--t-l); color: var(--przygaszony); margin: 0; }
.naglowek-skad { text-align: right; margin-left: auto; }
.naglowek-skad p { margin: 0; max-width: 34ch; }
.naglowek-skad .czasy { margin-top: var(--o2); }
/* Termin wygasniecia idzie pod calym naglowkiem, bo dotyczy oferty, nie zrodla. */
.detail-naglowek .termin { flex-basis: 100%; }

/* Tekst do czytania ma swoje 78 znakow niezaleznie od tego, ile jest miejsca. */
.szczyt-ocena > p, .szczyt-ocena > ul { max-width: 78ch; }

.detail-szczyt { display: grid; grid-template-columns: 1fr; gap: var(--o5); }
.szczyt-ocena, .detail-dziennik { min-width: 0; }
.szczyt-ocena > h3:first-child { margin-top: 0; }

@media (min-width: 1080px) {
  /* Dziennik wezszy od oceny: to log, a nie tresc do czytania. */
  .detail-szczyt { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--o6); }
  .detail-dziennik { border-left: 1px solid var(--linia); padding-left: var(--o6); }
  /* W wezszej kolumnie data nie miesci sie w jednej linii ze stanem. */
  .detail-dziennik .kiedy { display: block; min-width: 0; width: 100%; }
  .detail-dziennik .notatka { flex-direction: column; align-items: stretch; }
}

.dokumenty { display: grid; grid-template-columns: 1fr; gap: var(--o5); }
.dokument { min-width: 0; }
.dokument h3:first-child { margin-top: 0; }

@media (min-width: 1080px) {
  /* Od tej szerokosci CV i ATS miesczą sie obok siebie bez sciskania. */
  .dokumenty {
    grid-template-columns: 1fr 1fr;
    gap: var(--o6);
    border-top: 1px solid var(--linia);
    padding-top: var(--o5);
  }
  .dokument + .dokument { border-left: 1px solid var(--linia); padding-left: var(--o6); }
}
.detail .meta { color: var(--przygaszony); font-size: var(--t-s); margin-top: 0; }
.detail .meta > * + *::before { content: ""; }
.czasy { color: var(--przygaszony); font-size: var(--t-s); margin: var(--o2) 0; }
.czeka { color: var(--uwaga); }

/* Streszczenie oferty to tekst do czytania, nie do skanowania. */
.podsumowanie { font-family: var(--font-czyt); font-size: 1.05rem; line-height: 1.65; }

.pasek-etapu {
  display: flex; align-items: center; gap: var(--o2); flex-wrap: wrap;
  margin: var(--o4) 0; padding: var(--o3);
  background: var(--tlo-uniesione); border: 1px solid var(--linia); border-radius: var(--rog-duzy);
}
.pasek-etapu form { margin: 0; }

.notatka { display: flex; gap: var(--o2); align-items: flex-start; margin: var(--o4) 0; }
.notatka textarea { flex: 1; }

.os-czasu { list-style: none; padding: 0; margin: 0; }
.os-czasu li {
  display: flex; align-items: baseline; gap: var(--o2); flex-wrap: wrap;
  padding: var(--o2) 0; border-bottom: 1px solid var(--linia);
}
.os-czasu .kiedy {
  color: var(--przygaszony); font-size: var(--t-xs); min-width: 130px;
  font-variant-numeric: tabular-nums;
}
.os-czasu form { margin: 0 0 0 auto; }
.os-czasu .usun { border: none; background: none; color: var(--przygaszony); padding: 0 var(--o1); }
.os-czasu .usun:hover { color: var(--blad); }

/* Oznaczenie tresci pochodzacej od modelu (art. 50 AI Act). */
.znak-ai {
  font-size: var(--t-s); color: var(--przygaszony);
  border-left: 2px solid var(--linia); padding-left: var(--o3); margin: var(--o3) 0;
}

pre.cv {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-s);
  white-space: pre-wrap; background: var(--tlo-uniesione);
  border: 1px solid var(--linia); border-radius: var(--rog); padding: var(--o3);
  overflow-x: auto;
}

/* ------------------------------------------------------------------ lejek */

.skutecznosc {
  display: flex; gap: var(--o4); flex-wrap: wrap; margin: var(--o3) 0 var(--o5);
  font-size: var(--t-s);
}
.skutecznosc strong { font-variant-numeric: tabular-nums; }

.lejek { display: grid; grid-template-columns: repeat(6, minmax(160px, 1fr)); gap: var(--o2); overflow-x: auto; }
.lejek .kolumna { min-width: 160px; }
.lejek h3 { font-size: var(--t-xs); font-weight: 600; color: var(--przygaszony); margin: 0 0 var(--o2); }
.lejek .ile { color: var(--tekst); }

.karta {
  display: block; background: var(--tlo-uniesione);
  border: 1px solid var(--linia); border-radius: var(--rog);
  padding: var(--o2); margin-bottom: var(--o2);
  text-decoration: none; color: inherit; font-size: var(--t-s);
}
.karta:hover { border-color: var(--przygaszony); }
.karta .tytul { display: block; }
.karta .firma, .karta .dni { display: block; color: var(--przygaszony); font-size: var(--t-xs); }
/* Zastoj: dwa miejsca, w ktorych oferty faktycznie gina. */
.karta.stoi { border-color: var(--uwaga); }
.karta.stoi .dni { color: var(--uwaga); }

/* ------------------------------------------------ formularze wejsciowe */

.logowanie, .onboarding { max-width: 380px; margin: var(--o7) auto; }
.onboarding { max-width: 560px; }
.logowanie label, .onboarding label { display: block; margin-bottom: var(--o4); font-size: var(--t-s); }
.logowanie input, .onboarding input:not([type=checkbox]) {
  display: block; width: 100%; margin-top: var(--o1);
}
.logowanie button { width: 100%; }
.podpowiedz { display: block; margin-top: var(--o1); font-size: var(--t-xs); color: var(--przygaszony); }

.zgoda { display: flex; gap: var(--o2); align-items: flex-start; font-size: var(--t-s); }
.zgoda input { width: auto; margin-top: 3px; flex: none; }

.blad {
  background: var(--blad-tlo); border: 1px solid var(--blad); color: var(--blad);
  padding: var(--o2) var(--o3); border-radius: var(--rog); font-size: var(--t-s);
}

.propozycje { list-style: none; padding: 0; margin: 0 0 var(--o4); }
.propozycje li { padding: var(--o1) 0; border-bottom: 1px solid var(--linia); }
.propozycje label { display: flex; gap: var(--o2); align-items: center; margin: 0; font-size: var(--t-m); }
.propozycje input { width: auto; }
.profil-podglad { margin: var(--o4) 0; font-size: var(--t-s); color: var(--przygaszony); }
.profil-podglad summary { cursor: pointer; }

/* ------------------------------------------------------------- dokumenty */

.dokument { max-width: 68ch; margin: 0 auto; font-family: var(--font-czyt); line-height: 1.7; }
.dokument h1 { font-family: var(--font-ui); font-size: var(--t-xl); }
.dokument h2 { font-family: var(--font-ui); font-size: var(--t-l); margin-top: var(--o6); }
.dokument table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.dokument th, .dokument td { border: 1px solid var(--linia); padding: var(--o2); text-align: left; vertical-align: top; }
.dokument .wersja { font-family: var(--font-ui); color: var(--przygaszony); font-size: var(--t-s); }
.przewijane { overflow-x: auto; }

/* ------------------------------------------------------ panel osob (admin) */

.pasek-admina { display: flex; justify-content: space-between; align-items: center; gap: var(--o4); flex-wrap: wrap; }
.admin-naglowek { margin-bottom: var(--o1); }
.admin-stopka { margin-top: var(--o5); font-size: var(--t-s); }
.przycisk-dodaj {
  border: 1px solid var(--linia); color: var(--tekst); text-decoration: none;
  border-radius: var(--rog); padding: var(--o2) var(--o3); font-size: var(--t-s);
  background: var(--tlo-uniesione);
}
.przycisk-dodaj:hover { border-color: var(--przygaszony); }
/* Adres zaproszenia jest tu jedyna rzecza do skopiowania, wiec ma wygladac
   jak dana, a nie jak zdanie. */
.adres-zaproszenia {
  border: 1px solid var(--linia); border-radius: var(--rog);
  background: var(--tlo-uniesione); padding: var(--o3);
  word-break: break-all;
}
.ostrzezenie-inline { display: block; font-size: var(--t-xs); color: var(--uwaga); margin-top: 2px; }
.login-form { display: flex; gap: var(--o1); align-items: center; margin: 0; }
.login-form input { width: 100%; min-width: 0; padding: var(--o1) var(--o2); font-size: var(--t-s); }
/* Login ustawia sie sam przy rejestracji, a pole sluzy tylko do skrocenia go -
   wiec zapis jest cichy, nie jest glowna akcja wiersza. */
.login-form button { font-size: var(--t-xs); padding: var(--o1) var(--o2); color: var(--przygaszony); }
.login-form button:hover { color: var(--tekst); }

/* Panel osob. Szerokosci jawne, bo inaczej kolumna z przyciskami rozpychala sie
   tresc po tresci i kazdy wiersz konczyl sie w innym miejscu. */
.kol-login  { width: 190px; }
.kol-miasto { width: 130px; }
.kol-liczba { width: 64px; }
.kol-data   { width: 150px; }
.kol-akcje  { width: 200px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.osoby td.num, .osoby th.num { text-align: right; }

/* Stan analizy i przelacznik w jednej komorce. */
.stan { display: block; font-size: var(--t-s); margin-bottom: var(--o2); }
.stan-wlaczona { color: var(--w-toku); }
.stan-wylaczona { color: var(--przygaszony); }
.akcje-wiersza { display: flex; flex-wrap: wrap; gap: var(--o1); }
.akcje-wiersza form { margin: 0; }
.akcje-wiersza button { font-size: var(--t-xs); padding: var(--o1) var(--o2); white-space: nowrap; }
.akcje-wiersza button.no { color: var(--przygaszony); }
.akcje-wiersza button.no:hover { border-color: var(--blad); color: var(--blad); }
.kroki-po { max-width: 66ch; }
.kroki-po li { margin-bottom: var(--o2); }

.baner-podgladu {
  display: flex; justify-content: space-between; align-items: center; gap: var(--o4);
  flex-wrap: wrap;
  background: var(--uwaga-tlo); color: var(--uwaga); border-bottom: 1px solid var(--uwaga);
  padding: var(--o2) var(--o4); font-size: var(--t-s);
}
.baner-podgladu button { border-color: currentColor; color: inherit; background: transparent; }

/* ------------------------------------------------------------ na telefonie */

@media (max-width: 720px) {
  main { padding: var(--o4) var(--o3); }

  /* Tabela ofert nie dziala na waskim ekranie, a ofert szuka sie w telefonie.
     Wiersz staje sie karta: ocena po lewej, reszta obok. */
  .offers thead { display: none; }
  .offers, .offers tbody, .offers tr, .offers td { display: block; width: 100%; }
  .offers tr {
    position: relative; padding: var(--o3) var(--o3) var(--o3) 60px;
    margin-bottom: var(--o2); background: var(--tlo-uniesione);
    border: 1px solid var(--linia); border-radius: var(--rog-duzy);
  }
  .offers td { border: none; padding: 0 0 var(--o1); }
  .offers td:first-child { position: absolute; left: var(--o3); top: var(--o3); padding: 0; }
  .offers tr:hover td { background: transparent; }
  /* Przeksztalcenie wiersza w karte jest skrojone pod liste ofert (ocena po lewej
     jako pierwsza komorka). Tabele robocze - osoby, kody - maja osiem kolumn danych
     i po prostu sie przewijaja. */
  .osoby, .osoby tbody, .osoby tr, .osoby td,
  .kody,  .kody tbody,  .kody tr,  .kody td { display: revert; width: auto; }
  .osoby thead, .kody thead { display: table-header-group; }
  .osoby tr, .kody tr { padding: 0; margin: 0; background: none; border: none; border-radius: 0; }
  .osoby td, .kody td { border-bottom: 1px solid var(--linia); padding: var(--o3) var(--o2); }
  .osoby td:first-child, .kody td:first-child { position: static; }

  .reason { display: none; }          /* uzasadnienie jest w szczegolach oferty */
  .actions { margin-top: var(--o2); }

  /* Na karcie decyzje ida w wiersz: pionowy slup przyciskow zjadalby
     ekran, a sa tylko dwie. */
  .etap { margin-top: var(--o2); }
  .etap .status { display: inline; margin-right: var(--o2); }
  .decyzje { flex-direction: row; flex-wrap: wrap; margin-top: var(--o2); }
  .decyzje button { width: auto; }

  /* Szesc kolumn lejka nie miesci sie na telefonie - zostaje pionowa lista
     z naglowkami etapow. */
  .lejek { display: block; }
  .lejek .kolumna { min-width: 0; margin-bottom: var(--o5); }

  .counts { gap: var(--o1); }
  .count { flex: 1 1 calc(50% - var(--o1)); }
  .os-czasu .kiedy { min-width: 0; width: 100%; }
}

/* ============================================================== landing */

.landing { max-width: 940px; margin: 0 auto; }
.landing section { padding: var(--o8) 0; border-top: 1px solid var(--linia); }
.landing section:first-child { padding-top: var(--o6); border-top: none; }
.landing h2 { font-size: var(--t-xl); margin-bottom: var(--o4); }
.landing p { max-width: 62ch; }

.bohater { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--o7); align-items: center; }
.bohater h1 {
  font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: var(--o4);
}
.wiodacy { font-size: var(--t-l); color: var(--przygaszony); line-height: 1.5; }
.dzialania { display: flex; align-items: center; gap: var(--o3); flex-wrap: wrap; margin-top: var(--o5); }
.przycisk { display: inline-block; text-decoration: none; padding: var(--o3) var(--o5); font-weight: 600; }

/* Plaster pokazuje mechanizm: setka ofert dziennie, liczy sie kilka.
   Komorki dziedzicza kolor tekstu, wiec rysunek dziala w obu trybach bez drugiej wersji. */
.plaster { width: 100%; height: auto; fill: currentColor; }
.plaster .trafiona { fill: var(--sygnal); opacity: 1; }

/* Trzy kroki to FAKTYCZNA sekwencja, wiec numeracja niesie informacje,
   a nie zdobi - inaczej nie byloby jej tutaj. */
.kroki ol { list-style: none; counter-reset: krok; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--o5); }
.kroki li { counter-increment: krok; }
.kroki li::before {
  content: counter(krok); display: block;
  font-size: var(--t-l); font-weight: 700; color: var(--sygnal);
  font-variant-numeric: tabular-nums; margin-bottom: var(--o2);
}
.kroki h3 { font-size: var(--t-m); margin-bottom: var(--o2); }
.kroki p { font-size: var(--t-s); color: var(--przygaszony); }

.prywatnosc ul { padding-left: var(--o4); max-width: 62ch; }
.prywatnosc li { margin-bottom: var(--o2); }

/* Trzy karty, bo demo jest wyborem OBOK pakietow, a nie zapowiedzia przed nimi -
   ma stac tam, gdzie ktos porownuje, co dostanie za ile. */
.pakiety { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--o4); margin: var(--o5) 0; }
.pakiet {
  background: var(--tlo-uniesione); border: 1px solid var(--linia);
  border-radius: var(--rog-duzy); padding: var(--o5);
}
.pakiet h3 { font-size: var(--t-m); margin-bottom: var(--o2); }
.cena { font-size: var(--t-xxl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--o4); }
.cena span { font-size: var(--t-s); font-weight: 400; color: var(--przygaszony); letter-spacing: 0; }
.pakiet ul { padding-left: var(--o4); margin: 0; font-size: var(--t-s); }
.pakiet li { margin-bottom: var(--o1); }
.pakiet-uwaga { font-size: var(--t-xs); color: var(--przygaszony); margin: var(--o3) 0 0; }

.zamkniecie { text-align: center; }
.zamkniecie p { max-width: none; }

@media (max-width: 720px) {
  .landing section { padding: var(--o6) 0; }
  .bohater { grid-template-columns: 1fr; gap: var(--o5); }
  .bohater-tresc { order: 1; }
  .plaster { order: 2; }
  .kroki ol, .pakiety { grid-template-columns: 1fr; }
}
/* Trzy karty obok siebie robia sie ciasne wczesniej niz reszta ukladu. */
@media (max-width: 980px) and (min-width: 721px) {
  .pakiety { grid-template-columns: repeat(2, 1fr); }
}
/* Pusty ekran bez slowa wyjasnienia wyglada jak awaria - stan pusty ma mowic,
   co sie dzieje i co zrobic. */
.pusto { color: var(--przygaszony); padding: var(--o6) 0; text-align: center; }

/* Stan uslugi zamiast licznika udajacego licznik: to data, nie liczba do klikniecia. */
.ostatnie-pobranie { font-size: var(--t-xs); color: var(--przygaszony); margin: calc(-1 * var(--o2)) 0 var(--o4); }

/* Pole liczbowe potrzebuje miejsca na strzalki, inaczej placeholder sie urywa. */
.filters input[type=number] { width: 130px; }
.czekaj { font-size: var(--t-s); color: var(--przygaszony); margin-top: var(--o2); }
.dane-osobowe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--o3); }
.dane-osobowe label:last-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .dane-osobowe { grid-template-columns: 1fr; } }
.onboarding textarea { display: block; width: 100%; margin-top: var(--o1); font: inherit; }
.udany { background: var(--sygnal-tlo); border: 1px solid var(--sygnal); color: var(--sygnal);
  padding: var(--o2) var(--o3); border-radius: var(--rog); font-size: var(--t-s); }
/* Frazy w panelu osob: liczba na wierzchu, tresc po rozwinieciu - inaczej tabela
   rozjezdza sie przy jedenastu frazach. */
.frazy summary { cursor: pointer; }
.frazy ul { list-style: none; padding: var(--o1) 0 0; margin: 0; font-size: var(--t-xs);
  color: var(--przygaszony); text-align: left; }

/* Pasek postepu NIEOKRESLONY: czas zalezy od dlugosci CV i obciazenia modelu,
   wiec procentow nie znamy i nie udajemy. Segment przesuwa sie w kolko,
   sygnalizujac wylacznie "trwa". */
.pasek {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--linia); margin-bottom: var(--o2);
}
.pasek span {
  display: block; height: 100%; width: 40%;
  background: var(--sygnal); border-radius: 2px;
  animation: przesuw 1.4s ease-in-out infinite;
}
@keyframes przesuw {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* Przy wylaczonym ruchu pasek zostaje, ale sie nie rusza - informacja bez migotania. */
@media (prefers-reduced-motion: reduce) {
  .pasek span { animation: none; width: 100%; opacity: 0.6; }
}
.czekaj[hidden] { display: none; }

/* Usuniecie konta: jedyne miejsce z czerwienia jako kolorem dzialania. Nie jest
   to kolor semantyczny bledu, tylko ostrzezenie przed czynnoscia nieodwracalna. */
button.niebezpieczna {
  background: var(--blad); color: var(--tlo-uniesione); border-color: var(--blad);
}
button.niebezpieczna:hover { filter: brightness(1.08); }
.dzialania-usun { display: flex; align-items: center; gap: var(--o4); }
.co-znika { padding-left: var(--o4); }
.co-znika li { margin-bottom: var(--o1); }
.strefa-ryzyka {
  border: 1px solid var(--linia); border-radius: var(--rog-duzy);
  padding: var(--o4); margin-top: var(--o7);
}
.strefa-ryzyka h3 { font-size: var(--t-m); margin-bottom: var(--o2); }
.strefa-ryzyka p { font-size: var(--t-s); color: var(--przygaszony); }
a.przycisk.niebezpieczna {
  display: inline-block; text-decoration: none;
  background: var(--blad); color: var(--tlo-uniesione); border-color: var(--blad);
}
/* Naglowek dla niezalogowanego: wejscie dla tych, ktorzy juz maja konto,
   obok wezwania dla nowych. */
.przycisk-naglowek {
  text-decoration: none; border: 1px solid var(--linia); border-radius: var(--rog);
  padding: var(--o1) var(--o3); font-size: var(--t-s); background: var(--tlo);
}
.przycisk-naglowek:hover { border-color: var(--przygaszony); }
.dzialania-srodek { display: flex; gap: var(--o3); justify-content: center; flex-wrap: wrap; }

/* Baner "szukamy teraz": pierwszy przebieg trwa 1-2 min, wiec panel jest wtedy
   pusty. Plaster pulsuje, bo to jedyny moment, w ktorym cos SIE DZIEJE i warto
   na to zwrocic uwage - poza nim heksagon w panelu bylby ozdoba. */
.szukamy {
  display: flex; align-items: flex-start; gap: var(--o4);
  border: 1px solid var(--sygnal); border-radius: var(--rog-duzy);
  background: var(--sygnal-tlo);
  padding: var(--o4); margin-bottom: var(--o5);
}
.szukamy strong { display: block; margin-bottom: var(--o1); }
.szukamy p { margin: 0; font-size: var(--t-s); color: var(--przygaszony); max-width: 62ch; }
.szukamy a { color: var(--sygnal); }
.szukamy-plaster {
  flex: 0 0 auto; width: 22px; height: 25px; background: var(--sygnal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: plaster-oddech 1.8s ease-in-out infinite;
}
@keyframes plaster-oddech { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .szukamy-plaster { animation: none; }
}

/* Zaproszenia: kod jest jedyna rzecza do przekopiowania, wiec dostaje wyroznienie
   sygnalem - poza tym strona jest tekstem. */
.nowy-kod {
  border: 1px solid var(--sygnal); background: var(--sygnal-tlo);
  border-radius: var(--rog); padding: var(--o3); margin: var(--o4) 0;
}
.nowy-kod strong { font-size: var(--t-l); letter-spacing: 0.06em; }
.formularz-kodu {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--o3);
  margin: var(--o4) 0 var(--o6);
}
.formularz-kodu label { display: flex; flex-direction: column; gap: var(--o1); font-size: var(--t-s); }
.formularz-kodu input { padding: var(--o2); border: 1px solid var(--linia);
  border-radius: var(--rog); background: var(--tlo-uniesione); color: var(--tekst); }
.kody code { letter-spacing: 0.06em; }
.kody .zuzyty { opacity: 0.55; }

/* Okruszki: pokazuja ZEJSCIE w glab, wiec sa tylko tam, gdzie strona ma rodzica.
   Dla zakladek rownorzednych robi to naglowek - fałszywe zagniezdzanie
   "Oferty / Lejek" mowiloby o strukturze rzecz nieprawdziwa. */
.okruszki { margin-bottom: var(--o4); font-size: var(--t-s); }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--o2); padding: 0; margin: 0; }
.okruszki li + li::before { content: "/"; color: var(--linia); margin-right: var(--o2); }
.okruszki a { color: var(--przygaszony); }
.okruszki a:hover { color: var(--tekst); }
.okruszki [aria-current] { color: var(--przygaszony); }

/* Aktywna zakladka: podkreslenie sygnalem, nie tlem. Tlo robiloby z naglowka
   pasek klockow, a sygnal ma w tym projekcie jedna role na ekran. */
.gora a[aria-current] {
  color: var(--tekst); text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--sygnal);
}

/* Powrot na gore. Tworzony przez skrypt, wiec bez JavaScriptu nie ma martwego
   przycisku. Prawy dolny rog, bo tam trafia kciuk na telefonie. */
.na-gore {
  position: fixed; right: var(--o4); bottom: var(--o4); z-index: 10;
  background: var(--tlo-uniesione); border: 1px solid var(--linia);
  border-radius: var(--rog); padding: var(--o2) var(--o3);
  font-size: var(--t-s); text-decoration: none; color: var(--tekst);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
.na-gore:hover { border-color: var(--przygaszony); }
.na-gore[hidden] { display: none; }

/* Płynne przewijanie tylko dla tych, ktorzy go nie wylaczyli. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Tabele robocze przewijaja sie w swoim pudelku, zeby strona nigdy nie jechala
   w poziomie. */
.tabela-przewijana { overflow-x: auto; }
.tabela-przewijana > table { min-width: 760px; }
@media (max-width: 720px) {
  .tabela-przewijana > table { min-width: 720px; }
}

/* Termin wygasniecia na stronie oferty. Wyrozniony, bo to jedyna informacja
   na tym ekranie, ktora ma wlasny zegar. */
.termin {
  border: 1px solid var(--linia); border-left: 3px solid var(--uwaga);
  border-radius: var(--rog); padding: var(--o2) var(--o3);
  font-size: var(--t-s); max-width: 62ch;
}
.termin.pilny { border-left-color: var(--blad); background: var(--blad-tlo); color: var(--blad); }

/* Odnosnik do ogloszenia jako akcja, nie jako slowo w akapicie. Nie siega po
   --sygnal: ten nalezy do oceny dopasowania, a na ekranie ma byc jeden. */
.przycisk.zrodlo {
  display: block; text-align: center; text-decoration: none;
  margin-bottom: var(--o4);
}

/* Lista zmian po poprawce CV. Wyrozniona ramka, bo to odpowiedz na pytanie
   "czy warto bylo generowac drugi raz" - a nie kolejny akapit dokumentu. */
.zmiany {
  border: 1px solid var(--linia); border-left: 3px solid var(--w-toku);
  border-radius: var(--rog); padding: var(--o3) var(--o4);
  margin: var(--o4) 0; background: var(--tlo-uniesione);
}
.zmiany h4 { margin: 0 0 var(--o2); font-size: var(--t-s); color: var(--w-toku); }
.zmiany ul { margin: 0; padding-left: var(--o4); font-size: var(--t-s); }
.zmiany li { margin-bottom: var(--o1); }

/* ------------------------------------------------------- kolejka dzialan */

/* Lista ofert odpowiada na pytanie "ktora jest najlepsza", ta na "co zrobic dzis".
   Stad brak sortowania po ocenie: kolejnosc robi pilnosc, a ocena jest tylko
   jedna z informacji w wierszu. */
.grupa { margin-bottom: var(--o6); }
.grupa h3 { margin-bottom: var(--o1); display: flex; align-items: baseline; gap: var(--o2); }
.grupa h3 .ile {
  font-size: var(--t-s); font-weight: 400; color: var(--przygaszony);
  font-variant-numeric: tabular-nums;
}
.grupa > .muted { max-width: 78ch; margin-bottom: var(--o3); }

.zadania { list-style: none; padding: 0; margin: 0; }
.zadania li {
  display: flex; align-items: center; gap: var(--o3);
  padding: var(--o3) 0; border-bottom: 1px solid var(--linia);
}
.zadanie-tresc { flex: 1; min-width: 0; }
.zadanie-tresc a { font-weight: 500; }
.zadanie-tresc .muted { margin-left: var(--o2); font-size: var(--t-s); }
.powod { margin: var(--o1) 0 0; font-size: var(--t-s); color: var(--przygaszony); }
.pilne-tekst { color: var(--blad); }
.zadania form { margin: 0; flex: none; }
.zadania button { white-space: nowrap; }

@media (max-width: 720px) {
  .zadania li { flex-wrap: wrap; }
  .zadania form { width: 100%; }
  .zadania button { width: 100%; }
}

/* Sortowanie stoi w pasku filtrow, bo odpowiada na to samo pytanie: co chce
   zobaczyc najpierw. Etykieta jest widoczna, a nie tylko w placeholderze -
   inaczej po przeladowaniu nie wiadomo, czy lista jest po ocenie, czy po dacie. */
.sortowanie { display: inline-flex; align-items: center; gap: var(--o1);
  font-size: var(--t-s); color: var(--przygaszony); }

/* ---------------------------------------------------------------- poradnik */
/* Tresc czytana, nie skanowana - wiec szeryfy i szeroka interlinia, tak jak
   w dokumentach prawnych. Osobne klasy, bo ".dokument" znaczy w tym pliku juz
   dwie rozne rzeczy (kafelek CV na stronie oferty i strona regulaminu). */

.poradnik-naglowek { max-width: 68ch; margin: 0 auto var(--o6); }
.poradnik-naglowek h1 { margin-bottom: var(--o2); }

.lista-artykulow { list-style: none; padding: 0; max-width: 68ch; margin: 0 auto; }
.lista-artykulow > li { padding: var(--o5) 0; border-top: 1px solid var(--linia); }
.lista-artykulow > li:first-child { border-top: none; padding-top: 0; }
.lista-artykulow h2 { font-family: var(--font-ui); font-size: var(--t-l); margin: 0 0 var(--o2); }
.lista-artykulow h2 a { color: var(--tekst); text-decoration: none; }
.lista-artykulow h2 a:hover { text-decoration: underline; }
.lista-artykulow .zajawka {
  font-family: var(--font-czyt); line-height: 1.6; margin: 0 0 var(--o2); color: var(--tekst);
}

.meta-artykulu { color: var(--przygaszony); font-size: var(--t-s); font-family: var(--font-ui); margin: 0; }
/* Tekst przewodni wyroznia sie ramka, nie kolorem: --sygnal jest zarezerwowany
   dla oceny dopasowania i jednej akcji glownej (zasada 2 systemu wizualnego). */
.znacznik-filar {
  margin-left: var(--o3); padding: 1px var(--o2); border: 1px solid var(--linia);
  border-radius: var(--rog); font-size: var(--t-xs);
}

.artykul { max-width: 68ch; margin: 0 auto; font-family: var(--font-czyt); line-height: 1.7; }
.artykul h1 { font-family: var(--font-ui); font-size: var(--t-xxl); margin-bottom: var(--o2); }
.artykul h2 { font-family: var(--font-ui); font-size: var(--t-l); margin-top: var(--o7); }
.artykul h3 { font-family: var(--font-ui); font-size: var(--t-m); margin-top: var(--o6); }
.artykul > p:first-of-type { font-size: 1.1rem; }
.artykul ul, .artykul ol { padding-left: var(--o5); }
.artykul li + li { margin-top: var(--o2); }
.artykul blockquote {
  margin: var(--o5) 0; padding: var(--o3) var(--o5);
  border-left: 3px solid var(--linia); color: var(--przygaszony);
}
.artykul table { border-collapse: collapse; width: 100%; font-size: var(--t-s); font-family: var(--font-ui); }
.artykul th, .artykul td { border: 1px solid var(--linia); padding: var(--o2); text-align: left; vertical-align: top; }

.zacheta {
  margin-top: var(--o8); padding: var(--o5);
  background: var(--tlo-uniesione); border: 1px solid var(--linia); border-radius: var(--rog);
  font-family: var(--font-ui);
}
.zacheta p { margin: 0 0 var(--o3); }
.zacheta .drobne { color: var(--przygaszony); font-size: var(--t-s); }
.pusto { color: var(--przygaszony); max-width: 68ch; margin: 0 auto; }

.stopka {
  margin-top: var(--o8); padding: var(--o5) var(--o4);
  border-top: 1px solid var(--linia); font-family: var(--font-ui); font-size: var(--t-s);
  color: var(--przygaszony); text-align: center;
}
.stopka nav { display: flex; gap: var(--o5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--o3); }
.stopka a { color: var(--przygaszony); }
.stopka p { margin: 0; }