/* prototyp/assets/blok-szukaj.css: wspolny blok wyszukiwania trzech wejsc „Sprawdz"
   (dzialka, firma, jednostki). Miary z makiety 7.09.2026, ujednolicone 8.09.2026,
   przebudowane 9.09.2026 na polecenie AL („menu wyglada skromnie, biednie, zle
   rozmieszczone", „wszystkie menu na kazdym Sprawdz podobne wizualnie, tylko filtry
   inne w sensie tresci").

   Zasada: JEDNO zrodlo miar. Kazda liczba, ktora ma byc taka sama na trzech stronach,
   stoi nizej jako zmienna. Strona moze podmienic zmienna, nie ma podmieniac reguly,
   bo wtedy trzy wejscia znowu sie rozjezdzaja (przed zmiana: karta 920 / 920 / 1320 px,
   chipy w pierwszym rzedzie w ramce, w drugim gole slowa).

   Rytm wiersza filtrow: ETYKIETA WERSALIKAMI w stalej kolumnie po lewej, chipy, selecty
   i pola „od-do" po prawej. Wiodaca etykieta jest wyjeta z toku wiersza (position:absolute),
   wiec zawijane chipy wracaja do KOLUMNY sterowania, a nie pod etykiete. Bez tego na
   1440 px w technologiach zostawal osierocony „Wiatr" w drugim wierszu (zmierzone 9.09.2026). */
:root{
  --bs-szer:1120px;          /* szerokosc karty, jedna na trzech wejsciach */
  --bs-r:18px;               /* promien karty */
  --bs-cien:0 2px 6px rgba(22,25,34,.06),0 24px 48px -22px rgba(22,25,34,.30);
  --bs-nachodzenie:34px;     /* o tyle karta wchodzi na pas */
  --bs-etykieta:144px;       /* kolumna etykiety wiersza filtrow */
  --bs-h-kontrolki:38px;     /* chip, select, pole „od-do": jedna wysokosc */
  --bs-hair:#eef1f2;         /* kreska miedzy wierszami filtrow */
}

/* Pas: jedna wysokosc na trzech stronach. Wysokosc nie bierze sie z dlugosci leadu, tylko
   z min-height i wysrodkowania w pionie, wiec strona z krotszym zdaniem nie robi nizszego
   pasa niz sasiednia (zmierzone przed zmiana: 219 / 228 / 214 px). */
.bs-pas{display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:268px;padding:36px 20px 60px;
  background:linear-gradient(180deg,#0b3a3a 0%,#155f5b 100%);color:#fff;text-align:center}
.bs-pas h1{margin:0 0 8px;font-size:clamp(27px,2.7vw,38px);font-weight:900;line-height:1.14;
  letter-spacing:-.8px;color:#fff;max-width:22em;text-wrap:balance}
/* Lead: 17 px i miara 27em, najwyzej trzy wiersze. Wezsza miara byla przy 14,5 px, przez
   co zdanie na dzialce schodzilo na cztery wiersze drobnym drukiem. */
.bs-pas p{margin:0 auto;font-size:17px;line-height:1.55;max-width:27em;color:#eaf4f3;text-wrap:balance}
/* Stempel stanu danych stoi w tym samym miejscu na kazdej z trzech stron (freshness.js
   czyta dokumenty/status.json, data nigdy nie jest wpisywana w HTML). */
.bs-pas .fresh-wrap{margin-top:14px}

.bs{max-width:var(--bs-szer);margin:calc(-1 * var(--bs-nachodzenie)) auto 0;background:#fff;
  border-radius:var(--bs-r);padding:16px 18px;position:relative;z-index:3;box-shadow:var(--bs-cien)}
/* Wariant „panel w tresci": ten sam wyglad karty, ale bez nachodzenia na pas. Do paneli
   filtrow nad mapa i nad tabela (ograniczenia OZE, wolne moce, nawigator), gdzie nad
   panelem nie ma ciemnego pasa, tylko zwykla tresc strony. */
.bs.bs-panel{margin-top:0;margin-bottom:18px}

.bs-pole{display:flex;align-items:center;gap:10px;border:2px solid var(--green-d,#007672);border-radius:12px;padding:0 6px 0 14px;height:54px;background:#fff}
.bs-pole:focus-within{border-color:var(--navy,#161922);box-shadow:0 0 0 3px rgba(0,118,114,.22)}
.bs-pole svg{width:19px;height:19px;flex:none;color:var(--green-d,#007672)}
.bs-pole input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16.5px;color:var(--ink,#161922);height:100%}
/* Ramka podpowiedzi adresowych (adres-podpowiedzi.js) wchodzi MIEDZY .bs-pole a pole,
   wiec `height:100%` pola przestawalo sie do czegokolwiek odnosic i pole miescilo sie
   w 19 px zamiast w 54 px ramki (zmierzone na 390 px, audyt 8.09.2026). Cel dotykowy
   wraca, gdy ramka sama ma pelna wysokosc. */
.bs-pole .tap-wrap{display:flex;align-items:center;align-self:stretch;height:100%}
.bs-pole input::placeholder{color:#6b6b6b}
.bs-pole .bs-btn{flex:none;background:var(--navy,#161922);color:#fff;border:0;border-radius:9px;height:42px;padding:0 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.bs-pole .bs-btn:hover{background:#000}

/* ---------- wiersz filtrow: etykieta po lewej, sterowanie po prawej ---------- */
.bs-chipy,.bs-drugi{position:relative;box-sizing:border-box;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:flex-start;gap:8px;margin-top:12px;
  padding-left:var(--bs-etykieta);min-height:var(--bs-h-kontrolki);text-align:left;
  font-size:15px;color:#6b6b6b}
/* Kreska rozdziela wiersze filtrow. Bez niej szesc rzedow na jednostkach czytalo sie
   jako jedna plama, a dwa rzedy na dzialce jako przypadkowa kupka. */
.bs-chipy+.bs-drugi,.bs-drugi+.bs-drugi{margin-top:10px;padding-top:10px;border-top:1px solid var(--bs-hair)}
.bs-chipy .bs-lab,.bs-drugi .bs-lab{font-size:14px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#6b6b6b;margin-right:4px}
/* Wiodaca etykieta wiersza idzie do stalej kolumny. Wariantow jest kilka, bo strony
   trzymaja ja raz wprost w wierszu, raz w grupie o display:contents (rejestr, jednostki),
   raz w pudelku zakresu „od-do" (dzialka). Wszystkie maja wygladac tak samo. */
.bs-chipy>.bs-lab:first-child,
.bs-drugi>.bs-lab:first-child,
.bs-drugi>.bs-grupa:first-child>.bs-lab:first-child,
.bs-drugi>.bs-zakres:first-child>.bs-lab:first-child{
  position:absolute;left:0;top:0;width:calc(var(--bs-etykieta) - 14px);margin:0;
  min-height:var(--bs-h-kontrolki);display:flex;align-items:center;line-height:1.25;
  /* Etykieta dluzsza niz kolumna („WOLNA MOC MW" w panelu wolnych mocy) ma sie zlamac
     W SPACJI, a nie w srodku wyrazu. Bez white-space:normal dziedziczy nowrap z .bs-zakres
     i wyjezdza na chipy; z overflow-wrap:anywhere lamie „WOJEWODZTWO" po jednej literze
     (obejrzane na zrzucie 1440, 9.09.2026). Stad normal i keep-all. */
  white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.bs-chipy+.bs-drugi>.bs-lab:first-child,
.bs-drugi+.bs-drugi>.bs-lab:first-child,
.bs-chipy+.bs-drugi>.bs-grupa:first-child>.bs-lab:first-child,
.bs-drugi+.bs-drugi>.bs-grupa:first-child>.bs-lab:first-child,
.bs-chipy+.bs-drugi>.bs-zakres:first-child>.bs-lab:first-child,
.bs-drugi+.bs-drugi>.bs-zakres:first-child>.bs-lab:first-child{top:10px}

/* ---------- chip: jeden ksztalt w obu rzedach ---------- */
.ch{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  min-height:var(--bs-h-kontrolki);border:1.5px solid var(--green-l,#dfe7e7);border-radius:999px;
  padding:0 14px;font:inherit;font-size:15px;font-weight:700;color:var(--ink,#161922);
  background:#fff;cursor:pointer;white-space:nowrap}
.ch i{width:9px;height:9px;border-radius:50%;border:2px solid currentColor;display:inline-block}
.ch small{font-weight:400;color:#6b6b6b;font-variant-numeric:tabular-nums;font-size:14px}
.ch[aria-pressed="true"]{background:var(--green-d,#007672);border-color:var(--green-d,#007672);color:#fff}
.ch[aria-pressed="true"] small{color:#e8f5f4}
.ch:hover{border-color:var(--green-d,#007672)}
.ch[aria-pressed="true"]:hover{background:#00605d}
.ch:focus-visible{outline:2px solid var(--navy,#161922);outline-offset:2px}
/* Drugi rzad rozni sie od pierwszego WYLACZNIE stopniem pisma etykiety chipa, nie ksztaltem.
   Do 9.09.2026 mial border:0 i promien 7 px, czyli „gole slowa" (uwaga AL). */
.bs-drugi .ch{font-size:14.5px}
/* Licznik w aktywnym chipie drugiego rzedu: bez tej linii dziedziczy jasny kolor z rzedu
   pierwszego (#cfe7e5 na tle #eef4f4, kontrast 1,16:1, czyli liczba znika). Zmierzone 7.09.2026. */
.bs-drugi .ch[aria-pressed="true"] small{color:#e8f5f4}
.bs-grupa{display:contents}
.bs-drugi .bs-sep,.bs-chipy .bs-sep{display:inline-block;width:1px;height:20px;background:#e8eaed;margin:0 4px}

/* ---------- pola liczbowe i selecty: ta sama wysokosc, ten sam ksztalt ---------- */
/* Pole „od-do" ma te sama wysokosc, co chip, ale NIE ten sam promien: pigulka kazala
   czytac je jako kolejna wartosc do klikniecia, a nie jako pole do wpisania liczby
   (obejrzane na zrzucie 1440, 9.09.2026). */
.bs-drugi input[type="number"],.bs-chipy input[type="number"]{box-sizing:border-box;width:72px;
  min-height:var(--bs-h-kontrolki);border:1.5px solid var(--green-l,#dfe7e7);border-radius:10px;
  padding:0 10px;font:inherit;font-size:14px;text-align:center;color:var(--ink,#161922);background:#fff}
.bs-drugi input[type="number"]:hover,.bs-chipy input[type="number"]:hover{border-color:var(--green-d,#007672)}
.bs-drugi input[type="number"]:focus-visible,.bs-chipy input[type="number"]:focus-visible{outline:2px solid var(--navy,#161922);outline-offset:2px}
/* Zakres „od-do": dwa pola i jednostka trzymaja sie razem, zeby „od" nie zostalo na koncu
   jednego wiersza, a „do" nie zaczynalo nastepnego. */
.bs-zakres{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Wybor jednego z kilkunastu (wojewodztwo, klucz sortowania) to pole wyboru, nie rzad chipow:
   szesnascie chipow zjadloby caly blok. Ksztalt ten sam, co chip obok. */
.bs-drugi select.bs-select,.bs-chipy select.bs-select,.bs-drugi select,.bs-chipy select{
  box-sizing:border-box;min-height:var(--bs-h-kontrolki);border:1.5px solid var(--green-l,#dfe7e7);
  border-radius:10px;padding:0 12px;font:inherit;font-size:15px;font-weight:700;background:#fff;
  color:var(--ink,#161922);cursor:pointer;max-width:230px}
/* Ta sama wysokosc i ten sam stopien, zapisane WPROST. Bramka celu dotykowego
   (tests/jednostki-sort-filtry.test.js) czyta deklaracje z pojedynczego selektora
   i nie umie rozwinac zmiennej, a cel dotkniecia jest wazniejszy od elegancji zapisu.
   Wartosci maja byc rowne --bs-h-kontrolki; pilnuje tego test szkieletu bloku. */
.bs-drugi select.bs-select{min-height:38px;font-size:15px}
.bs-drugi select:hover,.bs-chipy select:hover{border-color:var(--green-d,#007672)}
.bs-drugi select:focus-visible,.bs-chipy select:focus-visible{outline:2px solid var(--navy,#161922);outline-offset:2px}

/* ---------- akcje wiersza: „Wiecej filtrow", „Wyczysc", przelacznik widoku ----------
   To NIE sa filtry, wiec nie dostaja ksztaltu chipa. Ciche przyciski tekstowe, dosuniete
   do prawej krawedzi wiersza, zeby nie udawaly kolejnej wartosci do wyboru. */
.bs-akcje{display:inline-flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.bs-akcja{display:inline-flex;align-items:center;box-sizing:border-box;min-height:var(--bs-h-kontrolki);
  border:0;background:transparent;border-radius:9px;padding:0 10px;font:inherit;font-size:14px;
  font-weight:800;color:#6b6b6b;cursor:pointer;white-space:nowrap}
.bs-akcja:hover{color:var(--green-d,#007672);text-decoration:underline}
.bs-akcja:focus-visible{outline:2px solid var(--navy,#161922);outline-offset:2px}
.bs-akcja[aria-expanded="true"]{color:var(--green-d,#007672)}

.bs-ukryte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Linia wyniku pod blokiem: ten sam stopien i kolor na trzech stronach. #6b6b6b na bieli
   ma kontrast 5,3:1, wiec liczba w niej jest czytelna takze bez pogrubienia. */
.bs-wynik{text-align:center;margin:16px 20px 12px;font-size:15px;line-height:1.6;color:#6b6b6b}
.bs-wynik b{color:var(--ink,#161922);font-variant-numeric:tabular-nums}

/* Karta ma miare ze zmiennej i marginesy „auto", wiec miedzy szerokoscia karty a szerokoscia
   okna dotykala krawedzi. Tylko lewy i prawy margines, zeby ujemny gorny (nachodzenie na pas)
   zostal nietkniety. Zmierzone na 900 px, 7.09.2026. */
@media (max-width:1180px){
  .bs{margin-left:14px;margin-right:14px}
}
@media (max-width:900px){
  /* Wezsza kolumna etykiety: przy 144 px rzad chipow lamal sie na 4+1 i ostatni chip
     zostawal sam. Probowalismy tez zdjac kolumne calkiem i dac etykiete NAD wierszem:
     wyszlo gorzej, bo szerszy wiersz przesuwal lamanie na kolejny 4+1 (zmierzone na
     768 px, 9.09.2026: 1 sierota przy kolumnie 112 px, 4 sieroty przy etykiecie nad
     wierszem). Zostaje kolumna, tylko wezsza. */
  .bs{--bs-etykieta:112px}
}

@media (max-width:760px){
  .bs-pas{min-height:0;padding:28px 14px 52px}
  .bs-pas h1{letter-spacing:-.4px}
  .bs-pas p{font-size:15.5px;line-height:1.6}
  .bs{margin:calc(-1 * var(--bs-nachodzenie) + 4px) 14px 0;padding:12px 12px}
  .bs.bs-panel{margin-top:0}
  /* Na telefonie kolumny etykiety nie ma: wiersz jest przewijany w poziomie, wiec etykieta
     wraca do toku i jedzie razem z chipami. Cel dotkniecia 44 px w calym wierszu. */
  .bs-chipy,.bs-drugi{padding-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;padding-right:4px;margin-left:0;margin-right:0}
  .bs-chipy>.bs-lab:first-child,.bs-drugi>.bs-lab:first-child,.bs-drugi>.bs-grupa:first-child>.bs-lab:first-child,.bs-drugi>.bs-zakres:first-child>.bs-lab:first-child{position:static;width:auto;flex:none;margin:0 4px 0 0;min-height:0}
  .bs-chipy{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
  .bs-chipy::-webkit-scrollbar,.bs-drugi::-webkit-scrollbar{display:none}
  .bs-pole{height:52px}.bs-pole input{font-size:16px}
  .bs-pole .bs-btn{height:44px;padding:0 14px}
  .bs-chipy .ch,.bs-drugi .ch{min-height:44px}
  .bs-chipy .ch,.bs-drugi .ch,.bs-chipy .bs-lab,.bs-drugi .bs-lab,.bs-chipy .bs-sep,.bs-drugi .bs-sep,.bs-zakres,.bs-akcje,.bs-akcja{flex:none}
  .bs-akcje{margin-left:0}
  .bs-akcja{min-height:44px}
  /* 16 px, nie 14: ponizej tej wartosci iOS przybliza cala strone przy ustawieniu
     kursora w polu i uzytkownik traci ulozenie bloku (recenzja gpt-6-astra 8.09.2026). */
  .bs-drugi input[type="number"]{min-height:44px;font-size:16px}
  .bs-drugi select{min-height:44px;font-size:16px}
  .bs-drugi select.bs-select{min-height:44px;font-size:16px}
}
@media (max-width:430px){
  /* Na 390 px etykieta przycisku („Sprawdz dzialke", „Sprawdz jednostke") zabierala polowe
     pola i placeholder urywal sie po dwoch slowach. Wezszy przycisk oddaje ok. 30 px polu,
     nie schodzac ponizej 44 px wysokosci. */
  .bs-pole{padding-left:11px;gap:6px}
  .bs-pole .bs-btn{padding:0 11px;font-size:14px}
}