/* Narrow screens; supplied master components stay unchanged. */
.cm-rules{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
@media(max-width:1199px){.auth{grid-template-columns:minmax(0,1fr);}}
.auth > *, .auth form, .auth input{min-width:0;}
.auth .alt{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ---- Dostępność i motyw (poprawka 01.11.2026) ----
   Pasek ustawia html[data-fs="115|130"] i html[data-contrast="high"], ale treść strony ma rozmiary w px,
   więc samo font-size na <html> niczego nie zmieniało. Skalujemy treść (main), pasek ma własne reguły. */
html[data-fs="115"] main{zoom:1.15}
html[data-fs="130"] main{zoom:1.3}
/* Wyższy kontrast: tekst pomocniczy = tekst główny, wyraźniejsze linie, podkreślone linki */
html[data-contrast="high"] .b-neg, html[data-contrast="high"] .b-con,
html[data-contrast="high"] .b-neg .dk, html[data-contrast="high"] .b-con .dk{
  --fg:#FFFFFF; --fg2:#FFFFFF; --fg3:#FFFFFF; --line:rgba(255,255,255,.55); --surf:rgba(255,255,255,.08); --surf2:rgba(255,255,255,.12);
}
html[data-contrast="high"][data-theme="light"] .b-neg, html[data-contrast="high"][data-theme="light"] .b-con{
  --fg:#000000; --fg2:#000000; --fg3:#000000; --line:rgba(0,0,0,.6); --surf:#FFFFFF; --surf2:#FFFFFF; --bg:#FFFFFF; --bg2:#FFFFFF;
}
html[data-contrast="high"][data-theme="light"] .b-neg .dk, html[data-contrast="high"][data-theme="light"] .b-con .dk{
  --fg:#FFFFFF; --fg2:#FFFFFF; --fg3:#FFFFFF; --line:rgba(255,255,255,.55);
}
html[data-contrast="high"] main p, html[data-contrast="high"] main li, html[data-contrast="high"] main span,
html[data-contrast="high"] main small, html[data-contrast="high"] main dd{opacity:1 !important}
html[data-contrast="high"] main a:not([class]){text-decoration:underline;text-underline-offset:2px}
html[data-contrast="high"] main :focus-visible{outline:3px solid #FFD400 !important;outline-offset:2px}
/* wąskie ekrany przy powiększeniu tekstu — bez przewijania w bok */
@media (max-width:600px){
html[data-fs] main .split, html[data-fs] main form{grid-template-columns:minmax(0,1fr) !important}
html[data-fs] main .split > *, html[data-fs] main form > *{min-width:0;max-width:100%}
html[data-fs] main img, html[data-fs] main input, html[data-fs] main select, html[data-fs] main textarea{max-width:100%}
html[data-fs="130"] main{zoom:1.2}
}
@media (max-width:600px){html[data-fs] main .btns{flex-wrap:wrap} html[data-fs] main .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;height:auto;text-align:center}}