/* ==========================================================================
   SŁONECZNY ATLAS — aplikacja
   --------------------------------------------------------------------------
   Wymaga tokeny.css. Tu mieszka wyłącznie układ i wygląd wyszukiwarki.

   Zasada nadrzędna: papier niesie treść, petrol niesie strukturę, cynober
   niesie dane. Żaden z tych kolorów nie pojawia się dekoracyjnie.
   ========================================================================== */

html, body { height: 100%; overflow: hidden; }

.aplikacja {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ==========================================================================
   PASEK GÓRNY
   ========================================================================== */

.pasek {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--o-5);
  height: 60px;
  padding: 0 var(--o-4) 0 var(--o-5);
  background: var(--petrol);
  color: var(--papier);
  position: relative;
  z-index: var(--z-pasek);
}

.marka {
  display: flex;
  align-items: baseline;
  gap: var(--o-3);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.marka-nazwa {
  font-family: var(--krój-display);
  font-size: 1.24rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.marka-slonce {
  color: var(--slonce);
  font-style: italic;
}
.marka-podpis {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.62);
}

.plakietka-demo {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papier);
  border: 1px solid rgba(244, 240, 232, 0.42);
  border-radius: var(--r-zeton);
  padding: 3px 9px;
  white-space: nowrap;
}

.pasek-rozpychacz { flex: 1 1 auto; min-width: 0; }

.pasek-akcje { display: flex; align-items: center; gap: var(--o-2); }
.pasek .btn { min-height: 38px; padding: var(--o-2) var(--o-4); font-size: var(--t-sm); }

/* Na szerokim ekranie przyciski mają nazwy, na wąskim zostają same ikony.
   Nazwa nie znika dla czytnika ekranu, bo siedzi w aria-label przycisku.

   Ikony są rysowane w SVG, a nie składane ze znaków typu ▸ ⧉ ▤. Te znaki
   nie występują w zawężonych krojach projektu i musiałyby liczyć na krój
   systemowy, który na części urządzeń pokazuje w tym miejscu puste pole. */
.tylko-na-waskim { display: none; }
.ikona {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}

.licznik-panelu {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-zeton);
  background: var(--cynober);
  color: #fff;
  font-family: var(--krój-mono);
  font-size: 10px;
  font-weight: 700;
}

/* ==========================================================================
   FILTRY
   ========================================================================== */

.filtry {
  flex: 0 0 auto;
  background: var(--papier-2);
  border-bottom: 1px solid var(--linia);
  position: relative;
  z-index: var(--z-filtry);
}

.filtry-rzad {
  display: flex;
  align-items: flex-end;
  gap: var(--o-6);
  padding: var(--o-4) var(--o-5);
  overflow-x: auto;
  scrollbar-width: thin;
}

.pole { flex: 0 0 auto; min-width: 0; }

.pole-etykieta {
  display: block;
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-bottom: 6px;
}

.pole-wartosc {
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  color: var(--tusz);
  margin-bottom: var(--o-1);
  white-space: nowrap;
}
.pole-wartosc b { font-weight: 700; color: var(--cynober-tekst); }

/* --- Suwak dwustronny ----------------------------------------------------- */

.suwak { position: relative; width: 186px; height: 24px; }
.suwak-tor {
  position: absolute; top: 11px; left: 0; right: 0;
  height: 3px;
  background: var(--papier-3);
  border-radius: var(--r-zeton);
}
.suwak-zakres {
  position: absolute; top: 11px; height: 3px;
  background: var(--petrol);
  border-radius: var(--r-zeton);
}
.suwak input[type=range] {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 24px; margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.suwak input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--petrol);
  cursor: grab;
  box-shadow: var(--cien-1);
}
.suwak input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; background: var(--petrol); }
.suwak input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--petrol);
  cursor: grab;
}
.suwak input[type=range]:focus-visible { outline: none; }
.suwak input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--cynober-tekst); outline-offset: 2px;
}
.suwak input[type=range]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--cynober-tekst); outline-offset: 2px;
}

/* --- Przełączniki --------------------------------------------------------- */

.przelaczniki { display: flex; gap: 4px; flex-wrap: wrap; }

.przel {
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-zeton);
  background: var(--papier-czysty);
  color: var(--tusz-2);
  font-size: var(--t-sm);
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa),
              border-color var(--czas-1) var(--krzywa),
              color var(--czas-1) var(--krzywa);
}
.przel:hover { border-color: var(--petrol); color: var(--tusz); }
.przel[aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--papier);
  font-weight: 500;
}

/* --- Rozwijka dzielnic ---------------------------------------------------- */

.rozwijka { position: relative; }
.rozwijka-przycisk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-3);
  min-width: 168px;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-zeton);
  background: var(--papier-czysty);
  color: var(--tusz);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--czas-1) var(--krzywa);
}
.rozwijka-przycisk:hover { border-color: var(--petrol); }
.rozwijka-przycisk .licz {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--r-zeton);
  background: var(--petrol);
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.rozwijka-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-filtry);
  width: 272px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--o-2);
  background: var(--papier-czysty);
  border: 1px solid var(--linia-mocna);
  box-shadow: var(--cien-3);
  display: none;
}
.rozwijka-panel[data-otwarty="1"] { display: block; }
.rozwijka-panel .siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }

.opcja {
  display: flex;
  align-items: center;
  gap: var(--o-2);
  min-height: 34px;
  padding: 5px var(--o-2);
  font-size: var(--t-sm);
  color: var(--tusz-2);
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa);
}
.opcja:hover { background: var(--papier-2); color: var(--tusz); }
.opcja input { accent-color: var(--petrol); width: 15px; height: 15px; margin: 0; }

.rozwijka-stopka {
  display: flex;
  gap: var(--o-2);
  padding-top: var(--o-2);
  margin-top: var(--o-2);
  border-top: 1px solid var(--linia);
}
.rozwijka-stopka .btn { min-height: 34px; padding: var(--o-2) var(--o-3); font-size: var(--t-sm); }

/* --- Drugi rząd ----------------------------------------------------------- */

.filtry-rzad-2 {
  display: flex;
  align-items: center;
  gap: var(--o-3);
  padding: 0 var(--o-5) var(--o-3);
  flex-wrap: wrap;
}

.zetony { display: flex; gap: var(--o-2); flex-wrap: wrap; align-items: center; }

.zeton-filtr {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  padding: 4px 5px 4px 11px;
  border-radius: var(--r-zeton);
  background: var(--petrol-mgla);
  border: 1px solid var(--linia-petrol);
  color: var(--tusz);
  font-size: var(--t-sm);
}
/* 24 na 24 to dolna granica z WCAG 2.2 AA. Przy 20 px, które wyglądały
   zgrabniej, żeton był trudny do trafienia palcem i test to wychwycił. */
.zeton-filtr button {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: none;
  border-radius: var(--r-zeton);
  background: transparent;
  color: var(--tusz-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.zeton-filtr button:hover { background: var(--cynober-mgla); color: var(--cynober-tekst); }

select.wybor {
  min-height: 34px;
  padding: 6px var(--o-3);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-zeton);
  background: var(--papier-czysty);
  color: var(--tusz);
  font-size: var(--t-sm);
  cursor: pointer;
}

/* ==========================================================================
   TREŚĆ: LISTA + PRZESTRZEŃ
   ========================================================================== */

.tresc-glowna {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(390px, 44%) 1fr;
  min-height: 0;
}

.kolumna-lista {
  border-right: 1px solid var(--linia);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papier);
  scrollbar-width: thin;
  scrollbar-color: var(--papier-3) transparent;
}
.kolumna-lista::-webkit-scrollbar { width: 10px; }
.kolumna-lista::-webkit-scrollbar-thumb { background: var(--papier-3); }
.kolumna-lista:focus { outline: none; }

/* ==========================================================================
   LICZNIK — bohater warstwy wyników
   --------------------------------------------------------------------------
   Liczba złożona krojem displayowym w dużym stopniu, bo to jedyna rzecz
   na ekranie, która reaguje natychmiast na każdy ruch suwaka. Ma być
   widoczna z drugiego końca stołu.
   ========================================================================== */

.licznik {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--o-4);
  padding: var(--o-5) var(--o-5) var(--o-4);
  background: var(--papier);
  border-bottom: 1px solid var(--linia);
}

.licznik-liczba {
  font-family: var(--krój-display);
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.035em;
  color: var(--cynober-tekst);
  font-variant-numeric: tabular-nums;
}
.licznik-liczba[data-zero="1"] { color: var(--tusz-3); }

.licznik-opis { padding-bottom: 3px; flex: 1 1 auto; min-width: 0; }
.licznik-tekst {
  font-size: var(--t-md);
  color: var(--tusz);
  line-height: 1.25;
}
.licznik-z {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  margin-top: 3px;
}

/* Pasek udziału: pokazuje, jaki wycinek puli przechodzi przez filtry */
.licznik-pasek {
  position: relative;
  width: 100%;
  max-width: 190px;
  height: 3px;
  margin-top: var(--o-2);
  background: var(--papier-3);
  overflow: hidden;
}
.licznik-wypelnienie {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cynober);
  transition: width var(--czas-2) var(--krzywa);
}

/* ==========================================================================
   KARTY OFERT
   ========================================================================== */

/* Wcięcie takie samo jak w liczniku i nocie nad listą. Wcześniej karty szły
   od samej krawędzi, a nagłówek kolumny był wcięty, co czytało się jak
   niedokończona decyzja, a nie jak pełne rozlanie. */
.lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--o-5) var(--o-5);
  background: transparent;
}

.karta {
  display: grid;
  grid-template-columns: 152px 1fr;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linia);
  background: var(--papier-czysty);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa);
  position: relative;
}
.karta::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  transition: background var(--czas-1) var(--krzywa);
}
.karta:hover { background: var(--papier-czysty); border-color: var(--linia-mocna); }
.karta.wyrozniona { background: var(--papier-czysty); border-color: var(--petrol); }
.karta.wyrozniona::after { background: var(--cynober); }

.karta.mignij { animation: mignij 900ms var(--krzywa); }
@keyframes mignij {
  0%, 100% { background: var(--papier-czysty); }
  30%      { background: var(--cynober-mgla); }
}

.karta-rysunek {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--papier-2);
  border-right: 1px solid var(--linia-wlos);
  overflow: hidden;
}
.karta-rysunek svg { width: 100%; height: 100%; }

.karta-typ {
  position: absolute;
  left: 7px; top: 7px;
  padding: 2px 7px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.92);
  font-family: var(--krój-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-2);
}

.karta-moja {
  position: absolute;
  right: 7px; top: 7px;
  padding: 2px 7px;
  border-radius: var(--r-zeton);
  background: var(--petrol);
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.karta-tresc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--o-4);
}

.karta-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  margin-bottom: var(--o-1);
}

.karta-dzielnica {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tusz-3);
}

.karta-cena {
  font-family: var(--krój-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tusz);
  margin-bottom: var(--o-1);
}

.karta-tytul {
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.34;
  color: var(--tusz-2);
  margin: 0 0 var(--o-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.karta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-1) var(--o-4);
  margin-top: auto;
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  color: var(--tusz-3);
}
.karta-meta b { font-weight: 700; color: var(--tusz); }
.karta-meta span { white-space: nowrap; }

/* Znacznik nasłonecznienia: sygnatura projektu widoczna już na karcie */
.karta-slonce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--slonce-tekst);
}
.karta-slonce svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* --- Stan pusty ----------------------------------------------------------- */

.pustka { padding: var(--o-9) var(--o-5); text-align: center; background: var(--papier); }
.pustka-znak {
  font-family: var(--krój-display);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1.12;
  padding-bottom: 0.06em;
  color: var(--tusz-3);
  margin-bottom: var(--o-3);
}
.pustka p { color: var(--tusz-2); margin: 0 auto var(--o-5); max-width: 34ch; }

/* ==========================================================================
   PRZESTRZEŃ: MAPA / MAKIETA
   ========================================================================== */

.kolumna-przestrzen {
  position: relative;
  overflow: hidden;
  background: var(--papier-2);
}

.warstwa-przestrzenna { position: absolute; inset: 0; }
.warstwa-przestrzenna[hidden] { display: none; }

#mapa {
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  /* Cień papieru pod mapą — mapa czyta się jak wydruk położony na biurku,
     nie jak wektor sklejony ze stroną. */
  filter: drop-shadow(0 4px 14px rgba(20, 63, 73, 0.12));
}

/* Makieta 3D: touch-action none, żeby drag palcem obracał scenę zamiast
   przewijać stronę. Bez tego na telefonie każdy gest scrolla wypadał
   ze sceny. */
#makieta { touch-action: none; }
.warstwa-przestrzenna { touch-action: pan-y; }
#mapa.ciągnie { cursor: grabbing; }
#mapa:focus-visible { outline: 2px solid var(--cynober-tekst); outline-offset: -2px; }

/* --- Warstwy kartograficzne ---------------------------------------------- */

.mapa-ląd      { fill: var(--papier); stroke: var(--linia); stroke-width: 1; }
.mapa-woda     { fill: #C3D7DC; stroke: #8FB0B8; stroke-width: 1; }
.mapa-rzeka    { fill: none; stroke: #A9C4CA; stroke-linecap: round; stroke-linejoin: round; }
.mapa-zieleń   { fill: #E2E7D9; stroke: none; }
.mapa-droga-podkład { fill: none; stroke: #DFD5C2; stroke-linecap: round; }
.mapa-droga-rdzeń   { fill: none; stroke: #FBF9F5; stroke-linecap: round; }

/* Dzielnice jako pastelowa mozaika. Każde ID dostaje inny delikatny odcień. */
.mapa-dzielnica {
  fill: rgba(31, 47, 51, 0.03);
  stroke: rgba(31, 47, 51, 0.11);
  stroke-width: 0.5;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.mapa-dzielnica[data-dzielnica="sta"] { fill: rgba(210, 69, 44, 0.03); }
.mapa-dzielnica[data-dzielnica="jez"] { fill: rgba(233, 200, 130, 0.07); }
.mapa-dzielnica[data-dzielnica="laz"] { fill: rgba(126, 167, 177, 0.05); }
.mapa-dzielnica[data-dzielnica="wil"] { fill: rgba(166, 183, 154, 0.06); }
.mapa-dzielnica[data-dzielnica="gru"] { fill: rgba(200, 175, 130, 0.06); }
.mapa-dzielnica[data-dzielnica="sol"] { fill: rgba(126, 167, 177, 0.07); }
.mapa-dzielnica[data-dzielnica="win"] { fill: rgba(233, 200, 130, 0.05); }
.mapa-dzielnica[data-dzielnica="ogr"] { fill: rgba(166, 183, 154, 0.07); }
.mapa-dzielnica[data-dzielnica="nar"] { fill: rgba(216, 226, 226, 0.16); }
.mapa-dzielnica[data-dzielnica="pia"] { fill: rgba(233, 200, 130, 0.04); }
.mapa-dzielnica[data-dzielnica="pod"] { fill: rgba(166, 183, 154, 0.05); }
.mapa-dzielnica[data-dzielnica="str"] { fill: rgba(200, 175, 130, 0.05); }
.mapa-dzielnica[data-dzielnica="rat"] { fill: rgba(200, 175, 130, 0.07); }
.mapa-dzielnica[data-dzielnica="mal"] { fill: rgba(126, 167, 177, 0.06); }
.mapa-dzielnica[data-dzielnica="cha"] { fill: rgba(200, 175, 130, 0.05); }
.mapa-dzielnica[data-dzielnica="gor"] { fill: rgba(216, 226, 226, 0.14); }
.mapa-dzielnica[data-dzielnica="deb"] { fill: rgba(166, 183, 154, 0.04); }
.mapa-dzielnica[data-dzielnica="swi"] { fill: rgba(200, 175, 130, 0.04); }
.mapa-dzielnica[data-dzielnica="jun"] { fill: rgba(233, 200, 130, 0.04); }
.mapa-dzielnica.aktywna {
  fill: rgba(210, 69, 44, 0.12) !important;
  stroke: var(--cynober-tekst);
  stroke-width: 1;
}

/* Wyspy na Warcie */
.mapa-wyspa { fill: #EDE3CD; stroke: #C9BEA8; stroke-width: 0.5; }

/* Izohipsy — hairline pod wodą */
.mapa-izohipsa {
  fill: none;
  stroke: rgba(31, 47, 51, 0.07);
  stroke-width: 0.8;
  stroke-dasharray: 4 3;
}

/* Piktogramy landmarków */
.mapa-landmark {}
.mapa-landmark-tlo { fill: var(--petrol); stroke: var(--papier); stroke-width: 0.8; }
.mapa-landmark-symbol { stroke: var(--papier); stroke-width: 1.2; fill: none; }
.mapa-landmark-podpis {
  font-family: var(--krój-mono);
  font-size: 6px;
  letter-spacing: 0.09em;
  fill: var(--tusz-3);
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: var(--papier);
  stroke-width: 2;
}

/* Kompas w prawym górnym rogu */
.mapa-kompas-tarcza {
  fill: rgba(244, 240, 232, 0.94);
  stroke: rgba(31, 47, 51, 0.35);
  stroke-width: 0.8;
}
.mapa-kompas-strzalka-n { fill: var(--cynober); }
.mapa-kompas-strzalka-s { fill: rgba(31, 47, 51, 0.42); }
.mapa-kompas-etykieta {
  font-family: var(--krój-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--tusz-2);
}

/* Skala liniowa u dołu */
.mapa-skala-linia { stroke: var(--tusz); stroke-width: 1.4; }
.mapa-skala-tick { stroke: var(--tusz); stroke-width: 1.4; }
.mapa-skala-etykieta {
  font-family: var(--krój-mono);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--tusz-2);
}
.mapa-plac          { fill: #EDE3CD; stroke: #C9BEA8; stroke-width: 0.6; }
.mapa-most          { fill: none; stroke: #F4F0E8; stroke-linecap: butt; stroke-width: 5; }
.mapa-kolej-podkład { fill: none; stroke: #B7A98F; stroke-linecap: butt; }
.mapa-kolej-rdzeń   { fill: none; stroke: #F4F0E8; stroke-linecap: butt; stroke-dasharray: 3 3; }
.mapa-dworzec       { fill: #7C6B4C; stroke: none; }

/* Obwódka w kolorze papieru pod literami. Bez niej nazwa dzielnicy ginie
   pod znacznikiem ceny, a przy 26 ofertach takich nałożeń jest kilkanaście.
   To standardowy zabieg kartograficzny, nie ozdoba. */
.mapa-etykieta {
  font-family: var(--krój-mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: var(--tusz-3);
  paint-order: stroke fill;
  stroke: var(--papier);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}
/* Wody kursywą serifową — konwencja atlasu */
.mapa-etykieta-woda {
  font-family: var(--krój-display);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  fill: #5C8791;
  stroke: #DCE7EA;
}
.mapa-punkt-dzielnicy { fill: var(--tusz-3); opacity: 0.55; }

/* --- Znaczniki ------------------------------------------------------------ */

.znacznik { cursor: pointer; }
.znacznik-cień { fill: rgba(20, 63, 73, 0.16); }
.znacznik-tło {
  fill: var(--cynober);
  stroke: var(--papier-czysty);
  stroke-width: 1.5;
  transition: fill var(--czas-1) var(--krzywa);
}
.znacznik-tekst {
  font-family: var(--krój-mono);
  font-size: 9.5px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}
.znacznik-puls { fill: none; stroke: none; }

/* Status niesiony kolorem ORAZ kształtem obrysu — nigdy samym kolorem */
.znacznik-rezerwacja .znacznik-tło { fill: var(--slonce); }
.znacznik-rezerwacja .znacznik-tekst { fill: #3D2A00; }
.znacznik-sprzedane .znacznik-tło {
  fill: var(--papier-3);
  stroke: var(--tusz-3);
  stroke-dasharray: 3 2;
}
.znacznik-sprzedane .znacznik-tekst { fill: var(--tusz-2); }

.znacznik:hover .znacznik-tło,
.znacznik.wyróżniony .znacznik-tło { fill: var(--petrol); stroke: var(--papier-czysty); }
.znacznik:hover .znacznik-tekst,
.znacznik.wyróżniony .znacznik-tekst { fill: var(--papier); }
.znacznik.wyróżniony .znacznik-puls {
  stroke: var(--cynober);
  stroke-width: 2;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px var(--cynober));
}
.znacznik:hover .znacznik-cień,
.znacznik.wyróżniony .znacznik-cień { fill: rgba(210, 69, 44, 0.35); }
.znacznik:focus-visible { outline: none; }
.znacznik:focus-visible .znacznik-tło { stroke: var(--cynober-gleb); stroke-width: 3; }

.znacznik.nowy .znacznik-puls {
  stroke: var(--petrol);
  animation: puls-znacznika 1.7s var(--krzywa) 3;
}
@keyframes puls-znacznika {
  0%   { r: 9;  opacity: 0.8; stroke-width: 2; }
  100% { r: 30; opacity: 0;   stroke-width: 0.5; }
}

/* --- Gniazda -------------------------------------------------------------- */

.gniazdo { cursor: pointer; }
.gniazdo-aura { fill: rgba(210, 69, 44, 0.14); }
.gniazdo-tło {
  fill: var(--cynober);
  stroke: var(--papier-czysty);
  stroke-width: 2;
  transition: fill var(--czas-1) var(--krzywa);
}
.gniazdo-liczba {
  font-family: var(--krój-mono);
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}
.gniazdo:hover .gniazdo-tło { fill: var(--petrol); }
.gniazdo:focus-visible { outline: none; }
.gniazdo:focus-visible .gniazdo-tło { stroke: var(--cynober-gleb); stroke-width: 3.5; }

/* --- Sterowanie ----------------------------------------------------------- */

.przestrzen-gora {
  position: absolute;
  left: var(--o-3);
  top: var(--o-3);
  right: var(--o-3);
  z-index: var(--z-mapa-ster);
  display: flex;
  align-items: flex-start;
  gap: var(--o-3);
  pointer-events: none;
}
.przestrzen-gora > * { pointer-events: auto; }

.przelacznik-warstw {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.94);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-1);
  backdrop-filter: blur(6px);
}
.przelacznik-warstw button {
  min-height: 34px;
  padding: 6px 15px;
  border: none;
  border-radius: var(--r-zeton);
  background: transparent;
  color: var(--tusz-2);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), color var(--czas-1) var(--krzywa);
}
.przelacznik-warstw button:hover { color: var(--tusz); }
.przelacznik-warstw button[aria-pressed="true"] {
  background: var(--petrol);
  color: var(--papier);
  font-weight: 500;
}

.mapa-sterowanie {
  position: absolute;
  right: var(--o-3);
  bottom: var(--o-3);
  z-index: var(--z-mapa-ster);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mapa-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linia);
  background: rgba(251, 249, 245, 0.94);
  color: var(--tusz);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--cien-1);
  transition: border-color var(--czas-1) var(--krzywa), background var(--czas-1) var(--krzywa);
}
.mapa-btn:hover { border-color: var(--petrol); background: var(--papier-czysty); }
.mapa-btn.reset { font-family: var(--krój-mono); font-size: 9px; letter-spacing: 0.06em; }

.mapa-nota {
  position: absolute;
  left: var(--o-3);
  bottom: var(--o-3);
  z-index: 4;
  max-width: 330px;
  padding: var(--o-2) var(--o-3);
  background: rgba(251, 249, 245, 0.9);
  border: 1px solid var(--linia);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--tusz-3);
  pointer-events: none;
}

.obszar-pigulka {
  position: absolute;
  left: 50%;
  top: var(--o-3);
  transform: translateX(-50%);
  z-index: var(--z-mapa-dymek);
  display: none;
  align-items: center;
  gap: var(--o-2);
  min-height: 40px;
  padding: var(--o-2) var(--o-5);
  border: 1px solid var(--petrol);
  border-radius: var(--r-zeton);
  background: var(--petrol);
  color: var(--papier);
  font-size: var(--t-sm);
  cursor: pointer;
  box-shadow: var(--cien-3);
  animation: wjedz var(--czas-2) var(--krzywa);
}
.obszar-pigulka[data-widoczna="1"] { display: flex; }
.obszar-pigulka:hover { background: var(--petrol-sred); border-color: var(--petrol-sred); }
@keyframes wjedz {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Dymek ---------------------------------------------------------------- */

.dymek {
  position: absolute;
  z-index: var(--z-mapa-dymek);
  display: none;
  width: 236px;
  padding: var(--o-3);
  background: var(--papier-czysty);
  border: 1px solid var(--linia-mocna);
  box-shadow: var(--cien-3);
  pointer-events: none;
}
.dymek[data-widoczny="1"] { display: block; }
.dymek-góra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-2);
  margin-bottom: var(--o-1);
}
.dymek-cena { font-size: var(--t-md); font-weight: 700; color: var(--tusz); }
.dymek-góra .zeton { font-size: 10px; padding: 2px 8px; }
.dymek-tytuł { font-size: var(--t-sm); color: var(--tusz-2); line-height: 1.4; margin-bottom: var(--o-1); }
.dymek-meta { font-family: var(--krój-mono); font-size: var(--t-xs); color: var(--tusz-3); }

/* ==========================================================================
   MAKIETA 3D
   ========================================================================== */

.makieta-owijka { position: absolute; inset: 0; background: var(--papier-2); }
#makieta { width: 100%; height: 100%; }

.makieta-wczytywanie {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--o-3);
  text-align: center;
  padding: var(--o-5);
  color: var(--tusz-3);
}
.makieta-wczytywanie[hidden] { display: none; }

/* Wskaźnik postępu jako rysowana kreska, nie kółko */
.kreska-postepu {
  width: 120px; height: 2px;
  background: var(--papier-3);
  overflow: hidden;
}
.kreska-postepu::after {
  content: '';
  display: block;
  width: 40%; height: 100%;
  background: var(--petrol);
  animation: przesuw 1.15s var(--krzywa) infinite;
}
@keyframes przesuw {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* --- Sterowanie słońcem ---------------------------------------------------
   Jedyne miejsce, gdzie występuje bursztyn. Kolor jest tu informacją. */

.slonce-panel {
  position: absolute;
  left: var(--o-3);
  right: var(--o-3);
  bottom: var(--o-3);
  z-index: var(--z-mapa-ster);
  max-width: 420px;
  padding: var(--o-3) var(--o-4);
  background: rgba(251, 249, 245, 0.95);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-2);
  backdrop-filter: blur(6px);
}

.slonce-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  margin-bottom: var(--o-2);
}
.slonce-godzina {
  font-family: var(--krój-mono);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--slonce-tekst);
  font-variant-numeric: tabular-nums;
}
.slonce-opis { font-size: var(--t-sm); color: var(--tusz-2); }

.slonce-suwak {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.slonce-suwak::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-zeton);
  /* Wschód, południe, zachód — gradient odczytuje się jak przebieg dnia */
  background: linear-gradient(90deg, #3E5C6B 0%, #E0A32F 26%, #FFF3D6 50%, #E0A32F 74%, #3E5C6B 100%);
}
.slonce-suwak::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--slonce-tekst);
  box-shadow: var(--cien-1);
}
.slonce-suwak::-moz-range-track {
  height: 4px;
  border-radius: var(--r-zeton);
  background: linear-gradient(90deg, #3E5C6B 0%, #E0A32F 26%, #FFF3D6 50%, #E0A32F 74%, #3E5C6B 100%);
}
.slonce-suwak::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--papier-czysty);
  border: 2px solid var(--slonce-tekst);
}

/* --- Skoki pory dnia ------------------------------------------------------
   Trzy przyciski pod suwakiem: poranek, południe, złota godzina. Suwak jest
   precyzją, przyciski są kadrem — jednym kliknięciem widz ląduje w porze,
   w której cień znaczy najwięcej. */

.pory-dnia {
  display: flex;
  gap: 6px;
  margin-top: var(--o-2);
}
.pory-dnia button {
  flex: 1;
  border: 1px solid rgba(138, 93, 6, 0.3);
  background: transparent;
  color: var(--slonce-tekst);
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pory-dnia button:hover { background: var(--slonce-mgla); }
.pory-dnia button[aria-pressed="true"] {
  background: var(--slonce-tekst);
  color: var(--papier);
  border-color: var(--slonce-tekst);
}
.pory-dnia button:focus-visible {
  outline: 2px solid var(--cynober-tekst);
  outline-offset: 2px;
}

/* --- Zastępstwo, gdy 3D nie startuje -------------------------------------- */

/* --- Dymek nad ofertą w makiecie ------------------------------------------
   Zamiast otwierać od razu pełny modal, klik na czerwoną bryłę pokazuje
   miniaturową kartę oferty w miejscu kliknięcia. Dopiero kliknięcie
   „Zobacz szczegóły" otwiera modal — użytkownik kontroluje głębokość
   nurkowania w ofertę. */

.makieta-dymek {
  position: absolute;
  z-index: 25;
  min-width: 220px;
  max-width: 280px;
  background: var(--papier);
  border: 1px solid var(--tusz-3);
  box-shadow: 0 8px 24px rgba(23, 33, 31, 0.18);
  padding: var(--o-3) var(--o-4);
  font-family: var(--krój-podstawa);
  pointer-events: auto;
  transform: translate(-50%, -100%);
  transition: opacity 0.15s ease;
}
.makieta-dymek[hidden] { display: none; }
.makieta-dymek::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--papier);
  filter: drop-shadow(0 1px 0 var(--tusz-3));
}
.makieta-dymek-id {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tusz-3);
  text-transform: uppercase;
}
.makieta-dymek-cena {
  font-family: var(--krój-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--petrol);
  margin: 3px 0 2px;
  font-variant-numeric: tabular-nums;
}
.makieta-dymek-cena-m2 {
  font-family: var(--krój-mono);
  font-size: 10px;
  color: var(--tusz-3);
  margin-bottom: 6px;
}
.makieta-dymek-tytul {
  font-size: 13px;
  line-height: 1.35;
  color: var(--tusz);
  margin: 4px 0 6px;
}
.makieta-dymek-meta {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tusz-3);
  margin-bottom: var(--o-3);
}
.makieta-dymek-akcje {
  display: flex;
  gap: 6px;
  align-items: center;
}
.makieta-dymek-akcje button {
  flex: 1;
  padding: 7px 10px;
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--tusz);
  background: var(--tusz);
  color: var(--papier);
  transition: background 0.12s ease;
}
.makieta-dymek-akcje button:hover { background: var(--cynober); border-color: var(--cynober); }
.makieta-dymek-akcje .btn-cichy {
  flex: 0 0 auto;
  background: transparent;
  color: var(--tusz-2);
  border-color: var(--linia);
}
.makieta-dymek-akcje .btn-cichy:hover { background: var(--papier-2); color: var(--tusz); }
.makieta-dymek-akcje button:focus-visible {
  outline: 2px solid var(--cynober-tekst);
  outline-offset: 2px;
}

.makieta-zastepstwo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--o-4);
  padding: var(--o-6);
  text-align: center;
  background: var(--papier-2);
}
/* Selektor klasy ma wyższą specyficzność niż atrybut `hidden`, więc bez
   tego szczegółu komunikat zastępczy pozostaje widoczny nawet z hidden,
   siedzi na wierzchu canvasa i wygląda jakby makieta nie chciała startować. */
.makieta-zastepstwo[hidden] { display: none; }
.makieta-zastepstwo p { max-width: 40ch; color: var(--tusz-2); }
.makieta-zastepstwo .powod {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
}

/* ==========================================================================
   PRZEŁĄCZNIK WIDOKU (telefon)
   ========================================================================== */

.przelacznik-widoku {
  display: none;
  position: fixed;
  left: 50%;
  bottom: var(--o-4);
  transform: translateX(-50%);
  z-index: var(--z-arkusz);
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-zeton);
  background: var(--petrol);
  box-shadow: var(--cien-3);
}
.przelacznik-widoku button {
  min-height: 40px;
  padding: 8px 22px;
  border: none;
  border-radius: var(--r-zeton);
  background: transparent;
  color: rgba(244, 240, 232, 0.72);
  font-size: var(--t-sm);
  cursor: pointer;
}
.przelacznik-widoku button[aria-pressed="true"] {
  background: var(--papier);
  color: var(--petrol);
  font-weight: 600;
}

/* ==========================================================================
   OKNA MODALNE
   ========================================================================== */

.przykrywka {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--o-6) var(--o-4);
  background: rgba(13, 42, 49, 0.55);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.przykrywka[data-otwarta="1"] { display: flex; }

.modal {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto 0;
  background: var(--papier);
  border: 1px solid var(--linia-mocna);
  box-shadow: var(--cien-4);
  animation: modal-wjedz var(--czas-2) var(--krzywa);
}
.modal-waski { max-width: 580px; }
@keyframes modal-wjedz {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-naglowek {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-4);
  padding: var(--o-4) var(--o-5);
  background: var(--petrol);
  color: var(--papier);
}
.modal-naglowek .etykieta { color: rgba(244, 240, 232, 0.66); }
.modal-tytul {
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
}

.modal-zamknij {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 1px solid rgba(244, 240, 232, 0.32);
  background: transparent;
  color: var(--papier);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.modal-zamknij:hover { background: rgba(244, 240, 232, 0.14); border-color: var(--papier); }
.modal-zamknij:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }

.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-right: 10px;
  height: 44px;
  border: 1px solid rgba(244, 240, 232, 0.32);
  background: transparent;
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.btn-pdf:hover { background: rgba(244, 240, 232, 0.14); border-color: var(--papier); }
.btn-pdf:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.btn-pdf svg { flex: 0 0 auto; }

/* ==========================================================================
   TRYB WYDRUKU / PDF
   --------------------------------------------------------------------------
   Przycisk „PDF" ustawia data-drukuj-oferte na <html> i odpala window.print().
   Wtedy chowamy wszystko poza modalem oferty, ustawiamy stronę A4 z niewielkimi
   marginesami i przełączamy modal w tryb papierowy (bez podpiętego tła, bez
   scrolli, treść mieści się na jednej stronie).
   ========================================================================== */

@media print {
  @page { size: A4 portrait; margin: 10mm 10mm 12mm; }

  html, body {
    background: #ffffff !important;
    color: #1F2F33 !important;
    font-size: 9.5pt !important;
    line-height: 1.4 !important;
  }

  body > *:not(#przykrywka) { display: none !important; }

  #przykrywka {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #przykrywka .modal {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  /* Nagłówek pełnej szerokości */
  .modal-naglowek {
    background: #ffffff !important;
    color: #1F2F33 !important;
    border-bottom: 2px solid #143F49 !important;
    padding: 0 0 4mm 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8mm !important;
  }
  .modal-tytul { color: #143F49 !important; font-size: 20pt !important; font-weight: 500 !important; }
  .modal-naglowek .etykieta {
    font-family: 'Space Mono', monospace !important;
    font-size: 8pt !important;
    letter-spacing: 0.14em !important;
    color: #7A8688 !important;
    text-transform: uppercase !important;
  }
  .modal-zamknij, .btn-pdf { display: none !important; }

  .modal-tresc {
    padding: 4mm 0 0 0 !important;
    display: block !important;
  }

  /* Scena z rysunkiem: mniejsza, żeby zostało miejsce na resztę */
  .oferta-scena {
    height: 60mm !important;
    max-height: 60mm !important;
    background: #EFE9DD !important;
    margin-bottom: 4mm !important;
    page-break-inside: avoid;
  }
  .galeria-strzalka, .galeria-kropki, .galeria-podpis { display: none !important; }
  .karta-rysunek, .oferta-scena svg {
    max-width: 100% !important;
    max-height: 60mm !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Nagłówek oferty pełną szerokość */
  .oferta-naglowek {
    display: block !important;
    margin-bottom: 3mm !important;
  }
  .oferta-tytul {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 16pt !important;
    color: #143F49 !important;
    margin: 0 0 1mm !important;
    font-weight: 500 !important;
  }
  .oferta-cena {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 20pt !important;
    color: #143F49 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }
  .oferta-cena-m2 {
    font-family: 'Space Mono', monospace !important;
    font-size: 8.5pt !important;
    color: #7A8688 !important;
    letter-spacing: 0.05em !important;
  }

  /* Tabelka danych - kompaktowa jednorzędowa */
  .dane-siatka {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3mm !important;
    padding: 3mm 4mm !important;
    background: #F4F0E8 !important;
    border-left: 3px solid #143F49 !important;
    margin: 3mm 0 !important;
    page-break-inside: avoid;
  }
  .dana { padding: 0 !important; }
  .dana-etykieta {
    font-family: 'Space Mono', monospace !important;
    font-size: 7.5pt !important;
    letter-spacing: 0.14em !important;
    color: #7A8688 !important;
    text-transform: uppercase !important;
    margin-bottom: 1mm !important;
  }
  .dana-wartosc {
    font-size: 11pt !important;
    color: #1F2F33 !important;
    font-weight: 500 !important;
  }

  .oferta-opis {
    font-size: 9pt !important;
    line-height: 1.4 !important;
    color: #4A5A5E !important;
    margin: 3mm 0 !important;
    text-align: justify;
  }

  /* Nasłonecznienie i widok z okna obok siebie w dolnej połowie */
  .naslonecznienie, .widok-okna {
    background: #ffffff !important;
    padding: 3mm 4mm !important;
    margin: 3mm 0 !important;
    page-break-inside: avoid;
    display: block !important;
    font-size: 9pt !important;
  }
  .naslonecznienie { border-left: 3px solid #8A5D06 !important; }
  .widok-okna { border-left: 3px solid #143F49 !important; }
  .naslonecznienie h3, .widok-okna h3 {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 12pt !important;
    margin: 0 0 2mm !important;
    color: #1F2F33 !important;
    font-weight: 500 !important;
  }
  .naslonecznienie-teza, .naslonecznienie-strata, .widok-okna-tresc, .widok-podpis {
    font-size: 8.5pt !important;
    line-height: 1.4 !important;
    color: #4A5A5E !important;
    max-width: 100% !important;
  }
  .kondygnacje { margin-top: 2mm !important; padding-top: 2mm !important; }
  .kondygnacja {
    grid-template-columns: 50px 1fr 50px !important;
    padding: 1px 0 !important;
  }
  .widok-rysunek {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 40mm !important;
  }
  .widok-panorama { height: 14px !important; }
  .widok-legenda { font-size: 7pt !important; gap: 3mm !important; }

  /* Kalkulator, zetony i galerie - poza wydrukiem */
  .kalkulator, .cechy-lista, .zetony, input[type="range"],
  .pory-dnia, .slonce-panel, #btn-udostepnij, #btn-panel,
  .modal-stopka button, .oferta-galeria-kropki { display: none !important; }

  /* Panel pory roku bloku nasłonecznienia widoczny jako tekst */
  .naslonecznienie-gora { border: none !important; padding: 0 !important; }

  /* Stopka na wszystkich stronach */
  .modal-stopka {
    margin-top: 4mm !important;
    padding-top: 3mm !important;
    border-top: 1px solid #C9BEA8 !important;
    text-align: center;
  }
  .modal-stopka::before {
    content: 'SŁONECZNY ATLAS · GRODEV · grodev.pl/nieruchomosci-demo';
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 7.5pt;
    letter-spacing: 0.18em;
    color: #7A8688;
  }
}

.modal-tresc { padding: var(--o-5); }

/* ==========================================================================
   WIDOK OFERTY
   ========================================================================== */

.oferta-scena {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--papier-2);
  border: 1px solid var(--linia);
  overflow: hidden;
}
.oferta-scena svg,
.oferta-scena canvas { width: 100%; height: 100%; }

.scena-przelacznik {
  position: absolute;
  left: var(--o-3);
  top: var(--o-3);
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.94);
  border: 1px solid var(--linia);
}
.scena-przelacznik button {
  min-height: 32px;
  padding: 5px 13px;
  border: none;
  border-radius: var(--r-zeton);
  background: transparent;
  color: var(--tusz-2);
  font-size: var(--t-sm);
  cursor: pointer;
}
.scena-przelacznik button[aria-pressed="true"] {
  background: var(--petrol); color: var(--papier); font-weight: 500;
}

.galeria-strzalka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 56px;
  border: 1px solid var(--linia);
  background: rgba(251, 249, 245, 0.92);
  color: var(--tusz);
  font-size: 1.2rem;
  cursor: pointer;
}
.galeria-strzalka:hover { background: var(--papier-czysty); border-color: var(--petrol); }
.galeria-strzalka.wstecz { left: var(--o-3); }
.galeria-strzalka.dalej { right: var(--o-3); }

.galeria-kropki {
  position: absolute;
  left: 50%; bottom: var(--o-3);
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 2px 5px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.9);
}
/* Kropka ma 8 px, ale obszar kliknięcia 24 px. Sam znacznik zostaje mały,
   bo w galerii ma być dyskretny, a trafialność załatwia przezroczysta ramka. */
.galeria-kropki button {
  width: 24px; height: 24px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.galeria-kropki button::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--papier-3);
  transition: background var(--czas-1) var(--krzywa), transform var(--czas-1) var(--krzywa);
}
.galeria-kropki button[aria-current="true"]::before { background: var(--cynober); transform: scale(1.3); }

.galeria-podpis {
  position: absolute;
  right: var(--o-3);
  bottom: var(--o-3);
  padding: 3px 9px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.9);
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-2);
}

/* --- Wybór kondygnacji ---------------------------------------------------- */

.pietra {
  position: absolute;
  right: var(--o-3);
  top: var(--o-3);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(251, 249, 245, 0.94);
  border: 1px solid var(--linia);
  max-height: calc(100% - var(--o-6));
  overflow-y: auto;
}
.pietro-btn {
  min-width: 40px;
  min-height: 30px;
  padding: 4px 9px;
  border: none;
  background: transparent;
  color: var(--tusz-2);
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), color var(--czas-1) var(--krzywa);
}
.pietro-btn:hover { background: var(--papier-2); color: var(--tusz); }
.pietro-btn[aria-pressed="true"] { background: var(--cynober); color: #fff; font-weight: 700; }

/* --- Układ oferty --------------------------------------------------------- */

.oferta-uklad {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: var(--o-6);
  margin-top: var(--o-5);
}

.oferta-naglowek { margin-bottom: var(--o-4); }
.oferta-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: var(--o-3);
}
.oferta-cena {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  font-weight: 400;
  color: var(--tusz);
}
.oferta-cena-m2 {
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  color: var(--tusz-3);
  margin-top: 3px;
}

.dane-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 1px;
  margin: var(--o-5) 0;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.dana { padding: var(--o-3) var(--o-4); background: var(--papier); }
.dana-etykieta {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-bottom: 5px;
}
.dana-wartosc { font-size: var(--t-md); font-weight: 500; color: var(--tusz); }

.oferta-opis { color: var(--tusz-2); line-height: 1.66; margin-bottom: var(--o-5); max-width: 62ch; }

.cechy-lista { display: flex; flex-wrap: wrap; gap: var(--o-2); }

/* --- Nasłonecznienie ------------------------------------------------------
   Jedyne miejsce w całej aplikacji, gdzie występuje bursztyn. Kolor jest tu
   informacją, nie ozdobą: oznacza światło i nic poza nim.
   -------------------------------------------------------------------------- */

.naslonecznienie {
  margin: var(--o-5) 0;
  padding: var(--o-5);
  background: var(--slonce-mgla);
  border-left: 3px solid var(--slonce);
}

.naslonecznienie-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-4);
  flex-wrap: wrap;
  margin-bottom: var(--o-3);
}
.naslonecznienie h3 { font-size: var(--t-md); font-weight: 600; color: var(--tusz); }

.naslonecznienie-teza,
.naslonecznienie-strata {
  font-size: var(--t-sm);
  color: var(--tusz-2);
  line-height: 1.62;
  max-width: 62ch;
}
.naslonecznienie-teza b, .naslonecznienie-strata b { color: var(--tusz); font-weight: 600; }
.naslonecznienie .liczba { color: var(--slonce-tekst); font-weight: 700; }

/* Zdanie o tym, ile zabiera sąsiedztwo. Odcięte kreską, bo to inna myśl
   niż sama liczba godzin: mówi o przyczynie, nie o wyniku. */
.naslonecznienie-strata {
  margin-top: var(--o-3);
  padding-top: var(--o-3);
  border-top: 1px solid rgba(138, 93, 6, 0.22);
}

.naslonecznienie-stopka {
  margin-top: var(--o-4);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--tusz-3);
  max-width: 68ch;
}

/* --- Przełącznik motywu ---------------------------------------------------
   Trzy stany: system (obie ikony po połowie), jawnie jasny (słońce),
   jawnie ciemny (księżyc). Kliknięcie przewija cykl: system → dark → light. */

.btn-motyw {
  padding: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  position: relative;
}
.btn-motyw svg { width: 18px; height: 18px; }
.ikona-motyw-slonce, .ikona-motyw-ksiezyc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
:root:not([data-theme="dark"]) .ikona-motyw-ksiezyc { opacity: 0; transform: scale(0.7); }
:root[data-theme="dark"] .ikona-motyw-slonce { opacity: 0; transform: scale(0.7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ikona-motyw-slonce { opacity: 0; transform: scale(0.7); }
  :root:not([data-theme="light"]) .ikona-motyw-ksiezyc { opacity: 1; transform: scale(1); }
}

/* --- CTA końcowe pod listą ofert ------------------------------------------
   Klient przewinął 26 kart. Wychodzi z myślą „a mógłbym mieć taki portal?".
   Blok odpowiada od razu bez konieczności szukania w headerze. */

.lista-cta {
  margin: var(--o-6) 0 var(--o-5);
  padding: var(--o-6) var(--o-5);
  background: var(--papier-2);
  border-left: 3px solid var(--cynober);
}
.lista-cta-eyebrow {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cynober-tekst);
  margin-bottom: var(--o-3);
}
.lista-cta h3 {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  color: var(--tusz);
  margin: 0 0 var(--o-3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lista-cta p {
  color: var(--tusz-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin: 0 0 var(--o-3);
  max-width: 52ch;
}
.lista-cta-podpis {
  color: var(--tusz) !important;
  font-weight: 500;
}
.lista-cta-akcje {
  display: flex;
  gap: var(--o-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--o-4);
}

/* --- Zajawka roadmapy w panelu ------------------------------------------- */

.roadmapa {
  margin-top: var(--o-5);
  padding: var(--o-4) var(--o-5);
  background: var(--papier-2);
  border-left: 3px solid var(--petrol);
}
.roadmapa-tytul {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--petrol);
  text-transform: uppercase;
  margin-bottom: var(--o-3);
}
.roadmapa-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--o-3);
}
.roadmapa-lista li {
  padding: var(--o-3);
  background: var(--papier);
  border: 1px solid var(--linia);
  font-size: var(--t-sm);
  color: var(--tusz-2);
  line-height: 1.45;
}
.roadmapa-lista li b { color: var(--tusz); font-weight: 500; display: block; margin-bottom: 3px; }

/* --- Panel agenta na pełnej stronie ---------------------------------------
   Zamiast wciśniętego modalu — cała powierzchnia okna. Nagłówek z powrotem
   do widoku klienta, treść scrolluje się w środku. */

.panel-pelny {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--papier);
  overflow-y: auto;
  overflow-x: hidden;
}
.panel-pelny[hidden] { display: none; }
body.panel-otwarty { overflow: hidden; }

.panel-pelny-naglowek {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--o-4);
  padding: var(--o-4) var(--o-6);
  background: var(--tusz);
  color: var(--papier);
  border-bottom: 1px solid var(--tusz);
}
.panel-pelny-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--papier);
}
.panel-pelny-podtytul {
  font-family: var(--krój-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.66);
  margin-top: 3px;
}
.panel-pelny-akcje {
  grid-row: 1 / span 2;
  display: inline-flex;
  gap: var(--o-2);
  align-items: center;
}
.panel-pelny-akcja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--papier);
  border: 1px solid rgba(244, 240, 232, 0.24);
  font-family: var(--krój-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.panel-pelny-akcja:hover { background: rgba(244, 240, 232, 0.14); border-color: var(--papier); }
.panel-pelny-akcja:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }

.panel-pelny-powrot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: transparent;
  color: var(--papier);
  border: 1px solid rgba(244, 240, 232, 0.32);
  font-family: var(--krój-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.panel-pelny-powrot:hover { background: rgba(244, 240, 232, 0.14); border-color: var(--papier); }
.panel-pelny-powrot:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }

.panel-pelny-tresc {
  padding: var(--o-6);
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .panel-pelny-naglowek { grid-template-columns: 1fr; padding: var(--o-3) var(--o-4); }
  .panel-pelny-powrot { grid-row: auto; justify-self: start; margin-top: var(--o-2); }
  .panel-pelny-tresc { padding: var(--o-4); }
}

.sukces-mail { margin-top: var(--o-3); font-size: var(--t-xs); color: var(--tusz-3); }
.sukces-mail a { color: var(--cynober-tekst); text-decoration: underline; }
.sukces-mail a:hover { color: var(--tusz); }

/* --- Dostępność: pomiń do treści ------------------------------------------
   Link ukryty domyślnie; pokazuje się przy focusie klawiaturą. Pozwala
   użytkownikom klawiatury i czytników ekranu pominąć powtarzający się
   pasek nawigacji i wejść od razu do listy ofert. */

.pomin-do-tresci {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 16px;
  background: var(--tusz);
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
  z-index: 9999;
}
.pomin-do-tresci:focus {
  transform: translateY(0);
  outline: 3px solid var(--cynober-tekst);
  outline-offset: -3px;
}

/* --- Historia cen za m² dzielnicy ----------------------------------------
   Wykres 24-miesięcznego trendu dzielnicy z odniesieniem do ceny konkretnej
   oferty. Kolor gałęzi wskazuje kierunek trendu (petrol = rośnie, piasek =
   stoi/spada). */

.ceny-blok {
  margin: var(--o-5) 0;
  padding: var(--o-5);
  background: rgba(126, 167, 177, 0.06);
  border-left: 3px solid var(--woda);
}
.ceny-blok h3 {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tusz);
  margin: 0 0 var(--o-3);
}
.ceny-teza {
  font-size: var(--t-sm);
  color: var(--tusz-2);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 var(--o-3);
}
.ceny-teza b { color: var(--tusz); font-weight: 600; }
.ceny-teza .liczba { color: var(--petrol); font-weight: 700; }
.ceny-etykieta {
  display: inline-block;
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tusz-3);
  margin-left: var(--o-2);
}
.ceny-wykres {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: var(--o-3) 0;
  background: rgba(244, 240, 232, 0.4);
  border: 1px solid rgba(20, 63, 73, 0.15);
}
.ceny-podpis {
  font-size: var(--t-xs);
  color: var(--tusz-3);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}
.ceny-podpis b { color: var(--tusz); font-weight: 600; }

.woda { color: var(--petrol); }

/* --- Widok z okna ---------------------------------------------------------
   Panorama sprowadzona do słupka i krótkiego zdania. Kolory bezpośrednio
   z palety kartograficznej, żeby czytelnie łączyły się z tym, co widz
   właśnie oglądał na mapie: niebieski Warty, zieleń Cytadeli, papier ulic.
   -------------------------------------------------------------------------- */

.widok-okna {
  margin: var(--o-5) 0;
  padding: var(--o-5);
  background: rgba(20, 63, 73, 0.05);
  border-left: 3px solid var(--petrol);
}
.widok-okna h3 { font-size: var(--t-md); font-weight: 600; color: var(--tusz); margin: 0 0 var(--o-3); }
.widok-okna-tresc { font-size: var(--t-sm); line-height: 1.62; color: var(--tusz-2); max-width: 62ch; }
.widok-okna-tresc b { color: var(--tusz); font-weight: 600; }

.widok-rysunek {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: var(--o-3) 0 var(--o-2);
  border: 1px solid rgba(20, 63, 73, 0.22);
  background: #DBE7EB;
}

.widok-panorama {
  display: flex;
  height: 22px;
  margin: var(--o-3) 0 var(--o-2);
  border: 1px solid rgba(20, 63, 73, 0.22);
  overflow: hidden;
}
.widok-panorama-segment {
  height: 100%;
  transition: flex-grow 0.25s ease;
}
.widok-panorama-segment[data-typ="niebo"]   { background: #DBE7EB; }
.widok-panorama-segment[data-typ="zielen"]  { background: #A6B79A; }
.widok-panorama-segment[data-typ="woda"]    { background: #7EA7B1; }
.widok-panorama-segment[data-typ="budynek"] { background: #C9BEA8; }

.widok-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-3);
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-top: var(--o-2);
}
.widok-legenda span::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid rgba(20, 63, 73, 0.35);
}
.widok-legenda span[data-typ="niebo"]::before   { background: #DBE7EB; }
.widok-legenda span[data-typ="zielen"]::before  { background: #A6B79A; }
.widok-legenda span[data-typ="woda"]::before    { background: #7EA7B1; }
.widok-legenda span[data-typ="budynek"]::before { background: #C9BEA8; }

.widok-podpis {
  margin-top: var(--o-3);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  max-width: 62ch;
}

/* --- Rozkład po kondygnacjach ---------------------------------------------
   Budynek czyta się od góry w dół, więc wiersze idą w tej samej kolejności.
   Kondygnacja oferty jest wyróżniona, bo to ona jest przedmiotem rozmowy.
   -------------------------------------------------------------------------- */

.kondygnacje {
  margin-top: var(--o-4);
  padding-top: var(--o-4);
  border-top: 1px solid rgba(138, 93, 6, 0.22);
}
.kondygnacje[hidden] { display: none; }

.kondygnacja {
  display: grid;
  grid-template-columns: 74px 1fr 54px;
  align-items: center;
  gap: var(--o-3);
  padding: 3px 0;
}
.kondygnacja-nazwa {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  text-align: right;
}
.kondygnacja-tor {
  height: 12px;
  background: rgba(138, 93, 6, 0.12);
  overflow: hidden;
}
.kondygnacja-slupek {
  display: block;
  height: 100%;
  background: var(--slonce);
  transition: width var(--czas-2) var(--krzywa);
}
.kondygnacja-godziny {
  font-size: var(--t-sm);
  color: var(--tusz-2);
  text-align: right;
  white-space: nowrap;
}

.kondygnacja.wybrana .kondygnacja-nazwa { color: var(--tusz); font-weight: 700; }
.kondygnacja.wybrana .kondygnacja-slupek { background: var(--slonce-tekst); }
.kondygnacja.wybrana .kondygnacja-godziny { color: var(--tusz); font-weight: 700; }
/* Znacznik przy kondygnacji oferty: sam kolor nie może nieść tej informacji */
.kondygnacja.wybrana .kondygnacja-nazwa::after {
  content: ' •';
  color: var(--slonce-tekst);
}

.kondygnacje-roznica {
  margin-top: var(--o-3);
  font-size: var(--t-sm);
  color: var(--tusz-2);
  line-height: 1.6;
}
.kondygnacje-roznica b { color: var(--slonce-tekst); font-weight: 700; }

/* --- Przełącznik pory roku ------------------------------------------------ */

.przelacznik-pory {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-zeton);
  background: rgba(251, 249, 245, 0.72);
  border: 1px solid rgba(138, 93, 6, 0.22);
}
.przelacznik-pory button {
  min-height: 30px;
  padding: 4px 12px;
  border: none;
  border-radius: var(--r-zeton);
  background: transparent;
  color: var(--tusz-2);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa), color var(--czas-1) var(--krzywa);
}
.przelacznik-pory button:hover { color: var(--tusz); }
.przelacznik-pory button[aria-pressed="true"] {
  background: var(--slonce-tekst);
  color: var(--papier-czysty);
  font-weight: 600;
}

#slonce-pory { margin: var(--o-2) 0 var(--o-3); }
#slonce-pory .przelacznik-pory { background: transparent; }

/* --- Kalkulator ----------------------------------------------------------- */

.kalkulator { margin: var(--o-5) 0; padding: var(--o-4); background: var(--papier-2); }
.kalkulator-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  margin-bottom: var(--o-3);
}
.kalkulator h3 { font-size: var(--t-md); font-weight: 600; }
.kalkulator-rata {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  color: var(--tusz);
  white-space: nowrap;
}
.kalkulator-pola { display: grid; grid-template-columns: 1fr 1fr; gap: var(--o-3); }
.kalkulator-nota {
  font-size: var(--t-xs);
  color: var(--tusz-3);
  line-height: 1.5;
  margin-top: var(--o-3);
}

/* --- Panel boczny oferty -------------------------------------------------- */

.panel-boczny {
  align-self: start;
  position: sticky;
  top: 92px;
  padding: var(--o-5);
  background: var(--papier-2);
  border: 1px solid var(--linia);
}
.panel-boczny h3 {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  font-weight: 400;
  margin-bottom: var(--o-2);
}
.panel-boczny .podpis {
  font-size: var(--t-sm);
  color: var(--tusz-3);
  line-height: 1.55;
  margin-bottom: var(--o-4);
}

/* ==========================================================================
   FORMULARZE
   ========================================================================== */

.formularz { display: flex; flex-direction: column; gap: var(--o-4); }
.form-blok { display: flex; flex-direction: column; gap: 5px; }
.form-blok label {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tusz-2);
}
.form-blok input,
.form-blok select,
.form-blok textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--o-3);
  background: var(--papier-czysty);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-plaszczyzna);
  color: var(--tusz);
  font-size: var(--t-base);
  transition: border-color var(--czas-1) var(--krzywa);
}
.form-blok input::placeholder,
.form-blok textarea::placeholder { color: var(--tusz-3); }
.form-blok input:focus,
.form-blok select:focus,
.form-blok textarea:focus {
  outline: none;
  border-color: var(--petrol);
  box-shadow: inset 0 0 0 1px var(--petrol);
}
.form-blok textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.form-blok .blad {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--cynober-tekst);
}
.form-blok input[aria-invalid="true"],
.form-blok select[aria-invalid="true"],
.form-blok textarea[aria-invalid="true"] { border-color: var(--cynober-tekst); }

.sukces {
  padding: var(--o-5);
  background: var(--zielen-mgla);
  border-left: 3px solid var(--zielen);
  text-align: left;
}
.sukces-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  margin-bottom: var(--o-2);
  color: var(--zielen-tekst);
}
.sukces p { font-size: var(--t-sm); color: var(--tusz-2); line-height: 1.6; margin-bottom: var(--o-4); }

/* ==========================================================================
   PANEL AGENTA
   ========================================================================== */

.zakladki {
  display: flex;
  gap: var(--o-5);
  border-bottom: 1px solid var(--linia);
  margin-bottom: var(--o-5);
}
.zakladka {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  min-height: 44px;
  padding: var(--o-3) 2px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tusz-3);
  font-size: var(--t-md);
  cursor: pointer;
  transition: color var(--czas-1) var(--krzywa), border-color var(--czas-1) var(--krzywa);
}
.zakladka:hover { color: var(--tusz); }
.zakladka[aria-selected="true"] { color: var(--tusz); border-bottom-color: var(--cynober); font-weight: 500; }
.zakladka .plakietka-licz {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-zeton);
  background: var(--cynober);
  color: #fff;
  font-family: var(--krój-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.panel-uklad { display: grid; grid-template-columns: 348px 1fr; gap: var(--o-6); align-items: start; }

.panel-naglowek {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-bottom: var(--o-3);
}

/* --- Statystyki ----------------------------------------------------------- */

.staty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  margin-bottom: var(--o-5);
  background: var(--linia);
  border: 1px solid var(--linia);
}
.stat { padding: var(--o-3) var(--o-4); background: var(--papier); }
.stat-liczba {
  font-family: var(--krój-display);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--tusz);
}
.stat-etykieta {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-top: 5px;
}

/* --- Lejek sprzedaży (Kanban) --------------------------------------------
   Trzy kolumny stanu z możliwością przeciągania kart. Kolumny mają swój
   akcent (biały/piaskowy/petrol) który jest jednocześnie semantyką — im
   dalej w prawo, tym „cieplejsza" sprzedaż. */

.lejek-sprzedazy { display: flex; flex-direction: column; gap: var(--o-4); }

.lejek-wskazniki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
}
.lejek-wskaznik {
  background: var(--papier);
  padding: var(--o-5) var(--o-5);
}
.lejek-wskaznik-et {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tusz-3);
  text-transform: uppercase;
}
.lejek-wskaznik-v {
  font-family: var(--krój-display);
  font-size: 24px;
  color: var(--tusz);
  font-weight: 500;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}
.lejek-wskaznik-pod {
  font-family: var(--krój-mono);
  font-size: 10px;
  color: var(--tusz-3);
}

.kanban-wartosc {
  grid-column: 1;
  font-family: var(--krój-mono);
  font-size: 12px;
  color: var(--petrol);
  letter-spacing: 0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kanban-akcja {
  grid-column: 1;
  font-family: var(--krój-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-top: 2px;
}
.kanban-pasek {
  height: 3px;
  background: var(--linia);
  margin-bottom: var(--o-3);
  overflow: hidden;
}
.kanban-pasek-slupek {
  height: 100%;
  background: var(--tusz);
  transition: width 0.35s ease;
}
.kanban-kolumna[data-status="wolne"] .kanban-pasek-slupek { background: var(--petrol); }
.kanban-kolumna[data-status="rezerwacja"] .kanban-pasek-slupek { background: var(--slonce-tekst); }
.kanban-kolumna[data-status="sprzedane"] .kanban-pasek-slupek { background: var(--cynober-tekst); }

.kanban-karta-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-2);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--linia);
}
.kanban-karta-opiekun {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kanban-awatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--papier);
  font-family: var(--krój-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kanban-karta-dni {
  font-family: var(--krój-mono);
  font-size: 10px;
  color: var(--tusz-3);
  letter-spacing: 0.08em;
}
.kanban-spark {
  display: block;
  width: 76px;
  height: 22px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: var(--o-4);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--o-3);
}

.kanban-kolumna {
  background: var(--papier-2);
  border: 1px solid var(--linia);
  padding: var(--o-4) var(--o-5);
  min-height: 420px;
  min-width: 0;
}
.kanban-kolumna[data-status="wolne"]      { border-top: 3px solid var(--petrol); }
.kanban-kolumna[data-status="rezerwacja"] { border-top: 3px solid var(--slonce-tekst); }
.kanban-kolumna[data-status="sprzedane"]  { border-top: 3px solid var(--cynober-tekst); }

.kanban-naglowek {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--o-3);
  padding-bottom: var(--o-3);
  border-bottom: 1px solid var(--linia);
  margin-bottom: var(--o-3);
}
.kanban-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--tusz);
  grid-column: 1;
}
.kanban-podpis {
  grid-column: 1;
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tusz-3);
  text-transform: uppercase;
}
.kanban-licznik {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--krój-display);
  font-size: 32px;
  color: var(--tusz-3);
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.kanban-lista {
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
  min-height: 200px;
  padding: 6px 0;
  transition: background 0.15s ease;
}
.kanban-lista.nad {
  background: rgba(20, 63, 73, 0.06);
  outline: 2px dashed rgba(20, 63, 73, 0.35);
  outline-offset: -6px;
}

.kanban-karta {
  background: var(--papier);
  border: 1px solid var(--linia);
  padding: var(--o-3);
  cursor: grab;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kanban-karta:hover {
  border-color: var(--tusz-3);
  box-shadow: 0 3px 10px rgba(23, 33, 31, 0.08);
}
.kanban-karta.ciagniemy { opacity: 0.45; transform: rotate(-1.2deg); }
.kanban-karta:active { cursor: grabbing; }
.kanban-karta:focus-visible { outline: 2px solid var(--cynober-tekst); outline-offset: 2px; }

.kanban-karta-naglowek {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--o-2);
}
.kanban-karta-id {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tusz-3);
}
.kanban-karta-cena {
  font-family: var(--krój-display);
  font-size: var(--t-md);
  color: var(--petrol);
  font-weight: 500;
}
.kanban-karta-tytul {
  font-size: var(--t-sm);
  color: var(--tusz);
  line-height: 1.35;
}
.kanban-karta-meta {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tusz-3);
}

@media (max-width: 900px) {
  .kanban { grid-template-columns: 1fr; }
}

/* --- Tabela ofert --------------------------------------------------------- */

.tabela-owijka { max-height: 460px; overflow: auto; border: 1px solid var(--linia); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th {
  position: sticky;
  top: 0;
  background: var(--papier-2);
  padding: var(--o-3);
  border-bottom: 1px solid var(--linia-mocna);
  font-family: var(--krój-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tusz-3);
  text-align: left;
  white-space: nowrap;
}
.tabela td {
  padding: var(--o-3);
  border-bottom: 1px solid var(--linia-wlos);
  color: var(--tusz-2);
  vertical-align: middle;
}
.tabela tr:hover td { background: var(--papier-2); }
.tabela td.mono { font-family: var(--krój-mono); font-size: var(--t-xs); color: var(--tusz); white-space: nowrap; }
.tabela select.wybor { min-height: 32px; font-size: var(--t-xs); padding: 3px var(--o-2); }
.znacznik-moja {
  font-family: var(--krój-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--petrol);
  display: block;
  margin-top: 2px;
}

/* --- Lejek zapytań -------------------------------------------------------- */

.lejek {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-bottom: var(--o-5);
  background: var(--linia);
  border: 1px solid var(--linia);
}
.lejek-etap {
  padding: var(--o-3);
  background: var(--papier);
  text-align: left;
  border: none;
  cursor: pointer;
  transition: background var(--czas-1) var(--krzywa);
}
.lejek-etap:hover { background: var(--papier-2); }
.lejek-etap[aria-pressed="true"] { background: var(--petrol-mgla); box-shadow: inset 0 -3px 0 var(--petrol); }
.lejek-liczba {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--tusz);
}
.lejek-nazwa {
  font-family: var(--krój-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tusz-3);
  margin-top: 4px;
}

.zapytanie {
  padding: var(--o-4);
  margin-bottom: var(--o-3);
  background: var(--papier);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--petrol-blady);
}
.zapytanie[data-etap="wygrane"] { border-left-color: var(--zielen); }
.zapytanie[data-etap="nowe"] { border-left-color: var(--cynober); }

.zapytanie-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  flex-wrap: wrap;
  margin-bottom: var(--o-2);
}
.zapytanie-osoba { font-size: var(--t-md); font-weight: 500; color: var(--tusz); }
.zapytanie-data { font-family: var(--krój-mono); font-size: var(--t-xs); color: var(--tusz-3); white-space: nowrap; }
.zapytanie-kontakt { font-family: var(--krój-mono); font-size: var(--t-sm); color: var(--petrol); margin-bottom: var(--o-2); }
.zapytanie-oferta { font-family: var(--krój-mono); font-size: var(--t-xs); color: var(--tusz-3); margin-bottom: var(--o-3); }
.zapytanie-tresc {
  padding-left: var(--o-3);
  margin-bottom: var(--o-3);
  border-left: 2px solid var(--linia);
  font-size: var(--t-sm);
  color: var(--tusz-2);
  line-height: 1.6;
}
.zapytanie-akcje { display: flex; gap: var(--o-2); flex-wrap: wrap; align-items: center; }
.zapytanie-zrodlo {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tusz-3);
}

.historia { margin-top: var(--o-5); }
.historia-wpis {
  display: flex;
  gap: var(--o-3);
  padding: var(--o-2) 0;
  border-bottom: 1px solid var(--linia-wlos);
  font-size: var(--t-sm);
  color: var(--tusz-2);
}
.historia-czas {
  flex: 0 0 auto;
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  white-space: nowrap;
  padding-top: 2px;
}

/* ==========================================================================
   NOTA O UPROSZCZENIU
   ========================================================================== */

.nota {
  padding: var(--o-3) var(--o-4);
  margin-bottom: var(--o-5);
  background: var(--papier-2);
  border-left: 3px solid var(--petrol-blady);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--tusz-2);
}
.nota b { color: var(--tusz); font-weight: 600; }

/* Nagłówek kolumny (licznik i nota) jest wcięty tak samo, a karty idą
   od krawędzi do krawędzi jak wiersze tabeli. Wcześniej licznik miał 24 px,
   nota 16 px, a karty zero, co czytało się jak trzy niedokończone decyzje. */
.nota-lista { margin: var(--o-4) var(--o-5) var(--o-5); }

/* ==========================================================================
   WYCIECZKA
   ========================================================================== */

.wycieczka {
  position: fixed;
  z-index: var(--z-wycieczka);
  width: min(390px, calc(100vw - 2rem));
  padding: var(--o-5);
  background: var(--papier-czysty);
  border: 1px solid var(--petrol);
  box-shadow: var(--cien-4);
}
.wycieczka[hidden] { display: none; }

.wycieczka-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o-3);
  margin-bottom: var(--o-3);
}
.wycieczka-krok {
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tusz-3);
}
.wycieczka-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--o-2);
}
.wycieczka p { font-size: var(--t-sm); color: var(--tusz-2); line-height: 1.6; margin-bottom: var(--o-4); }
.wycieczka-akcje { display: flex; align-items: center; gap: var(--o-2); }
.wycieczka-akcje .btn, .wycieczka-akcje .btn-glowny { min-height: 40px; font-size: var(--t-sm); }

.wycieczka-postep {
  display: flex;
  gap: 4px;
  margin-bottom: var(--o-4);
}
.wycieczka-postep span {
  flex: 1;
  height: 2px;
  background: var(--papier-3);
}
.wycieczka-postep span[data-zrobiony="1"] { background: var(--cynober); }

/* Podświetlenie elementu, o którym mówi wycieczka */
.wycieczka-cel {
  position: relative;
  z-index: calc(var(--z-wycieczka) - 1);
  box-shadow: 0 0 0 3px var(--cynober), 0 0 0 9px rgba(210, 69, 44, 0.18);
}

/* ==========================================================================
   ZACHĘTA B2B
   --------------------------------------------------------------------------
   Pojawia się po realnym doświadczeniu, nie na wejściu. Nigdy nie blokuje.
   ========================================================================== */

.zacheta {
  position: fixed;
  right: var(--o-4);
  bottom: var(--o-4);
  z-index: var(--z-arkusz);
  width: min(370px, calc(100vw - 2rem));
  padding: var(--o-4) var(--o-5);
  background: var(--petrol);
  color: var(--papier);
  box-shadow: var(--cien-4);
  transform: translateY(140%);
  transition: transform var(--czas-3) var(--krzywa);
}
.zacheta[data-widoczna="1"] { transform: translateY(0); }

.zacheta-tytul {
  font-family: var(--krój-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: var(--o-2);
}
.zacheta p {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: rgba(244, 240, 232, 0.82);
  margin-bottom: var(--o-4);
}
.zacheta-akcje { display: flex; gap: var(--o-2); align-items: center; }
.zacheta .btn, .zacheta .btn-glowny { min-height: 40px; font-size: var(--t-sm); }
.zacheta-zamknij {
  position: absolute;
  right: 6px; top: 6px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: rgba(244, 240, 232, 0.68);
  font-size: 1rem;
  cursor: pointer;
}
.zacheta-zamknij:hover { color: var(--papier); }

/* ==========================================================================
   KOMUNIKAT
   ========================================================================== */

.komunikat {
  position: fixed;
  left: 50%;
  bottom: var(--o-6);
  transform: translateX(-50%) translateY(14px);
  z-index: var(--z-komunikat);
  max-width: min(460px, calc(100vw - 2rem));
  padding: var(--o-3) var(--o-5);
  background: var(--petrol);
  color: var(--papier);
  font-size: var(--t-sm);
  text-align: center;
  box-shadow: var(--cien-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--czas-2) var(--krzywa), transform var(--czas-2) var(--krzywa);
}
.komunikat[data-widoczny="1"] { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   RESPONSYWNOŚĆ
   ========================================================================== */

@media (max-width: 1180px) {
  .oferta-uklad { grid-template-columns: 1fr 296px; }
  .panel-uklad { grid-template-columns: 300px 1fr; }
}

@media (max-width: 1000px) {
  .tresc-glowna { grid-template-columns: 1fr; }
  .kolumna-lista, .kolumna-przestrzen { grid-row: 1; grid-column: 1; }
  .kolumna-lista { border-right: none; }
  .aplikacja[data-widok="lista"] .kolumna-przestrzen { display: none; }
  .aplikacja[data-widok="mapa"] .kolumna-lista { display: none; }
  .przelacznik-widoku { display: flex; }
  .lista { padding-bottom: 86px; }
  .mapa-nota { display: none; }
  .slonce-panel { bottom: 78px; max-width: none; }
  .mapa-sterowanie { bottom: 78px; }

  .oferta-uklad { grid-template-columns: 1fr; }
  .panel-boczny { position: static; }
  .panel-uklad { grid-template-columns: 1fr; }
  .lejek { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .pasek { height: 56px; padding: 0 var(--o-3); gap: var(--o-2); }
  .marka-podpis { display: none; }
  .etykieta-btn { display: none; }
  .tylko-na-waskim { display: inline; }

  /* Cele dotykowe pełnej wysokości: przy obsłudze kciukiem 38 px to za mało,
     choć formalnie mieści się w WCAG. Szerokość schodzi do ikony, wysokość nie. */
  .pasek .btn { min-height: 44px; min-width: 44px; padding: var(--o-2); }
  .pasek-akcje { gap: 4px; }
  .marka { padding-block: var(--o-2); }
  .zacheta-zamknij { width: 40px; height: 40px; }

  .filtry-rzad { gap: var(--o-4); padding: var(--o-3); flex-wrap: wrap; }
  .filtry-rzad-2 { padding: 0 var(--o-3) var(--o-3); }

  .licznik { padding: var(--o-4) var(--o-3) var(--o-3); }
  .licznik-liczba { font-size: 2.6rem; }

  .karta { grid-template-columns: 108px 1fr; }
  .lista { padding-inline: var(--o-3); }
  .karta-tresc { padding: var(--o-3); }
  .karta-cena { font-size: 1.24rem; }
  .karta-tytul { font-size: var(--t-sm); }
  .karta-meta { gap: var(--o-1) var(--o-3); font-size: var(--t-xs); }

  .przykrywka { padding: 0; }
  .modal { min-height: 100%; border-left: none; border-right: none; }
  .modal-tresc { padding: var(--o-4) var(--o-3); }
  .modal-naglowek { padding: var(--o-3); }

  .dane-siatka { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .kalkulator-pola { grid-template-columns: 1fr; }
  .lejek { grid-template-columns: repeat(2, 1fr); }
  .zakladki { gap: var(--o-4); }

  .wycieczka {
    left: var(--o-3) !important;
    right: var(--o-3);
    bottom: 86px !important;
    top: auto !important;
    width: auto;
  }
  .zacheta { left: var(--o-3); right: var(--o-3); bottom: 86px; width: auto; }
}

/* --- Filtry zwinięte: wąski ekran lub niski ekran w poziomie -------------- */

#btn-filtry { display: none; }

@media (max-width: 760px), (max-height: 620px) and (orientation: landscape) {
  #btn-filtry { display: inline-flex; }

  .filtry[data-rozwiniete="0"] .filtry-rzad,
  .filtry[data-rozwiniete="0"] .filtry-rzad-2 { display: none; }

  .filtry[data-rozwiniete="1"] {
    position: fixed;
    inset: 54px 0 0 0;
    z-index: var(--z-filtry);
    background: var(--papier);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .filtry[data-rozwiniete="1"] .filtry-rzad {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--o-5);
    padding: var(--o-5) var(--o-4);
  }
  .filtry[data-rozwiniete="1"] .filtry-rzad-2 {
    display: flex;
    padding: 0 var(--o-4) var(--o-5);
  }
  .filtry[data-rozwiniete="1"] .suwak,
  .filtry[data-rozwiniete="1"] .rozwijka-panel { width: 100%; }
  .filtry[data-rozwiniete="1"] .rozwijka-przycisk { width: 100%; }

  .filtry-stopka {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--o-2);
    padding: var(--o-3) var(--o-4);
    background: var(--papier-czysty);
    border-top: 1px solid var(--linia);
  }
  .filtry-stopka .btn-glowny { flex: 1; }
  .filtry[data-rozwiniete="0"] .filtry-stopka { display: none; }

  .aplikacja:has(.filtry[data-rozwiniete="1"]) .przelacznik-widoku { display: none; }
}

@media (min-width: 761px) {
  .filtry-stopka { display: none; }
}

/* --- Ekrany bardzo wąskie ------------------------------------------------
   Przy 320 px pasek nie mieści pełnej nazwy i pięciu celów naraz. Skraca się
   nazwa marki, a nie znika żaden przycisk: każdy z nich prowadzi do funkcji,
   którą demonstracja ma pokazać. Plakietka „Demo" zostaje, bo oznaczenie
   projektu pokazowego jest wymogiem, a nie ozdobą. */

@media (max-width: 430px) {
  .marka-nazwa { font-size: 1.05rem; }
  .marka-nazwa .marka-pelna { display: none; }
  .pasek { gap: 6px; padding: 0 var(--o-2); }
  .plakietka-demo { padding: 3px 7px; font-size: 9px; }
  #btn-filtry { min-width: 44px; padding: var(--o-2); }
}

@media (max-width: 360px) {
  #btn-filtry-tekst { display: none; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .pasek { height: 48px; }
  .filtry[data-rozwiniete="1"] { inset: 48px 0 0 0; }
  .licznik { padding: var(--o-3); }
  .licznik-liczba { font-size: 2.1rem; }
}

/* ==========================================================================
   STUDIO
   --------------------------------------------------------------------------
   Pasek nad makieta i panel edycji po prawej. Pasek jest dyskretny, panel
   pojawia sie dopiero po wybraniu bryly, zeby scena mogla oddychac.
   ========================================================================== */

.studio-pasek {
  position: absolute;
  left: 50%;
  top: var(--o-3);
  transform: translateX(-50%);
  z-index: var(--z-mapa-ster);
  display: flex;
  align-items: center;
  gap: var(--o-3);
  padding: 4px 4px 4px var(--o-2);
  border-radius: var(--r-zeton);
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-2);
  backdrop-filter: blur(6px);
}
.studio-pasek[hidden] { display: none; }

.studio-presety {
  display: inline-flex;
  gap: 4px;
  padding-left: var(--o-3);
  border-left: 1px solid var(--linia);
  margin-left: var(--o-3);
}
.studio-presety button {
  border: 1px solid var(--linia);
  background: transparent;
  color: var(--tusz-2);
  font-family: var(--krój-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.studio-presety button:hover { border-color: var(--tusz-2); background: rgba(255,255,255,0.5); }
.studio-presety button[aria-pressed="true"] {
  background: var(--tusz);
  color: var(--papier);
  border-color: var(--tusz);
}
.studio-presety button:focus-visible { outline: 2px solid var(--cynober-tekst); outline-offset: 2px; }
.studio-pasek .btn { min-height: 34px; padding: 4px var(--o-3); font-size: var(--t-sm); }
.studio-pasek .btn[aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--papier);
}
.studio-podpowiedz {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  max-width: 30ch;
}

.studio-panel {
  position: absolute;
  right: var(--o-3);
  top: var(--o-3);
  bottom: var(--o-3);
  z-index: var(--z-arkusz);
  width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linia-mocna);
  box-shadow: var(--cien-3);
  overflow: hidden;
}
.studio-panel[hidden] { display: none; }
.studio-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-3);
  padding: var(--o-3) var(--o-4);
  background: var(--petrol);
  color: var(--papier);
}
.studio-naglowek h2 {
  font-family: var(--krój-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  color: var(--papier);
}
.studio-tresc {
  padding: var(--o-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--o-4);
}

.studio-liczba {
  font-family: var(--krój-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--slonce-tekst);
}
.studio-etykieta {
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  color: var(--tusz-3);
  margin-top: var(--o-1);
}

.studio-pole { display: flex; flex-direction: column; gap: 4px; }
.studio-pole label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tusz-3);
}
.studio-pole label b {
  font-family: var(--krój-mono);
  font-weight: 700;
  color: var(--tusz);
  text-transform: none;
  letter-spacing: 0;
}
.studio-pole input[type=range] {
  width: 100%;
  accent-color: var(--petrol);
}

.studio-wystawa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.studio-wystawa button {
  min-height: 36px;
  padding: 4px;
  border: 1px solid var(--linia);
  background: var(--papier-czysty);
  color: var(--tusz-2);
  font-family: var(--krój-mono);
  font-size: var(--t-xs);
  cursor: pointer;
}
.studio-wystawa button[aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--papier);
  font-weight: 600;
}

.studio-akcje {
  display: flex;
  justify-content: space-between;
  gap: var(--o-2);
  padding-top: var(--o-3);
  border-top: 1px solid var(--linia);
}

.studio-panel .kondygnacje { margin-top: 0; padding-top: 0; border-top: none; }
.studio-panel .kondygnacja { padding: 2px 0; }