/* Analiza par — style modułu wykresów dwojga na stronie serwisu.
   Przeniesione z projektu `analiza-par` (static/styl.css), z pominięciem tego,
   co daje main.css serwisu (tło, hero, karty, pola formularza, przyciski złote).
   Master wyglądu widżetów pary: tamten plik; przy zmianach porównywać ręcznie.

   ⚠ Po każdej zmianie tego pliku podbić `?v=` w pl/analiza-par.html. */

:root {
    --par-karta:  rgba(23, 20, 36, 0.88);
    --par-obrys:  rgba(255, 255, 255, 0.10);
    --par-tekst:  #ECE8E1;
    --par-cichy:  #ABA7B4;
    --par-slaby:  #7F7C8A;
    --par-fiolet: #534AB7;
    --par-fiolet-j: rgba(123, 113, 222, 0.16);
    --par-fiolet-txt: #C7C1F5;
    --par-mieta:  #9FE1CB;
    --par-zloto:  #FAE29A;
    --par-zloto-j: #FFF0BE;
    --par-r-maly: 6px;
    --par-r-karta: 12px;

    /* barwy osób i połączeń: zatwierdzona paleta, NIE ruszać (16.08.2026) */
    --par-a:      #4aa3ff;
    --par-b:      #ff9f43;
}

/* ⚠ POZWOLENIE NA KURCZENIE SIĘ KOLUMNY TREŚCI (11.09).
   `.main-content` w main.css jest elementem elastycznym (`flex-grow: 1`) BEZ
   `min-width: 0`, a taki element domyślnie nie zwęzi się poniżej rozmiaru swojej
   zawartości. Na zwykłych podstronach nie widać tego wcale, bo tam treść to akapity,
   które kurczą się dowolnie. Tutaj siatki wymuszają swoją szerokość, więc kolumna
   treści zamiast się zwęzić WYPYCHAŁA SIĘ POZA EKRAN: przy oknie 1024 px jej prawa
   krawędź wypadała na 1230 px, a strony nie da się przewinąć w bok, czyli druga osoba
   w formularzu stawała się niedostępna. Reguła działa wyłącznie na stronie analizy par,
   bo tylko ona wczytuje ten plik; wspólny main.css zostaje nietknięty. */
.main-content { min-width: 0; }

/* ---- formularz dwóch osób ----
   Siatki na tej stronie reagują na MIEJSCE, które realnie zostało kolumnie treści
   (auto-fit), a nie na szerokość okna. Szerokość okna kłamie, bo menu boczne zabiera
   około 300 px i przy tym samym oknie treść bywa raz szeroka, raz wąska. Dzięki temu
   dwie kolumny są na komputerach zawsze, gdy się mieszczą, a jedna wtedy, gdy nie
   ma na nie miejsca (telefon, wąskie okno) — bez ręcznie dobieranych progów. */
.dwie-osoby { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }

.osoba-karta {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--par-r-karta);
    padding: 1.25rem;
    min-width: 0;   /* pola dat (rok, miesiąc, dzień obok siebie) nie rozpychają karty */
}
.osoba-karta > h3 { margin: 0 0 1rem; font-size: 1.1rem; color: #F6D365; }

/* przełącznik płci: te same złote pigułki co w głównym kalkulatorze */
.plec-przelacznik .tr-opt {
    flex: 1; padding: 12px 10px; border-radius: 10px;
    border: 1.5px solid #FAE29A; background: transparent; color: #FAE29A;
    font-weight: 700; cursor: pointer; transition: all .15s; font-size: .98rem;
}
.plec-przelacznik .tr-opt:hover { background: rgba(250, 226, 154, .10); }
.plec-przelacznik .tr-opt.active {
    background: #FAE29A; border-color: #FAE29A; color: #241533;
    box-shadow: 0 2px 10px rgba(250, 226, 154, .25);
}

/* pole czekające na wybór; zapala się dopiero po kliknięciu liczenia */
.brak-wyboru {
    border-color: rgba(255, 91, 91, .75) !important;
    background-color: rgba(255, 91, 91, .08) !important;
}

.kropka { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.kropka-a { background: var(--par-a); }
.kropka-b { background: var(--par-b); }

/* ---- podpowiedzi miast (własny panel przy każdym z dwóch pól) ---- */
.pole-miasto { position: relative; }

.podpowiedzi {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #101826;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    z-index: 60;
    max-height: 280px; overflow-y: auto;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.podpowiedzi[hidden] { display: none; }
.podpowiedzi button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; font: inherit;
    padding: 0.7rem 0.9rem; cursor: pointer;
    color: #e8e8f0; font-size: 0.95rem;
}
.podpowiedzi button:hover, .podpowiedzi button:focus {
    background: rgba(139, 128, 255, 0.20); outline: none;
}
.strefa-info { margin: -.4rem 0 1rem; color: var(--par-slaby); font-size: .85rem; }
.strefa-info strong { color: var(--par-mieta); font-weight: 500; }

/* ---- przyciski liczenia (wzór modułu: złoty i miętowy obrys) ---- */
.przyciski { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

button.glowny {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: inherit; font-size: 1rem; font-weight: 500;
    padding: .75rem 1.5rem;
    border-radius: var(--par-r-maly);
    background-color: transparent;
    border: 1px solid var(--par-zloto);
    color: var(--par-zloto);
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
button.glowny:hover:not(:disabled) {
    background-color: rgba(250, 226, 154, .12);
    border-color: var(--par-zloto-j); color: var(--par-zloto-j);
    box-shadow: 0 0 14px rgba(250, 226, 154, .35);
}
button.glowny.drugi { border-color: var(--par-mieta); color: var(--par-mieta); }
button.glowny.drugi:hover:not(:disabled) {
    background-color: rgba(159, 225, 203, .12);
    border-color: #C4EFE0; color: #C4EFE0;
    box-shadow: 0 0 14px rgba(159, 225, 203, .30);
}
button.glowny:disabled { opacity: .35; cursor: not-allowed; }

.notka, .drobne { color: var(--par-slaby); font-size: .85rem; line-height: 1.6; }
.notka { margin: 1rem 0 0; }

.komunikat {
    margin: .9rem 0 0; padding: .65rem .9rem;
    border-radius: var(--par-r-maly); font-size: .9rem;
}
.komunikat.blad { background: rgba(255, 91, 91, .12); border: 1px solid rgba(255, 91, 91, .35); }
.komunikat.ok   { background: rgba(159, 225, 203, .10); border: 1px solid rgba(159, 225, 203, .30); }

/* przycisk „nie znam godziny": drobny odsyłacz pod polem */
.brak-godziny-link {
    background: none; border: 0; padding: 0; margin-top: .4rem;
    font: inherit; font-size: .85rem; color: #8b80ff;
    cursor: pointer; text-align: left; text-decoration: underline;
}
.brak-godziny-link:hover { color: #a89dff; }

/* ---- siatka czterech wykresów ---- */
/* DOKŁADNIE DWIE KOLUMNY (polecenie właściciela 13.09: „dwa na górze i dwa pod spodem").
   Wczorajsze liczenie „ile się zmieści" przy szerokiej kolumnie treści mieściło TRZY karty
   w rzędzie, więc wykresy ustawiały się trzy plus jeden. Tu liczba kolumn ma być stała, bo to
   nie jest zwykła lista kafli, tylko cztery rysunki oglądane parami. */
.siatka-wykresow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.uklad-pary  #karta-a-przed { order: 1; }
.uklad-pary  #karta-b-przed { order: 2; }
.uklad-pary  #karta-a-po    { order: 3; }
.uklad-pary  #karta-b-po    { order: 4; }

.uklad-osoby #karta-a-przed { order: 1; }
.uklad-osoby #karta-a-po    { order: 2; }
.uklad-osoby #karta-b-przed { order: 3; }
.uklad-osoby #karta-b-po    { order: 4; }

.wykres-karta { display: flex; flex-direction: column; position: relative; }
.wykres-karta[hidden] { display: none; }

.osoba-a { border-left: 3px solid var(--par-a); }
.osoba-b { border-left: 3px solid var(--par-b); }

.etykieta-czasu { margin: -.5rem 0 .6rem; font-size: .85rem; color: var(--par-slaby); }
.wykres-karta.po .etykieta-czasu { color: var(--par-mieta); }

.podpis { color: var(--par-cichy); font-size: .92rem; margin-bottom: .8rem; }

.rysunek { width: 100%; cursor: zoom-in; }
.rysunek svg { width: 100%; height: auto; display: block; overflow: visible; }

.lupa {
    align-self: center; margin-top: .7rem;
    background-color: transparent; color: var(--par-zloto);
    border: 1px solid var(--par-zloto); border-radius: 50px;
    padding: .4rem 1.1rem; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.lupa:hover {
    background-color: rgba(250, 226, 154, .12);
    border-color: var(--par-zloto-j); color: var(--par-zloto-j);
    box-shadow: 0 0 14px rgba(250, 226, 154, .35);
}

.pasek-widoku {
    display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
    margin: 0 0 .9rem;
}
button.drobny {
    background-color: transparent; color: var(--par-cichy);
    border: 1px solid var(--par-obrys); border-radius: 50px;
    padding: .45rem 1.1rem; font: inherit; font-size: .88rem; cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
button.drobny:hover {
    color: var(--par-mieta); border-color: rgba(159, 225, 203, .45);
    background-color: rgba(255, 255, 255, .05);
}

/* ---- pełny ekran ---- */
.pelny-ekran {
    position: fixed; inset: 0; z-index: 40; margin: 0; border-radius: 0;
    border-width: 0 0 0 6px;
    overflow: hidden; background: #070b14;
    padding: 0; box-shadow: none;
}
.pelny-ekran .szczyt {
    position: absolute; top: 4.6rem; left: 1.4rem; right: 1.4rem; z-index: 44;
    pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,.95);
    max-width: 26rem;
}
.pelny-ekran .arch-hero { min-height: 100vh; border-radius: 0; }
.pelny-ekran .arch-fig  { width: min(38vh, 42vw); max-width: 42vw; }
.pelny-ekran .rysunek   { cursor: zoom-out; }
.pelny-ekran .lupa,
.pelny-ekran .lista-cech { display: none; }
body.zablokowane { overflow: hidden; }

.wstecz {
    position: fixed; top: 1rem; left: 1rem; z-index: 45;
    background: rgba(13, 20, 48, .92); color: var(--par-zloto);
    border: 1px solid var(--par-zloto); border-radius: 50px;
    padding: .55rem 1.2rem; font: inherit; font-weight: 500; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color .2s ease, box-shadow .2s ease;
}
.wstecz:hover {
    background: rgba(83, 74, 183, .92);
    box-shadow: 0 0 14px rgba(250, 226, 154, .35);
}

/* ---- moment złączenia ---- */
.zlaczenie {
    position: fixed; inset: 0; z-index: 60; overflow: hidden;
    background: radial-gradient(circle at 50% 48%, rgba(46,40,104,.9) 0%, rgba(5,8,15,.99) 62%);
    backdrop-filter: blur(5px);
}
.zlaczenie .duch { position: fixed; will-change: transform, opacity; }
.zlaczenie .duch img { width: 100%; display: block; }
.zlaczenie .blysk {
    position: fixed; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(212,175,55,.5) 38%, rgba(164,74,232,0) 72%);
}
.zlaczenie .obrecz {
    position: fixed; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(250,226,154,.8);
}
.zlaczenie .napis {
    position: fixed; left: 0; right: 0; text-align: center;
    font-family: Georgia, serif; color: var(--par-zloto);
    font-size: 2rem; letter-spacing: .04em; opacity: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
.zlaczenie .napis small { display: block; font-family: inherit; font-size: 1rem; color: var(--par-cichy); }

/* ---- cechy pod wykresem ---- */
.lista-cech { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem; }
.cecha {
    display: inline-block; min-width: 1.9rem; text-align: center;
    padding: .1rem .4rem; border-radius: 4px;
    background-color: transparent; border: 1px solid var(--par-obrys);
    font-size: .78rem; font-weight: 500; color: var(--par-cichy);
}

/* ---- zestawienie ---- */
#zestawienie h3 { color: var(--par-mieta); font-size: 1.05rem; margin: 1.5rem 0 .6rem; }

/* Cztery opisy rodzajów połączeń w DWÓCH kolumnach, tak jak wiersze kanałów niżej
   (polecenie właściciela 13.09). Ten blok stoi na pełnej szerokości treści, więc każdy
   opis ma tyle miejsca co wiersz tabeli. */
.legenda-kolor { margin-top: 1.5rem; }
.siatka-legendy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
@media (max-width: 700px) { .siatka-legendy { grid-template-columns: 1fr; } }

.razem-uklad { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: 1.6rem; align-items: start; margin-top: 1.5rem; }
.legenda h3, .podsumowanie h3 { margin-top: 0; }

.wiersz-legendy, .wiersz-kanalu {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .65rem 0; border-bottom: 1px solid var(--par-obrys);
}

/* „Kanał po kanale" w DWÓCH kolumnach (polecenie właściciela 11.09: wyniki mają stać
   w dwóch kolumnach, nie w jednej). Każdy wiersz jest krótki, a kanałów bywa kilkanaście,
   więc w jednej kolumnie lista ciągnęła się przez pół ekranu. Wiersze układają się
   kolumnami obok siebie; na wąskim ekranie wraca jedna kolumna (reguła niżej). */
.tabela-polaczen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1.6rem; }
.próbka { flex: none; width: 1rem; height: 1rem; border-radius: 4px; margin-top: .3rem; }

.ile {
    display: inline-block; min-width: 1.4rem; text-align: center;
    background-color: var(--par-fiolet-j); color: var(--par-fiolet-txt);
    border-radius: 4px; font-size: .72rem; font-weight: 500;
    padding: .1rem .4rem; margin-left: .3rem;
}

.mostek {
    background: linear-gradient(135deg, rgba(83, 74, 183, .28) 0%, rgba(23, 20, 36, .92) 100%);
    border-left: 4px solid var(--par-fiolet);
    padding: .9rem 1.1rem; border-radius: 0 var(--par-r-karta) var(--par-r-karta) 0; margin: .7rem 0;
}

.zastrzezenie {
    margin-top: 1.8rem; padding: 1rem 1.2rem;
    background: rgba(250, 226, 154, .06); border-left: 4px solid var(--par-zloto);
    border-radius: 0 var(--par-r-karta) var(--par-r-karta) 0; font-size: .9rem; color: var(--par-cichy);
}

/* koszyk pod zestawieniem */
#para-koszyk { margin-top: 1.6rem; text-align: center; }
#para-koszyk .drobne { margin-top: .5rem; }

@media (max-width: 900px) {
    /* Siatki nie mają już tutaj żadnego progu. Schodzą do jednej kolumny same
       (auto-fit wyżej), licząc to z miejsca REALNIE dostępnego kolumnie treści,
       a nie z szerokości okna. Sztywny próg był tu wręcz szkodliwy: poniżej 1024 px
       menu boczne chowa się i treść dostaje całą szerokość, więc dwie kolumny znowu
       się mieszczą, a próg 900 px i tak by je zabrał. */
    .pelny-ekran .arch-fig { width: min(30vh, 74vw); max-width: 74vw; }
}

@media (max-width: 700px) {
    /* Na telefonie dwa wykresy obok siebie byłyby za małe, więc idą jeden pod drugim. */
    .siatka-wykresow { grid-template-columns: 1fr; }
}

/* Pozostałe siatki liczą kolumny z miejsca z tego samego powodu co wyżej: dwie kolumny stoją
   wszędzie tam, gdzie się mieszczą (decyzja właściciela 11.09: „wyniki z kalkulatora
   par mają się wyświetlać w dwóch kolumnach, nie w jednej", i to „na komputerach
   generalnie"), a jedna zostaje tam, gdzie miejsca po prostu nie ma. */

/* Rozwijane pola daty: wymuszony kontrast (polecenie właściciela, 14.09.2026).
   Chrome maluje rozwiniętą listę kolorami SAMEGO POLA, a tło pola to
   rgba(255,255,255,0.05) z main.css, czyli prawie przezroczyste. Jasny tekst lądował
   więc na jasnym tle i daty nie było widać w trakcie ustawiania. Pozostałe przeglądarki
   biorą do listy kolory systemowe, dlatego usterkę widać wyłącznie w Chrome.
   ⚠ Ta sama reguła stoi w trzech miejscach (tu, na stronie głównej i w portalu
   partnerskim), bo tylko te trzy strony mają pola wyboru. Do main.css nie trafiła,
   bo tamten arkusz ciągnie za sobą podbicie wersji na wszystkich 80 stronach. */
select.form-input option,
select.form-input optgroup {
    background-color: #000000;
    color: #FFFFFF;
}

/* Druga warstwa wymuszenia, dla przeglądarek spoza rodziny Chrome (właściciel, 14.09).
   Same kolory na `option` wystarczają Chrome i Firefoksowi, ale Safari rysuje listę systemem
   operacyjnym i kolorów z arkusza nie czyta. `color-scheme: dark` mówi przeglądarce wprost:
   ten element ma być rysowany po ciemnej stronie. Ustawione TYLKO na polach wyboru, nie na
   całej stronie: na `:root` zmieniłoby też paski przewijania i pozostałe pola.
   ⚠ Samego wyglądu pola to nie zmienia, bo `.form-input` podaje tło i kolor tekstu wprost. */
select.form-input {
    color-scheme: dark;
}