/* Wspolne dla wszystkich stron: motyw, naglowek, przyciski, pola.
   Style specyficzne (warstwy mapy, siatka wizualizacji, ekran
   otwierajacy landingu) zostaja w swoich plikach - tu trafia tylko
   to, czego uzywaja co najmniej DWIE strony. */

/* Motyw: ciemny to wartosc domyslna (taka jest aplikacja), jasny
   wchodzi przez [data-motyw="jasny"] na <html>. Skrypt w <head>
   kazdej strony ustawia atrybut PRZED pierwszym malowaniem, wiec
   strona nie mruga na ciemno przy wyborze jasnego.
   Akcent w jasnym musi byc ciemniejszy - #4a9eff na bieli ma za maly
   kontrast do czytania drobnego tekstu. */
:root{--tlo:#12151a;--panel:#1a1f27;--ramka:#2a3340;--tekst:#e6e9ef;
      --przygaszony:#8b95a5;--akcent:#4a9eff;--ok:#3ddc84;
      --cien:rgba(0,0,0,.35);--naZdjeciu:#c9d2e0;
      --plakietka:rgba(8,12,18,.85);--naAkcencie:#08131f}
:root[data-motyw="jasny"]{--tlo:#f6f7f9;--panel:#ffffff;--ramka:#dfe3ea;
      --tekst:#151a21;--przygaszony:#5d6774;--akcent:#1668d6;
      --ok:#0f8a46;--cien:rgba(16,24,40,.10);--naZdjeciu:#e8edf5;
      --plakietka:rgba(8,12,18,.72);--naAkcencie:#ffffff}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.6 system-ui,'Segoe UI',sans-serif;background:var(--tlo);
     color:var(--tekst);-webkit-font-smoothing:antialiased}
.srodek{max-width:1140px;margin:0 auto;padding:0 20px}

/* ---------- pasek ---------- */
header{border-bottom:1px solid var(--ramka);background:var(--panel);
       position:sticky;top:0;z-index:20}
header .srodek{display:flex;align-items:center;gap:16px;height:56px}
/* `color` jawnie: logo jest odnosnikiem, wiec bez tego przegladarka
   pomaluje je domyslnym niebieskim. Wczesniej kazda strona radzila
   sobie z tym po swojemu - landing.html przez `.logo{color:...}`,
   landing2.html przez ogolne `a{color:inherit}`. */
/* `white-space:nowrap`: nazwa i dopisek licza 48 znakow (bylo 29),
   wiec bez tego dopisek lamie sie na druga linie i rozpycha pasek. */
.logo{display:grid;grid-template-columns:auto auto;white-space:nowrap;
      column-gap:8px;align-items:center;font-size:15px;
      margin-right:auto;text-decoration:none;color:var(--tekst)}
/* Dopisek stoi POD nazwa (prosba z 02.10.2026), nie obok: obok zajmowal
   190 px paska i strona glowna musiala go chowac. Znak obejmuje oba
   wiersze, wiec logo nie jest wyzsze niz sam znak (34 px). */
.logo .znak{grid-row:1 / span 2}
.logo .nazwa,.logo .dopisek{grid-column:2}
/* Znak wybrany 02.10.2026: bialy dom na niebieskim kaflu z gradientem,
   czerwone okienko, niebieskie "250" - ten sam co przy wczytywaniu
   (.dom-laduje) i w ikonie aplikacji (ikony.py). Kolory siedza
   w atrybutach SVG, nie tutaj: znak wyglada tak samo w obu motywach.
   Bez poswiaty - gradient w kaflu wystarcza. */
.logo .znak{display:inline-flex;line-height:0}
.logo .znak svg{width:34px;height:34px;display:block}
.logo .znak text{letter-spacing:0}
/* Nazwa zwyklym zapisem - wersaliki z rozstrzeleniem byly o 30 px
   szersze i wygladaly jak naglowek tabeli, nie jak marka. */
.logo .nazwa{color:var(--akcent);font-size:17px;letter-spacing:-.01em;
      font-weight:700;line-height:1.15;align-self:end}
.logo .dopisek{color:var(--przygaszony);font-weight:500;font-size:11px;
      line-height:1.2;letter-spacing:.02em;align-self:start}
/* Przelacznik motywu: pokazujemy IKONE TEGO, CO SIE STANIE po
   klknieciu - w ciemnym slonce ("wlacz jasny"), w jasnym ksiezyc.
   Odwrotnie byloby mylace: ikona wygladalaby na opis stanu. */
.motyw{display:inline-grid;place-items:center;width:34px;height:34px;
      border-radius:8px;border:1px solid var(--ramka);background:none;
      color:var(--przygaszony);cursor:pointer;flex:none}
.motyw:hover{border-color:var(--akcent);color:var(--akcent)}
.motyw svg{width:17px;height:17px;display:block}
.motyw .i-ksiezyc{display:none}
:root[data-motyw="jasny"] .motyw .i-slonce{display:none}
:root[data-motyw="jasny"] .motyw .i-ksiezyc{display:block}
.btn{display:inline-block;padding:9px 18px;border-radius:7px;
     border:1px solid var(--ramka);color:var(--tekst);text-decoration:none;
     font-size:14px;font-weight:500;cursor:pointer;background:none;
     font-family:inherit;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--akcent)}
/* `--naAkcencie` zamiast stalej: w ciemnym motywie akcent jest jasny
   (napis granatowy), w jasnym ciemny (napis bialy). */
.btn.glowny{background:var(--akcent);border-color:var(--akcent);
      color:var(--naAkcencie);font-weight:600}
.btn.glowny:hover{background:#5fa9ff}
/* Przycisk "Admin" w naglowku jest w HTML kazdej strony, schowany -
   odslania go wspolne.js po odpowiedzi serwera. `.btn` ma wlasne
   `display`, ktore wygrywa z atrybutem `hidden`, wiec bez pierwszej
   reguly przycisk widzialby kazdy. */
#admin-link[hidden]{display:none}
#admin-link{padding:7px 12px;font-size:13px;white-space:nowrap}

/* Na waskim ekranie nazwa lamala sie na dwie linie i rozpychala pasek.
   Dopisek znika, sama nazwa zostaje w jednej linii. */
@media (max-width:520px){
  .logo{white-space:nowrap}
  .logo .dopisek{display:none}
  /* Nazwa w DWOCH liniach: w jednej zajmowala pol naglowka i przyciski
     ("Oferty", "Zaloguj sie") wychodzily poza ekran 390 px. */
  /* Bez dopisku nazwa zajmuje oba wiersze siatki - inaczej stalaby
     w gornej polowie znaku zamiast na jego srodku. */
  .logo .nazwa{font-size:13px;line-height:1.08;white-space:normal;
        grid-row:1 / span 2;align-self:center}
  .logo .nazwa .lam{display:block}
  header .srodek{gap:9px}
  header .btn{padding:8px 12px;white-space:nowrap;font-size:13px}
}

/* Podpowiedz pod polem formularza - wyjasnia ograniczenie, ktore bez
   opisu wyglada jak usterka (np. zablokowane pole adresu e-mail). */
.podpowiedz{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
      color:var(--przygaszony)}

/* Rysowany dom przy wczytywaniu (prosba Krzysztofa 28.09.2026: na
   stronie ofert i mapie czeka sie ~1,5 s, a byl tylko szary napis).
   Kazda kreska ma pathLength=100, wiec jedno dasharray pasuje do
   wszystkich. BLIZNIAK: ten sam blok jest w index.html (mapa nie
   korzysta z style.css) - zmieniaj oba. */
.dom-laduje{display:flex;flex-direction:column;align-items:center;gap:12px;
      padding:36px 0;color:var(--przygaszony);font-size:14px}
.dom-laduje svg{width:120px;height:120px}
/* Skaner: z czerwonego okienka rozchodza sie POWOLI dwie fale (prosba
   Krzysztofa 02.10.2026). Skalowanie zamiast animacji promienia - `r`
   w CSS nie dziala w starszym Safari. Fale sa przyciete do sylwetki
   domu, a grubosc kreski nie rosnie razem ze skala. */
.dom-laduje .fala{fill:none;stroke:#e5352b;stroke-width:2.4;
      vector-effect:non-scaling-stroke;transform-box:fill-box;
      transform-origin:center;opacity:0;
      animation:dom-fala 3.6s ease-out infinite}
.dom-laduje .fala.druga{animation-delay:1.8s}
@keyframes dom-fala{0%{transform:scale(1);opacity:.8}
      100%{transform:scale(4.8);opacity:0}}
.dom-laduje .marka{color:var(--akcent);font-size:16px;font-weight:700;
      letter-spacing:-.01em;margin-bottom:-6px}
@media (prefers-reduced-motion:reduce){.dom-laduje .fala{animation:none}}

/* "Dodaj ogloszenie" w naglowku tylko tam, gdzie sie miesci - na
   telefonie naglowek ma logo, motyw i konto; czwarty przycisk dawal
   poziomy suwak. */
@media (max-width:700px){
  header .tylko-szeroki{display:none}
}