/* Strony analiz (analiza.html.twig + moduly z app/templates/analizy/).
   Laduje autoAsset() PO build.css, wiec nadpisuje bez przebudowy Tailwinda. */

.trafnosc{display:grid;gap:10px}
.trafnosc>.karta,.trafnosc>p{margin:0}
.trafnosc__liczba{display:inline-flex;align-items:center;gap:3px}
.trafnosc__opis{display:block;font-weight:400;color:var(--tekst2)}
.trafnosc [data-trafnosc-leader]{background:color-mix(in srgb,var(--gra-kolor) 10%,var(--tlo2))}
.trafnosc__wykres{display:block;width:100%;height:auto;max-height:300px}
.trafnosc__os{fill:none;stroke:var(--obramowanie);stroke-width:1}
.trafnosc__model{stroke:var(--tekst2);stroke-width:2;stroke-dasharray:6 4}
.trafnosc__linia{fill:none;stroke:var(--gra-kolor);stroke-width:3}
.trafnosc__etykieta{fill:var(--tekst2);font-size:12px}
/* Wspólna oś pozostaje tabelą także na telefonie; karty niszczą wyrównanie czasu. */
.rytm-os{table-layout:fixed;width:1050px!important;min-width:1050px!important}
.rytm-os th:first-child{width:60px;position:sticky;left:0;background:var(--tlo);z-index:1}
.rytm-os th:nth-child(2){width:630px}
.rytm-os .rytm-os__ciag{display:flex;gap:2px;width:max-content}
.rytm-os .rytm-bit{width:10px;height:10px;border-width:1px;flex:0 0 10px}
@media (max-width:639px){
  .rytm-os[data-mobile-wiersze] thead{display:table-header-group}
  .rytm-os[data-mobile-wiersze] tbody{display:table-row-group}
  .rytm-os[data-mobile-wiersze] :is(thead,tbody) tr{display:table-row}
  .rytm-os[data-mobile-wiersze] tbody :is(th,td){display:table-cell;vertical-align:middle;text-align:start;min-height:0}
  .rytm-os[data-mobile-wiersze] tbody th:first-child{width:60px!important}
  .rytm-os[data-mobile-wiersze] [data-mobile-label]::before{display:none}
  .rytm-os :is(th,td){overflow-wrap:normal}
}
@media (max-width:639px){
  .trafnosc [data-trafnosc-wybory] thead{display:none}
  .trafnosc [data-trafnosc-wybory] tbody th{display:block;text-align:start;overflow-wrap:normal}
  .trafnosc [data-trafnosc-wybory] tbody td:has(.kule){display:block;text-align:start}
  .trafnosc [data-trafnosc-wybory] tbody td:has(.kule)::before{margin-bottom:10px}
  .trafnosc [data-trafnosc-wybory] .kule{justify-content:flex-start}
}

/* Rzad przyciskow pod formularzem „Mój zestaw": „Sprawdź" i „Losuj liczby"
   obok siebie, z tym samym 10 px odstepu co reszta serwisu. Bez tej reguly
   przyciski stykaja sie spacja HTML-owa. (daro, 19.09.2026) */
.przyciski-rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Rytmy: siatka ostatnich losowan (80 kolumn x N losowan) — BARDZO CIASNA
   (22.09.2026, daro): 10 px paddingu z .tabela dawalo 4 170 px szerokosci;
   tu 2-3 px i kwadrat 12 px, wiec ~1 400 px. Data w jednej linii. Sortowanie
   po kolumnie liczby dziala przez data-sort=0/1 na komorkach (main.js czyta
   data-sort przed textContent, a kwadrat tekstu nie ma); znak ⇅ w 80
   naglowkach rozpychal kolumny, wiec widac go tylko na kolumnie aktualnie
   posortowanej. Reguly tylko dla tej siatki (details w [data-ryt-v2]). */
[data-ryt-v2] details .tabela-scroll .tabela {
  border-collapse: collapse;
  width: auto;
}
[data-ryt-v2] details .tabela-scroll .tabela thead th,
[data-ryt-v2] details .tabela-scroll .tabela tbody td {
  height: auto;
  padding: 2px 3px;
  text-align: center;
  width: auto;
  line-height: 1;
}
[data-ryt-v2] details .tabela-scroll .tabela thead th {
  font-size: 11px;
  letter-spacing: 0;
}
[data-ryt-v2] details .tabela-scroll .tabela tbody th {
  height: auto;
  padding: 2px 6px;
  font-size: 12px;
  white-space: nowrap;
}
[data-ryt-v2] details .tabela-scroll .tabela .rytm-wzor {
  display: inline-flex;
  vertical-align: middle;
}
[data-ryt-v2] details .tabela-scroll .tabela .rytm-bit {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
  border-radius: 2px;
}
[data-ryt-v2] details .tabela-scroll .tabela .tabela__sort {
  min-height: 0;
  width: auto;
  justify-content: center;
  gap: 2px;
}
[data-ryt-v2] details .tabela-scroll .tabela .tabela__sort-znak {
  display: none;
  font-size: 10px;
}
[data-ryt-v2] details .tabela-scroll .tabela th[aria-sort="ascending"] .tabela__sort-znak,
[data-ryt-v2] details .tabela-scroll .tabela th[aria-sort="descending"] .tabela__sort-znak {
  display: inline;
}

/* „Podobne losowania”: jeden rzeczywisty rytm 10 px.
   Reguly globalne opieraja sie na marginesach. W tym formularzu nakladaly sie
   one z marginesem etykiety, tabeli oraz dynamicznego wyboru „Moj zapisany
   zestaw”, dlatego czesc przerw miala 20 px lub wiecej. Ten widok uzywa gap,
   a marginesy dzieci zeruje — identycznie w PL/EN i na kazdej szerokosci. */
[data-f6-podobne] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-f6-podobne] > * {
  margin: 0;
}

[data-f6-form] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

[data-f6-form] > *,
[data-f6-form] .etykieta,
[data-f6-form] .podpowiedz,
[data-f6-form] .blad-pola {
  margin: 0;
}

[data-f6-form] > .odstep-1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-f6-form] > .odstep-1 > * {
  margin: 0;
}

[data-f6-form] > .przycisk {
  align-self: flex-start;
}

[data-f6-form] .mk-wczytaj {
  gap: 10px;
  margin: 0;
  padding: 10px;
}

[data-f6-form] .mk-wczytaj > * {
  margin: 0;
}

[data-pp-root="podobne"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-pp-root="podobne"] > *,
[data-pp-root="podobne"] > .tabela-scroll,
[data-pp-root="podobne"] > .jak-korzystac {
  margin: 0;
}

[data-pp-root="podobne"] .jak-korzystac__naglowek {
  gap: 10px;
  padding: 10px;
}

[data-pp-root="podobne"] .jak-korzystac__tresc {
  padding: 0 10px 10px;
}

/* Analizator zestawu: pojedynczy rytm 10 px zamiast sumy marginesu etykiety,
   klasy odstepu i marginesu kolejnego elementu. Obejmuje formularz liczb,
   przyciski oraz karte „Moje kupony” razem z importem/eksportem. */
[data-analizator-root] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-analizator-root] > * {
  margin: 0;
}

[data-zestaw-form],
[data-mm-kupon-form],
[data-zapisane-zestawy] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

[data-zestaw-form] > *,
[data-mm-kupon-form] > *,
[data-zapisane-zestawy] > *,
[data-zestaw-form] .etykieta,
[data-mm-kupon-form] .etykieta,
[data-zapisane-zestawy] .etykieta,
[data-zestaw-form] .podpowiedz,
[data-mm-kupon-form] .podpowiedz,
[data-zapisane-zestawy] .podpowiedz {
  margin: 0;
}

[data-zestaw-form] > .grupa,
[data-zapisane-zestawy] > .grupa,
[data-zestaw-form] > .odstep-1:not(.przyciski-rzad),
[data-mm-kupon-form] > .odstep-1:not(.przyciski-rzad) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

[data-zestaw-form] > .grupa > div,
[data-zapisane-zestawy] > .grupa > div,
[data-mm-kupon-form] > .odstep-1:not(.przyciski-rzad) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-zestaw-form] > .grupa > *,
[data-zapisane-zestawy] > .grupa > *,
[data-zestaw-form] > .odstep-1:not(.przyciski-rzad) > *,
[data-mm-kupon-form] > .odstep-1:not(.przyciski-rzad) > * {
  margin: 0;
}

[data-zestaw-form] > .grupa > div > *,
[data-zapisane-zestawy] > .grupa > div > *,
[data-mm-kupon-form] > .odstep-1:not(.przyciski-rzad) > * {
  margin: 0;
}

[data-zestaw-form] > .przyciski-rzad,
[data-mm-kupon-form] > .przyciski-rzad {
  gap: 10px;
  margin: 0;
}

[data-zapisane-zestawy] > .tabela-scroll {
  margin: 0;
}

[data-zestaw-blad]:empty,
[data-zestaw-wynik]:empty,
[data-zapis-status]:empty {
  display: none;
}

/* Wynik analizatora jest wspolny dla pelnego widoku i modulow osadzonych na
   pozostalych statystykach. Flex + gap daje zawsze 10 px miedzy tabela cech,
   opisem, profilem, parami i trojkami — bez nakladania klas odstepu. */
[data-analizator-root] [data-zestaw-wynik]:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

[data-analizator-root] [data-zestaw-wynik] > * {
  margin: 0 !important;
}

/* Rankingi par i trojek maja identyczne osie. Bez fixed layout pierwsza
   kolumna rozszerzala sie przy trzech kulkach i przesuwala dwie pozostale. */
[data-analizator-ranking] .tabela {
  width: 100%;
  table-layout: fixed;
}

[data-analizator-ranking] .tabela :is(th, td):nth-child(1) {
  width: 50%;
  text-align: center;
}

/* Sortowanie rozpoznaje data-sort zestawu jako liczbe i nadaje .liczbowa.
   Wyrownanie th nie ustawia osi przycisku flex: naglowek oraz kule musza
   miec jawnie ten sam srodek, takze po sortowaniu i zmianie szerokosci. */
[data-analizator-ranking] .tabela thead th:first-child .tabela__sort {
  justify-content: center;
}
[data-analizator-ranking] .tabela tbody th:first-child .kule {
  justify-content: center;
}

[data-analizator-ranking] .tabela :is(th, td):nth-child(2),
[data-analizator-ranking] .tabela :is(th, td):nth-child(3) {
  width: 25%;
  text-align: right;
}

/* Akordeony objaśniające na stronach analiz: po rozwinięciu odpowiedź nie może
   stykać się z nagłówkiem-przyciskiem. Ten sam rytm 10 px obowiązuje przy
   pytajniku metryki: 10 px od etykiety do przycisku i od przycisku do
   rozwiniętej odpowiedzi. Wcześniej było odpowiednio 0, 6 i 8 px. */
[data-analiza-strona] .wniosek__tresc,
[data-analiza-strona] .jak-korzystac__tresc {
  padding-top: 10px;
}

[data-analiza-slownik] .pomoc-metryka {
  margin-left: 10px;
}

[data-analiza-slownik] .pomoc-metryka__tresc {
  margin-top: 10px;
}

/* Dwa pola w rzędzie: etykiety i cele dotykowe zachowują pełny rozmiar. */
[data-zestaw-form] > .grupa > div { min-width: 0; }
[data-przewodnik-analiz] { display: flex; flex-direction: column; gap: 10px; }
[data-przewodnik-analiz] > * { margin: 0; }
[data-przewodnik-analiz] nav { display: flex; flex-wrap: wrap; gap: 10px; }
[data-przewodnik-analiz] a { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
[data-przewodnik-analiz] a > .ikona { flex: 0 0 18px; }
[data-przewodnik-analiz] a > span { min-width: 0; overflow-wrap: anywhere; }
[data-przewodnik-analiz] > nav > .przycisk > span { flex: none; overflow-wrap: normal; }
@media (max-width: 639px) {
  html:is(.a11y-zoom--1,.a11y-zoom--2,.a11y-zoom--3) [data-przewodnik-analiz] > nav > .przycisk > span { flex: 0 1 auto; }
}
@media (max-width: 639px) {
  [data-zestaw-form] > .grupa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-analizator-ranking] thead th { padding: 10px 4px; }
  [data-analizator-ranking] .tabela__sort {
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }
  [data-analizator-ranking] .tabela :is(th, td):nth-child(1) { width: 40%; }
  [data-analizator-ranking] .tabela :is(th, td):nth-child(2),
  [data-analizator-ranking] .tabela :is(th, td):nth-child(3) { width: 30%; }
  [data-analizator-ranking] .tabela .kule { justify-content: center; }
  [data-analizator-historia] progress { display: block; width: 100%; }
}

/* Fala 10 (30.09.2026): kolumna partnerow w raporcie ostatniego losowania.
   `.tabela tbody td { height: 40px }` w tabeli jest minimum, ale na telefonie
   (karty z [data-mobile-wiersze], komorka = grid) staje sie stala wysokoscia
   i dwie linie partnerow wychodzily na sasiednie pola. */
.tabela tbody td[data-ol-partnerzy] { height: auto; min-height: 40px; }
[data-mobile-wiersze] tbody td[data-ol-partnerzy] > .kule { flex-wrap: wrap; justify-content: flex-end; }

[data-porownanie-tooltip]{position:absolute;z-index:20;left:0;top:0;max-width:min(280px,calc(100vw - 16px));padding:8px 12px;background:#FFFFFF;color:#0F172A;border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.12);font-size:13px;line-height:1.5;pointer-events:none;box-sizing:border-box}
[data-porownanie-tooltip] strong{display:block}

.lista-rankingowa{list-style:none;margin:0;padding:0}
.stat-wykresy .stat-gra-fill{fill:var(--ryt-kolor,var(--kolor-lotto))}.stat-wykresy .stat-zero-fill{fill:var(--tlo2)}.stat-wykresy .stat-negative-fill{fill:var(--ryt-kolor,var(--kolor-lotto));opacity:.45}.stat-wykresy svg{max-width:none}.stat-wykresy svg :is(a,g)[tabindex]:focus-visible{outline:2px solid var(--tekst);outline-offset:2px}.stat-wykresy [data-ryt-groups]{display:grid;gap:10px}.stat-wykresy summary{min-height:44px;padding:10px;cursor:pointer}.stat-wykresy details{border:1px solid var(--obramowanie);border-radius:var(--promien)}.stat-wykresy details ul{padding:10px;overflow-wrap:anywhere}

.pary-komorka{display:flex;align-items:center;justify-content:center;width:100%;height:39px;padding:0;box-sizing:border-box;text-decoration:none;transition:background-color 150ms,color 150ms;background-color:rgba(0,102,255,var(--w,0));color:#111827}.pary-komorka--plus{background-color:rgba(249,115,22,var(--w,0))}.pary-komorka--jasna{color:#fff}
.pary-tabela--24{width:1000px;min-width:1000px;table-layout:fixed;border-collapse:collapse}
.pary-tabela--42{width:1720px;min-width:1720px;table-layout:fixed;border-collapse:collapse}
.pary-tabela--49{width:2000px;min-width:2000px;table-layout:fixed;border-collapse:collapse}
.pary-tabela--50{width:2040px;min-width:2040px;table-layout:fixed;border-collapse:collapse}
.pary-tabela--80{width:3240px;min-width:3240px;table-layout:fixed;border-collapse:collapse}

.wykres-dekady{width:100%;max-width:640px;height:auto;display:block}.wykres-czestotliwosc{width:100%;height:200px}.wykres-roczniki{width:100%;height:auto}.wykres-porownanie{display:block;max-width:none;height:auto;margin:0 auto}

.wykres-czestotliwosc--dynamic{min-width:320px}.raport-wykres{max-width:none;color:var(--tekst)}.wykres-pozycja{position:relative}
.stat-wykresy svg a{color:var(--tekst)}

[data-pairs-matrix-wrap]{overflow:auto;max-height:85vh;position:relative}[data-pairs-matrix] thead th{position:sticky;top:0;z-index:2;background:#FFFFFF}[data-pairs-matrix] th[scope="row"]{position:sticky;left:0;z-index:1;background:#FFFFFF}[data-pairs-matrix] thead th:first-child{left:0;z-index:3}[data-pairs-matrix] th[tabindex]{cursor:pointer}[data-pairs-matrix] th[tabindex]:focus-visible{outline:2px solid #2563EB;outline-offset:2px}[data-pairs-matrix] th[data-pairs-active]{background:#FFD105;color:#0F172A}[data-pairs-matrix] td[data-pairs-dim]{opacity:.25}[data-pairs-matrix] tr[data-pairs-row-hl] td,[data-pairs-matrix] td[data-pairs-col-hl]{opacity:1;box-shadow:inset 0 0 0 2px #2563EB}[data-pairs-matrix] th[data-pairs-col-hl],[data-pairs-matrix] tr[data-pairs-row-hl] th{box-shadow:inset 0 0 0 2px #2563EB}@media (prefers-reduced-motion:no-preference){[data-pairs-matrix] td{transition:opacity 150ms ease-out}}
[data-ra-current]{display:grid;gap:10px;min-width:0}
[data-ra-current]>:is(h3,p,details){margin:0}
[data-ra-current] code{font-size:12px;letter-spacing:1px;color:var(--tekst,#0F172A)}
[data-ra-current] .rytm-wzor,[data-ra-companions] [data-ra-current-pattern] .rytm-wzor{gap:2px;min-width:0;white-space:nowrap}
[data-ra-current] .rytm-bit,[data-ra-companions] [data-ra-current-pattern] .rytm-bit{width:10px;height:10px;border-width:1px;border-radius:2px;flex:0 0 10px}
[data-ra-current-groups] .tabela{min-width:0;width:100%}
[data-ra-current-groups] td{vertical-align:middle}
[data-ra-panel] [data-ra-current-groups] .tabela td{width:auto;height:auto;padding:10px;text-align:left}
[data-ra-current-groups] td:first-child{width:160px}
[data-ra-current-groups] summary{margin-bottom:10px}
[data-ra-current] [data-ra-current-number]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
[data-ra-current-pattern] code{font-size:12px;white-space:nowrap}
[data-ra-current-pattern]>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
[data-eksplorator-losowan] .eksplorator-filtry{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
[data-eksplorator-losowan] .eksplorator-filtry>div{min-width:0}
[data-eksplorator-losowan] .eksplorator-kotwica{grid-column:1/-1}
[data-eksplorator-losowan] .eksplorator-granice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
[data-eksplorator-losowan] .eksplorator-granice label{display:block;min-width:0;font-size:14px}
@media(min-width:640px){[data-eksplorator-losowan] .eksplorator-filtry{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){[data-eksplorator-losowan] .eksplorator-filtry{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){[data-ra-current-groups] :is(table,tbody,caption){display:block;width:100%}[data-ra-current-groups] tr{display:grid;gap:10px;height:auto;padding:10px 0;border-bottom:1px solid var(--obramowanie,#E5E7EB)}[data-ra-current-groups] thead{display:none}[data-ra-panel] [data-ra-current-groups] .tabela td,[data-ra-current-groups] td:first-child{display:block;position:static;float:none;width:auto;height:auto;border:0;padding:0;text-align:left}[data-ra-current-groups] td::before{content:none}}

/* Historyczne wyplaty: jeden rytm 10px, bez dodatkowych marginesow formularza. */
[data-wyplaty-okna]{display:grid;gap:10px;min-width:0}
[data-wyplaty-okna]>*,[data-wyplaty-okna] .karta>*{margin-top:0;margin-bottom:0}
[data-wyplaty-okna] .karta{display:grid;gap:10px;min-width:0;padding:10px}
[data-wyplaty-okna] .etykieta{display:grid;gap:10px;min-width:0;margin:0}
[data-wyplaty-okna] .przycisk{justify-self:start}
[data-wyplaty-okna] td{vertical-align:middle}
/* Zestaw z przyciskami potrzebuje pelnej szerokosci podpisanego wiersza. */
[data-wyplaty-okna]:has([data-rolling-form]) .kule { align-items: flex-start; }
@media (max-width: 639px) {
  [data-rolling-table] tbody td:has(.kule) { display: block; text-align: start; }
  [data-rolling-table] tbody td:has(.kule)::before { margin-bottom: 10px; }
  [data-rolling-table] .przycisk { max-width: 100%; min-width: 0; white-space: normal; }
  [data-rolling-table] .kule { justify-content: flex-start; }
}