/* ============================================================================
   komponenty.css — komponenty panelu Szlaku (M0: wycinek komponentów Geist panelu Tropu — nagłówek rodziny, strona startowa, logowanie).
   Gramatyka Geist (Vercel = MAŁO, nie SZARO): czerń i biel + jeden szary, niebieski = „czeka na Ciebie” i znak marki, zieleń = „zrobione”,
   odstęp zamiast ramki, linie 1 px tylko ciągłe, Geist Sans do wszystkiego, pismo wyłącznie z tokenów (lint-ui UI-16…UI-20).
   Reguły Tomka (lint-ui): ⛔ czerwone przyciski i wypełnienia (UI-1), ⛔ natywny select — klik w obiekt otwiera .zr-pop (UI-3),
   zero gradientów (UI-6), promienie wyłącznie z tokenów (UI-5). Komponenty panelu (tabela, okno, szuflada, .zr-pop) przyjdą w M1.
   ============================================================================ */

/* ── znak i nazwa rodziny niedzwiedz.ai: sygnet + „Szlak Niedźwiedzia” (drugie słowo niebieskie, wzór Jaskini) ── */
.znak { display: inline-block; width: 26px; height: 26px; flex: none; border-radius: var(--r-pole);
    background: url(/img/logo/nd-znak-128-v1.png) center / 86% no-repeat, #000000; border: 1px solid var(--linia); }
.marka { font: var(--t-h2); letter-spacing: -.03em; color: var(--tekst); white-space: nowrap; }
.marka b { font-weight: 600; color: var(--akcja); }
.lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── strona startowa (M0): górny pasek z marką i napis roboczy ── */
.sz-gora { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: var(--gora-h); padding: 0 var(--o-strona);
    background: var(--tlo); border-bottom: 1px solid var(--linia); min-width: 0; }
.sz-tresc { display: flex; flex-direction: column; gap: var(--o3); width: 100%; max-width: 640px; margin: 0 auto; padding: var(--o7) var(--o-strona); min-width: 0; }
.sz-tresc h1 { font: var(--t-h1); }
.sz-tresc p { color: var(--olow); font: var(--t-tekst); }

/* ── kropka stanu i tekst błędu (czerwień WYŁĄCZNIE jako tekst i kropka, UI-1) ── */
.kr { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--kol, var(--mute)); }
.blad-tekst { display: flex; align-items: baseline; gap: 8px; color: var(--blad); font: var(--t-maly); }
.blad-tekst .kr { --kol: var(--blad); transform: translateY(-1px); }

/* ── logowanie (/login) ── */
.login { display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.login-karta { width: 100%; max-width: 400px; margin: auto; padding: 28px 24px 24px; background: var(--karta); border: 1px solid var(--linia);
    border-radius: var(--r-karta); box-shadow: var(--cien-arkusz); animation: sz-wejscie .25s ease-out both; }
.login-karta .lockup { margin-bottom: 24px; }
.login-karta h1 { font: var(--t-h1); margin-bottom: 4px; }
.login-karta .lead { color: var(--olow); font: var(--t-maly); margin-bottom: 20px; }
.g-blok { display: flex; justify-content: center; min-height: 44px; transition: opacity .2s var(--ease); }
/* ⛔ visibility:hidden i display:none na .czeka: iframe przycisku Google (GIS) w ukrytym rodzicu nigdy nie dostaje rozmiaru, puls czeka
   na iframe ≥ 20 px, a po 7 s strona mówi „Google nie zna adresu” (pomiar Tropu, Chrome 154, 10.10.2026: opacity 0 i max-height 0 =
   gotowy w 0,5 s, visibility hidden = 0×0 na zawsze). Ukrywamy przezroczystością i zerową wysokością; pilnuje tests/login-gis.test.mjs. */
.g-blok.czeka { opacity: 0; min-height: 0; max-height: 0; overflow: hidden; pointer-events: none; }
.g-mount { width: 100%; display: flex; justify-content: center; }
/* iframe GIS ma dokument w jasnym schemacie — ten sam schemat na elemencie iframe = przezroczyste tło w ciemnym motywie */
.g-mount iframe { color-scheme: light; }
.login-czeka { color: var(--olow); font: var(--t-maly); text-align: center; }
.login-karta .blad-tekst { margin-top: 12px; }
.login-stopka { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linia); font: var(--t-maly); color: var(--olow); }