/* Sołectwa i osiedla gminy — mapa wektorowa i wykaz jednostek. */

.obsz__naglowek { margin-bottom: var(--s4); }
.obsz__lead { color: var(--tekst-przygaszony); max-width: 68ch; }

/* --- Mapa ---------------------------------------------------------------- */

.obsz__plotno {
  width: 100%;
  height: auto;
  display: block;
  background: var(--tlo-karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
}

.obsz__granica {
  fill: none;
  stroke: var(--tekst);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* JEDEN kolor na wszystkie obszary — decyzja z 16.08.2026.
   Dwa odcienie sugerowały, że podział osiedle/sołectwo jest ważniejszy niż
   sam obszar, a na mapie chodzi o „gdzie to jest”. Rodzaj jednostki i tak
   stoi w tabeli pod spodem. Kolory wpisane wprost, nie ze zmiennych:
   w motywie ciemnym mapa ma zostać czytelna, a nie zrobić się granatowa
   na granatowym. */
.obsz__ksztalt {
  stroke-width: 1;
  cursor: pointer;
  transition: fill .15s ease;
}

.obsz__ksztalt--osiedle,
.obsz__ksztalt--solectwo { fill: #d9ead0; stroke: #4a7c3f; }
.obsz__ksztalt:hover     { fill: #f6c98a; }

/* Wybrany poznaje się po WYPEŁNIENIU i po grubszej obwódce — samo wypełnienie
   ginie przy wysokim kontraście i na wydruku czarno-białym. */
.obsz__ksztalt--wybrany  { fill: #ef9d1c; stroke: #8a5200; stroke-width: 3; }

/* Obrys wokół liter (paint-order) zamiast prostokąta pod nimi: napis czyta się
   nad każdym kolorem wypełnienia, a nie zasłania kształtu. */
.obsz__podpis {
  font-size: 9.5px;
  font-weight: 600;
  text-anchor: middle;
  fill: #1b2b3d;
  pointer-events: none;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
}

/* Powierzchnia mniejsza i bledsza od nazwy - ma byc do odczytania,
   ale nie konkurowac z nazwa o uwage. */
.obsz__podpis-ha {
  font-size: 8px;
  font-weight: 400;
  fill: #46586b;
}

.obsz__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: var(--s3) 0 var(--s5);
  font-size: 14px;
  color: var(--tekst-przygaszony);
}

.obsz__probka {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  vertical-align: -3px;
  margin-right: 6px;
}

.obsz__probka--obszar   { background: #d9ead0; border: 1px solid #4a7c3f; }
.obsz__probka--wybrany  { background: #ef9d1c; border: 1px solid #8a5200; }

/* --- Wykaz --------------------------------------------------------------- */

.obsz__uwaga {
  font-size: 14px;
  color: var(--tekst-przygaszony);
  max-width: 68ch;
  margin-bottom: var(--s3);
}

/* Poziome przewijanie zamiast łamania kolumn: pięć kolumn z nazwiskami nie
   zmieści się na telefonie, a zwężone do granic czytelności są gorsze
   od przesuwanych. */
.obsz__tabela-otoczka {
  overflow-x: auto;
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
}

.obsz__tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--tlo-karta);
}

.obsz__tabela th,
.obsz__tabela td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--obwodka);
  font-size: 15px;
  white-space: nowrap;
}

.obsz__tabela th {
  background: var(--akcent-tlo);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--akcent);
}

.obsz__tabela tr:last-child td { border-bottom: 0; }

.obsz__liczba { text-align: right; font-variant-numeric: tabular-nums; }

.obsz__tabela a { color: var(--akcent); text-decoration: none; }
.obsz__tabela a:hover,
.obsz__tabela a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Wiersz wybranego obszaru: tło ORAZ pasek z lewej. Samo tło ginie
   przy wysokim kontraście. */
.obsz__wiersz--wybrany td {
  background: #fff6e6;
  font-weight: var(--weight-semi-bold);
}

.obsz__wiersz--wybrany td:first-child { box-shadow: inset 4px 0 0 #ef9d1c; }

.obsz__zrodlo,
.obsz__brak {
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--tekst-przygaszony);
  max-width: 78ch;
}

/* Suma nad mapą. Pasek z akcentem, bo to pierwsza liczba, której szuka się
   na tej stronie - a w tabeli trzeba by ją składać z 36 wierszy. */
.obsz__suma {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3);
  border-radius: var(--r-s);
  background-color: var(--akcent-tlo);
  border-left: 4px solid var(--akcent);
  font-size: 15px;
  max-width: 68ch;
}