/* Styl modulu zgod (serwer/statyczne/zgody.js). Wszystkie klasy z przedrostkiem
   "zg-", zeby nie powtorzyc kolizji generycznych nazw opisanych w
   notes/lessons.md (wpisy o .foot, .sub, .hero-in). Zmienne kolorow czytane
   z :root w styl.css, z fallbackiem na wypadek, gdyby ten plik zaladowal sie
   bez glownego arkusza. */

/* zg-tlo jest <dialog>: przyciemnienie tla robi natywny ::backdrop zamiast
   wlasnego diva, natywna pulapka fokusu (showModal) dziala bez dopisywania
   wlasnej. Panel wisi u dolu okna zamiast centrowac sie na ekranie, zeby nie
   zaslaniac hero pod spodem (X1, notes/DECYZJE.md). */
.zg-tlo{
  position:fixed; inset:0; z-index:9999;
  margin:0; padding:0; border:none; background:transparent;
  max-width:none; max-height:none; width:100%; height:100%;
}
.zg-tlo:not([open]){display:none}
.zg-tlo[open]{display:flex; align-items:flex-end; justify-content:center}
.zg-tlo::backdrop{background:rgba(14,31,43,.55)}

.zg-baner{
  background:var(--karta,#FFFFFF); color:var(--atrament,#0E1F2B);
  border-top:1px solid var(--kreska-mocna,#0E1F2B);
  width:100%; max-height:min(80vh,560px); overflow-y:auto;
  font-family:var(--font,"Archivo",system-ui,-apple-system,sans-serif);
  font-size:15px; line-height:1.5;
}
/* Elementy formularzowe nie dziedzicza kroju po rodzicu z arkusza
   przegladarki: ten sam problem co w styl.css, tu osobno bo modul zgod
   dziala tez na /zgody, ktore styl.css nie laduje. */
.zg-baner button,.zg-baner input,.zg-baner select,.zg-baner textarea{font-family:inherit}

/* Szerokosc tresci taka sama jak reszty strony (main{max-width:1240px} w
   styl.css), tlo panelu ciagnie sie na cala szerokosc okna. Dolny padding
   liczy env(safe-area-inset-bottom), zeby na telefonie z gestem systemowym
   przyciski nie sialy pod pasek nawigacji. */
.zg-baner-wrap{
  max-width:1240px; margin:0 auto;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
}

/* H2 zostaje w DOM jako etykieta dostepnosci dialogu (aria-labelledby,
   tresc zmienia sie miedzy pierwszym pytaniem a trybem edycji), ale nie
   zajmuje miejsca w niskim pasku: caly wymog prawny niesie #zg-opis. */
.zg-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;
}

.zg-baner p{margin:0; color:var(--atrament-2,#2C4254)}
.zg-link{color:var(--lazur,#0B5486)}

/* Rzad glowny: tekst po lewej, przyciski po prawej, w jednej linii na
   desktopie. Na waskim ekranie lamie sie w kolumne (patrz media query). */
.zg-rzad{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
#zg-opis{flex:1 1 380px; min-width:0}

/* Tag przy kategorii niezbednej: bez niego jedyny sygnal, ze pole jest
   zablokowane, to przygaszony checkbox, latwy do przeoczenia. */
.zg-zawsze{
  font-weight:400; font-size:.72rem; text-transform:none; letter-spacing:0;
  color:var(--cichy,#456079);
}

.zg-kategorie{
  display:flex; flex-direction:column; gap:12px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--kreska,#D3DFE8);
}
.zg-kategorie[hidden]{display:none}
.zg-kategoria{border:1px solid var(--kreska,#D3DFE8); border-radius:var(--r,2px); padding:10px 12px}
.zg-kategoria-opis{margin:6px 0 0; font-size:.82rem; color:var(--cichy,#456079); line-height:1.5}

.zg-przelacznik{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer}
.zg-przelacznik input{accent-color:var(--lazur,#0B5486); width:18px; height:18px; flex:0 0 auto}
.zg-przelacznik span{font-weight:600; font-size:.9rem}
.zg-przelacznik.zg-zablokowany{cursor:default}
.zg-przelacznik.zg-zablokowany input{opacity:.6}

.zg-przyciski{display:flex; flex-wrap:wrap; gap:10px; align-items:center; flex:0 0 auto}
.zg-przyciski-glowne{display:flex; gap:10px}

/* Oba przyciski ponizej maja dokladnie te sama klase glowna: ten sam rozmiar,
   ten sam kontrast, ta sama waga. Zaden nie dostaje wypelnienia ani koloru
   akcentujacego kosztem drugiego, bo to byloby dokladnie to, co robi baner
   DOZ opisany w notes/ZGODNOSC.md. flex:1 1 0 na obu wymusza tez identyczna
   szerokosc niezaleznie od dlugosci etykiety. */
.zg-btn{
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  border-radius:var(--r,2px); padding:11px 18px; line-height:1.2;
  white-space:nowrap; min-height:44px;
}
.zg-przyciski-glowne .zg-btn{flex:1 1 0; min-width:0; text-align:center}
.zg-btn-rowny{
  background:var(--atrament,#0E1F2B); color:var(--karta,#FFFFFF); border:1px solid var(--atrament,#0E1F2B);
}
.zg-btn-rowny:hover{background:var(--atrament-2,#2C4254); border-color:var(--atrament-2,#2C4254)}
.zg-btn-trzeci{
  background:none; color:var(--atrament,#0E1F2B); border:1px solid var(--kreska,#D3DFE8);
}
.zg-btn-trzeci:hover{border-color:var(--atrament,#0E1F2B)}
.zg-btn:focus-visible{outline:2px solid var(--lazur,#0B5486); outline-offset:2px}

.zg-zapisz-blok{margin-top:14px}
.zg-zapisz-blok[hidden]{display:none}

@media (max-width:700px){
  .zg-baner-wrap{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .zg-rzad{flex-direction:column; align-items:stretch; gap:14px}
  #zg-opis{flex:1 1 auto}
  .zg-przyciski{flex-direction:column; align-items:stretch}
  .zg-przyciski-glowne{flex-direction:column}
  .zg-przyciski-glowne .zg-btn{flex:1 1 auto}
  .zg-btn{width:100%; text-align:center}
}

/* Strona /zgody stoi osobno i NIE laduje styl.css, wiec globalna regula
   naglowka jej nie obejmuje. Ta sama wartosc co tam, zeby rozmiar naglowka byl
   w calym serwisie jeden. Przy zmianie skali naglowkow trzeba poprawic oba
   miejsca. Archivo wczytuje sie dopiero od 20.09: dotad strona deklarowala ten
   krój w stylu przy <main>, ale nie ladowala fonty.css, wiec spadala na
   system-ui. */
.zg-strona h1,body>main>h1{font-size:clamp(1.4rem,1.289rem + 0.457vw,1.7rem)}