/* BELKI ZWIJANE - wyglad uniwersalnego komponentu (belki_zwijane.js). Jedno miejsce dla wszystkich stron (Karol, 28 X 2026).
   Kontener dostaje klase `belki-zwijane`; kolory z tokenow strony (--line, --ink2, --accent), awaryjnie paleta Zoom. */
.belki-zwijane{--bz-etyk-max:12px;--bz-etyk-min:9px;--bz-zielony:#5E7F2B;--bz-szary:#9C958A;--bz-min-wys:88px;display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:.6em}
.belki-zwijane .og-sekcja{display:inline-flex;align-items:stretch;gap:7px;border:1px solid var(--line,#E4DBCB);border-radius:10px;background:rgba(255,255,255,.25);padding:3px 7px 3px 0;min-height:var(--bz-min-wys)}   /* Karol, 28 X: „sekcje BZ powinny byc w menu zawsze na te sama minimalna wysokosc - niezaleznie od zawartosci” (88 = sekcja paska „szafa”) */ /* 30 X 2026 (Karol, BZ „boki”: „wycentruj”): odstep zakladka-tresc = prawy margines (po 7 px - ta sama suma co 4 + 10, belka nie rosnie) - tresc na srodku pola */
.belki-zwijane .og-sekcja.zwinieta{padding:3px 0}
/* FILL RIGHT (Karol, 28 X 2026: „zeby sie dopasowywala zawsze do konca okna - kolejna uniwersalna cecha prawego okna - opcja fill right”):
   rozwinieta sekcja z data-fill="right" rosnie do prawej krawedzi kontenera, nie wezej niz tresc; zwinieta - sama zakladka */
.belki-zwijane .og-sekcja[data-fill="right"]:not(.zwinieta){flex:1 1 auto;min-width:max-content}
.belki-zwijane .og-sekcja[data-fill="right"]:not(.zwinieta) > .og-tresc{flex:1 1 auto}
.belki-zwijane:has(> .og-sekcja[data-fill="right"]:not(.zwinieta)){flex:1 1 auto}
.belki-zwijane .og-sekcja.zwinieta .og-tresc{display:none}
.belki-zwijane .og-tresc{display:inline-flex;align-items:center;gap:10px}   /* rzedy po lewej, piktogramy obok na wysokosc obu rzedow */
.belki-zwijane .og-wiersze{display:grid;grid-auto-flow:row;gap:.4em;align-content:center;justify-items:start}
.belki-zwijane .og-wiersze > *{flex-basis:auto;width:auto}
/* pola tekstowe w sekcji ZAWIJAJA sie po slowach i biora szerokosc od sekcji (Karol, 28 X: „tekstowe pola w sekcjach powinny sie zawijac,
   brac obszar od sekcji”): sekcja waska ma STALA szerokosc tresci, tekst uklada sie w niej w kilku liniach */
.belki-zwijane .og-wiersze .tekst,.belki-zwijane .og-wiersze .opis,.belki-zwijane .og-wiersze .opis *{white-space:normal}
.belki-zwijane .og-tresc > .og-boks{align-self:center}
.belki-zwijane .og-pusto{color:var(--ink2,#4A4238);opacity:.5;padding:0 .8em}
.belki-zwijane .og-sekcja.waska{margin-left:0}   /* waska (np. „opis”) stoi tuz za ciagiem sekcji, NIE przy krawedzi okna (Karol, 28 X) */
.belki-zwijane .og-sekcja.waska .og-tresc{width:150px;max-width:150px}
.belki-zwijane .og-sekcja.waska .og-wiersze,.belki-zwijane .og-sekcja.waska .og-wiersze > *{width:100%}
/* ZAKLADKA (Karol, 28 X 2026: „wyznacz im w komponencie stale miejsce”, „etykiety w polu - middle center”, „zwiniete szare a rozwiniete zielone”,
   „za duzo elementow - daj tak: zielone do konca pola aktywnego, etykieta biala w kontrze”, „ptaszki ciut wieksze i pogrub”):
   CALE pole zakladki pelne - rozwinieta zielona (jak aktywna zakladka menu „szafa”, #5E7F2B), zwinieta szara; etykieta (90 stopni CCW) i strzalka biale;
   strzalka PO PRAWEJ od etykiety, na srodku wysokosci (Karol: „przeniesienie strzalek na prawo od etykiety”, „a moze bedzie ok, jak strzalka pojdzie w bok” -
   etykieta ma wtedy cala wysokosc i pasek nie rosnie), etykieta na srodku swojego pola.
   Pole siega krawedzi sekcji (gora, dol, lewa). Strzalka: otwarta „›”, zwinieta „⌄”. */
.belki-zwijane .og-zakladka{display:inline-flex;flex-direction:row-reverse;align-items:stretch;gap:1px;width:31px;padding:4px 3px 4px 4px;margin:-3px 0;border:0;
  background:var(--bz-zielony);color:#fff;font:inherit;cursor:pointer;border-radius:9px 0 0 9px;align-self:stretch}
.belki-zwijane .og-sekcja.zwinieta .og-zakladka{background:var(--bz-szary);border-radius:9px}
.belki-zwijane .og-sekcja:not(.zwinieta){border-color:var(--bz-zielony)}   /* Karol, 28 X: „obrys pola zielony po rozwinieciu” */
.belki-zwijane .og-zakladka:hover{filter:brightness(1.08)}
.belki-zwijane .og-zakladka .uchwyt{flex:none;display:flex;align-items:center;justify-content:center;width:9px}
.belki-zwijane .og-zakladka .chev{display:block;width:8px;height:14px;line-height:0}
.belki-zwijane .og-zakladka .chev svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.belki-zwijane .og-zakladka .chev[data-kier="lewo"] svg{transform:scaleX(-1)}
/* pole etykiety NIE wyznacza wysokosci sekcji (Karol: „etykiety w polu - middle center”) - wysokosc daje tresc, etykieta dopasowuje liternictwo (dopasujEtykiety) */
.belki-zwijane .og-zakladka .etyk-pole{flex:none;width:15px;min-height:0;position:relative}
.belki-zwijane .og-zakladka .etyk-srodek{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1px}
.belki-zwijane .og-zakladka .kol{display:flex;align-items:center;justify-content:center}
.belki-zwijane .og-zakladka .tyt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--bz-etyk-max);font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;line-height:1.05}   /* Karol: „wszystkie litery wieksze”, „zobacz tez wersaliki” */
/* etykieta dwuwierszowa („listwa|przypodlogowa”): dwie kolumny, mniejsza czcionka - zeby nie podnosic paska */
.belki-zwijane .og-zakladka:has(.kol + .kol){width:43px}
.belki-zwijane .og-zakladka:has(.kol + .kol) .etyk-pole{width:27px}
.belki-zwijane .og-zakladka:has(.kol + .kol) .tyt{letter-spacing:.03em}

/* siatka="1" (28 X 2026, Karol: „suwaki wyrownaj lewymi i prawymi krawedziami”): wiersze sekcji maja WSPOLNE kolumny - etykieta | suwak | wartosc | przelacznik;
   grupy i kontrolki rozpuszczone w siatce (display:contents), wiec suwaki z roznych wierszy zaczynaja sie i koncza w tym samym miejscu */
.belki-zwijane .og-sekcja.siatka .og-wiersze{grid-template-columns:max-content 150px max-content max-content;grid-auto-flow:row;column-gap:.6em;row-gap:.5em;align-items:center}
.belki-zwijane .og-sekcja.siatka .og-wiersze > .grupa,.belki-zwijane .og-sekcja.siatka .og-wiersze .ctl{display:contents}
.belki-zwijane .og-sekcja.siatka .og-wiersze input[type=range]{width:100%;margin:0}
.belki-zwijane .og-sekcja.siatka .og-wiersze label.switch{margin-left:1em}
/* 4 XI 2026 (Karol, plansza 1: „pionowe kreski to nie separatory ale strony do wyrównania np etykiety”): etykiety kontrolek w siatce do wspólnej PRAWEJ linii */
.belki-zwijane .og-sekcja.siatka .og-wiersze .ctl > label,.belki-zwijane .og-sekcja.siatka .og-wiersze .ctl > .og-etyk{justify-self:end;text-align:right}
.belki-zwijane .og-sekcja.siatka [hidden]{display:none !important}
/* Najechanie na zakladke (Karol, 28 X: „na hover na obszarze zielony / szary - zanimuj strzalke, zeby robila ruch wskazujacy w swoja strone”):
   strzalka pcha w swoja strone - zwinieta (szara) w prawo, rozwinieta (zielona) w lewo; bez ruchu przy „ogranicz animacje” w systemie */
@keyframes bz-pchaj-prawo{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes bz-pchaj-lewo{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
.belki-zwijane .og-zakladka:hover .chev[data-kier="prawo"],.belki-zwijane .og-zakladka:focus-visible .chev[data-kier="prawo"]{animation:bz-pchaj-prawo .7s ease-in-out infinite}
.belki-zwijane .og-zakladka:hover .chev[data-kier="lewo"],.belki-zwijane .og-zakladka:focus-visible .chev[data-kier="lewo"]{animation:bz-pchaj-lewo .7s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.belki-zwijane .og-zakladka .chev{animation:none !important}}

/* WARIANT C (Karol, 5 XI 2026: „C3 z czekboxem (czekbox pokazuj tylko gdy ma zastosowanie)”, szkic: „powiekszyc do prawej obszar strzalki,
   czekbox na dole po prawej na obszarze strzalki, nad nim centralnie strzalka lewo / prawo”): pas strzalki 20 px oddzielony jasna kreska,
   strzalka na srodku; przelacznik (gdy BZ go ma) na dole pasa, strzalka wtedy wyzej; w zwinietej zakladce wartosc w cienkiej kolumnie obok nazwy */
.belki-zwijane .og-zakladka{width:43px}
.belki-zwijane .og-zakladka .uchwyt{width:20px;border-left:1px solid rgba(255,255,255,.35)}
.belki-zwijane .og-zakladka:has(.kol + .kol){width:55px}
.belki-zwijane .og-zakladka:has(.kol + .kol + .kol){width:67px}
.belki-zwijane .og-zakladka:has(.kol + .kol + .kol) .etyk-pole{width:39px}
.belki-zwijane .og-zakladka .kol.wart{max-height:100%;overflow:hidden}
.belki-zwijane .og-zakladka .wart-t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:400;letter-spacing:.02em;white-space:nowrap;line-height:1.05;opacity:.92}
.belki-zwijane .og-sekcja.z-przel{position:relative}
.belki-zwijane .og-sekcja.z-przel .og-zakladka .chev{margin-bottom:20px}
.belki-zwijane .og-sekcja > .zakladka-przel{position:absolute;left:20px;bottom:7px;width:20px;display:flex;justify-content:center;z-index:2;cursor:pointer}
.belki-zwijane .og-sekcja:has(.og-zakladka .kol + .kol) > .zakladka-przel{left:32px}
.belki-zwijane .og-sekcja:has(.og-zakladka .kol + .kol + .kol) > .zakladka-przel{left:44px}
.belki-zwijane .og-sekcja > .zakladka-przel input{accent-color:#fff;width:14px;height:14px;margin:0;cursor:pointer}
.belki-zwijane .og-sekcja.wylaczona .og-zakladka,.belki-zwijane .og-sekcja.nieczynna .og-zakladka{opacity:.55}
.belki-zwijane .og-sekcja.nieczynna .og-zakladka{cursor:default}
.belki-zwijane .og-sekcja.nieczynna > .zakladka-przel{cursor:default}
.belki-zwijane .og-sekcja.nieczynna > .zakladka-przel input{cursor:default}