/*
  KATALOG - poszukiwanie otwiera sie lista (regula 138, 09.10; poprawki
  156 i 175, 10.10). Liczby nad lista (sa zarazem zakladkami), sita
  (zawod, miasto), wiersze ludzi i zaproszenie dla goscia.

  NOWY STYL (docs/zasady/18): ramek nie ma - zamiast obrysu powierzchnia
  (pola do wpisania ramke zostawiaja: `--obw`, granica pola ma byc czytelna)
  (ciemny motyw rgba(255,255,255,.04), jasny jej odpowiednik), znaki
  obrysem 1.5, cele 48 na telefonie i 44 od 1024 (regula 127). Barwy
  z tokenow, w obu motywach - te same, co w nowym wygladzie kabinetu
  (`kabinet-styl.css`): drugi tekst #8E887A w ciemnym, #5F5A4E w jasnym
  (#7A746A ze wzoru dawal 3.8:1 przy normie 4.5).

  PROMIEN 12-14 (regula 163, zamek zdjety 10.10, poprawka 200): bloki 14,
  pola i guziki 12 - dwie linie na koncu pliku, jedyne miejsce promienia.
  Awatarow tu nie zaokraglamy: `.szk-ava` (firma.css) dostanie kwadrat
  z promieniem 13 razem z calym portalem (regula 173, poprawka 206).
*/
:root{
  --kl-pow:rgba(20,19,15,.035);
  --kl-pow2:rgba(20,19,15,.07);
  --kl-drugi:#5F5A4E;
  --kl-zloto:#87681D;
  --kl-glowa:var(--ink);
  --kl-cel:48px;
}
:root[data-theme="dark"]{
  --kl-glowa:#F7F3E9;
  --kl-pow:rgba(255,255,255,.04);
  --kl-pow2:rgba(255,255,255,.07);
  --kl-drugi:#8E887A;
  --kl-zloto:#E6CC80;
}
@media (min-width:1024px){:root{--kl-cel:44px}}

/* Tytul ekranu wedlug nowego stylu: 26 / 700 / -0.4. */
.kl h1{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.4px;color:var(--kl-glowa)}

/* ------------------------------------------------ liczby = zakladki
   Na telefonie liczba i podpis w jednym wierszu (dwa rzedy po dwie):
   rozlozone w slupek zabieraly pol pierwszego ekranu, a wejscie ma
   pokazac LISTE. Od 600 px - cztery w rzedzie, liczba nad podpisem. */
.kl-liczby{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.kl-liczby-3{grid-template-columns:repeat(3,auto)}
/* 18.10: podpis liczby w jednej linijce - przy trzech w rzedzie na telefonie liczba stoi nad podpisem. */
@media (max-width:599px){.kl-liczby-3 .kl-liczba{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px}}
.kl-liczba{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0;min-height:var(--kl-cel);padding:8px 12px;
  border:0;border-radius:0;text-decoration:none;color:var(--kl-drugi);background:var(--kl-pow)}
.kl-liczba b{font-size:20px;line-height:1.1;font-weight:800;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:600px){
  .kl-liczby-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kl-liczba{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:64px;padding:10px 12px}
  .kl-liczba b{font-size:24px}
}
.kl-liczba span{font-size:12.5px;line-height:1.25;white-space:nowrap}
.kl-liczba.on{background:var(--kl-pow2);box-shadow:inset 0 -2px 0 var(--kl-zloto);color:var(--ink)}
.kl-liczba.on b{color:var(--kl-zloto)}
@media (hover:hover){.kl-liczba:hover{background:var(--kl-pow2)}}
.kl-liczba:focus-visible{outline:2px solid var(--kl-zloto);outline-offset:2px}

/* ------------------------------------------------ pole i sita */
.kl .szk-note{color:var(--kl-drugi)}
/* POLE MA RAMKE (`--obw`), choc blok jej nie ma: granica pola do wpisania
   ma byc czytelna (3:1), a pole bez ramki obok guzika z ramka miernik
   wygladu liczy jako mieszanke (#8). Ramek nie maja POWIERZCHNIE. */
.kl .szk-form input[type=search]{min-height:var(--kl-cel);border:1px solid var(--obw);background:var(--kl-pow2)}
.kl .szk-form input[type=search]:focus{outline:2px solid var(--kl-zloto);outline-offset:0}
.kl .szk-form .btn{min-height:var(--kl-cel)}
.kl .szk-ico{color:var(--kl-drugi)}

.kl-sita-d{margin:10px 0 12px;background:var(--kl-pow)}
.kl-sita-s{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;min-height:var(--kl-cel);padding:6px 14px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--ink)}
.kl-sita-s::-webkit-details-marker{display:none}
.kl-sita-s::after{content:"";width:8px;height:8px;margin-left:auto;border-right:1.5px solid var(--kl-drugi);border-bottom:1.5px solid var(--kl-drugi);transform:rotate(45deg) translateY(-2px)}
.kl-sita-d[open] > .kl-sita-s::after{transform:rotate(-135deg) translateY(-2px)}
.kl-sita-s small{font-size:13px;font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.kl-sita-s:focus-visible{outline:2px solid var(--kl-zloto);outline-offset:-2px}
.kl-sita{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:4px 14px 14px;border:0;border-radius:0}
.kl-pole{display:flex;flex-direction:column;gap:6px;min-width:0}
.kl-pole > label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kl-drugi)}
.kl-pole input{width:100%;min-height:var(--kl-cel);padding:0 14px;border:1px solid var(--obw);border-radius:0;background:var(--kl-pow2);color:var(--ink);font-size:16px}
.kl-pole input:focus{outline:2px solid var(--kl-zloto);outline-offset:0}
.kl-sita-g{display:flex;gap:8px;flex-wrap:wrap}
.kl-guzik{display:inline-flex;align-items:center;justify-content:center;flex:1 1 120px;min-height:var(--kl-cel);padding:0 18px;
  border:0;border-radius:0;background:var(--kl-pow2);box-shadow:inset 0 0 0 1.5px var(--kl-zloto);color:var(--ink);
  font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.kl-cicho{margin:0 0 14px;font-size:14px;color:var(--kl-drugi)}
.kl-wiecej-f{margin:-4px 0 12px}
.kl-link{display:inline-flex;align-items:center;min-height:var(--kl-cel);color:var(--ink);font-size:14px;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--kl-zloto);text-underline-offset:4px}
@media (min-width:1024px){
  .kl-sita{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}
  .kl-sita-g{flex-wrap:nowrap}
}

/* ------------------------------------------------ wiersze ludzi i firm */
.kl .szk-res{gap:6px;border:0;border-radius:0;overflow:visible}
.kl .szk-row{min-height:calc(var(--kl-cel) + 24px);border:0;background:var(--kl-pow)}
.kl a.szk-row:hover,.kl .szk-row-l:hover{background:var(--kl-pow2)}
.kl .szk-txt small{color:var(--kl-drugi)}
.kl .szk-arr{color:var(--kl-drugi)}
.kl .szk-szuka{border:0;background:var(--kl-pow2);color:var(--kl-drugi)}
.kl .szk-none{background:var(--kl-pow)}
.kl .szk-dodaj summary{min-height:var(--kl-cel)}

/* Karty ofert: te same, co na `/oferty` - tylko odstep od sit. */
.kl-oferty{margin-top:4px}

/* ------------------------------------------------ gosc: dalej po wejsciu */
.kl-dalej{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:18px 16px;border:0;border-radius:0;
  background:var(--kl-pow);box-shadow:inset 3px 0 0 var(--kl-zloto)}
.kl-dalej h2{margin:0;font-size:17px;color:var(--ink)}
.kl-dalej p{margin:0;font-size:14px;line-height:1.45;color:var(--kl-drugi)}
.kl-dalej-g{display:flex;gap:8px;flex-wrap:wrap}
/* Na telefonie guziki jeden pod drugim - dwa obok siebie lamaly napis
   "Створити акаунт" na dwa wiersze. */
.kl-dalej-g .kl-guzik{flex:1 1 100%;text-align:center}
@media (min-width:600px){.kl-dalej-g .kl-guzik{flex:1 1 0}}
.kl-wiecej{display:flex;align-items:center;justify-content:center;min-height:var(--kl-cel);margin:14px 0 0;border:0;border-radius:0;
  background:var(--kl-pow);box-shadow:inset 0 0 0 1.5px var(--kl-zloto);color:var(--ink);font-weight:700;text-decoration:none}
.kl-strony{margin-top:14px}

/* Cele pod palec takze we wspolnych czesciach, ktore stoja w katalogu:
   wybor zawodu i numery stron (same z siebie 44 i 40). */
/* spec.css ma tu `min-height:0 !important` - stad wysokosc, nie minimum. */
.kl .kl-pole .spx .spx-b{height:var(--kl-cel)}
.kl .szk-dodaj-f input,.kl .szk-dodaj-f button{min-height:var(--kl-cel)}
.kl-strony .pag-l{min-height:var(--kl-cel);min-width:var(--kl-cel);display:inline-flex;align-items:center;justify-content:center}
.kl .szk-none .btn{min-height:var(--kl-cel)}

/* PROMIEN (regula 163): bloki 14, pola i guziki 12. */
.kl-liczba,.kl-sita-d,.kl .szk-row,.kl .szk-none,.kl-dalej{border-radius:14px}
.kl-guzik,.kl-wiecej,.kl .szk-none .btn,.kl-pole input,.kl .kl-pole .spx .spx-b,.kl .szk-form input[type=search],.kl .szk-form .btn,.kl .szk-dodaj summary,.kl .szk-dodaj-f input,.kl .szk-dodaj-f button,.kl-strony .pag-l{border-radius:12px}
/* spec.css zdejmuje promien guzika wyboru z !important - stad tu tez. */
.kl .kl-pole .spx .spx-b{border-radius:12px !important}