/* ==========================================================================
   Strony "Kody pocztowe" (kody.html) i "Katalog TERYT" (teryt.html): style dodatkowe do stil.css.
   Osobny plik zamiast <style>: nagłówki w public/_headers ustawiają style-src 'self' (bez 'unsafe-inline'), więc style wpisane w stronę byłyby zablokowane.
   Zmienne, motywy (light-dark) i klasy bazowe pochodzą ze stil.css; tu tylko to, czego tam nie ma. Zero zewnętrznych fontów i skryptów.
   ========================================================================== */

/* ---------- nawigacja między stronami i przełącznik motywu ---------- */
.k-pasek { flex-wrap: wrap; row-gap: .6rem; }

.k-nawigacja { display: flex; flex-wrap: wrap; gap: .4rem; }
.k-nawigacja__link {
  display: inline-flex; align-items: center;
  min-height: 2.5rem;
  padding: .3rem .95rem;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: color-mix(in srgb, var(--powierzchnia) 70%, transparent);
  color: var(--tekst-2);
  font-size: .92rem; font-weight: 650;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.k-nawigacja__link:hover { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); }
.k-nawigacja__link[aria-current="page"] { border-color: var(--akcent); background: var(--akcent); color: var(--na-akcencie); }

/* ---------- zakładki ---------- */
.k-zakladki {
  display: inline-flex; flex-wrap: wrap; gap: .3rem;
  max-width: 100%;
  padding: .3rem;
  border: 1px solid var(--linia);
  border-radius: 1.1rem;
  background: var(--powierzchnia-2);
}
.k-zakladka {
  min-height: 2.75rem;
  padding: .4rem 1.15rem;
  border: 1.5px solid transparent;
  border-radius: .85rem;
  background: transparent;
  color: var(--tekst-2);
  font-weight: 650; line-height: 1.2;
  transition: background-color .15s, color .15s, border-color .15s;
}
.k-zakladka:hover { color: var(--tekst); }
.k-zakladka[aria-selected="true"] { border-color: var(--obrys); background: var(--powierzchnia); color: var(--tekst); box-shadow: var(--cien-1); }
.k-panel { margin-top: 1.4rem; }
.k-formularze { max-width: 58rem; }

/* ---------- formularze ---------- */
.k-pole-krotkie { max-width: 20rem; }
.k-formularz-siatka { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: 1rem; }
.k-etykieta { display: block; margin: 0 0 .4rem .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.k-wybor { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.k-wybor legend { padding: 0; }
.k-wybor label {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .35rem 1rem;
  border: 1.5px solid var(--obrys); border-radius: 999px;
  background: var(--powierzchnia);
  font-weight: 600; cursor: pointer;
}
.k-wybor input { accent-color: var(--akcent); width: 1.1rem; height: 1.1rem; margin: 0; }
.k-wybor label:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); }
.k-wybor label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.k-pole {
  width: 100%; min-height: 3.2rem;
  padding: .55rem 1rem;
  border: 2px solid var(--obrys); border-radius: 1rem;
  background: var(--powierzchnia); color: var(--tekst);
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.k-pole:focus-visible { border-color: var(--akcent); outline: 3px solid var(--fokus); outline-offset: 2px; }
.k-pole::placeholder { color: var(--tekst-2); opacity: 1; }
.k-pole--maly { min-height: 2.75rem; font-size: 1rem; }
.k-pole[disabled] { opacity: .5; }
.k-podpowiedz { margin-top: .6rem; font-size: .92rem; color: var(--tekst-2); }

/* ---------- komunikaty ---------- */
.k-stan { display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; color: var(--tekst-2); }
.k-stan .kolko { animation: k-obrot .8s linear infinite; }
@keyframes k-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .k-stan .kolko { animation-duration: 2.4s; } }
.k-komunikat {
  display: flex; align-items: flex-start; gap: .65rem;
  margin-top: 1.6rem; padding: .85rem 1rem;
  border: 1px solid var(--st-ramka); border-radius: .95rem;
  background: var(--st-tlo); color: var(--st-tekst);
  line-height: 1.45;
}
.k-komunikat .ikona { margin-top: .1rem; }

/* ---------- wyniki ---------- */
.k-wynik { display: grid; gap: 1.25rem; margin-top: 2rem; }
.k-wynik > .karta { max-width: 74rem; }
.k-kod {
  margin-top: .6rem;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.8rem, 1.6rem + 6vw, 5rem); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums;
}
.k-tytul { margin-top: .55rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.k-podtytul { margin-top: .35rem; color: var(--tekst-2); }
.k-statystyki { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: 1.1rem; }
.k-stat { display: flex; flex-direction: column; gap: .1rem; }
.k-stat__liczba { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.k-stat__opis { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }

.k-msc { padding-top: 1.2rem; margin-top: 1.2rem; border-top: 1px solid var(--linia); }
.k-msc:first-of-type { margin-top: 1.4rem; }
.k-msc__gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; }
.k-msc__nazwa { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.15; overflow-wrap: anywhere; }
.k-msc__liczby { color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.k-msc__opis { margin-top: .2rem; color: var(--tekst-2); font-size: .95rem; }
.k-chipy { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.k-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .65rem; border: 1px solid var(--linia); border-radius: 999px;
  background: var(--powierzchnia-2); color: var(--tekst);
  font-size: .85rem; font-weight: 600; line-height: 1.5;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
a.k-chip:hover { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); }
.k-chip--kod { font-family: var(--font-mono); font-size: .82rem; letter-spacing: -.01em; }
.k-chip--akcent { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); }

.k-ulice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 2rem; margin-top: .9rem; }
.k-ulica { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .8rem; padding: .5rem 0 .55rem; border-bottom: 1px solid var(--linia); }
.k-ulica__nazwa { min-width: 0; overflow-wrap: anywhere; }
a.k-ulica__nazwa { color: var(--tekst); text-decoration: none; }
a.k-ulica__nazwa:hover { color: var(--akcent-tekst); text-decoration: underline; text-underline-offset: .2em; }
.k-ulica__liczba { color: var(--tekst-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-ulica__pasek { grid-column: 1 / -1; height: .26rem; border-radius: 999px; background: var(--powierzchnia-3); overflow: hidden; }
.k-ulica__pasek::after { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--akcent); }
.k-wiecej { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; color: var(--tekst-2); font-size: .94rem; }

/* kody ulicy: wiersze z zakresami numerów */
.k-kody { display: grid; gap: .6rem; margin-top: 1.2rem; }
.k-kod-wiersz {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .5rem 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--linia); border-radius: 1rem; background: var(--powierzchnia-2);
}
.k-kod-wiersz[data-trafiony="tak"] { border-color: var(--st-ok-ramka); background: var(--st-ok-tlo); box-shadow: 0 0 0 2px var(--st-ok-ramka); }
.k-kod-wiersz__kod { font-family: var(--font-serif); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.k-kod-wiersz__liczba { color: var(--tekst-2); font-size: .9rem; }
.k-zakresy { display: flex; flex-wrap: wrap; gap: .35rem; }
.k-zakres {
  display: inline-block; padding: .1rem .6rem;
  border: 1px solid var(--obrys); border-radius: .6rem; background: var(--powierzchnia);
  font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.k-zakres small { color: var(--tekst-2); font-size: .8em; }
@media (max-width: 34rem) { .k-kod-wiersz { grid-template-columns: minmax(0, 1fr); } }
.k-sprawdz { margin-top: 1.3rem; padding: 1rem 1.1rem; border: 1px dashed var(--obrys); border-radius: 1rem; }
.k-sprawdz__rzad { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.k-sprawdz__rzad .k-pole { width: 9rem; }
.k-sprawdz__wynik { font-weight: 650; }
.k-sprawdz__wynik--ok { color: var(--st-ok-tekst); }
.k-sprawdz__wynik--brak { color: var(--st-pyt-tekst); }

/* ---------- przeglądanie TERYT ---------- */
.k-okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: 0 0 1.4rem; font-size: .96rem; }
.k-okruszki a { color: var(--akcent-tekst); text-decoration: underline; text-underline-offset: .2em; }
.k-okruszki a:hover { color: var(--akcent-hover); }
.k-okruszki__sep { color: var(--tekst-2); }
.k-okruszki [aria-current] { font-weight: 700; }

.k-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.k-kafel {
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 5.5rem; padding: 1rem 1.15rem;
  border: 1px solid var(--linia); border-radius: 1.15rem; background: var(--powierzchnia);
  box-shadow: var(--cien-1); color: inherit; text-decoration: none;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.k-kafel:hover { border-color: var(--akcent); background: var(--akcent-tlo); transform: translateY(-1px); }
.k-kafel__nazwa { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.15; overflow-wrap: anywhere; }
.k-kafel__opis { color: var(--tekst-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.k-kafel__kod { align-self: flex-start; font-family: var(--font-mono); font-size: .78rem; color: var(--tekst-2); }

.k-lista { overflow: hidden; border: 1px solid var(--linia); border-radius: 1.2rem; background: var(--powierzchnia); box-shadow: var(--cien-1); }
.k-wiersz {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem 1rem;
  padding: .75rem 1.15rem; border-top: 1px solid var(--linia);
  color: inherit; text-decoration: none;
}
.k-wiersz:first-child { border-top: 0; }
a.k-wiersz:hover { background: var(--akcent-tlo); }
.k-wiersz__glowna { min-width: 0; display: flex; flex-direction: column; }
.k-wiersz__nazwa { font-weight: 600; overflow-wrap: anywhere; }
.k-wiersz__opis { color: var(--tekst-2); font-size: .88rem; }
.k-wiersz__liczby { color: var(--tekst-2); font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.k-wiersz__chipy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
@media (max-width: 34rem) { .k-wiersz { grid-template-columns: minmax(0, 1fr); } .k-wiersz__liczby { text-align: left; } }

.k-pasek-narzedzi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.2rem; margin: 1.1rem 0 .9rem; }
.k-pasek-narzedzi .k-pole { max-width: 22rem; }
.k-strony { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; color: var(--tekst-2); font-size: .94rem; }

.k-karta-dl { margin-top: 1.2rem; border-top: 1px solid var(--linia); }
.k-karta-dl a { color: var(--akcent-tekst); text-underline-offset: .2em; }
.k-karta-dl a:hover { color: var(--akcent-hover); }
.k-sekcja { margin-top: 2.4rem; }
.k-karta-dl .skladnik dt { flex-basis: 12rem; }
@media (max-width: 34rem) { .k-karta-dl .skladnik { flex-direction: column; gap: .1rem; } .k-karta-dl .skladnik dt { flex-basis: auto; } }

.k-json { margin-top: 1.2rem; }
.k-json summary { cursor: pointer; font-weight: 650; color: var(--akcent-tekst); min-height: 2.2rem; display: flex; align-items: center; }
.k-json pre {
  margin: .6rem 0 0; padding: .9rem 1rem; max-height: 22rem; overflow: auto;
  border: 1px solid var(--linia); border-radius: .9rem; background: var(--powierzchnia-2);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- dopasowania na wąskich ekranach ---------- */
@media (max-width: 40rem) {
  .k-zakladki { display: grid; grid-template-columns: 1fr; width: 100%; }
  .k-zakladka { text-align: center; }
  .k-nawigacja__link { min-height: 2.75rem; }
  .k-kafel { min-height: 4.8rem; }
}