/* iwpb-branza.css — wyglad wspolnego wyboru branzy (patrz assets/iwpb-branza.js).
   Uzywany w 4 miejscach: strona glowna (hero), Kondycja branz, Nastroje branzy, Demografia branzy.

   UWAGA na tokeny: rdzen serwisu (assets/iwpb.css) uzywa --granat/--atrament/--papier2,
   a narzedzia maja wlasne --navy/--ink/--bg2. Dlatego kazdy kolor ma lancuch fallbackow
   var(--navy, var(--granat, #0f2540)) — komponent wyglada tak samo w obu swiatach,
   bez wpinania calego arkusza rdzenia do narzedzi.

   Daltonizm: kolor NIGDY nie niesie informacji — zaznaczenie to obwodka + tlo + pogrubienie. */

.iwbr { position: relative; flex: 1 1 340px; min-width: 240px; max-width: 560px; }

.iwbr-etyk { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 6px;
  color: var(--ink, var(--atrament, #16233a)); }

.iwbr-pole { position: relative; }

/* font-size 16px to nie kosmetyka: mniej = iOS sam zoomuje strone przy focusie */
.iwbr-input {
  width: 100%; font: inherit; font-size: 16px; font-weight: 700;
  padding: 12px 46px 12px 14px; border-radius: 9px; min-height: 48px;
  border: 2px solid var(--navy, var(--granat, #0f2540));
  background: #fff; color: var(--navy, var(--granat, #0f2540));
}
.iwbr-input::placeholder { color: var(--ink3, var(--atrament2, #4a5a72)); font-weight: 400; opacity: .85; }
.iwbr-input:focus { outline: 2px solid var(--zolc, #f5c518); outline-offset: 1px; }

.iwbr-x {
  position: absolute; right: 2px; top: 2px; width: 44px; height: 44px;   /* 44px = minimum dotykowe */
  border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer;
  border-radius: 7px; color: var(--ink3, var(--atrament2, #4a5a72));
}
.iwbr-x:hover { background: var(--bg2, var(--papier2, #f4f6fa)); color: var(--navy, var(--granat, #0f2540)); }
.iwbr-x:focus-visible { outline: 2px solid var(--zolc, #f5c518); outline-offset: -2px; }

.iwbr-lista {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: min(380px, 54vh); overflow-y: auto; list-style: none; margin: 0; padding: 4px;
  background: #fff; border-radius: 10px;
  border: 1px solid var(--rule, var(--linia-j, rgba(15,37,64,.14)));
  box-shadow: 0 10px 30px rgba(15, 37, 64, .16);
}

.iwbr-grupa {
  padding: 8px 12px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink3, var(--atrament2, #4a5a72));
  border-top: 1px solid var(--rule, rgba(15,37,64,.1)); margin-top: 4px;
}
.iwbr-grupa:first-child { border-top: 0; margin-top: 0; }

.iwbr-opt {
  padding: 10px 12px; min-height: 44px; display: flex; align-items: center; gap: 10px;
  border-radius: 7px; cursor: pointer; font-size: .94rem; font-weight: 600;
  color: var(--ink, var(--atrament, #16233a));
}
.iwbr-nm { display: flex; flex-direction: column; gap: 1px; }
.iwbr-opt b { color: var(--navy, var(--granat, #0f2540)); }          /* dopasowany fragment — pogrubienie, nie kolor */
.iwbr-kod {
  margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--ink3, var(--atrament2, #4a5a72));
}
/* powod trafienia ze slowa potocznego — user musi wiedziec, czemu "restauracja" dala PKD 56 */
.iwbr-pow { font-size: .74rem; font-weight: 600; color: var(--ink3, var(--atrament2, #4a5a72)); }
.iwbr-pow::before { content: "↳ "; }

.iwbr-opt:hover { background: var(--bg2, var(--papier2, #f4f6fa)); }
.iwbr-opt.akt {
  background: var(--bg2, var(--papier2, #f4f6fa));
  outline: 2px solid var(--navy, var(--granat, #0f2540)); outline-offset: -2px;
}

.iwbr-pusto { padding: 12px 14px; font-size: .9rem; line-height: 1.5;
  color: var(--ink2, var(--atrament2, #4a5a72)); }

.iwbr-licz { margin: 6px 2px 0; font-size: .8rem; min-height: 1em;
  color: var(--ink3, var(--atrament2, #4a5a72)); }
/* komunikat walidacji — kolor to dodatek, sygnal niesie samo zdanie i pogrubienie (daltonizm) */
.iwbr-licz.iwbr-blad { font-weight: 700; color: var(--signal, #8A5A00); }

/* tresc tylko dla czytnika ekranu (np. jednozdaniowe podsumowanie wyniku) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* <select> zostaje w DOM jako stan i zaplecze bez JS — tylko znika z widoku.
   Każda własność MUSI mieć !important. Bez tego reguły strony o wyższej specyficzności
   (np. `.hero-branza select{width:100%; min-height:48px}` = 0,1,1 vs ta klasa = 0,1,0) wygrywały:
   select znikał z oczu, ale zostawał szeroki na 100% i — jako position:absolute — rozpychał
   stronę główną do 379 px przy ekranie 360 (poziomy scroll na telefonie, niewidoczny w testach
   DOM-owych). Klasa „schowaj wizualnie” ma wygrywać zawsze, niezależnie od CSS gospodarza. */
.iwbr-ukryty {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
}

@media (max-width: 640px) {
  .iwbr { max-width: none; flex-basis: 100%; }
  .iwbr-lista { max-height: min(320px, 50vh); }
}