/* ============================================================================
   ekrany.css — klasy ekranów Tropu (Puls, Cele, Pisanie, Social, Treści, Tematy, Serwisy, Strony docelowe, Wyniki, Ustawienia, logowanie).
   Te same tokeny i zasady co komponenty (Geist: MAŁO, nie SZARO; jedna ramka na listę; kolor tylko w kropce i tekście; zieleń tylko
   „zrobione”; ⛔ czerwone tła i przyciski; promienie z tokenów; pismo z tokenów --t-*).
   ============================================================================ */

.ekran { display: flex; flex-direction: column; gap: var(--o-sekcja); min-width: 0; }
.ekran-rzad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ekran-rzad .prawo { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kolumny { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--o-sekcja) var(--o6); align-items: start; }
.kolumna { display: flex; flex-direction: column; gap: var(--o-sekcja); min-width: 0; }

/* ── Puls: pierwsza liczba = RUCH t/t ── */
.hero { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--o4) var(--o6); align-items: end; padding: 20px 24px;
    background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); min-width: 0; }
.hero-glowna { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-et { display: flex; align-items: center; gap: 2px; font: var(--t-maly); color: var(--olow); }
.hero-et .info { width: 24px; height: 24px; }
.hero-rzad { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.hero-liczba { font: var(--t-liczba-xl); font-size: var(--ts-xl); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--tekst); }
.hero-pod { font: var(--t-maly); color: var(--olow); }
.hero-sklad { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 20px; list-style: none; margin: 0; padding: 0 0 4px; min-width: 0; }
.hero-sklad li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 12px; border-left: 1px solid var(--linia); }
.hero-sklad b { font: var(--t-h2); font-variant-numeric: tabular-nums; color: var(--tekst); }
.hero-sklad span { font: var(--t-maly); color: var(--olow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* zmiana t/t: znak i liczba, bez koloru tła; spadek pogrubiony (czytelny bez czerwieni — UI-1) */
.zmiana { font: var(--t-tekst); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tekst); white-space: nowrap; }
.zmiana.kier-dol { font-weight: 600; }
.zmiana.kier-nowy, .zmiana.kier-brak, .zmiana.kier-bez { color: var(--olow); font-weight: 400; }
.liczba-rzad { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.liczba-rzad .zmiana { font: var(--t-maly); font-weight: 500; }

/* ── listy wierszy (jedna ramka na listę): tytuł + podpis po lewej, wartość po prawej; klik = obiekt ── */
.lista { display: flex; flex-direction: column; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); min-width: 0; }
.lista-w { display: flex; align-items: center; gap: 12px; min-height: var(--wiersz-h); padding: 10px 16px; border-top: 1px solid var(--linia-miekka);
    color: inherit; text-decoration: none; text-align: left; width: 100%; min-width: 0; }
.lista-w:first-child { border-top: 0; }
a.lista-w, button.lista-w { cursor: pointer; }
a.lista-w:hover, button.lista-w:hover { background: var(--arkusz); }
a.lista-w:first-child:hover, button.lista-w:first-child:hover { border-radius: var(--r-karta) var(--r-karta) 0 0; }
.lista-w > .kr { flex: none; }
.lista-w > .kr.kr-pusta { visibility: hidden; }
.lista-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.lista-tyt { font: var(--t-tekst); font-weight: 500; color: var(--tekst); overflow-wrap: anywhere; }
.lista-pod { font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }
.lista-prawo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; max-width: 48%; min-width: 0; text-align: right; }
.lista-prawo b { font: var(--t-h3); font-variant-numeric: tabular-nums; color: var(--tekst); }
.lista-prawo small { font: var(--t-maly); color: var(--olow); }
.lista-w .ico.strzalka { color: var(--mute); }
.lista-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }

/* decyzje: kropka wagi, zdanie, akcje po prawej (na telefonie pod spodem) */
.decyzja { align-items: flex-start; }
.decyzja .lista-txt { padding-top: 1px; }
.decyzja > .kr { margin-top: 7px; }

/* postęp celu: pasek jednego koloru (⛔ gradient), liczba z n */
.postep { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.postep-tor { flex: 1; height: 6px; border-radius: var(--r-chip); background: var(--pasmo); min-width: 60px; }
.postep-tor i { display: block; height: 100%; width: var(--udzial, 0%); border-radius: var(--r-chip); background: var(--tekst); }
.postep span { font: var(--t-maly); color: var(--olow); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── polecenie do skopiowania (Pisanie, logowanie) — identyfikator = Mono ── */
.polecenie { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 4px 4px 12px; background: var(--arkusz); border-radius: var(--r-pole); min-width: 0; }
.polecenie code { flex: 1; min-width: 0; font: var(--t-kod); color: var(--tekst); overflow-wrap: anywhere; }
.polecenie.duze { min-height: 56px; padding-left: 16px; }
.polecenie.duze code { font-size: var(--ts-h1); font-weight: 500; letter-spacing: -.01em; }
.pisanie-hero { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); }
.pisanie-hero h2 { font: var(--t-h2); }
.pisanie-hero p { font: var(--t-maly); color: var(--olow); max-width: 720px; }
.pisanie-hero .polecenie .btn { flex: none; }

/* ── karty celów ── */
.cele { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--o4); }
.cel-karta { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta);
    text-align: left; color: inherit; cursor: pointer; min-width: 0; transition: border-color .15s var(--ease); }
a.cel-karta { text-decoration: none; }
.cel-karta:hover { border-color: var(--mute); }
.cel-karta.wybrany { border-color: var(--tekst); }
.cel-glowa { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; min-width: 0; }
.cel-glowa h3 { font: var(--t-h3); overflow-wrap: anywhere; }
.cel-opis { font: var(--t-maly); color: var(--olow); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cel-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cel-liczby div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cel-liczby b { font: var(--t-h2); font-variant-numeric: tabular-nums; }
.cel-liczby span { font: var(--t-etykieta); font-weight: 400; color: var(--olow); }
.chipy { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* ── szuflada: liczby i wiersze ── */
.sz-liczby { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px 16px; }
.sz-liczby div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sz-liczby b { font: var(--t-h2); font-variant-numeric: tabular-nums; color: var(--tekst); }
.sz-liczby span { font: var(--t-maly); color: var(--olow); }
.sz-tekst { font: var(--t-tekst); color: var(--tekst); white-space: pre-line; overflow-wrap: anywhere; }
.sz-tekst.olow { color: var(--olow); }
.sz-obiekty { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── CTA (podgląd bloku autopromocji, jak na stronie serwisu, uproszczony) ── */
.cta-lista { display: flex; flex-direction: column; gap: 12px; }
.cta-podglad { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta);
    text-align: left; color: inherit; width: 100%; min-width: 0; }
button.cta-podglad { cursor: pointer; transition: border-color .15s var(--ease); }
button.cta-podglad:hover { border-color: var(--mute); }
.cta-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cta-miejsce { font: var(--t-etykieta); color: var(--olow); white-space: nowrap; }
.cta-glowa .cta-mikro { text-align: right; min-width: 0; }
.cta-naglowek { font: var(--t-h3); color: var(--tekst); }
.cta-tresc { display: flex; flex-direction: column; gap: 6px; font: var(--t-maly); color: var(--tekst); }
.cta-tresc span { display: block; }
.cta-tresc .cta-fakty { color: var(--olow); }
.cta-przycisk { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--r-pole);
    background: var(--tekst); color: var(--karta); font: var(--t-maly); font-weight: 500; }
.cta-mikro { font: var(--t-etykieta); font-weight: 400; color: var(--olow); }

/* ── Social: karty wpisów ── */
.posty { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--o4); align-items: start; }
.post { display: flex; flex-direction: column; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); min-width: 0; }
.post-glowa { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--linia-miekka); min-width: 0; }
.post-kanal { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.post-kanal b { font: var(--t-h3); }
.post-kanal span { font: var(--t-maly); color: var(--olow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-obraz { position: relative; display: block; width: 100%; aspect-ratio: 1200 / 630; background: var(--arkusz); overflow: hidden; }
.post-obraz.kwadrat { aspect-ratio: 1 / 1; }
.post-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-obraz .ikb { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--karta); border-color: var(--linia-pole); }
/* podgląd karty OG z motywu serwisu (układ szablonu renderera lib/og.ts) — dane przykładowe, artykuł przed publikacją, błąd obrazu.
   Kolory = tokeny serwisu (tresc.tokeny → --og-*, ustawiane przez CSSOM), domyślnie jak szablon OG; karta to obraz, więc ten sam w obu motywach. */
.og-podglad { --og-papier: #fbfaf7; --og-tusz: #1c1e21; --og-akcent: #1b4fa0;
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 18px 56px 22px 20px;
    background: var(--og-papier); color: var(--og-tusz); }
.og-serwis { display: flex; align-items: center; gap: 6px; min-width: 0; font: var(--t-maly); color: var(--og-akcent); }
.og-serwis b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.og-serwis span { color: var(--og-tusz); opacity: .64; white-space: nowrap; }
.og-znak { flex: none; width: 8px; height: 8px; border-radius: var(--r-chip); background: var(--og-akcent); }
.og-tytul { font: var(--t-h2); color: var(--og-tusz); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.og-stopka { font: var(--t-etykieta); font-weight: 400; color: var(--og-tusz); opacity: .64; }
.og-pas { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--og-akcent); }
.post-tresc { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; min-width: 0; }
.post-tekst { font: var(--t-tekst); color: var(--tekst); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.post-tekst.cale { display: block; -webkit-line-clamp: unset; }
.post-link { font: var(--t-maly); color: var(--olow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-dlugosc { font: var(--t-etykieta); font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.slajdy { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font: var(--t-tekst); }
.post-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 12px 16px; border-top: 1px solid var(--linia-miekka); margin-top: auto; }
.post-akcje .btn.glowny { flex: 1; }

/* ── obiekt: stany zapisu i pusty ── */
.obiekt.pusty .obiekt-war { color: var(--mute); }
.obiekt.zapis { opacity: .6; }
.obiekt.zapis .ico { animation: tr-puls 1s ease-in-out infinite; }
.zr-dol { display: flex; justify-content: flex-end; padding: 8px 6px 4px; border-top: 1px solid var(--linia-miekka); margin-top: 4px; }

/* ── formularze w oknach ── */
.pola-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o4); }
.pole .wiersz-pola { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dni-wybor { display: flex; flex-wrap: wrap; gap: 6px; }
.dni-wybor button { min-width: 44px; min-height: var(--dotyk); padding: 0 10px; border: 1px solid var(--linia-pole); border-radius: var(--r-pole); background: var(--karta);
    font: var(--t-maly); font-weight: 500; color: var(--olow); }
.dni-wybor button[aria-pressed="true"] { border-color: var(--tekst); background: var(--tekst); color: var(--karta); }
.pole-kod { font: var(--t-kod); color: var(--olow); }

/* ── strony docelowe ── */
.doc-wyniki { display: flex; flex-wrap: wrap; gap: 4px 14px; font: var(--t-maly); color: var(--olow); }
.doc-wyniki b { font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums; }

/* ── logowanie ── */
.login-czeka { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font: var(--t-maly); color: var(--olow); }
.login-zapas { margin-top: 16px; }
.login-zapas-tresc { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 4px; font: var(--t-maly); color: var(--olow); }
.login-stopka a { color: var(--akcja-tekst); text-decoration: underline; text-decoration-color: var(--akcja-linia); text-underline-offset: 3px; }
.lockup .znak { width: 28px; height: 28px; }

/* sygnet: czarny kwadrat z tropem (ikona wypełniona, kolor karty) */
.znak .ico { width: 16px; height: 16px; color: var(--karta); }

/* ── telefon ── */
@media (max-width: 1000px) {
    .kolumny { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .hero { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .hero-sklad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lista-w { padding: 10px 14px; }
    .decyzja { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 10px; }
    .decyzja .lista-akcje { grid-column: 2; }
    .hero-sklad span { white-space: normal; }
    .pisanie-hero { padding: 16px; }
    .polecenie.duze code { font-size: var(--ts-h2); }
    .pola-2 { grid-template-columns: minmax(0, 1fr); }
    .cele, .posty { grid-template-columns: minmax(0, 1fr); }
    .cel-karta { padding: 14px 16px; }
}

/* kolory serwisu (motyw_ustawienia.tokeny): trzy próbki w obiekcie i trzy pola w oknie */
.pola-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o4); }
.pole input[type="color"] { padding: 3px; cursor: pointer; }
.kolory-probki { display: inline-flex; gap: 3px; flex: none; }
.kolor-probka { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--linia-pole); background: var(--kolor-serwisu); }
@media (max-width: 720px) { .pola-3 { grid-template-columns: minmax(0, 1fr); } }