:root {
  --paper: #eef1f0;
  --ink: #16232a;
  --ink-soft: #48585f;
  --line: #c7d1cd;
  --accent: #1d6e86;
  --luzno: #2f6b4c;
  --luzno-bg: #dde9df;
  --srednio: #9a5420;
  --srednio-bg: #f0e2d1;
  --ciasno: #8b4a52;
  --ciasno-bg: #ecdcdd;
  --zawor: #1a1a1a;
  --shadow: 0 2px 10px rgba(22,35,42,0.14), 0 8px 28px rgba(22,35,42,0.10);

  /* Sygnalizacja A/B/C (2026-08-31, na wyrazna prosbe Adriana: "zielony, zolty,
     czerwony" -- osobne od --luzno/--srednio/--ciasno powyzej, bo tamte sa stonowane
     CELOWO do innych miejsc w UI (banery, przyciski) i zmiana ich na jaskrawe
     zielen/zolc/czerwien wygladalaby tam alarmujaco. Te dwie ponizej (tlo/tekst) sa
     dobrane pod czytelnosc tekstu NA tym tle, nie sama "czystosc" koloru -- czysta
     zolc jest nieczytelna jako tekst, dlatego tekst na zoltym jest ciemny, nie bialy. */
  --sygnal-luzno-bg: #22a83f; --sygnal-luzno-tekst: #ffffff;
  --sygnal-srednio-bg: #ffd400; --sygnal-srednio-tekst: #2b2205;
  --sygnal-ciasno-bg: #e5342b; --sygnal-ciasno-tekst: #ffffff;

  /* Fiolet celu (2026-09-02) -- ta sama rodzina koloru co znacznik celu na mapie
     (#7c3aed, patrz .ps-znacznik-celu-kropka nizej) -- "fioletowy = Twoj cel" ma byc
     spojne w calej appce, nie tylko na mapie. Uzyte na ekranie startowym (podglad
     wpisywanego celu) na wzor makiety Figma pokazanej przez Adriana. */
  --cel: #6425c9; --cel-bg: #f1ebfc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121a1d; --ink: #e7edea; --ink-soft: #a9b8b5; --line: #2c3a3d;
    --accent: #5fb8ce; --luzno: #7bc99b; --luzno-bg: #1c3226;
    --srednio: #e0a25f; --srednio-bg: #362a1a; --ciasno: #d99298; --ciasno-bg: #3a2224;
    --zawor: #e7edea;
    /* te same jaskrawe sygnalowe kolory w obu motywach -- sygnalizacja swietlna ma
       byc rozpoznawalna jednakowo, niezaleznie od jasnego/ciemnego tla strony */
    --sygnal-luzno-bg: #22a83f; --sygnal-luzno-tekst: #ffffff;
    --sygnal-srednio-bg: #ffd400; --sygnal-srednio-tekst: #2b2205;
    --sygnal-ciasno-bg: #e5342b; --sygnal-ciasno-tekst: #ffffff;
    --cel: #c3a3f5; --cel-bg: #2a2140;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  font-family: -apple-system, "Segoe UI", "Public Sans", sans-serif;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
}

#pasek {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--paper); z-index: 500; position: relative;
  border-bottom: 1px solid var(--line);
}
#pasek h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
#godzina-info { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

#mapa { flex: 1; min-height: 0; z-index: 1; }

.karta {
  position: absolute; left: 12px; right: 12px;
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow);
  z-index: 600; padding: 14px 16px;
}
.karta--podpowiedz { bottom: 16px; text-align: center; font-size: 14px; color: var(--ink-soft); }
.karta--podpowiedz p { margin: 0; }

.karta--szukaj {
  position: absolute; top: 66px; left: 12px; right: 12px;
  z-index: 590; display: flex; align-items: flex-end; gap: 8px; padding: 8px;
}
.szukaj-pola { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#szukaj-input, #skad-input {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-size: 15px; background: var(--paper); color: var(--ink); min-width: 0; width: 100%;
}
#skad-input { font-size: 13px; padding: 8px 12px; color: var(--ink-soft); }
#szukaj-input:focus, #skad-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.karta--szukaj button {
  border: none; border-radius: 10px; background: var(--accent); color: white;
  font-size: 17px; padding: 0 14px; cursor: pointer; flex-shrink: 0; align-self: stretch;
}
.szukaj-blad {
  position: absolute; top: 166px; left: 12px; right: 12px; z-index: 590;
  background: var(--ciasno-bg); color: var(--ciasno); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; margin: 0; box-shadow: var(--shadow);
}

#btn-lokalizacja {
  position: absolute; right: 14px; bottom: 16px; z-index: 601;
  width: 50px; height: 50px; border-radius: 50%; border: none;
  background: var(--accent); color: white; font-size: 20px;
  box-shadow: var(--shadow); cursor: pointer;
}

.karta--ladowanie {
  bottom: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;
  font-size: 14px; color: var(--ink-soft);
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.baner {
  border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
}
.baner--uwaga {
  position: absolute; top: 222px; left: 12px; right: 12px; z-index: 550;
  background: var(--srednio-bg); color: var(--srednio); box-shadow: var(--shadow);
}
.baner--szczyt { background: var(--srednio-bg); color: var(--srednio); margin-bottom: 12px; }
/* Ostrzezenie "cel ryzykowny" (2026-09-01, pkt 2) -- w przeplywie karty (jak .baner--szczyt),
   NIE position:absolute (w odroznieniu od .baner--uwaga, ktory stoi osobno nad mapa). */
.baner--cel-ryzykowny { background: var(--ciasno-bg); color: var(--ciasno); margin-bottom: 12px; }
/* Zachęta do instalacji PWA (2026-09-02) -- pozytywny ton (zielonkawy jak .btn-udalo),
   nie ostrzeżenie -- to sugestia, nie problem. Pokazywana raz, po pierwszym wyniku,
   patrz sprobujPokazacBanerInstalacji() w app.js. */
.baner--instalacja { background: var(--luzno-bg); color: var(--luzno); margin-bottom: 12px; }
.baner--instalacja p { margin: 0 0 10px; }

/* Tresc tylko dla czytnikow ekranu -- wizualnie niewidoczna, ale nadal "czytana"
   (w odroznieniu od [hidden], ktore usuwa element calkowicie z drzewa dostepnosci). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.karta--wynik { bottom: 0; left: 0; right: 0; border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 62vh; overflow-y: auto; }

.opcje { display: flex; flex-direction: column; gap: 12px; }
/* 2026-09-02, dociagniecie do stylu makiety Figma (Adrian: "chcę, abyś i je
   dociągnął, aby nie odstawały") -- kolorowe tlo+obwodka CALEJ karty per klasa
   (jak Figma: bg-green-50/border-green-200/text-green-600), nie tylko maly kolorowy
   "pill" jak wczesniej. Uzywa TYCH SAMYCH, juz istniejacych, stonowanych tokenow
   (--luzno-bg/--luzno itd.) co reszta appki (banery, przyciski) -- nie nowej palety. */
.opcja { border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.opcja--luzno { background: var(--luzno-bg); border-color: var(--luzno); }
.opcja--srednio { background: var(--srednio-bg); border-color: var(--srednio); }
.opcja--ciasno { background: var(--ciasno-bg); border-color: var(--ciasno); }
/* Pierwsza karta (po naszym sortowaniu: najlepszy kolor, potem najblizsza) --
   echo "hero card" z makiety, ale wciaz w kontekscie 3 obszarow (Adrian: "zamiast
   ilosci wolnych miejsc pokazujmy trzy obszary" -- NIE wracamy do jednej rekomendacji). */
.opcja--top { padding: 16px; }
.opcja-glowka { display: flex; align-items: flex-start; gap: 10px; }
.opcja-litera {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--paper); color: var(--ink);
}
.opcja--top .opcja-litera { width: 34px; height: 34px; font-size: 15px; }
/* Kolorowa obwodka litery = ten sam sygnal co kropka na mapie -- spojnosc miedzy
   mapa a lista kart. Ring, nie pelne tlo -- litera siedzi na WLASNYM --paper kolku
   w srodku juz kolorowej karty, ring go dodatkowo wyroznia. */
.opcja-litera--luzno { box-shadow: 0 0 0 2px var(--sygnal-luzno-bg) inset; }
.opcja-litera--srednio { box-shadow: 0 0 0 2px var(--sygnal-srednio-bg) inset; }
.opcja-litera--ciasno { box-shadow: 0 0 0 2px var(--sygnal-ciasno-bg) inset; }
.opcja-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
/* "Polecane" przy remisach (2026-09-01, pkt 3) -- etykieta, NIE zmiana procentu. */
.opcja-polecane { font-size: 11px; font-weight: 700; color: var(--accent); }
/* Duzy, pogrubiony procent + etykieta obok (jak Figma: text-3xl font-bold "85% Szansa"
   + "znalezienia miejsca" ponizej) -- kolor tekstu = ten sam co tlo karty, ciemniejszy
   odcien (--luzno/--srednio/--ciasno), nie osobna plakietka. */
.opcja-procent-wiersz { display: flex; align-items: baseline; gap: 7px; }
.opcja-procent-duzy { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.opcja--top .opcja-procent-duzy { font-size: 30px; }
.opcja-procent-etykieta { font-size: 12px; opacity: 0.8; }
.opcja--luzno .opcja-procent-duzy, .opcja--luzno .opcja-procent-etykieta { color: var(--luzno); }
.opcja--srednio .opcja-procent-duzy, .opcja--srednio .opcja-procent-etykieta { color: var(--srednio); }
.opcja--ciasno .opcja-procent-duzy, .opcja--ciasno .opcja-procent-etykieta { color: var(--ciasno); }
/* Prawdziwy adres obszaru (2026-09-02) -- doladowany asynchronicznie, patrz
   pobierzAdresDlaKarty() w app.js; stad domyslnie hidden w HTML. */
.opcja-adres { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.opcja--top .opcja-adres { font-size: 14px; }
/* Ikona trendu (jak Figma: TrendingUp obok duzego procentu) -- czysto dekoracyjna. */
.opcja-ikona-trend { font-size: 26px; opacity: 0.6; flex-shrink: 0; }

/* Siatka statystyk w "boxach" z ikona (jak Figma: Clock/Navigation/DollarSign/Car
   w kolorowych kafelkach 2x2) -- u nas 2 boxy, bo "Czas dojazdu" i "Miejsca" to dane,
   ktorych nie mamy (patrz decyzja Adriana 2026-09-02: pierwsze wymaga routingu,
   ktorego nie budujemy, drugie explicite odrzucone). Tlo = --paper, zeby "boxy"
   wizualnie wciely sie w kolorowe tlo karty (jasniejsze/ciemniejsze w zaleznosci
   od motywu -- dziala w obu). */
.opcja-staty-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.staty-box { background: var(--paper); border-radius: 10px; padding: 8px; text-align: center; }
.staty-box-ikona { font-size: 15px; }
.staty-box-etykieta { font-size: 10.5px; color: var(--ink-soft); margin: 3px 0 1px !important; }
.staty-box-wartosc { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 !important; }

/* Chipy faktow (2026-09-02) -- cel/objazd/jakosc danych, kazdy osobno zamiast jednego
   dlugiego zdania. Odleglosc NIE jest tu juz powielana -- ma wlasny "stat box" wyzej. */
.opcja-staty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.staty-chip {
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  padding: 3px 9px; font-size: 12px; color: var(--ink-soft);
}
.opcja-stawka { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }
.opcja-odl { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; text-align: right; flex-shrink: 0; }

/* Tlo --paper "wcina" pasek akcji w kolorowe tlo karty (jak "boxy" statystyk wyzej) --
   ten sam kontener uzywany tez przez #pieszo-nawiguj w petli powrotu. */
.opcja-akcje {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--paper); border-radius: 10px; padding: 8px; margin-top: 10px;
}
.nav-chip {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; color: var(--accent); text-decoration: none; background: var(--paper);
}
.nav-chip:active { background: var(--luzno-bg); }
.btn-udalo {
  margin-left: auto; border: none; border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; color: var(--luzno); background: var(--luzno-bg); cursor: pointer;
}
.btn-udalo:disabled { opacity: 0.5; }

.potwierdz { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; text-align: center; }
.btn {
  padding: 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 14px; cursor: pointer;
}
.btn--nigdzie { width: 100%; color: var(--ciasno); }
.btn--nigdzie:active { background: var(--ciasno-bg); }
.btn:disabled { opacity: 0.5; }
.potwierdz-dzieki { color: var(--luzno); font-size: 13.5px; margin-top: 8px; }

/* Bug znaleziony 2026-09-01: .btn--tak/.btn--nie byly uzywane w index.html (zgoda RODO,
   ekran powrotu) od dawna, ale nigdy nie mialy tu wlasnych regul -- oba przyciski
   wygladaly identycznie jak neutralny .btn, bez wizualnego rozroznienia "tak"/"nie" na
   dwoch najwazniejszych ekranach potwierdzenia w calej appce. */
.btn--tak { background: var(--accent); color: #fff; border: none; font-weight: 600; }
.btn--tak:active { opacity: 0.85; }
.btn--nie { color: var(--ink-soft); }
/* .potwierdz-przyciski tez nie mialo ZADNYCH regul -- dwa przyciski siedzialy w div
   bez flex/gap, ukladajac sie niespojnie z reszta appki (porownaj .szybciej-przyciski,
   ktore ten sam wzorzec ma poprawnie od poczatku). */
.potwierdz-przyciski { display: flex; gap: 8px; }
.potwierdz-przyciski .btn { flex: 1; }

.legenda {
  position: absolute; top: 172px; left: 12px; z-index: 550;
  background: var(--paper); border-radius: 10px; box-shadow: var(--shadow);
  padding: 8px 12px; font-size: 11.5px; color: var(--ink-soft);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.info-dane {
  margin: 0; padding: 6px 16px max(6px, env(safe-area-inset-bottom));
  font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); text-align: center;
  background: var(--paper); border-top: 1px solid var(--line); position: relative; z-index: 500;
}

/* Znacznik celu na mapie (2026-09-01) -- duzy, filoletowy, zamiast domyslnej "pinezki"
   Leaflet (dluzsza, z cieniem, zajmuje wiecej miejsca wizualnie). Kolor musi zostac w
   synchronizacji z IKONA_CELU w app.js (JS nie czyta zmiennych CSS dla warstwy Leaflet). */
.ps-znacznik-celu-kropka {
  width: 30px; height: 30px; border-radius: 50%;
  background: #7c3aed; border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(22,35,42,0.45);
}

.kropka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.kropka--luzno { background: var(--sygnal-luzno-bg); }
.kropka--srednio { background: var(--sygnal-srednio-bg); }
.kropka--ciasno { background: var(--sygnal-ciasno-bg); }
.kropka--zawor { background: none; border: 2px dashed var(--zawor); width: 5px; height: 5px; }

.nakladka {
  position: fixed; inset: 0; z-index: 900; background: rgba(22,35,42,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.nakladka-karta {
  background: var(--paper); border-radius: 16px; box-shadow: var(--shadow);
  padding: 22px 20px; max-width: 380px; width: 100%; text-align: center;
}
.nakladka-karta p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.nakladka-karta p:last-of-type { margin-bottom: 16px; }
.btn--glowny { width: 100%; background: var(--accent); color: white; border: none; font-weight: 600; }

.nakladka-karta--rodo {
  max-width: 420px; max-height: 88vh; overflow-y: auto; text-align: left;
}

/* Powitanie (2026-09-02) -- pierwszy ekran ze wszystkich, jedno zdanie misji appki,
   PRZED zgoda RODO. Wieksze/mocniejsze niz zwykly tekst w .nakladka-karta -- to ma
   czuc sie jak tagline, nie jak informacyjny akapit. */
.nakladka-karta--powitanie .powitanie-tekst {
  font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); margin-bottom: 20px;
}

/* Ekran startowy "dokad/skad" (2026-09-01, przeprojektowany 2026-09-02 pod makiete
   Figma pokazana przez Adriana -- "usun mape ze strony startowej, zrob ja praktycznie
   dokladnie taka jak na obrazku 1"). W ODROZNIENIU od .nakladka (RODO/onboarding/
   powrot) to NIE wyśrodkowany dialog na przyciemnionym tle -- to PELNA, nieprzezroczysta
   strona, calkowicie zaslaniajaca mape pod spodem (i #pasek) -- stad wlasna klasa,
   nie .nakladka. #start-form uzywa tych samych ID pol co gorny pasek .karta--szukaj
   (do kolejnych wyszukiwan w tej samej sesji, patrz app.js) -- ta sama logika JS,
   inny tylko wizualny kontener. */
.ekran-startowy {
  position: fixed; inset: 0; z-index: 850; background: var(--paper);
  display: flex; flex-direction: column; overflow-y: auto;
}
.start-naglowek {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  padding: max(18px, env(safe-area-inset-top)) 18px 18px;
}
.start-naglowek-ikona { font-size: 26px; }
.start-naglowek h1 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.start-naglowek p { margin: 1px 0 0; font-size: 12.5px; opacity: 0.85; }
/* Pogoda (2026-09-02, "szybkie info o pogodzie nie szkodzi, moze zostac") -- karta w
   stylu makiety Figma: gradient niebieski, ikona, dwie linie tekstu (nie mala
   plakietka -- Adrian: "oczekuje stylu z Figmy", wiec pelny wizualny wzorzec, nie
   zminimalizowana wersja). */
.start-pogoda-karta {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #38bdf8, #3b82f6); color: #fff;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
}
.start-pogoda-ikona { font-size: 22px; flex-shrink: 0; }
.start-pogoda-karta p { margin: 0; }
#start-pogoda-glowna { font-weight: 700; font-size: 14px; }
.start-pogoda-pod { font-size: 12px !important; opacity: 0.85; margin-top: 2px !important; }

.start-tresc { flex: 1; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
#start-form { display: flex; flex-direction: column; gap: 12px; }
.start-pole {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper);
}
.start-pole--lokalizacja { border-color: var(--luzno); border-width: 1.5px; }
.start-pole-etykieta { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.start-pole input, .start-pole #start-dokad, .start-pole #start-skad {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-size: 15px; background: var(--paper); color: var(--ink); width: 100%;
}
.start-pole input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.start-skad-wiersz { display: flex; gap: 8px; }
.start-skad-wiersz #start-skad { flex: 1; min-width: 0; }
.skad-lok-btn {
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--accent); font-size: 18px; padding: 0 14px; cursor: pointer; flex-shrink: 0;
}
.skad-lok-btn:active { background: var(--luzno-bg); }

/* Podglad wpisywanego celu (2026-09-02) -- pojawia sie, gdy user zaczyna pisac w
   "Dokad sie udajesz", aktualizuje sie na biezaco (input event, patrz app.js) --
   echo "Opcje parkowania dostosowane do: X" z makiety. Fiolet = "Twoj cel", ta sama
   rodzina koloru co znacznik na mapie. */
.start-podglad { background: var(--cel-bg); color: var(--cel); border-radius: 12px; padding: 12px 14px; }
.start-podglad-glowka { margin: 0; font-size: 13.5px; font-weight: 700; }
.start-podglad-glowka span { font-weight: 700; }
.start-podglad-tekst { margin: 4px 0 0; font-size: 12px; opacity: 0.85; }

.start-cta {
  border: none; border-radius: 14px; padding: 16px; width: 100%;
  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--cel));
}
.start-cta:active { opacity: 0.9; }

.szukaj-blad--w-karcie { position: static; box-shadow: none; margin-top: 12px; }
.start-info { font-size: 12px !important; color: var(--ink-soft); margin: 14px 0 0; text-align: center; }
.rodo-tytul { font-size: 17px; margin: 0 0 14px; text-align: center; }
.rodo-tekst { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }
.rodo-lista { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.rodo-lista li { margin-bottom: 10px; }
.rodo-lista li b { color: var(--ink); }
.rodo-odmowa { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }

/* Checkbox zgody + notka pod przyciskami (2026-09-01, wersja robocza scenariusz B --
   Fundacja UŁ jako administrator): "Zgadzam się" zostaje zablokowany, dopoki
   checkbox nie jest zaznaczony -- jawna, oddzielna akcja potwierdzajaca zgode,
   nie samo klikniecie przycisku. Patrz app.js: #rodo-checkbox "change" -> odblokuj. */
.rodo-checkbox {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45;
  color: var(--ink); margin: 4px 0 14px; cursor: pointer;
}
.rodo-checkbox input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.rodo-notka { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 10px 0 0; font-style: italic; }

/* Klauzula informacyjna (Czesc 2, pelny art. 13 RODO) -- podlinkowana z ekranu
   zgody, osobna nakladka (patrz #btn-klauzula-otworz/#btn-klauzula-zamknij w app.js).
   Wersja robocza: pozostawiamy [DO UZUPELNIENIA] DOSLOWNIE widoczne az Fundacja/IOD
   je uzupelni -- nie "ladniejemy" ani nie ukrywamy tego, ze tresc jest niedokonczona. */
.rodo-robocza {
  background: var(--srednio-bg); color: var(--srednio); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.4; margin: 0 0 14px;
}
.klauzula-tresc { font-size: 13px; line-height: 1.55; color: var(--ink); max-height: 55vh; overflow-y: auto; }
.klauzula-tresc h3 { font-size: 13.5px; margin: 16px 0 6px; color: var(--ink); }
.klauzula-tresc h3:first-child { margin-top: 0; }
.klauzula-tresc p { margin: 0 0 10px; }
.klauzula-tresc ul { margin: 0 0 10px; padding-left: 18px; }
.klauzula-tresc li { margin-bottom: 6px; }
#btn-klauzula-zamknij { margin-top: 14px; }
.pomin {
  display: block; margin: 10px auto 0; border: none; background: none;
  color: var(--ink-soft); font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.szybciej { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.szybciej p { font-size: 13.5px !important; color: var(--ink-soft); }
.szybciej-przyciski { display: flex; gap: 6px; }
.szybciej-przyciski .btn { flex: 1; padding: 8px 4px; font-size: 12.5px; }

/* "Ostatnie 300 metrow" (2026-09-02, pkt 8) -- pieszo od zaparkowanego miejsca do
   prawdziwego celu, pokazywane w petli powrotu zaraz po "Udalo sie". Fiolet = "Twoj
   cel", ta sama rodzina koloru co znacznik na mapie i ekran startowy. Karta z ikona
   w kolorowym kwadraciku + kolorowa obwodka, w stylu makiety Figma (Adrian: "oczekuje
   stylu z Figmy") -- nie plaski tekst rozdzielony kreska, jak wczesniej. */
.pieszo { margin-top: 14px; text-align: left; }
.pieszo-karta {
  border: 2px solid var(--cel); background: var(--cel-bg); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}
.pieszo-glowka { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pieszo-ikona {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--cel); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.pieszo-naglowek { font-weight: 700; color: var(--cel); font-size: 15px !important; margin: 0 !important; }
#pieszo-tekst { font-size: 13.5px !important; color: var(--ink); margin: 0 !important; }
#pieszo-nawiguj { margin-top: 10px; justify-content: flex-start; }

.link-guzik {
  border: none; background: none; color: var(--accent); font-size: 10.5px;
  text-decoration: underline; cursor: pointer; padding: 0; margin-left: 4px;
}

/* Waski ekran (2026-09-01, pkt 4 -- test na telefonie ~380px szerokosci): odrobine
   mniej paddingu i mniejsze fonty w miejscach, gdzie kilka elementow stoi w jednym
   rzedzie (chipy nawigacji, litera+procent+tag), zeby nie robilo sie ciasno/nie
   zawijalo brzydko. Reszta layoutu juz jest elastyczna (flex/relative jednostki). */
@media (max-width: 380px) {
  .opcja { padding: 10px; }
  .opcja-litera { width: 26px; height: 26px; font-size: 12.5px; }
  .opcja-procent-duzy { font-size: 22px; }
  .opcja--top .opcja-procent-duzy { font-size: 25px; }
  .staty-box { padding: 6px; }
  .staty-box-wartosc { font-size: 12px; }
  .nav-chip { padding: 6px 8px; font-size: 12px; }
  .karta { left: 8px; right: 8px; }
  .nakladka-karta { padding: 18px 16px; }
}

[hidden] { display: none !important; }