/*
  ICTR, wersja 3: agencja SEO w układzie wyszukiwarki i map.
  Kolory, odstępy i ruch jak w interfejsach wyszukiwarki: biel, szare linie, niebieskie odnośniki,
  karty z cieniem, pinezki i trasy jak na mapach. Bez znaków towarowych Google.

  Zasady:
  - bez stylów w atrybutach HTML (CSP style-src 'self'); skrypt zmienia style tylko przez CSSOM,
  - stan końcowy każdej animacji jest w znacznikach, stan początkowy ustawia skrypt
    (albo @media (scripting: enabled) dla elementów widocznych od razu po wejściu),
  - prefers-reduced-motion: bez animacji, od razu stan końcowy.
*/

/* ---------------------------------------------------------------- czcionka */

@font-face {
  font-family: "ICTR Sans";
  src: url("/assets/fonts/sans-pl.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Arial z metrykami dopasowanymi do czcionki strony: tekst nie skacze, gdy czcionka się doładuje */
@font-face {
  font-family: "ICTR Sans Zapas";
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.2%;
  ascent-override: 95.5%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- zmienne */

:root {
  --font: "ICTR Sans", "ICTR Sans Zapas", Arial, Helvetica, sans-serif;

  --tekst: #202124;
  --tekst-2: #3c4043;
  --tekst-3: #4d5156;
  --tekst-4: #5f6368;
  --tekst-5: #70757a;
  --link: #1a0dab;
  --link-odw: #681da8;

  --niebieski: #1a73e8;
  --niebieski-2: #1967d2;
  --niebieski-3: #174ea6;
  --niebieski-tlo: #e8f0fe;
  --niebieski-jasny: #d2e3fc;
  --zielony: #188038;
  --zielony-2: #34a853;
  --zielony-tlo: #e6f4ea;
  --czerwony: #d93025;
  --czerwony-2: #ea4335;
  --czerwony-tlo: #fce8e6;
  --zolty: #fbbc04;
  --zolty-tlo: #fef7e0;
  --pomaranczowy: #b06000;
  --fiolet: #5e35b1;

  --ramka: #dadce0;
  --ramka-2: #e8eaed;
  --tlo-szare: #f1f3f4;
  --tlo-szare-2: #f8f9fa;
  --tlo-stopki: #f2f2f2;
  --lad: #eef0f2;

  --cien-1: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --cien-2: 0 1px 2px rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
  --cien-3: 0 4px 8px 3px rgba(60, 64, 67, .15), 0 1px 3px rgba(60, 64, 67, .3);
  --cien-szukaj: 0 1px 6px rgba(32, 33, 36, .28);

  --e-std: cubic-bezier(.2, 0, 0, 1);
  --e-wej: cubic-bezier(.05, .7, .1, 1);
  --e-wyj: cubic-bezier(.3, 0, .8, .15);

  /* siatka jak strona wyników: kolumna wyników, odstęp, kolumna boczna; lewy margines równy polu wyszukiwania */
  --glowna: 652px;
  --bok: 372px;
  --kol-odstep: 48px;
  --lewa: 16px;
  --prawa: 16px;
  --pasek-gora-h: 60px;
  --zakladki-h: 44px;
  --pasek-h: 104px;
  /* wysokość widocznej części paska; skrypt zmniejsza ją, gdy zakładki chowają się przy przewijaniu */
  --pasek-wid: var(--pasek-h);
}

@media (min-width: 600px) {
  :root { --lewa: 24px; --prawa: 24px; }
}

@media (min-width: 960px) {
  :root {
    --pasek-gora-h: 72px;
    --zakladki-h: 48px;
    --pasek-h: 120px;
    --lewa: 32px;
    --bok: 300px;
    --kol-odstep: 40px;
  }
}

/* od 1200 px lewy margines mieści logo, więc pole wyszukiwania i kolumna wyników zaczynają się w jednej linii */
@media (min-width: 1200px) {
  :root {
    --bok: 372px;
    --kol-odstep: 64px;
    --lewa: clamp(232px, calc(100vw - 1136px), 260px);
  }
}

@media (min-width: 1440px) {
  :root { --bok: 400px; --kol-odstep: 72px; --lewa: 260px; }
}

/* ---------------------------------------------------------------- podstawy */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

/* odstęp pod przyklejonym paskiem przy skoku do kotwicy i przy fokusie w treści; jako scroll-padding
   na html przewijał stronę w górę za każdym razem, gdy fokus trafiał do samego paska */
main, main :is([id], a, button, input, select, textarea, summary, [tabindex]),
.stopka :is(a, button) { scroll-margin-top: calc(var(--pasek-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst-2);
  background: #fff;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  color: var(--tekst);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

h2 { font-size: 24px; margin: 0 0 16px; letter-spacing: -.005em; }
h3 { font-size: 18px; margin: 28px 0 10px; }
p { margin: 0 0 16px; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--tekst); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26, 13, 171, .35); }
a:visited { color: var(--link-odw); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--niebieski); outline-offset: 2px; border-radius: 4px; }

img, svg, video { max-width: 100%; }
svg.ikona { width: 1em; height: 1em; flex: none; fill: currentColor; }

::selection { background: var(--niebieski-jasny); color: var(--tekst); }

.wizualnie-ukryte {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pomin {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--niebieski); color: #fff; font-weight: 500;
  padding: 10px 18px; border-radius: 20px; text-decoration: none;
  transition: top .2s var(--e-std);
}
.pomin:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------- przyciski */

.przycisk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 20px;
  background: var(--niebieski); color: #fff;
  font: 500 14px/1.2 var(--font); letter-spacing: .01em;
  text-decoration: none; text-align: center;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: background-color .2s var(--e-std), box-shadow .2s var(--e-std), border-color .2s var(--e-std), color .2s;
}
.przycisk:visited { color: #fff; }
.przycisk:hover { background: #1b66c9; box-shadow: var(--cien-1); color: #fff; }
.przycisk:active { background: #185abc; }
.przycisk .ikona { width: 18px; height: 18px; }

.przycisk-drugi, .przycisk-drugi:visited { background: #fff; color: var(--niebieski-2); border-color: var(--ramka); }
.przycisk-drugi:hover { background: #f6fafe; color: var(--niebieski-3); border-color: var(--niebieski-jasny); box-shadow: none; }
.przycisk-drugi:active { background: #e8f0fe; }

.przycisk-maly { min-height: 36px; padding: 0 16px; }

/* przyciski jak pod polem wyszukiwania na stronie startowej wyszukiwarki */
.przycisk-szary, .przycisk-szary:visited {
  min-height: 36px; padding: 0 16px; border-radius: 8px;
  background: var(--tlo-szare-2); border-color: var(--tlo-szare-2); color: var(--tekst-2);
  font-weight: 400;
}
.przycisk-szary:hover { background: var(--tlo-szare-2); border-color: var(--ramka); color: var(--tekst); box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.przycisk-szary:active { background: var(--tlo-szare); }

.akcje { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }

/* fala po kliknięciu (dodaje ją skrypt) */
.fala {
  position: absolute; z-index: -1;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  transform: scale(0);
  opacity: .2;
  animation: fala .6s var(--e-std) forwards;
}
@keyframes fala {
  60% { opacity: .14; }
  to { transform: scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------- pasek */

.pasek {
  position: sticky; top: 0; z-index: 50;
  pointer-events: none;
}
.pasek > * { pointer-events: auto; }

.pasek-gora {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo szukaj akcje";
  align-items: center; column-gap: 12px;
  height: var(--pasek-gora-h);
  padding: 0 12px 0 var(--lewa);
  background: #fff;
  view-transition-name: pasek-gora;
}

@media (min-width: 1200px) {
  .pasek-gora {
    grid-template-columns: minmax(max-content, calc(var(--lewa) - 24px)) minmax(0, 690px) 1fr;
    padding-left: 24px;
    column-gap: 0;
  }
}

.logo {
  grid-area: logo;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tekst); text-decoration: none;
  min-height: 44px; padding-right: 16px;
  transition: opacity .25s var(--e-std), visibility 0s linear;
}
.logo:visited { color: var(--tekst); }
.logo-znak {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--niebieski);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px rgba(26, 115, 232, .2), 0 1px 3px rgba(60, 64, 67, .45);
  margin: 0 3px;
}
.logo-napis { font-size: 22px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.logo-opis { font-size: 14px; color: var(--tekst-4); line-height: 1; padding-top: 3px; white-space: nowrap; }

@media (max-width: 1199px) {
  .pasek .logo-opis { display: none; }
}

/* pole wyszukiwania */

.szukaj { grid-area: szukaj; position: relative; min-width: 0; }

.szukaj-pole {
  display: flex; align-items: center;
  height: 44px;
  padding: 0 4px 0 14px;
  background: #fff;
  border: 1px solid #dfe1e5; border-radius: 22px;
  transition: box-shadow .2s var(--e-std), border-color .2s var(--e-std), border-radius .15s;
}
.szukaj-pole:hover, .szukaj-pole:focus-within { border-color: transparent; box-shadow: var(--cien-szukaj); }
.szukaj-pole > .ikona { width: 20px; height: 20px; color: #9aa0a6; }

.szukaj input {
  flex: 1; min-width: 0; height: 100%;
  margin: 0; padding: 0 10px 0 12px;
  border: 0; outline: 0; background: transparent;
  font: 16px var(--font); color: var(--tekst);
  text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
}
.szukaj input::placeholder { color: var(--tekst-5); opacity: 1; }
.szukaj input::-webkit-search-cancel-button, .szukaj input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.szukaj button {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--tekst-4);
  cursor: pointer;
}
.szukaj button .ikona { width: 20px; height: 20px; }
.szukaj button:hover { background: rgba(60, 64, 67, .08); }
.szukaj-wyczysc { position: relative; margin-right: 6px !important; }
.szukaj-wyczysc::after {
  content: ""; position: absolute; right: -4px; top: 10px; bottom: 10px;
  border-right: 1px solid #dadce0;
}
.szukaj-wyczysc[hidden] { display: none !important; }
.szukaj-wyslij { color: var(--niebieski) !important; }

/* podpowiedzi pod polem (lista tworzona przez skrypt) */
.szukaj.otwarte .szukaj-pole { border-color: transparent; border-radius: 22px 22px 0 0; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.podpowiedzi {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 6;
  margin: 0; padding: 0 0 10px;
  list-style: none;
  background: #fff;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 4px 6px rgba(32, 33, 36, .28);
  overflow: hidden;
  clip-path: inset(0 -10px -10px -10px);
}
.podpowiedzi::before { content: ""; display: block; margin: 0 16px 8px; border-top: 1px solid var(--ramka-2); }
.podpowiedz {
  display: flex; align-items: center; gap: 14px;
  min-height: 42px; padding: 6px 20px 6px 18px;
  font-size: 16px; line-height: 1.3; color: var(--tekst);
  cursor: pointer;
}
.podpowiedz > .ikona { width: 18px; height: 18px; color: #9aa0a6; }
.podpowiedz[aria-selected="true"], .podpowiedz:hover { background: #f1f3f4; }
.podpowiedz-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podpowiedz-tekst b { font-weight: 600; }
.podpowiedz-rodzaj { flex: none; font-size: 12px; color: var(--tekst-5); }

/* telefon: otwarte pole w pasku rozciąga się na całą szerokość, jak wyszukiwarka w aplikacji mobilnej */
@media (max-width: 599px) {
  .pasek .szukaj.otwarte {
    /* grid-area: auto, żeby blokiem odniesienia był cały pasek, a nie komórka siatki */
    grid-area: auto;
    position: absolute; z-index: 7;
    left: 8px; right: 8px; top: calc((var(--pasek-gora-h) - 44px) / 2);
  }
}

/* akcje w pasku */

.pasek-akcje { grid-area: akcje; justify-self: end; display: flex; align-items: center; gap: 4px; }

.uslugi-przycisk {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 9px;
  border-radius: 20px;
  color: var(--tekst-4); text-decoration: none;
  font-size: 14px; font-weight: 500;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
}
.uslugi-przycisk:visited { color: var(--tekst-4); }
.uslugi-przycisk .ikona { width: 22px; height: 22px; }
.uslugi-przycisk:hover { background: rgba(60, 64, 67, .08); color: var(--tekst); }
.uslugi-przycisk[aria-expanded="true"] { background: rgba(60, 64, 67, .12); color: var(--tekst); }

.pasek-cta { margin-left: 4px; }
.pasek-cta .ikona { display: none; }

@media (max-width: 959px) {
  .uslugi-przycisk { padding: 0; width: 40px; justify-content: center; }
  .uslugi-przycisk-napis {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 599px) {
  .pasek-gora { column-gap: 8px; padding-right: 8px; }
  .logo { padding-right: 0; gap: 8px; }
  .logo-napis { font-size: 20px; }
  .szukaj-pole { height: 42px; padding-left: 4px; background: var(--tlo-szare); border-color: transparent; }
  .szukaj-pole:focus-within { background: #fff; }
  .szukaj-pole > .ikona { display: none; }
  .szukaj input { padding-left: 12px; }
  .szukaj-wyczysc { margin-right: 2px !important; }
  .szukaj-wyczysc::after { display: none; }

  /* przycisk wyceny jako pływający przycisk w rogu ekranu; przy przewijaniu w dół chowa napis */
  .pasek-cta, .pasek-cta:visited {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    min-height: 56px; margin: 0; padding: 0 20px 0 16px; gap: 12px;
    border-radius: 16px;
    background: #d3e3fd; color: #041e49;
    font-size: 15px;
    box-shadow: var(--cien-3);
    transition: padding .25s var(--e-std), transform .3s var(--e-std), opacity .2s, gap .25s var(--e-std);
  }
  .pasek-cta:hover { background: #c2d7fb; color: #041e49; box-shadow: var(--cien-3); }
  .pasek-cta .ikona { display: block; width: 24px; height: 24px; }
  .pasek-cta span { display: inline-block; max-width: 120px; overflow: hidden; white-space: nowrap; transition: max-width .25s var(--e-std), opacity .2s; }
  .pasek.w-dol .pasek-cta { padding: 0 16px; gap: 0; }
  .pasek.w-dol .pasek-cta span { max-width: 0; opacity: 0; }
  .pasek-cta.poza { transform: translateY(96px); opacity: 0; pointer-events: none; }
}

/* panel usług (jak panel aplikacji) */

.uslugi-panel {
  position: absolute; top: calc(100% - 6px); right: 12px; z-index: 5;
  width: 440px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;
  padding: 14px 12px 12px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--cien-3);
  transform-origin: calc(100% - 60px) 0;
}
.uslugi-panel[hidden] { display: none; }
.uslugi-panel.otwarty { animation: panel-wejscie .22s var(--e-wej); }
@keyframes panel-wejscie {
  from { opacity: 0; transform: scale(.9); }
}
.uslugi-grupa + .uslugi-grupa { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ramka-2); }
.uslugi-tytul { margin: 0 10px 4px; font-size: 13px; font-weight: 500; color: var(--tekst-4); }
.uslugi-grupa ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.uslugi-grupa a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 2px 9px;
  border-radius: 14px;
  color: var(--tekst-2); text-decoration: none; text-align: center;
  font-size: 12px; line-height: 1.25;
  hyphens: auto;
  position: relative; overflow: hidden; isolation: isolate;
}
.uslugi-grupa a:hover { background: rgba(26, 115, 232, .06); }
.uslugi-grupa a[aria-current] { background: var(--niebieski-tlo); }
.uslugi-ikona {
  width: 22px; height: 22px; padding: 12px; box-sizing: content-box;
  border-radius: 50%;
  background: var(--niebieski-tlo); color: var(--niebieski-2);
  fill: currentColor;
}
.uslugi-grupa:nth-child(2) .uslugi-ikona { background: var(--czerwony-tlo); color: #c5221f; }
.uslugi-grupa:nth-child(3) .uslugi-ikona { background: var(--zielony-tlo); color: #137333; }
.uslugi-nazwa { display: block; max-width: 96px; }
.uslugi-dol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ramka-2); }
.uslugi-dol a { padding: 8px 14px; border-radius: 18px; color: var(--niebieski-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.uslugi-dol a:hover { background: rgba(26, 115, 232, .08); }

@media (max-width: 599px) {
  .uslugi-panel { position: fixed; top: calc(var(--pasek-gora-h) - 4px); left: 8px; right: 8px; width: auto; padding: 12px 6px 10px; transform-origin: calc(100% - 28px) 0; }
  .uslugi-grupa a { padding-left: 0; padding-right: 0; font-size: 11.5px; }
}

/* zakładki pod paskiem */

.zakladki {
  position: relative; z-index: 2;
  height: var(--zakladki-h);
  padding: 0 var(--prawa) 0 var(--lewa);
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  transition: transform .3s var(--e-std), box-shadow .2s, visibility 0s linear;
}
.zakladki-lista {
  position: relative;
  display: flex; gap: 2px;
  height: 100%;
  margin: 0 -12px; padding: 0;
  list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.zakladki-lista::-webkit-scrollbar { display: none; }
.zakladki-lista > li { flex: none; }
.zakladka {
  position: relative;
  display: flex; align-items: center;
  height: 100%; padding: 0 12px;
  color: var(--tekst-4); text-decoration: none;
  font-size: 14px; white-space: nowrap;
  transition: color .2s;
}
.zakladka:visited { color: var(--tekst-4); }
.zakladka:hover { color: var(--tekst); }
/* lista zakładek przycina wszystko poza sobą, więc obwódka fokusu idzie do środka */
.zakladka:focus-visible { outline-offset: -4px; }
.zakladka.aktywna, .zakladka.aktywna:visited { color: var(--niebieski); font-weight: 500; }
.zakladka.aktywna::after, .zakladki-wskaznik {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--niebieski);
}
.zakladki-wskaznik {
  left: 0; right: auto; width: 0;
  transition: transform .35s var(--e-std), width .35s var(--e-std), opacity .2s;
}
.zakladki-ruch .zakladka.aktywna::after { display: none; }

.postep {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 4;
  height: 2px;
  pointer-events: none !important;
  transition: transform .3s var(--e-std);
}
/* na stronie głównej miejsce w tekście pokazują zakładki, pasek postępu byłby powtórzeniem */
.strona-start .postep { display: none; }
.postep-pasek {
  display: block; height: 100%;
  background: var(--niebieski);
  transform-origin: 0 50%;
  transform: scaleX(var(--postep, 0));
}

/* przewijanie: cień pod paskiem, zakładki chowają się przy ruchu w dół */
.pasek.przewiniety .zakladki { box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }
.pasek.zwiniety .zakladki, .pasek.zwiniety .postep { transform: translateY(calc(-1 * var(--zakladki-h))); }
.pasek.zwiniety .zakladki { visibility: hidden; transition: transform .3s var(--e-std), box-shadow .2s, visibility 0s linear .3s; }
/* po schowaniu zakładek cień przechodzi na górny pasek */
.pasek-gora { transition: box-shadow .2s .1s; }
.pasek.zwiniety .pasek-gora { box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }

/* strona główna: pasek jak na stronie startowej wyszukiwarki; logo, pole i zakładki
   pojawiają się, gdy duże pole z pierwszego ekranu schowa się pod paskiem */
@media (scripting: enabled) {
  .strona-start .pasek:not(.zadokowany) .logo,
  .strona-start .pasek:not(.zadokowany) .szukaj {
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--e-std), visibility 0s linear .2s;
  }
  .strona-start .pasek:not(.zadokowany) .zakladki {
    transform: translateY(calc(-1 * var(--zakladki-h))); visibility: hidden;
    transition: transform .3s var(--e-std), visibility 0s linear .3s;
  }
  .strona-start .pasek:not(.zadokowany) .postep { transform: translateY(calc(-1 * var(--zakladki-h))); }
}

/* ---------------------------------------------------------------- strona główna: pierwszy ekran */

.start {
  position: relative;
  display: grid; place-items: center;
  min-height: calc(100svh - var(--pasek-gora-h));
  padding: 32px 16px 88px;
  text-align: center;
}
.start-wnetrze { width: min(100%, 720px); }
.start h1 { margin: 0 0 32px; }
.h1-glowny {
  display: block;
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.h1-dopisek {
  display: block;
  margin-top: 16px;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 400;
  color: var(--tekst-4);
  letter-spacing: 0;
}

.szukaj-duze { width: min(100%, 584px); margin: 0 auto; text-align: left; }
.szukaj-duze .szukaj-pole { height: 48px; border-radius: 24px; padding-left: 16px; }
.szukaj-duze.otwarte .szukaj-pole { border-radius: 24px 24px 0 0; }
.szukaj-duze .podpowiedzi { border-radius: 0 0 24px 24px; }
.szukaj-duze input { font-size: 16px; }

.start-akcje { justify-content: center; margin-top: 28px; }
.start .wstep { max-width: 620px; margin: 36px auto 0; font-size: 15px; line-height: 1.65; color: var(--tekst-3); }
.dopisek-maly { margin: 18px auto 0; font-size: 13px; color: var(--tekst-4); }

.start-dalej {
  position: absolute; left: 50%; bottom: 20px;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -22px;
  border-radius: 50%;
  color: var(--tekst-4);
  transition: background-color .2s;
}
.start-dalej .ikona { width: 26px; height: 26px; }
.start-dalej:hover { background: rgba(60, 64, 67, .08); color: var(--tekst); }

@media (max-width: 599px) {
  .start { min-height: auto; padding: 48px 16px 72px; }
  .start-akcje .przycisk { flex: 1 1 140px; }
  .start-dalej { display: none; }
}

/* ---------------------------------------------------------------- układ wyników: sekcje strony głównej */

.serp-sekcja {
  display: grid;
  grid-template-columns: minmax(0, var(--glowna)) minmax(0, var(--bok));
  grid-template-rows: auto 1fr;
  grid-template-areas: "tytul bok" "glowna bok";
  column-gap: var(--kol-odstep);
  padding: 56px var(--prawa) 16px var(--lewa);
}
.serp-sekcja > h2 { grid-area: tytul; font-size: 26px; margin-bottom: 18px; }
.serp-glowna { grid-area: glowna; min-width: 0; }
.serp-bok { grid-area: bok; min-width: 0; }
/* każdy panel stoi pod paskiem, dopóki obok trwa tekst jego sekcji (z atrybutem data-bok-do także tekst
   wskazanej sekcji, zob. reguła poniżej). Panel wyższy niż miejsce pod paskiem (panel firmy z opiniami ma 784 px,
   a na ekranie 1440 x 900 zostaje 760 px) skrypt przesuwa razem z tekstem, aż pokaże się jego dół przy
   przewijaniu w dół albo góra przy przewijaniu w górę (strona.js, „wysokie panele”) */
.serp-bok > * { position: sticky; top: calc(var(--pasek-wid) + 20px); transition: top .3s var(--e-std); }
/* kolumna boczna z data-bok-do="id sekcji" sięga do końca tekstu tamtej sekcji (ta sekcja i sekcje pomiędzy
   nie mają własnej kolumny bocznej), więc panel stoi także obok nich. Ujemny margines wydłuża kolumnę, nie powiększając wiersza
   siatki; jego wielkość (--bok-dalej) mierzy skrypt (strona.js, „kolumna boczna przez kilka sekcji”) */
@media (min-width: 960px) {
  .serp-bok[data-bok-do] { margin-bottom: calc(-1 * var(--bok-dalej, 0px)); }
}

.serp-sekcja + .serp-sekcja > h2::before,
.serp-sekcja + .sekcja-kontakt::before { content: none; }

.serp-glowna > :last-child { margin-bottom: 0; }

.sekcja-mapa { grid-template-columns: minmax(0, 500px) minmax(0, 640px); }

@media (max-width: 959px) {
  .serp-sekcja, .sekcja-mapa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "tytul" "bok" "glowna";
    padding-top: 44px;
  }
  .serp-sekcja > h2 { font-size: 23px; }
  .serp-sekcja .serp-bok > * { position: static; max-width: 560px; margin: 4px 0 28px; }
}

.grupa-uslug h3 { margin-top: 26px; }

/* ---------------------------------------------------------------- listy odnośników jak wyniki wyszukiwania */

.indeks { display: grid; gap: 24px; margin: 14px 0 26px; padding: 0; list-style: none; }
.indeks a { display: block; max-width: 600px; color: var(--link); text-decoration: none; }
.indeks a:visited { color: var(--link-odw); }
.indeks-adres {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 5px;
  font-size: 13px; line-height: 18px; color: var(--tekst);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.indeks-fav, .podglad-fav, .sym-fav {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f3f4; border: 1px solid #ecedef;
}
.indeks-fav::after, .podglad-fav::after, .sym-fav::after {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--niebieski);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(26, 115, 232, .2);
}
.indeks-nazwa { display: block; font-size: 20px; line-height: 1.3; }
.indeks a:hover .indeks-nazwa, .indeks a:focus-visible .indeks-nazwa { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.indeks-opis { display: block; margin-top: 3px; font-size: 14px; line-height: 1.58; color: var(--tekst-3); }

/* ---------------------------------------------------------------- panel wiedzy */

.panel-wiedzy {
  border: 1px solid var(--ramka);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.panel-mapa { position: relative; height: 148px; background: var(--lad); border-bottom: 1px solid var(--ramka-2); }
.mini-mapa { display: block; width: 100%; height: 100%; }
.mini-mapa-napis { font-size: 11px; font-weight: 600; fill: var(--tekst); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.panel-glowa { padding: 16px 18px 4px; }
.panel-tytul { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.25; }
.panel-podtytul { margin: 2px 0 0; font-size: 14px; color: var(--tekst-5); }
.panel-opis { margin: 0; padding: 12px 18px; font-size: 14px; line-height: 1.55; color: var(--tekst-3); border-top: 1px solid var(--ramka-2); }
.panel-fakty, .panel-wiedzy .dane { margin: 0; padding: 4px 18px 16px; font-size: 14px; line-height: 1.5; }
.panel-fakty > div, .panel-wiedzy .dane > div { padding: 5px 0; }
.panel-fakty dt, .panel-wiedzy .dane dt { display: inline; font-weight: 600; color: var(--tekst); }
.panel-fakty dt::after, .panel-wiedzy .dane dt::after { content: ": "; }
.panel-fakty dd, .panel-wiedzy .dane dd { display: inline; margin: 0; color: var(--tekst-3); }
.panel-wiedzy .podpis { margin: 0; padding: 0 18px 16px; }
.panel-firma .dane { padding-top: 10px; }

/* blok opinii na dole panelu, jak "Oceń i napisz opinię" w Mapach: bez oceny i bez opinii z Google */
.panel-opinie { padding: 14px 18px 18px; border-top: 1px solid var(--ramka-2); }
.panel-opinie-tytul { margin: 0 0 12px; font-size: 18px; font-weight: 400; line-height: 1.3; }
.opinie-zacheta { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--tekst-3); }
/* puste gwiazdki: drugi odnośnik do formularza (poza klawiaturą i czytnikiem); formularz nie przejmuje
   wskazanej gwiazdki, więc po najechaniu żółkną wszystkie naraz */
.opinie-gwiazdki { display: flex; gap: 6px; width: fit-content; margin: 0 0 10px; padding: 4px 0; }
.opinie-gwiazdki .ikona {
  width: 30px; height: 30px;
  color: transparent; stroke: var(--tekst-5); stroke-width: 1.4; stroke-linejoin: round;
  transition: color .2s var(--e-std), stroke .2s var(--e-std);
}
.opinie-gwiazdki:hover .ikona { color: var(--zolty); stroke: var(--zolty); }

/* "Napisz opinię" jako tonalna pigułka, jak w Mapach; obok odnośnik do profilu */
.opinie-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; }
.opinie-napisz, .opinie-napisz:visited {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px 0 14px;
  border-radius: 20px;
  background: var(--niebieski-tlo); color: var(--niebieski-3);
  font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background-color .2s var(--e-std), box-shadow .2s var(--e-std);
}
.opinie-napisz:hover { background: var(--niebieski-jasny); color: var(--niebieski-3); box-shadow: var(--cien-1); }
.opinie-napisz .ikona { width: 18px; height: 18px; }
.opinie-zobacz, .opinie-zobacz:visited { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 14px; color: var(--niebieski-2); text-decoration: none; }
.opinie-zobacz:hover { color: var(--niebieski-3); text-decoration: underline; }
.opinie-zobacz .ikona { width: 15px; height: 15px; }

/* okrągłe przyciski akcji jak w karcie miejsca na mapie */
.akcje-okragle {
  display: flex; justify-content: space-around; gap: 4px;
  margin: 0; padding: 12px 8px 14px;
  list-style: none;
}
.akcje-okragle a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 64px; padding: 2px 4px;
  border-radius: 10px;
  color: var(--niebieski-2); text-decoration: none;
  font-size: 12px; font-weight: 500;
}
.akcje-okragle .ikona {
  width: 20px; height: 20px; padding: 9px; box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid var(--ramka);
  color: var(--niebieski);
  transition: background-color .2s, box-shadow .2s;
}
.akcje-okragle li:first-child .ikona { background: var(--niebieski); border-color: var(--niebieski); color: #fff; }
.akcje-okragle a:hover .ikona { background: #f6fafe; box-shadow: var(--cien-1); }
.akcje-okragle li:first-child a:hover .ikona { background: #1b66c9; }

/* ---------------------------------------------------------------- symulacje (makiety, zawsze z napisem Symulacja) */

.sym {
  margin: 0;
  border: 1px solid var(--ramka);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
  font-size: 13px; line-height: 1.45;
  user-select: none;
}
.sym-gora {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--tlo-szare-2);
  border-bottom: 1px solid var(--ramka-2);
}
.sym-znacznik {
  padding: 2px 9px;
  border: 1px solid #fde293; border-radius: 6px;
  background: var(--zolty-tlo); color: #8d5300;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.sym-tytul-okna { font-size: 12.5px; color: var(--tekst-4); }
.sym figcaption {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--ramka-2);
  font-size: 12.5px; line-height: 1.5; color: var(--tekst-4);
}
.sym-kreska { display: block; width: 72%; height: 8px; border-radius: 4px; background: var(--ramka-2); }
.sym-kreska-adres { width: 38%; height: 7px; }
.sym-kreska-tytul { width: 80%; height: 11px; background: var(--niebieski-jasny); }
.sym-kreska-dluga { width: 94%; }
.sym-fav { width: 20px; height: 20px; }
.sym-fav::after { width: 7px; height: 7px; box-shadow: 0 0 0 1.5px #fff; }

/* A. wynik firmy wspina się w wynikach */
.sym-okno { padding: 12px 14px 10px; }
.sym-szukaj {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px;
  border: 1px solid #dfe1e5; border-radius: 18px;
  color: var(--tekst); font-size: 13.5px;
}
.sym-szukaj .ikona { width: 16px; height: 16px; color: #9aa0a6; }
.sym-zakladki { display: flex; gap: 16px; margin: 6px 0 0; padding-left: 6px; border-bottom: 1px solid var(--ramka-2); font-size: 12px; color: var(--tekst-4); }
.sym-zakladki span { padding: 7px 0 8px; }
.sym-zakladki .aktywna { color: var(--niebieski); box-shadow: inset 0 -3px 0 var(--niebieski); font-weight: 500; }
.sym-stan { display: flex; justify-content: space-between; gap: 8px; margin: 8px 4px 6px; font-size: 11.5px; color: var(--tekst-5); }
.sym-stan b { display: inline-block; min-width: 1.3em; color: var(--tekst); text-align: center; }
.sym-stan b.zmiana { animation: puls .45s var(--e-wej); }
.sym-strona { transition: color .3s; }
.sym-strona.dalej { color: var(--czerwony); }
.sym-wyniki {
  --wiersz: 84px;
  position: relative;
  height: calc(4 * var(--wiersz));
  margin: 0; padding: 0;
  list-style: none;
  overflow: hidden;
}
.sym-wynik {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  height: var(--wiersz);
  padding: 8px 10px;
  border-radius: 10px;
}
.sym-wynik > *, .sym-lokalny > * { flex: none; }
.sym-ruch .sym-wynik {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform .4s var(--e-std), background-color .4s;
}
.sym-klient { background: var(--niebieski-tlo); z-index: 1; }
.sym-klient .sym-kreska { background: #c6d8f7; }
.sym-adres { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tekst); line-height: 1; }
.sym-tytul { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; line-height: 1.25; color: var(--link); }

/* B. siatka pozycji wizytówki i trzy firmy z mapy */
.sym-mapa { position: relative; aspect-ratio: 350 / 230; background: var(--lad); overflow: hidden; }
.sym-ulice { position: absolute; inset: 0; width: 100%; height: 100%; }
.sym-ulice-teren { fill: var(--lad); }
.sym-ulice-park { fill: #cdebd2; }
.sym-ulice-woda { fill: #a3d2f5; }
.sym-ulice-boczna { fill: none; stroke: #fff; stroke-width: 5; }
.sym-ulice-glowna { fill: none; stroke: #fde6a0; stroke-width: 8; }
.siatka {
  position: absolute; inset: 6% 8%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  place-items: center;
}
.siatka-punkt {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  color: #fff;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(60, 64, 67, .45);
  transition: background-color .35s var(--e-std), color .35s;
}
/* biały numer pozycji: ciemniejsza zieleń i czerwień dają kontrast co najmniej 4,5:1 (5,0 i 4,8) */
.siatka-z { background: var(--zielony); }
.siatka-p { background: var(--zolty); color: var(--tekst); }
.siatka-c { background: var(--czerwony); }
.siatka-punkt.zmiana { animation: puls .5s var(--e-wej); }
@keyframes puls { 40% { transform: scale(1.3); } }
/* firma w środku siatki: pinezka zamiast punktu */
.siatka-punkt:nth-child(25) { visibility: hidden; }
.sym-pin {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 28px; margin: -27px 0 0 -10px;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(60, 64, 67, .4));
}
.sym-pin path { fill: var(--czerwony-2); stroke: #b31412; stroke-width: .8; }
.sym-pin circle { fill: #b31412; }
.sym-lokalne {
  --wiersz: 50px;
  position: relative;
  height: calc(3 * var(--wiersz) + 8px);
  margin: 0; padding: 4px 0;
  list-style: none;
  border-top: 1px solid var(--ramka-2);
  overflow: hidden;
}
.sym-lokalny {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  height: var(--wiersz); padding: 0 14px;
}
.sym-ruch .sym-lokalny { position: absolute; left: 0; right: 0; top: 4px; transition: transform .55s var(--e-std), opacity .3s; }
.sym-lokalny.sym-klient { background: var(--niebieski-tlo); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 8px; row-gap: 2px; align-content: center; }
.sym-lokalny-nazwa { font-size: 14px; font-weight: 500; color: var(--link); }
.sym-lokalny-opis { flex-basis: 100%; font-size: 12px; color: var(--tekst-4); }
.sym-gwiazdki { position: relative; display: inline-flex; line-height: 0; }
.sym-gwiazdki .ikona { width: 13px; height: 13px; }
.sym-gwiazdki-puste { display: inline-flex; color: var(--ramka); }
.sym-gwiazdki-pelne {
  position: absolute; left: 0; top: 0;
  display: inline-flex; color: var(--zolty);
  clip-path: inset(0 calc((1 - var(--gwiazdki, .96)) * 100%) 0 0);
}
.sym-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--ramka-2); font-size: 11.5px; color: var(--tekst-4); }
.sym-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sym-legenda span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.sym-legenda-z::before { background: var(--zielony); }
.sym-legenda-p::before { background: var(--zolty); }
.sym-legenda-c::before { background: var(--czerwony); }

/* C. odpowiedź asystenta AI */
.sym-czat { display: grid; gap: 12px; padding: 14px; }
.sym-pytanie {
  justify-self: end;
  max-width: 88%; min-height: 36px;
  margin: 0; padding: 8px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--tlo-szare);
  color: var(--tekst); font-size: 13.5px;
}
.sym-odpowiedz { position: relative; padding: 12px 14px 14px; border: 1px solid var(--ramka-2); border-radius: 14px; background: linear-gradient(180deg, #f6f9fe, #fff 60%); }
.sym-ai-glowa { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--tekst); }
.sym-ai-glowa .ikona { width: 18px; height: 18px; color: var(--niebieski); }
.sym-ai-tekst { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tekst-2); }
/* przypis jako zwykły element liniowy: nie przenosi się sam do nowego wiersza */
.sym-cytat {
  display: inline;
  margin-left: 3px; padding: 1px 5px;
  border-radius: 8px;
  background: var(--niebieski-tlo); color: var(--niebieski-2);
  font-size: 10.5px; font-weight: 700; line-height: 1;
  vertical-align: 1px;
}
.sym-zrodla { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sym-zrodlo {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 4px;
  border: 1px solid var(--ramka); border-radius: 14px;
  background: #fff;
  font-size: 11.5px; color: var(--tekst-3);
  transition: opacity .3s, transform .35s var(--e-wej);
}
.sym-zrodlo .sym-kreska { width: 64px; height: 7px; margin-left: 8px; }
/* etapy odpowiedzi AI (klasy ustawia skrypt): pytanie, "myślenie" z migoczącymi paskami, tekst słowo po słowie,
   źródła; wysokość ramki się nie zmienia, bo ukryte części zachowują miejsce */
.sym-migotanie { display: none; position: absolute; left: 14px; right: 14px; top: 38px; }
.sym-migotanie span {
  display: block; height: 11px; margin: 10px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8eaed 0%, #f5f6f7 45%, #e8eaed 90%);
  background-size: 250% 100%;
  animation: migotanie .9s linear infinite;
}
.sym-migotanie span:nth-child(2) { width: 88%; }
.sym-migotanie span:nth-child(3) { width: 62%; }
@keyframes migotanie { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sym-ai .slowo { transition: opacity .18s; }
.sym-ai.etap-pusty .sym-ai-glowa, .sym-ai.etap-pusty .sym-ai-tekst, .sym-ai.etap-pusty .sym-zrodla,
.sym-ai.etap-pytanie .sym-ai-glowa, .sym-ai.etap-pytanie .sym-ai-tekst, .sym-ai.etap-pytanie .sym-zrodla { visibility: hidden; }
.sym-ai.etap-mysli .sym-ai-tekst, .sym-ai.etap-mysli .sym-zrodla { visibility: hidden; }
.sym-ai.etap-mysli .sym-migotanie { display: block; }
.sym-ai.etap-pisze .slowo:not(.widoczne) { opacity: 0; }
.sym-ai.etap-pisze .sym-zrodlo, .sym-ai.etap-mysli .sym-zrodlo { opacity: 0; transform: translateY(6px); }
.sym-pytanie .kursor { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--tekst); vertical-align: -2px; animation: kursor 1s steps(1) infinite; }
@keyframes kursor { 50% { opacity: 0; } }

/* D. raport: cztery kanały i linie trendu */
.sym-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sym-kafel {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 70px; padding: 10px 10px 12px;
  color: #fff;
  font-size: 11.5px; font-weight: 500; line-height: 1.25;
}
.sym-kafel .ikona { width: 14px; height: 14px; padding: 1px; border-radius: 3px; background: rgba(255, 255, 255, .95); }
.sym-kafel-1 { background: var(--niebieski); }
.sym-kafel-1 .ikona { color: var(--niebieski); }
.sym-kafel-2 { background: var(--zielony); }
.sym-kafel-2 .ikona { color: var(--zielony); }
.sym-kafel-3 { background: var(--fiolet); }
.sym-kafel-3 .ikona { color: var(--fiolet); }
.sym-kafel-4 { background: var(--pomaranczowy); }
.sym-kafel-4 .ikona { color: var(--pomaranczowy); }
.sym-wykres { display: block; width: 100%; height: auto; padding: 14px 12px 6px; overflow: visible; }
.sym-wykres-siatka { fill: none; stroke: var(--ramka-2); stroke-width: 1; }
.sym-wykres-os { fill: none; stroke: var(--ramka); stroke-width: 1; }
.sym-wykres-opisy text { font-size: 9px; fill: var(--tekst-5); }
.sym-wykres-opisy text:nth-child(2) { text-anchor: middle; }
.sym-wykres-opisy text:nth-child(3) { text-anchor: end; }
.sym-linia { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.sym-linia-1 { stroke: var(--niebieski); }
.sym-linia-2 { stroke: var(--zielony); }
.sym-linia-3 { stroke: var(--fiolet); }
.sym-linia-4 { stroke: var(--pomaranczowy); }

/* ---------------------------------------------------------------- nagłówek podstrony */

.naglowek {
  display: grid;
  grid-template-columns: minmax(0, var(--glowna)) minmax(0, var(--bok));
  column-gap: var(--kol-odstep);
  align-items: center;
  padding: 26px var(--prawa) 36px var(--lewa);
  border-bottom: 1px solid var(--ramka-2);
}
.naglowek h1 { margin: 0 0 14px; font-size: clamp(30px, 3.1vw, 40px); line-height: 1.15; letter-spacing: -.015em; }
.naglowek .wstep { margin: 0; font-size: 17px; line-height: 1.62; color: var(--tekst-3); }
.naglowek .akcje { margin-top: 24px; }
.naglowek-wnetrze { min-width: 0; }

@media (max-width: 959px) {
  .naglowek { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-top: 20px; }
  .naglowek .wstep { font-size: 16px; }
}

.okruszki ol { display: flex; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--tekst-3); }
.okruszki li + li::before { content: "›"; margin: 0 8px; color: var(--tekst-5); }
.okruszki a, .okruszki a:visited { color: var(--tekst-3); text-decoration: none; }
.okruszki a:hover { color: var(--tekst); text-decoration: underline; }

/* karta liczb miasta */
.karta-miasta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; }
.karta-miasta > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  padding: 10px 12px 11px;
  border: 1px solid var(--ramka); border-radius: 10px;
}
.karta-miasta dd { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--tekst); }
.karta-miasta dt { margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--tekst-4); }
@media (max-width: 599px) {
  .karta-miasta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* podgląd wyniku wyszukiwania dla tej strony */
.podglad { min-width: 0; }
.podglad-etykieta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; font-size: 12.5px; color: var(--tekst-4); }
.podglad-etykieta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zielony-2); }
.podglad-karta {
  position: relative;
  padding: 18px 20px 20px;
  border: 1px solid var(--ramka); border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.podglad-zrodlo { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.podglad-fav { grid-row: 1 / 3; }
.podglad-nazwa { font-size: 14px; line-height: 20px; color: var(--tekst); }
.podglad-adres { font-size: 12px; line-height: 18px; color: var(--tekst-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.podglad-tytul { margin: 10px 0 4px; font-size: 20px; line-height: 26px; color: var(--link); }
.podglad-opis { margin: 0; font-size: 14px; line-height: 22px; color: var(--tekst-3); }

/* krótkie wczytywanie wyniku: szare paski, potem treść */
.podglad-karta::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 34px 34px, var(--ramka-2) 14px, transparent 14.5px),
    linear-gradient(var(--ramka-2), var(--ramka-2)) 60px 24px / 90px 9px no-repeat,
    linear-gradient(var(--ramka-2), var(--ramka-2)) 60px 40px / 160px 7px no-repeat,
    linear-gradient(var(--niebieski-jasny), var(--niebieski-jasny)) 20px 70px / 82% 14px no-repeat,
    linear-gradient(var(--ramka-2), var(--ramka-2)) 20px 98px / 90% 8px no-repeat,
    linear-gradient(var(--ramka-2), var(--ramka-2)) 20px 116px / 76% 8px no-repeat,
    linear-gradient(var(--ramka-2), var(--ramka-2)) 20px 134px / 58% 8px no-repeat,
    #fff;
  animation: wczytane .3s var(--e-std) .55s forwards;
  pointer-events: none;
}
@keyframes wczytane { to { opacity: 0; visibility: hidden; } }

/* 404: brak wyników */
.podglad-brak { padding: 16px 20px 18px; border: 1px solid var(--ramka); border-radius: 12px; background: #fff; }
.podglad-szukaj {
  display: flex; align-items: center; gap: 10px;
  height: 42px; margin-bottom: 16px; padding: 0 16px;
  border: 1px solid #dfe1e5; border-radius: 21px;
  box-shadow: var(--cien-szukaj);
  font-size: 14px; color: var(--tekst);
  overflow: hidden; white-space: nowrap;
}
.podglad-szukaj .ikona { width: 18px; height: 18px; color: #9aa0a6; }
.podglad-zapytanie { overflow: hidden; text-overflow: ellipsis; }
.podglad-komunikat { margin: 0 0 12px; font-size: 16px; color: var(--tekst); }
.podglad-sugestie-tytul { margin: 0 0 4px; font-size: 14px; color: var(--tekst-3); }
.podglad-sugestie { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.65; color: var(--tekst-3); }

/* karta trasy w nagłówku strony miasta */
.podglad-trasa { border: 1px solid var(--ramka); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(60, 64, 67, .1); }
.trasa-ramka { position: relative; aspect-ratio: 1.6; background: var(--lad); border-bottom: 1px solid var(--ramka-2); }
.trasa-mapa { display: block; width: 100%; height: 100%; }
.trasa-brzeg, .trasa-linia { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.trasa-brzeg { stroke: #1967d2; }
.trasa-linia { stroke: #4b8ef5; }
.trasa-dymek rect { fill: #fff; stroke: var(--ramka); stroke-width: 1; }
.trasa-dymek text { font-size: 12.5px; font-weight: 700; fill: var(--zielony); text-anchor: middle; }
.trasa-dymek { filter: drop-shadow(0 1px 2px rgba(60, 64, 67, .35)); }
.trasa-opis { padding: 14px 18px 2px; }
.trasa-czas { margin: 0; font-size: 20px; line-height: 1.3; }
.trasa-czas-wartosc { color: var(--zielony); font-weight: 500; }
.trasa-km { color: var(--tekst-4); font-size: 16px; }
.trasa-podpis { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--tekst-4); }
.podglad-trasa .akcje-okragle { padding-top: 14px; }

/* ---------------------------------------------------------------- mapy */

.mapa-ramka { margin: 24px 0 8px; }
.mapa-ramka figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--tekst-4); }
.mapa-okno {
  position: relative;
  border: 1px solid var(--ramka); border-radius: 12px;
  background: var(--lad);
  overflow: hidden;
}
.mapa-obszaru { display: block; width: 100%; height: auto; aspect-ratio: 760 / 744; }
.mapa-osm, .mapa-osm:visited {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 1px 7px;
  border-top-left-radius: 6px;
  background: rgba(255, 255, 255, .82);
  color: var(--tekst-2); font-size: 11px; line-height: 1.6;
  text-decoration: none;
}
.mapa-osm:hover { text-decoration: underline; color: var(--tekst); }
.mapa-osm:focus-visible { outline-offset: -2px; }

.mapa-pierscien { fill: none; stroke: var(--niebieski); stroke-opacity: .55; stroke-width: calc(var(--k, 1) * 1.4px); stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mapa-pierscien-150 { fill: rgba(26, 115, 232, .045); }
.mapa-km { font-size: 11px; font-weight: 600; fill: var(--niebieski-2); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* pinezki i napisy mapy regionu mają na ekranie stałą wielkość: skrypt ustawia --s z szerokości mapy */
.mapa-obszaru { --s: 1; }
.pin-ksztalt { transform-box: view-box; transform-origin: 0 0; transition: scale .18s var(--e-std); }
.mapa-obszaru .pin-ksztalt { scale: var(--s); }
.pin { cursor: pointer; }
.pin:focus { outline: none; }
.pin-lza { fill: var(--czerwony-2); stroke: #b31412; stroke-width: .9; }
.pin-srodek { fill: #b31412; }
.pin-cien { fill: rgba(60, 64, 67, .28); }
.pin-kropka { fill: var(--czerwony-2); stroke: #fff; stroke-width: 1.6; }
.mapa-obszaru .pin-wyrozniony .pin-ksztalt { scale: calc(var(--s) * 1.25); }
.mapa-obszaru .pin:hover .pin-ksztalt, .mapa-obszaru .pin:focus-visible .pin-ksztalt, .mapa-obszaru .pin.aktywny .pin-ksztalt { scale: calc(var(--s) * 1.3); }
.pin:hover .pin-lza, .pin:focus-visible .pin-lza, .pin.aktywny .pin-lza { fill: #c5221f; }
.pin:focus-visible .pin-lza, .pin:focus-visible .pin-kropka { stroke: var(--niebieski); stroke-width: 2.4; }
.tu-halo { fill: rgba(26, 115, 232, .18); stroke: rgba(26, 115, 232, .3); stroke-width: 1; }
.tu-kropka { fill: var(--niebieski); stroke: #fff; stroke-width: 2.6; }
.tu-jestesmy .pin-ksztalt { filter: drop-shadow(0 1px 1.5px rgba(60, 64, 67, .4)); }
.mapa-etykieta { font-size: 12.5px; font-weight: 600; fill: var(--tekst-2); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.mapa-etykieta-lewa { text-anchor: end; }
.mapa-etykieta-siedziba { fill: var(--niebieski-3); font-weight: 700; }

/* karta miasta po najechaniu na pinezkę (tworzy ją skrypt) */
.mapa-karta {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: max-content; max-width: 240px;
  padding: 10px 14px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--cien-3);
  pointer-events: none;
  font-size: 13px; line-height: 1.45; color: var(--tekst-3);
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transform-origin: 50% 100%;
  transition: opacity .15s var(--e-std), transform .22s var(--e-wej);
}
.mapa-karta.widoczna { opacity: 1; transform: none; }
.mapa-karta-nazwa { display: block; font-size: 16px; font-weight: 500; color: var(--tekst); }
.mapa-karta-woj { display: block; font-size: 12.5px; color: var(--tekst-5); }
.mapa-karta-trasa { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--tekst-2); }
.mapa-karta-trasa .ikona { width: 16px; height: 16px; color: var(--tekst-4); }
.mapa-karta-trasa b { color: var(--zielony); font-weight: 600; }

/* stan przed animacją mapy regionu (klasę dodaje skrypt, zanim mapa wjedzie na ekran) */
.mapa-czeka .mapa-pierscien { stroke-dashoffset: 1; fill-opacity: 0; }
.mapa-czeka .mapa-piny, .mapa-czeka .mapa-etykiety, .mapa-czeka .mapa-km { opacity: 0; }

/* karta trasy jest widoczna zaraz po wejściu na stronę miasta: mapa czeka na skrypt, który ją animuje,
   a gdy skrypt się nie wczyta, pokazuje się sama po półtorej sekundy */
.trasa-mapa { transition: opacity .25s var(--e-std); }
@media (scripting: enabled) {
  .trasa-mapa:not(.trasa-gotowa) { opacity: 0; animation: pokaz 0s 1.5s forwards; }
}
@keyframes pokaz { to { opacity: 1; } }

/* ---------------------------------------------------------------- artykuł (podstrony) */

.artykul {
  display: grid;
  grid-template-columns: minmax(0, var(--glowna)) minmax(0, var(--bok));
  grid-template-areas: "tresc bok" "dalej bok";
  grid-template-rows: auto 1fr;
  column-gap: var(--kol-odstep);
  padding: 0 var(--prawa) 56px var(--lewa);
}
.artykul-tresc { grid-area: tresc; min-width: 0; }
.artykul-bok { grid-area: bok; min-width: 0; padding-top: 40px; }
.artykul-dalej { grid-area: dalej; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; align-items: start; margin-top: 40px; }
.artykul-tresc > section { padding-top: 40px; }
.artykul-tresc > section > h2 { font-size: 26px; }
.artykul-szukaj .artykul-tresc > section { padding-top: 28px; }

@media (max-width: 959px) {
  .artykul { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bok" "tresc" "dalej"; grid-template-rows: none; }
  .artykul-bok { padding-top: 24px; }
  .artykul-tresc > section > h2 { font-size: 23px; }
}

.ramka { padding: 18px 20px 20px; border: 1px solid var(--ramka); border-radius: 12px; background: #fff; }
.ramka h2 { margin: 0 0 10px; font-size: 18px; }
.ramka p { font-size: 15px; color: var(--tekst-3); }
.ramka .indeks { gap: 16px; margin: 12px 0 0; }
.ramka .indeks-nazwa { font-size: 17px; }
.ramka .indeks-adres { margin-bottom: 3px; }
.ramka-sygnal { background: var(--niebieski-tlo); border-color: var(--niebieski-tlo); }
.ramka-sygnal h2 { color: #0b3a82; }
.ramka-sygnal p { color: #1f3b66; }

/* spis treści: zaznaczenie bieżącej sekcji jak w menu bocznym aplikacji; spis wyższy niż miejsce pod paskiem
   skrypt przesuwa jak wysokie panele kolumny bocznej */
.spis { position: sticky; top: calc(var(--pasek-wid) + 20px); padding: 0; border: 0; transition: top .3s var(--e-std); }
.spis h2 { margin: 0 0 8px 14px; font-size: 14px; font-weight: 500; color: var(--tekst-4); }
.spis ol { margin: 0; padding: 0; list-style: none; }
.spis a, .spis a:visited {
  display: block;
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--tekst-2); text-decoration: none;
  font-size: 14px; line-height: 1.35;
  transition: background-color .2s, color .2s;
}
.spis a:hover { background: var(--tlo-szare); color: var(--tekst); }
.spis a[aria-current] { background: var(--niebieski-tlo); color: var(--niebieski-3); font-weight: 500; }

@media (max-width: 959px) {
  .spis { position: static; }
  .spis h2 { margin-left: 0; }
  .spis ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .spis a, .spis a:visited { padding: 7px 14px; border: 1px solid var(--ramka); border-radius: 8px; font-size: 14px; }
}

/* ---------------------------------------------------------------- treść */

.lista { margin: 12px 0 20px; padding-left: 22px; }
.lista li { margin: 7px 0; padding-left: 4px; }
.lista li::marker { color: var(--tekst-5); }

.podpis { font-size: 13px; line-height: 1.5; color: var(--tekst-4); }
.autor { font-size: 14px; color: var(--tekst-4); }

/* polecenia i fragmenty kodu w treści (WP-CLI na stronie o migracji, parametry adresów).
   Krótkie wstawki w tekście nie łamią się w środku; długie polecenie łamie się w swojej ramce
   (tylko na ekranie, skopiowane zostaje jednym wierszem), więc strona nie wychodzi poza ekran */
code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--tlo-szare);
  color: var(--tekst);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: .875em;
  white-space: nowrap;
}
pre {
  margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--ramka-2); border-radius: 8px;
  background: var(--tlo-szare-2);
  overflow-x: auto;
  line-height: 1.55;
}
pre code { padding: 0; background: none; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* definicje jak karta słownika */
.definicje { margin: 20px 0 22px; border: 1px solid var(--ramka); border-radius: 12px; overflow: hidden; }
.definicje > div { padding: 14px 18px; }
.definicje > div + div { border-top: 1px solid var(--ramka-2); }
.definicje dt { font-size: 16px; font-weight: 600; color: var(--tekst); }
.definicje dd { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--tekst-3); }

/* dane firmy */
.dane { margin: 18px 0 10px; font-size: 15px; }
.dane > div { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ramka-2); }
.dane dt { font-weight: 600; color: var(--tekst); }
.dane dd { margin: 0; color: var(--tekst-3); }
@media (max-width: 599px) {
  .dane > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.panel-wiedzy .dane > div { display: block; border: 0; }

/* kroki jak pionowy stepper: numer w kółku, linia między krokami; przewijanie odhacza kolejne */
.kroki { margin: 22px 0 26px; padding: 0; list-style: none; counter-reset: krok; }
.kroki > li { position: relative; min-height: 40px; padding: 0 0 24px 54px; counter-increment: krok; }
.kroki > li::before {
  content: counter(krok);
  position: absolute; left: 0; top: -3px; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--niebieski) no-repeat center / 18px;
  color: #fff; font-size: 14px; font-weight: 600;
  transition: background-color .3s var(--e-std), color .3s, box-shadow .3s;
}
.kroki > li::after {
  content: "";
  position: absolute; left: 16.5px; top: 35px; bottom: 2px;
  width: 1.5px;
  background: linear-gradient(var(--niebieski), var(--niebieski)) no-repeat 0 0 / 100% calc(var(--wypelnienie, 1) * 100%), var(--ramka);
}
.kroki > li:last-child { padding-bottom: 4px; }
.kroki > li:last-child::after { display: none; }
.kroki strong { display: block; margin-bottom: 3px; font-size: 17px; font-weight: 600; color: var(--tekst); }
.kroki h3 { margin: 3px 0 4px; font-size: 17px; }
.kroki p { margin: 0; }
.kroki-ruch > li:not(.zrobione)::before { background-color: #fff; color: var(--tekst-4); box-shadow: inset 0 0 0 1.5px var(--ramka); }
.kroki-ruch > li.zrobione::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kroki-ruch > li.biezacy::before { content: counter(krok); background-image: none; box-shadow: 0 0 0 5px rgba(26, 115, 232, .18); }

/* pytania jak rozwijane pytania w wynikach */
.pytanie { border-bottom: 1px solid var(--ramka); }
.pytanie:first-of-type, h2 + .pytanie, .serp-glowna > .pytanie:first-child { border-top: 1px solid var(--ramka); }
.pytanie summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 4px 12px 0;
  list-style: none; cursor: pointer;
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--tekst); }
.pytanie summary::after {
  content: "";
  flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 22px;
  transition: transform .25s var(--e-std), background-color .2s;
}
.pytanie summary:hover::after { background-color: rgba(60, 64, 67, .08); }
.pytanie[open] summary::after { transform: rotate(180deg); }
.pytanie summary:focus-visible { outline-offset: -2px; }
.pytanie-odp { padding: 0 0 14px; font-size: 15px; color: var(--tekst-3); }
.pytanie-odp p:last-child { margin-bottom: 4px; }
.pytanie::details-content {
  height: 0; overflow: clip;
  transition: height .28s var(--e-std), content-visibility .28s allow-discrete;
}
.pytanie[open]::details-content { height: auto; }

/* tabele jak tabele danych w aplikacjach */
.tabela-ramka, .tabela-przewijana {
  margin: 20px 0 22px;
  border: 1px solid var(--ramka); border-radius: 12px;
  overflow-x: auto;
}
.tabela, .tabela-danych { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.tabela caption, .tabela-danych caption { padding: 14px 16px 12px; text-align: left; font-size: 13px; font-weight: 500; color: var(--tekst-4); }
.tabela th, .tabela td, .tabela-danych th, .tabela-danych td { padding: 11px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--ramka-2); }
.tabela thead th, .tabela-danych thead th { background: var(--tlo-szare-2); border-top-color: var(--ramka); font-size: 12.5px; font-weight: 500; color: var(--tekst-4); white-space: nowrap; }
.tabela tbody th, .tabela-danych tbody th { font-weight: 500; color: var(--tekst); }
.tabela tbody tr, .tabela-danych tbody tr { transition: background-color .15s; }
.tabela tbody tr:hover, .tabela-danych tbody tr:hover { background: var(--tlo-szare-2); }
.tabela .liczba, .tabela-danych .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-danych td { font-variant-numeric: tabular-nums; }
.tabela-dopisek { display: block; font-size: 12px; font-weight: 400; color: var(--tekst-5); }
.tabela-danych th a { font-weight: 500; }

@media (max-width: 599px) {
  .tabela-stos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabela-stos, .tabela-stos caption, .tabela-stos tbody, .tabela-stos tr, .tabela-stos th, .tabela-stos td { display: block; }
  .tabela-stos tr { padding: 10px 0; border-top: 1px solid var(--ramka-2); }
  .tabela-stos tbody th, .tabela-stos td { padding: 3px 16px; border: 0; }
  .tabela-stos td::before { content: attr(data-etykieta); display: block; font-size: 12px; font-weight: 500; color: var(--tekst-5); }
}

/* miasta jako żetony z kropką */
.miasta-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 22px; padding: 0; list-style: none; }
.miasta-lista a, .miasta-lista a:visited {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 16px 0 13px;
  border-radius: 18px;
  background: var(--tlo-szare);
  color: var(--tekst); font-size: 14px; text-decoration: none;
  transition: background-color .15s, box-shadow .15s;
}
.miasta-lista a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--czerwony-2); box-shadow: 0 0 0 2px #fff; }
.miasta-lista a:hover { background: #e8eaed; box-shadow: var(--cien-1); }

.stos-narzedzi { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; padding: 0; list-style: none; }
.stos-narzedzi li { padding: 5px 12px; border: 1px solid var(--ramka); border-radius: 8px; font-size: 14px; color: var(--tekst-2); }

.narzedzia-grupa { padding-top: 36px; }

/* ---------------------------------------------------------------- wyniki wyszukiwania w serwisie */

.wyniki-lista { display: grid; gap: 28px; margin: 8px 0 0; padding: 0; list-style: none; }
.wynik a { display: block; max-width: 600px; color: var(--link); text-decoration: none; }
.wynik a:visited { color: var(--link-odw); }
.wynik a:hover .wynik-tytul { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wynik-tytul { display: block; font-size: 20px; line-height: 1.3; }
.wynik-opis { max-width: 600px; margin: 4px 0 0; font-size: 14px; line-height: 1.58; color: var(--tekst-3); }
.wynik-opis b { font-weight: 600; color: var(--tekst-2); }
.wyniki-brak { padding: 8px 0; font-size: 15px; color: var(--tekst-2); }
.wyniki-brak ul { margin: 8px 0 0; padding-left: 22px; color: var(--tekst-3); }

/* ---------------------------------------------------------------- kontakt i formularz */

.sekcja-kontakt {
  margin-top: 56px;
  padding: 56px var(--prawa) 64px var(--lewa);
  background: var(--tlo-szare-2);
  border-top: 1px solid var(--ramka-2);
}
/* strona kontaktu: formularz zaczyna się od razu pod nagłówkiem */
.naglowek + .sekcja-kontakt { margin-top: 0; border-top: 0; }
.bez-lamania { white-space: nowrap; }
.kontakt-uklad {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 640px);
  gap: 48px;
  align-items: start;
}
.kontakt-wstep h2 { font-size: 28px; }
.kontakt-wstep p { color: var(--tekst-3); }
@media (max-width: 959px) {
  .kontakt-uklad { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.kontakt-dane { margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; }
.kontakt-dane li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--ramka-2); }
.kontakt-etykieta { flex: 0 0 140px; font-size: 13px; color: var(--tekst-4); }
.kontakt-wartosc { flex: 1 1 180px; min-width: 0; }
@media (max-width: 599px) {
  .kontakt-etykieta { flex-basis: 100%; }
}
.naglowek .kontakt-dane { max-width: 520px; }
.kopiuj {
  height: 30px; margin-left: 2px; padding: 0 12px;
  border: 0; border-radius: 15px;
  background: transparent; color: var(--niebieski-2);
  font: 500 13px var(--font);
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
}
.kopiuj:hover { background: rgba(26, 115, 232, .08); }

.formularz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding: 28px 24px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--cien-1);
}
.pole-szerokie, .formularz-rodo, .formularz-wyslij { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .formularz { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 18px; }
}

/* pola z etykietą w ramce: etykieta unosi się na krawędź, gdy pole ma treść albo fokus */
.pole { position: relative; display: flex; flex-direction: column; }
.pole label {
  position: absolute; left: 12px; top: 0; z-index: 1;
  max-width: calc(100% - 24px);
  padding: 0 4px;
  background: #fff;
  color: var(--tekst-4); font-size: 12px; line-height: 1;
  transform: translateY(-50%);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  pointer-events: none;
  transition: top .15s var(--e-std), font-size .15s var(--e-std), color .15s, transform .15s var(--e-std);
}
.opcjonalne { color: var(--tekst-5); }
.pole input, .pole select, .pole textarea {
  width: 100%;
  margin: 0; padding: 15px 14px 14px;
  border: 1px solid #80868b; border-radius: 6px;
  background: #fff;
  font: 16px/1.4 var(--font); color: var(--tekst);
  transition: border-color .15s, box-shadow .15s;
}
.pole textarea { min-height: 150px; resize: vertical; }
.pole select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%235f6368'/%3E%3C/svg%3E") no-repeat right 12px center / 24px;
  cursor: pointer;
}
.pole input:hover, .pole select:hover, .pole textarea:hover { border-color: var(--tekst); }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--niebieski); box-shadow: inset 0 0 0 1px var(--niebieski); }
.pole:focus-within label { color: var(--niebieski); }
.pole:has(:user-invalid) label { color: var(--czerwony); }
.pole :user-invalid { border-color: var(--czerwony); }
.pole :user-invalid:focus { box-shadow: inset 0 0 0 1px var(--czerwony); }
/* pole puste i bez fokusu: etykieta w środku pola (tylko pola z pustym placeholderem) */
.pole:has(> input[placeholder=" "]:placeholder-shown:not(:focus)) label,
.pole:has(> textarea[placeholder=" "]:placeholder-shown:not(:focus)) label {
  top: 26px;
  font-size: 16px;
  color: var(--tekst-4);
  background: transparent;
}
.pole input::placeholder, .pole textarea::placeholder { color: var(--tekst-5); }
.pole-opis { margin: 5px 16px 0; font-size: 12px; line-height: 1.4; color: var(--tekst-4); }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz-rodo { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst-4); }
.formularz-wyslij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.formularz-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--tekst-3); }
.formularz-status:empty { display: none; }
.formularz-status.ok { color: var(--zielony); }
.formularz-status.blad { color: var(--czerwony); }

/* wskaźnik wysyłania: okrąg w czterech kolorach */
.krecenie { flex: none; width: 22px; height: 22px; }
.krecenie svg { display: block; width: 100%; height: 100%; animation: obrot 1.6s linear infinite; }
.krecenie circle {
  fill: none; stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 1 200; stroke-dashoffset: 0;
  animation: luk 1.4s ease-in-out infinite, kolory 5.6s ease-in-out infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }
@keyframes luk {
  0% { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 89 200; stroke-dashoffset: -124; }
}
@keyframes kolory {
  0%, 100% { stroke: #4285f4; }
  25% { stroke: var(--czerwony-2); }
  50% { stroke: var(--zolty); }
  75% { stroke: var(--zielony-2); }
}

/* ---------------------------------------------------------------- komunikat na dole ekranu */

.komunikat {
  position: fixed; left: 24px; bottom: 24px; z-index: 120;
  max-width: calc(100vw - 48px);
  padding: 14px 18px;
  border-radius: 8px;
  background: #202124; color: #e8eaed;
  font-size: 14px; line-height: 1.4;
  box-shadow: var(--cien-3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .2s var(--e-std), transform .3s var(--e-wej);
  pointer-events: none;
}
.komunikat.widoczny { opacity: 1; transform: none; }
@media (max-width: 599px) {
  .komunikat { left: 16px; right: 16px; bottom: 88px; max-width: none; }
}

/* ---------------------------------------------------------------- stopka */

/* szary tekst na tle stopki: --tekst-4 ma kontrast 5,4:1, --tekst-5 tylko 4,2:1 */
.stopka { margin-top: 0; background: var(--tlo-stopki); color: var(--tekst-4); font-size: 14px; }
.sekcja-kontakt + * , main > :last-child { margin-bottom: 0; }
.stopka-kraj {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 4px;
  padding: 15px var(--prawa) 15px var(--lewa);
  border-bottom: 1px solid var(--ramka);
}
.stopka-kraj p { margin: 0; }
.stopka-kraj p:first-child { color: var(--tekst-4); font-size: 15px; }
.stopka-miejsce { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-3); }
.stopka-kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--niebieski); box-shadow: 0 0 0 3px rgba(26, 115, 232, .22); }
.stopka-wnetrze {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 32px 56px;
  padding: 32px var(--prawa) 24px var(--lewa);
}
.stopka-firma p { margin: 0 0 12px; line-height: 1.55; color: var(--tekst-3); }
.stopka-firma .logo { margin-bottom: 12px; }
/* każdy odnośnik ma wiersz 32 px: cel dotykowy z zapasem (WCAG 2.5.8 wymaga 24 px) */
.stopka-kontakt { margin: -5px 0 7px; padding: 0; list-style: none; line-height: 1.55; }
.stopka-kontakt a { display: inline-flex; align-items: center; min-height: 32px; }
.stopka-firma a, .stopka-firma a:visited { color: var(--tekst-3); }
.stopka-opis { color: var(--tekst-2) !important; }
.stopka-rejestr { font-size: 13px; color: var(--tekst-4) !important; }
.stopka-nawigacja { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 32px; }
.stopka-tytul { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--tekst); }
.stopka-kolumna ul { margin: 0; padding: 0; list-style: none; }
.stopka-kolumna li { margin: 0 0 8px; }
.stopka-kolumna a, .stopka-kolumna a:visited { color: var(--tekst-3); text-decoration: none; }
.stopka-kolumna a:hover { color: var(--tekst); text-decoration: underline; }
.stopka-kolumna a[aria-current] { color: var(--tekst); font-weight: 500; }
.stopka-prawa {
  margin: 0;
  padding: 14px var(--prawa) 18px var(--lewa);
  border-top: 1px solid var(--ramka);
  font-size: 12.5px; line-height: 1.5; color: var(--tekst-4);
}
@media (max-width: 959px) {
  .stopka-wnetrze { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .stopka { padding-bottom: 80px; }
}

/* ---------------------------------------------------------------- przejścia między stronami */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* ---------------------------------------------------------------- ograniczony ruch */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .podglad-karta::after { display: none; }
  .sym-migotanie span { animation: none; }
  .pytanie::details-content { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------- druk */

@media print {
  .pasek, .stopka-nawigacja, .formularz, .sym, .akcje, .start-dalej, .podglad, .mapa-karta { display: none !important; }
  .serp-sekcja, .artykul, .naglowek { display: block; padding: 0 0 16px; }
  a { color: inherit; }
}

/* ---------------------------------------------------------------- karta osoby (strona autora) */

.panel-osoby { min-width: 0; border: 1px solid var(--ramka); border-radius: 12px; background: #fff; overflow: hidden; }
.panel-osoby-zdjecie { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 15%; background: var(--tlo-szare); }
.panel-osoby-tresc { padding: 16px 20px 18px; }
.panel-osoby-nazwa { margin: 0; font-size: 24px; line-height: 1.25; color: var(--tekst); }
.panel-osoby-rola { margin: 2px 0 0; font-size: 14px; color: var(--tekst-4); }
.panel-osoby-dane { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ramka-2); font-size: 14px; line-height: 1.5; }
.panel-osoby-dane > div { display: flex; gap: 6px; }
.panel-osoby-dane > div + div { margin-top: 4px; }
.panel-osoby-dane dt { font-weight: 600; color: var(--tekst); }
.panel-osoby-dane dt::after { content: ":"; }
.panel-osoby-dane dd { margin: 0; color: var(--tekst-3); }
.panel-osoby-profile-tytul { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--ramka-2); font-size: 14px; font-weight: 600; color: var(--tekst); }
.panel-osoby-profile { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.panel-osoby-profile a {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--ramka); border-radius: 16px;
  font-size: 13px; color: var(--tekst-2); text-decoration: none;
}
.panel-osoby-profile a:hover, .panel-osoby-profile a:focus-visible { background: var(--tlo-szare-2); color: var(--tekst); }

@media (max-width: 959px) {
  .panel-osoby { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: start; }
  .panel-osoby-zdjecie { margin: 16px 0 0 16px; width: 120px; aspect-ratio: 1; border-radius: 8px; }
}
@media (max-width: 599px) {
  .panel-osoby { grid-template-columns: 96px minmax(0, 1fr); }
  .panel-osoby-zdjecie { margin: 14px 0 0 14px; width: 82px; }
  .panel-osoby-tresc { padding: 12px 14px 14px; }
  .panel-osoby-nazwa { font-size: 20px; }
  .panel-osoby-dane > div { display: block; }
}