/* robotatut.pl - strona profilu pracownika: /konto i /p/{slug}.
   Wszystko jest zawezone do `.prof` (klasa na `.panel` obu stron), wiec
   te same klasy w innych miejscach portalu - lenta, strona firmy -
   zostaja nietkniete. Kolorow nie definiujemy: tylko tokeny z gold.css. */

/* PLYTKI Z LICZBAMI - od 2 do 5 (profil/_liczby). Kreski miedzy plytkami
   robi PRZERWA siatki na tle w kolorze kreski, a nie `border-left` przy
   kazdej plytce: przy piatce na telefonie pierwsza plytka zajmuje caly
   wiersz i reguly "co druga bez kreski" przestaja pasowac. Przerwa
   pasuje do kazdego ukladu. */
.prof .pnums{gap:1px;background:var(--gline2)}
.prof .pnums>div,.prof .pnums>a{border-left:0;border-top:0;background:var(--card)}
.prof .pnums-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prof .pnums-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prof .pnums-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:640px){
  .prof .pnums-n3,.prof .pnums-n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Nieparzysta liczba: pierwsza plytka bierze caly wiersz, reszta dwa na dwa. */
  .prof .pnums-n3>:first-child,.prof .pnums-n5>:first-child{grid-column:1/-1}
}

/* PRACODAWCA zamiast poziomu - ten sam krok pisma, co nazwa poziomu. */
a.prank.pprac{display:inline-block;text-decoration:none}
a.prank.pprac:hover{filter:brightness(1.1)}

/* Naglowek bloku z "Zmien" po prawej i "+ Dodaj" w pustym bloku. */
.prof .pbp-g{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prof .pbp-g h2{margin:0 0 10px}
.prof .pbp-zmien{font-size:13px;font-weight:700;color:var(--yl);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.prof .pbp-dodaj{display:flex;align-items:center;justify-content:center;min-height:48px;
  border:1px dashed var(--gline);color:var(--yl);font-family:var(--f-display);font-weight:800;
  font-size:14px;letter-spacing:.04em;text-decoration:none}
.prof .pbp-dodaj:hover{background:var(--gsoft)}

/* UZUPELNIJ PROFIL - jeden nastepny krok (panel/index). */
.puzup{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding:14px;
  border:1px solid var(--gline);background:var(--gsoft);color:var(--ink);text-decoration:none}
.puzup-g{display:flex;flex-direction:column;gap:8px}
.puzup-g b{font-family:var(--f-display);font-weight:800;font-size:15px}
.puzup-pas{display:block;height:6px;background:var(--line);position:relative}
.puzup-pas i{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}
.puzup-krok{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.puzup-krok>span:first-child{flex:1;min-width:0}
.puzup-krok em{font-style:normal;font-family:var(--f-display);font-weight:800;font-size:12px;
  padding:5px 10px;background:var(--gold);color:var(--ctafg);white-space:nowrap}
.puzup-s{font-size:22px;color:var(--yl);line-height:1}

/* BEZ ZAOKRAGLEN - karty i guziki profilu stoja pod katem prostym.
   UWAGA: to ODWRACA wczesniejsza decyzje wlasciciela o zaokraglonych
   `.pacts` (patrz komentarz w profil.css) - dostalismy ja w zadaniu
   etapu 1 (pkt 1.11). Kolka awatarow, historii i poziomu ZOSTAJA
   kolkami: to nie sa karty, tylko twarze. */
.prof .pacts a,.prof .pbp-box,.prof .pbp-firma,.prof .pbp-cert,.prof .pcv a,
.prof .pdet,.prof .lp,.prof .pbp-gal figure,.prof .btn,.prof .puzup,
.prof .lenta-dodaj-i,.prof .pmenu,.prof .pokladka-zmien{border-radius:0}

/* ANKIETA - kategorie prawa jazdy i jezyki jako zaznaczane plytki.
   Cel pod palec 44 px; zaznaczona plytka jest zlota. Bez `:has()` -
   stan niesie bratni selektor `input:checked + span`. */
.sz-wybor{min-width:0}
/* Ten sam napis, co `.field label` w site.css - grupa wyglada jak kazde pole. */
.sz-lab{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  font-size:11px;color:var(--ink2);margin-bottom:8px}
.sz-chipy{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px}
.sz-chip{position:relative;display:inline-flex}
.sz-chip input{position:absolute;opacity:0;width:1px;height:1px}
.sz-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding:0 12px;border:1.5px solid var(--obw);background:var(--card);color:var(--ink);font-size:15px;font-weight:600}
.sz-chip input:checked+span{background:var(--gold);color:var(--ctafg);border-color:transparent}
.sz-chip input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}

/* SZCZEGOLY na profilu - wiersze "nazwa: wartosc". */
.prof .sz-lista{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 14px;margin:0}
.prof .sz-lista dt{color:var(--ink2);font-size:14px}
.prof .sz-lista dd{margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.prof .pbp-cert em{font-style:normal;font-weight:400;color:var(--ink2)}
.prof .pbp-cert.wygaslo em{color:var(--red)}

/* KTO WIDZI MOJ PROFIL (panel/ustawienia). */
.kw-nag{font-weight:700;margin-top:6px}
.kw-opcja small{color:var(--ink2);font-size:13px}
.kw-ukryta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;
  padding:8px 0;border-bottom:1px solid var(--gline2)}
.kw-ukryta span{min-width:0;overflow-wrap:anywhere;font-weight:600}
.kw-ukryta .linkdel{min-height:44px}