/* ═══════════════════════════════════════════════════════════════
   Oceń Kierowcę — arkusz bazowy (Etap 0)
   Docelowo generowany z Tailwind na maszynie lokalnej.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Numer wydania, z którego pochodzi ten arkusz.
     Wpisuje go `bin/wersja.php` przy każdym podbiciu — ręcznie nie ruszać.
     Strona porównuje tę wartość z wersją aplikacji i zgłasza rozjazd:
     arkusz starszy niż kod to najczęstsza awaria tego wdrożenia i jedyna,
     która nie daje ani błędu, ani wpisu w logu — wygląda po prostu jak
     zepsuty wygląd strony. */
  --arkusz: "1.0.0.0.62";
  --ground: #f4f6f3;
  --surface: #ffffff;
  --surface-2: #e9ece7;
  --ink: #12171c;
  --ink-2: #414b55;
  --ink-3: #6c7783;
  --line: #d6dbd6;
  --accent: #003399;
  /* Nagłówek strony „wąskiej" — formularza albo komunikatu o błędzie.
     Osobny stopień od nagłówka podstrony i jeden dla obu rodzin. */
  --naglowek-waski: clamp(1.5rem, 4vw, 2rem);
  --accent-ink: #ffffff;
  /* Tło pod etykietą w kolorze akcentu — sam akcent na tekście byłby
     nieczytelny, a pełne wypełnienie krzyczałoby głośniej niż nazwa punktu. */
  --accent-soft: #dfe5f7;
  /* Tło pod etykietą odległości — zieleń tak stonowana, żeby nie
     konkurowała z mocą, która jest tu ważniejsza. */
  --ok-soft: #d8ece3;
  --crit: #a81f18;
  --ok: #0b6e4f;
  /* Trzeci stan obok „dobrze" i „źle": import przerwany w połowie,
     ostrzeżenie w dzienniku. Bez niego wszystko, co nie jest błędem,
     wygląda na sukces. */
  --warn: #8a5a00;

  --radius: 8px;
  --measure: 62ch;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e1216;
    --surface: #161b21;
    --surface-2: #1d242b;
    --ink: #e7ebe7;
    --ink-2: #a5b0ba;
    --ink-3: #77828d;
    --line: #283037;
    --accent: #7ba3ff;
    --accent-ink: #0e1216;
    --accent-soft: #1c2540;
    --ok-soft: #16302a;
    --crit: #e8776e;
    --ok: #4fbf93;
    --warn: #d9a441;
  }
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.kontener { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Dostępność ──────────────────────────────────────────────── */
.wizualnie-ukryte {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .65rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* ── Nagłówek i znak marki ───────────────────────────────────── */
.naglowek { background: var(--surface); border-bottom: 1px solid var(--line); }
.naglowek-in { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }

.marka { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.marka-nazwa { font-weight: 700; letter-spacing: -.01em; }

.tablica {
  display: inline-flex; align-items: stretch;
  background: #fff; border: 2px solid #111; border-radius: 5px;
  overflow: hidden; height: 1.9rem;
}
.tablica-band {
  background: #039; color: #fff;
  display: flex; align-items: flex-end; justify-content: center;
  width: 1.1rem; font-size: .58rem; font-weight: 700; padding-bottom: .12rem;
}
.tablica-tekst {
  color: #111; font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; padding: 0 .45rem; display: flex; align-items: center;
}

/* ── Hero i wyszukiwarka ─────────────────────────────────────── */

/* Delikatny gradient w kolorze pasa z tablicy, wygaszany ku dołowi.
   Jedno miejsce w serwisie, gdzie akcent dostaje powierzchnię, a nie
   tylko krawędź — reszta strony ma zostać spokojna. */
.hero {
  position: relative;
  padding: clamp(2.5rem, 8vw, 4.5rem) 0 2.5rem;
}
.hero::before {
  content: "";
  position: absolute;
  /* Na całą szerokość okna, nie kontenera. Poświata ograniczona do
     `.kontener` kończyła się pionowymi krawędziami po bokach — zamiast
     delikatnego tła widać było jaśniejszy prostokąt. `100vw` razem
     z wyśrodkowaniem przez `translate` działa niezależnie od tego, jak
     szeroki jest akurat kontener. */
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background:
    radial-gradient(60rem 22rem at 12% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  /* Ta sama maska co w `.naglowek-strony`: bez niej poświata urywa się
     prostą krawędzią i zamiast delikatnego tła widać jaśniejszy
     prostokąt wklejony pod nagłówek. */
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
  pointer-events: none;
  z-index: -1;
}

/* ──────────────────────────────────────────────────────────────────
   NAGŁÓWEK PODSTRONY — jedna definicja dla całego serwisu

   Podstrony zaczynały się na cztery sposoby: `hero hero-waskie`,
   `panel-naglowek` (nagłówek **z panelu administratora**, użyty na
   stronach publicznych), formularz albo nic. Z zewnątrz wyglądało to
   jak kilka serwisów zszytych razem.

   Zamiast przepisywać czterdzieści osiem szablonów naraz, metryki są
   zdefiniowane raz, a dotychczasowe idiomy są wymienione jako aliasy.
   Nowe podstrony używają partiala `partials/naglowek-strony`.

   `h1` w selektorze aliasu jest konieczne: `ceny-paliw.php` używa
   `panel-naglowek` także do nagłówków sekcji (`h2`), a te mają zostać
   małe. Bez zawężenia do `h1` tytuł sekcji rósłby do rozmiaru tytułu
   strony i strona rozpadałaby się na trzy pierwsze ekrany.

   `body:not(.panel-body)` trzyma to z dala od panelu: tam
   `panel-naglowek` ma swoją, ciaśniejszą miarę i ma ją zachować.
   ────────────────────────────────────────────────────────────────── */
.naglowek-strony,
body:not(.panel-body) header.panel-naglowek:has(> h1) {
  position: relative;
  padding: clamp(2rem, 5vw, 3rem) 0 1.25rem;
  margin: 0 0 1.25rem;
}

/* Delikatna poświata w kolorze akcentu, ta sama co w `.hero` — to ona
   wiąże podstronę ze stroną główną, gdzie rolę tła gra zdjęcie. */
.naglowek-strony::before,
body:not(.panel-body) header.panel-naglowek:has(> h1)::before {
  content: "";
  position: absolute;
  /* Patrz uwaga przy `.hero::before` — poświata idzie na szerokość okna. */
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: radial-gradient(60rem 22rem at 12% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  /* Bez maski poświata urywa się prostą krawędzią na dole nagłówka —
     widać wtedy prostokąt jaśniejszego tła, czyli dokładnie to, czego
     delikatne tło miało nie robić. */
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
  pointer-events: none;
  z-index: -1;
}

.naglowek-strony > h1,
.hero.hero-waskie > h1,
body:not(.panel-body) header.panel-naglowek > h1,
.blad > h1,
.wyniki-listy > h1 {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .5rem;
}

/* Lead: zdanie wprowadzające. `--measure` pilnuje, żeby nie rozciągnęło
   się na całą szerokość ekranu — wiersz dłuższy niż kilkadziesiąt znaków
   czyta się o kilkanaście procent wolniej. */
.naglowek-lead,
.hero.hero-waskie > .hero-opis,
body:not(.panel-body) header.panel-naglowek > .podpowiedz,
.blad > .blad-opis,
.wyniki-listy > .hero-opis {
  color: var(--ink-2);
  font-size: 1.02rem;
  max-width: var(--measure);
  margin: 0 0 1rem;
}

/* Etykieta nad tytułem — tym samym krojem co znaczniki w serwisie,
   żeby „nie znaleziono" i „profil przykładowy" czytały się jak jedna
   rodzina komunikatów, a nie jak trzy różne pomysły. */
.naglowek-odznaka,
.blad > .blad-kod {
  margin: 0 0 .5rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
}

/* Tytuł po lewej, przyciski po prawej — a na telefonie jedno pod drugim.
   `flex-wrap` zamiast zapytania o szerokość: układ łamie się wtedy, gdy
   naprawdę brakuje miejsca, a nie przy wymyślonym progu pikseli. */
.naglowek-rzad {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
}
.naglowek-tekst { min-width: 0; }
.naglowek-tekst > :last-child { margin-bottom: 0; }
.naglowek-akcje { display: flex; gap: .5rem; flex-wrap: wrap; }
.naglowek-pod { margin-top: 1rem; }

.naglowek-okruszki { margin: 0 0 .6rem; font-size: .88rem; }
.naglowek-okruszki a { color: var(--ink-3); text-decoration: none; }
.naglowek-okruszki a:hover { color: var(--accent); text-decoration: underline; }

.hero-tablica { display: block; margin: 0 0 1.1rem; }
/* Lekkie przechylenie: tablica ma wyglądać jak przedmiot położony na
   stronie, a nie jak logo wklejone do siatki. */
.hero-tablica .tablica {
  transform: rotate(-2deg);
  box-shadow: 0 4px 14px rgb(0 0 0 / .14);
}

.hero h1 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.08; margin: 0 0 .6rem;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero-opis { color: var(--ink-2); margin: 0 0 1.75rem; max-width: var(--measure); font-size: 1.05rem; }

.szukaj {
  display: flex; gap: .5rem; flex-wrap: wrap; max-width: 34rem;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 2px 10px rgb(0 0 0 / .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Ramka reaguje na całym pudełku, nie na samym polu — inaczej obwódka
   ogniskowania rysuje się w środku ramki i wygląda jak błąd. */
.szukaj:focus-within {
  border-color: var(--accent);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.szukaj input {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; font-size: 1.15rem; font-weight: 600;
  padding: .75rem .9rem;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--ink);
  text-transform: uppercase; letter-spacing: .08em;
}
.szukaj input:focus-visible { outline: none; }
.szukaj input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--ink-3); }
.szukaj button {
  font: inherit; font-weight: 600;
  padding: .75rem 1.6rem;
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.szukaj button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.szukaj button:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .szukaj, .szukaj button { transition: none; }
  .szukaj button:hover { transform: none; }
  .hero-tablica .tablica { transform: none; }
}
.podpowiedz { color: var(--ink-3); font-size: .875rem; margin: .6rem 0 0; }

/* ── Sekcje ──────────────────────────────────────────────────── */
.sekcja { padding: 2rem 0; border-top: 1px solid var(--line); }
.sekcja h2 {
  font-size: 1.3rem; margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

/* Nagłówek sekcji z odnośnikiem po prawej — tytuł i „zobacz wszystkie"
   w jednej linii bazowej, żeby nie tworzyły dwóch osobnych rzędów. */
.sekcja-naglowek {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin: 0 0 .75rem;
}
.sekcja-naglowek h2 { margin: 0; }
.sekcja-naglowek .podpowiedz, .sekcja-naglowek .link-wiecej { margin: 0 0 0 auto; }
.sekcja p { color: var(--ink-2); margin: 0; max-width: var(--measure); }
.stan-budowy { color: var(--ink-2); }

/* ── Strony błędów ───────────────────────────────────────────── */
.blad { padding: clamp(3rem, 12vh, 7rem) 0 3rem; max-width: var(--measure); }
.blad-kod {
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; color: var(--accent); margin: 0 0 .5rem;
}
/* Strony błędu i formularze mają **jeden, wspólny, mniejszy** stopień
   niż nagłówek podstrony. Mniejszy celowo: formularz logowania ma
   prowadzić do pola, a nie krzyczeć tytułem. Wspólny, bo 2,1rem tutaj
   i 2rem w formularzach to nie była decyzja, tylko dwa niezależne
   przybliżenia tej samej myśli. */
.blad h1 { font-size: var(--naglowek-waski); line-height: 1.2; margin: 0 0 .75rem; text-wrap: balance; }
.blad-opis { color: var(--ink-2); margin: 0 0 1.25rem; }
.blad-akcje { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 0; }
.blad-trace { color: var(--ink-3); font-size: .875rem; margin: 2rem 0 0; }
.blad-trace code, .blad-debug code { font-family: var(--mono); font-size: .82em; background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px; }
.szukaj-blad { margin: 1.5rem 0 0; }

.przycisk {
  display: inline-block; font-weight: 600; text-decoration: none;
  padding: .6rem 1.2rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
}
.przycisk:hover { filter: brightness(1.08); }

a { color: var(--accent); }

.blad-debug {
  margin: 2rem 0 0; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--crit); border-radius: var(--radius);
  overflow-x: auto;
}
.blad-debug summary { cursor: pointer; font-weight: 600; color: var(--crit); }
.blad-debug ol { margin: .75rem 0 0; padding-left: 1.4rem; font-size: .8rem; line-height: 1.7; }

/* ── Stopka ──────────────────────────────────────────────────── */
.stopka {
  margin-top: 4rem; padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: .875rem;
  background: var(--surface);
}
.stopka p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══ Etap 01 — profile tablic, regiony, listy ═══════════════════ */

.hero-waskie { padding: clamp(2rem, 5vw, 3rem) 0 1rem; }

.tablica-duza { height: 3.4rem; border-radius: 7px; }
.tablica-duza .tablica-band { width: 2rem; font-size: .78rem; }
.tablica-duza .tablica-tekst { font-size: 1.9rem; padding: 0 1rem; letter-spacing: .08em; }

.tablica-mini { height: 1.7rem; }
.tablica-mini .tablica-band { width: 1rem; font-size: .5rem; }
.tablica-mini .tablica-tekst { font-size: .85rem; padding: 0 .4rem; }

.profil-naglowek {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  padding: 2rem 0 1.5rem;
}
.profil-region { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.profil-stopka { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.ostrzezenie {
  margin: .5rem 0 0; padding: .5rem .8rem; border-radius: var(--radius);
  background: var(--surface-2); color: var(--crit); font-size: .9rem; font-weight: 600;
}

.statystyki {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--surface); padding: 1rem .75rem; text-align: center; }
.stat-wartosc {
  display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-etykieta {
  display: block; margin-top: .2rem; font-size: .75rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}

.lista-tablic { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-tablic a {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
}
.lista-tablic a:hover { border-color: var(--accent); }
.lista-meta { color: var(--ink-3); font-size: .82rem; }
.lista-pozioma { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }

.lista-regionow { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-regionow a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
}
.lista-regionow a:hover { border-color: var(--accent); }
.region-licznik { color: var(--ink-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.lista-zwarta { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.lista-zwarta a { justify-content: flex-start; }

.okruszki { padding: 1rem 0 0; font-size: .85rem; color: var(--ink-3); }
.okruszki a { color: var(--ink-2); }

.propozycja { margin: 1rem 0 1.5rem; }

/* ═══ Etap 02 — formularze i konto ═══════════════════════════════ */

.formularz-strona { max-width: 26rem; margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) 0 3rem; }
.formularz-szerokie { max-width: 40rem; }
.formularz-strona h1 { font-size: var(--naglowek-waski); line-height: 1.2; margin: 0 0 .75rem; text-wrap: balance; }
.formularz-strona h2 { font-size: 1.1rem; margin: 2.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

.formularz { display: grid; gap: 1.1rem; margin: 1.5rem 0 0; }
.formularz-inline { margin-top: 1rem; }

.pole { display: grid; gap: .35rem; }
.pole label { font-weight: 600; font-size: .92rem; }
.pole input {
  font: inherit; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); width: 100%;
}
.pole input:focus-visible { border-color: var(--accent); }
.pole-opcjonalne { font-weight: 400; color: var(--ink-3); font-size: .85em; }
.pole-podpowiedz { margin: 0; font-size: .82rem; color: var(--ink-3); }
.pole-komunikat { margin: 0; font-size: .85rem; color: var(--crit); font-weight: 500; }
.pole-blad input { border-color: var(--crit); }

.komunikat-blad {
  margin: 1rem 0 0; padding: .7rem .9rem;
  border-radius: var(--radius); border-left: 3px solid var(--crit);
  background: var(--surface); color: var(--crit); font-size: .92rem; font-weight: 500;
}

.formularz-stopka { margin: 1.5rem 0 0; font-size: .9rem; color: var(--ink-3); }

.przycisk-drugorzedny {
  background: transparent; color: var(--accent);
  border: 1px solid var(--line); font: inherit; font-weight: 600;
  padding: .6rem 1.2rem; border-radius: var(--radius); cursor: pointer;
}
.przycisk-drugorzedny:hover { border-color: var(--accent); filter: none; }
button.przycisk { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

.podpowiedz-ramka {
  margin: 1.25rem 0 0; padding: .75rem .9rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}

.lista-sesji { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; }
.lista-sesji li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2);
}
.znacznik {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .15rem .5rem; border-radius: 4px; background: var(--surface-2); color: var(--accent);
}

.nawigacja { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.nawigacja a { text-decoration: none; color: var(--ink-2); }
.nawigacja a:hover { color: var(--accent); }
.nawigacja-akcja {
  padding: .4rem .8rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink) !important; font-weight: 600;
}
@media (max-width: 30rem) { .nawigacja { font-size: .82rem; gap: .6rem; } }

/* ═══ Etap 03 — oceny, komentarze, zgłoszenia ════════════════════ */

.komunikat {
  margin: 1.5rem 0 0; padding: .7rem .9rem; border-radius: var(--radius);
  font-size: .92rem; font-weight: 500; border-left: 3px solid var(--line);
  background: var(--surface);
}
.komunikat-ok,
.komunikat-sukces { border-left-color: var(--ok, #0b6e4f); color: var(--ok, #0b6e4f); }
.komunikat-blad { border-left-color: var(--crit); color: var(--crit); }

.formularz-oceny { display: grid; gap: 1.1rem; margin: 1rem 0 0; }

.skala { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.skala legend { font-weight: 600; font-size: .92rem; padding: 0 0 .5rem; }
.skala-opcja {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.skala-opcja:hover { border-color: var(--accent); }
.skala-opcja:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.skala-cyfra { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1ch; }
.skala-opis { color: var(--ink-2); font-size: .9rem; }

select {
  font: inherit; padding: .6rem .7rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
textarea {
  font: inherit; padding: .65rem .8rem; width: 100%; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); line-height: 1.5;
}

.lista-komentarzy { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; }
.komentarz {
  padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.komentarz-ukryty { border-style: dashed; opacity: .8; }
.komentarz-naglowek {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; margin-bottom: .4rem;
}
.komentarz-autor { font-weight: 600; }
.komentarz-data { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.komentarz-tresc { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.komentarz-adnotacja {
  margin: 0 0 .5rem; padding: .4rem .6rem; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-2); font-size: .82rem;
}
.komentarz-zglos { margin: .6rem 0 0; font-size: .82rem; }
.komentarz-zglos summary { cursor: pointer; color: var(--ink-3); }
.komentarz-zglos summary:hover { color: var(--accent); }
.formularz-zglos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; }
.formularz-zglos select { width: auto; flex: 1 1 12rem; }

/* ═══ Etap 04 — panel moderatora ═════════════════════════════════ */

.panel { padding: clamp(1.5rem, 4vw, 2.5rem) 0 3rem; }
.panel-waskie { max-width: 46rem; }
.panel-naglowek { margin: 0 0 1.5rem; }
.panel-naglowek h1 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 .25rem; }
.panel h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.panel-stopka { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.pusto { color: var(--ink-3); padding: 2rem 0; }

.stat-alarm .stat-wartosc { color: var(--crit); }

.tabela-obudowa { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 1.25rem 0 0; }
.tabela { border-collapse: collapse; width: 100%; font-size: .88rem; }
.tabela th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 600; padding: .6rem .7rem;
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tabela td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wiersz-alarm { background: color-mix(in srgb, var(--crit) 6%, transparent); }
.komorka-tresc { max-width: 24rem; }
.urwane { display: block; overflow-wrap: anywhere; }
.skrot { font-family: var(--mono); font-size: .78rem; }

.znacznik-prio {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .15rem .5rem; border-radius: 4px; white-space: nowrap;
}
.prio-1 { background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); }
.prio-2 { background: color-mix(in srgb, var(--warn, #95530a) 15%, transparent); color: var(--warn, #95530a); }
.prio-3, .prio-4 { background: var(--surface-2); color: var(--ink-3); }

.znacznik-pii {
  display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .4rem; border-radius: 4px; margin-right: .4rem;
  background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit);
}

.przycisk-maly {
  display: inline-block; font-size: .8rem; font-weight: 600; text-decoration: none;
  padding: .3rem .7rem; border-radius: 5px; background: var(--accent); color: var(--accent-ink);
  white-space: nowrap;
}

.tresc-sprawy {
  margin: 0 0 1.25rem; padding: .9rem 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  line-height: 1.6; overflow-wrap: anywhere;
}

.dane { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.5rem; font-size: .9rem; }
.dane dt { font-weight: 600; color: var(--ink-3); }
.dane dd { margin: 0; color: var(--ink-2); }

.lista-zgloszen, .lista-historii { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .88rem; }
.lista-zgloszen li, .lista-historii li {
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.lista-zgloszen p, .lista-historii p { margin: .3rem 0 0; color: var(--ink-2); }

/* Diagnostyka wymiany linków.

   Kolorowy pasek z lewej zamiast ikon: kroki czyta się z góry na dół
   i chodzi o to, żeby pierwszy niezałatwiony rzucał się w oczy bez
   czytania całości. */
.diagnoza-wymiany { margin: .75rem 0 0; font-size: .88rem; }
.diagnoza-wymiany summary { cursor: pointer; font-weight: 600; }
.lista-diagnozy { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lista-diagnozy li {
  padding: .5rem .75rem; border: 1px solid var(--line);
  border-left-width: 3px; border-radius: var(--radius);
  background: var(--surface);
}
.lista-diagnozy .krok-ok { border-left-color: var(--ok, #2e7d32); }
.lista-diagnozy .krok-uwaga { border-left-color: var(--uwaga, #b26a00); }
.lista-diagnozy strong { display: block; }
.lista-diagnozy .lista-meta { color: var(--ink-2); }

.skala-opcja-szeroka { align-items: flex-start; }
.akcja-nazwa { display: block; font-weight: 600; }
.akcja-opis { display: block; font-size: .82rem; color: var(--ink-3); margin-top: .1rem; }

/* Siatka, nie luźny flex. Przy flexie przyciski akcji odrywały się od
   pól i lądowały nad nimi po prawej — formularz wyglądał, jakby ktoś go
   upuścił. Pola płyną, rząd przycisków dostaje własną linię. */
.formularz-filtr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.formularz-filtr input,
.formularz-filtr select {
  width: 100%; font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ground); color: var(--ink);
}
.formularz-filtr input:focus-visible,
.formularz-filtr select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.formularz-filtr .pole { display: grid; gap: .3rem; margin: 0; }
.formularz-filtr .pole > span {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
/* Przyciski zawsze w osobnej linii pod polami — inaczej „Szukaj"
   przeskakuje w bok przy każdej zmianie liczby pól. */
.formularz-filtr .rzad-akcji {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: .15rem;
}

.paginacja { display: flex; gap: 1.25rem; align-items: center; margin: 1.25rem 0 0; font-size: .9rem; }

/* ── Rankingi ────────────────────────────────────────────────── */
/*
   Tabela rankingu musi być czytelna na telefonie, a ma sześć kolumn.
   Zamiast chować dane pod „pokaż więcej" pozwalamy jej przewijać się
   w poziomie we własnym kontenerze — strona nigdy nie jedzie na boki.
*/
.tabela-przewijana { overflow-x: auto; margin: 0 0 2rem; -webkit-overflow-scrolling: touch; }

.ranking-tabela {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .92rem;
}
.ranking-tabela th, .ranking-tabela td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
.ranking-tabela thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); background: var(--surface-2); white-space: nowrap;
}
.ranking-tabela tbody tr:last-child td { border-bottom: 0; }
.ranking-tabela tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ranking-tabela a { color: inherit; text-decoration: none; }
.ranking-tabela a:hover { text-decoration: underline; }

.kol-pozycja { width: 3rem; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 700; }
.kol-liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kol-region { color: var(--ink-2); }
.brak { color: var(--ink-3); }

.zmiana { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.zmiana-wzrost { color: var(--ok); }
.zmiana-spadek { color: var(--crit); }
.zmiana-bez { color: var(--ink-3); font-weight: 400; }

.ranking-blok { margin: 0 0 2.5rem; }
.ranking-blok-naglowek { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.ranking-blok-naglowek h2 { margin: 0; font-size: 1.25rem; }
.ranking-opis { color: var(--ink-2); margin: .35rem 0 1rem; max-width: var(--measure); font-size: .92rem; }
.link-wiecej { font-size: .88rem; font-weight: 600; white-space: nowrap; }

.filtr-regionow { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.filtr-pozycja {
  font-size: .84rem; text-decoration: none; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.filtr-pozycja:hover { border-color: var(--accent); color: var(--accent); }
.filtr-aktywna { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.filtr-aktywna:hover { color: var(--accent-ink); }

.plakietka {
  display: inline-block; font-size: .82rem; padding: .35rem .75rem; border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-2); margin: 0;
}
.plakietka-archiwum { border-left: 3px solid var(--ink-3); }

.pusto { color: var(--ink-2); max-width: var(--measure); margin: 1.5rem 0; }

.lista-okresow { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-okresow-siatka { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.lista-okresow a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .6rem .85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
}
.lista-okresow a:hover { border-color: var(--accent); }
.okres-nazwa { font-weight: 600; text-transform: capitalize; }

.archiwum-rok { margin: 0 0 2rem; }
.archiwum-rok h2 { font-size: 1.1rem; margin: 0 0 .75rem; color: var(--ink-2); }

.tylko-dla-czytnika {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Panel administratora ────────────────────────────────────── */
.panel-nawigacja { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }

.lista-statusow { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.lista-statusow li {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.kropka { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.kropka-ok { background: var(--ok); }
.kropka-nie { background: var(--ink-3); }

.formularz-ustawien, .formularz-zgloszenia { max-width: 46rem; margin: 1.5rem 0 0; }

.pole-ustawienia { margin: 0 0 1.4rem; }
.pole-ustawienia > label { display: block; font-weight: 600; margin: 0 0 .35rem; font-size: .92rem; }
.pole-ustawienia input[type="text"],
.pole-ustawienia input[type="number"],
.pole-ustawienia select,
.pole-ustawienia textarea {
  width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.pole-ustawienia textarea { resize: vertical; line-height: 1.5; }
.pole-ustawienia .podpowiedz { margin: .35rem 0 0; }

/* Etykieta z checkboxem: cały tekst jest celem kliknięcia, nie sam kwadracik. */
.przelacznik { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; padding: .2rem 0; font-size: .95rem; }
.przelacznik input { margin-top: .2rem; flex: 0 0 auto; }

.zestaw-opcji { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin: 0; background: var(--surface); }
.zestaw-opcji legend { font-weight: 600; padding: 0 .35rem; font-size: .92rem; }

/* ── Wymiana linków ──────────────────────────────────────────── */
.coreinfra-links { margin: 1.25rem 0 0; font-size: .82rem; }
.coreinfra-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.coreinfra-links a { color: var(--ink-3); text-decoration: none; }
.coreinfra-links a:hover { color: var(--ink-2); text-decoration: underline; }

/* ── Strony redakcyjne ───────────────────────────────────────── */
.tresc-redakcyjna { max-width: var(--measure); margin: 1.5rem 0 3rem; }
.tresc-redakcyjna h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1rem; text-wrap: balance; }
.tresc-redakcyjna h2 { font-size: 1.2rem; margin: 2.25rem 0 .6rem; }
.tresc-redakcyjna h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.tresc-redakcyjna p, .tresc-redakcyjna li { line-height: 1.7; color: var(--ink-2); }
.tresc-redakcyjna ul { padding-left: 1.25rem; display: grid; gap: .5rem; margin: .75rem 0 1rem; }
.tresc-redakcyjna .lead { font-size: 1.08rem; color: var(--ink); }
.tresc-redakcyjna strong { color: var(--ink); }

/* Tabela w treści musi przewijać się sama — strona nigdy nie jedzie w bok. */
.tabela-danych { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9rem; display: block; overflow-x: auto; }
.tabela-danych th, .tabela-danych td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela-danych thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; }

.stopka-linki { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .75rem 0 0; font-size: .85rem; }
.stopka-linki a { color: var(--ink-3); text-decoration: none; }
.stopka-linki a:hover { color: var(--ink-2); text-decoration: underline; }

/* ── Sekcja nieodwracalna ────────────────────────────────────── */
.sekcja-niebezpieczna { border: 1px solid var(--crit); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 2.5rem; }
.sekcja-niebezpieczna h2 { color: var(--crit); margin-top: 0; }
.przycisk-niebezpieczny { background: var(--crit); border-color: var(--crit); }
.klucz-jawny { display: block; padding: .7rem .85rem; border-radius: var(--radius); background: var(--surface-2); font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; }

/* ── Kreator instalacji ──────────────────────────────────────── */
.kreator { max-width: 46rem; }

.kreator-kroki {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  counter-reset: krok;
}
.kreator-krok {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem; border-radius: 999px; font-size: .82rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
}
.krok-numer {
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem;
  border-radius: 50%; background: var(--surface-2); font-size: .72rem; font-weight: 700;
}
.krok-biezacy { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.krok-biezacy .krok-numer { background: var(--accent); color: var(--accent-ink); }
.krok-zrobiony { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.krok-zrobiony .krok-numer { background: var(--ok); color: var(--accent-ink); }

.kropka-blad { background: var(--crit); }
.blad-pola { color: var(--crit); }

.lista-krokow { padding-left: 1.25rem; display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.lista-krokow li { line-height: 1.6; color: var(--ink-2); }
.lista-zwarta { font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════
   Panel administratora — własna powłoka
   Panel jest narzędziem pracy: stałe menu z lewej, treść z prawej,
   pełna szerokość ekranu. Układ serwisu (wąska kolumna do czytania,
   nagłówek z linkami dla gości) tylko by tu przeszkadzał.
   ═══════════════════════════════════════════════════════════════ */

.panel-body { background: var(--ground); }

.panel-uklad { display: flex; min-height: 100vh; align-items: stretch; }

/* Przełącznik menu na wąskim ekranie — bez JavaScriptu.
   Panel musi działać także wtedy, gdy skrypt się nie wczyta. */
.panel-przelacznik { position: absolute; opacity: 0; pointer-events: none; }

/* ── Menu boczne ──────────────────────────────────────────────── */
.panel-bok {
  width: 16.5rem; flex: 0 0 16.5rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}

.panel-marka { padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line); }
.panel-marka-link { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.panel-marka-nazwa { display: flex; flex-direction: column; font-weight: 650; line-height: 1.25; font-size: .95rem; }
.panel-marka-nazwa small { font-weight: 400; font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }

.panel-menu { padding: .75rem .6rem 1rem; flex: 1 1 auto; }
.panel-menu-grupa {
  margin: 1rem .4rem .35rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.panel-menu-grupa:first-child { margin-top: .25rem; }
.panel-menu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.panel-menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .45rem .6rem; border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: .9rem;
  border-left: 3px solid transparent;
}
.panel-menu-link:hover { background: var(--surface-2); color: var(--ink); }
.panel-menu-link.jest-aktywna {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
  color: var(--ink); font-weight: 600;
}

.panel-odznaka {
  min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: .72rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.panel-odznaka-alarm { background: var(--crit); color: #fff; }

.panel-bok-stopka { padding: .75rem 1rem 1rem; border-top: 1px solid var(--line); font-size: .82rem; }
.panel-bok-uwaga { margin: 0 0 .5rem; color: var(--crit); }
.panel-bok-link { color: var(--ink-3); text-decoration: none; }
.panel-bok-link:hover { text-decoration: underline; }

/* ── Kolumna treści ───────────────────────────────────────────── */
.panel-glowna { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.panel-pasek {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 3vw, 2rem);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.panel-pasek-tytul { flex: 1 1 auto; min-width: 0; }
.panel-pasek-tytul h1 { margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.3rem); line-height: 1.3; }
.panel-pasek-tytul p { margin: .15rem 0 0; font-size: .84rem; color: var(--ink-3); }
.panel-pasek-akcje { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.panel-konto { font-size: .85rem; color: var(--ink-3); }
.panel-wyloguj { margin: 0; }

.panel-hamburger { display: none; flex-direction: column; gap: 4px; padding: .4rem; cursor: pointer; }
.panel-hamburger span { display: block; width: 20px; height: 2px; background: var(--ink-2); border-radius: 2px; }

.panel-tresc { padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 2rem) 3rem; flex: 1 1 auto; }

/* ── Karty ────────────────────────────────────────────────────── */
.karty { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.karta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
}
.karta-szeroka { grid-column: 1 / -1; }
.karta > h2, .karta > h3 {
  margin: 0 0 .75rem; font-size: .95rem; border: 0; padding: 0;
  letter-spacing: .01em;
}
.karta-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .75rem; }
.karta-naglowek h2, .karta-naglowek h3 { margin: 0; font-size: .95rem; border: 0; padding: 0; }
.karta-naglowek a { font-size: .82rem; }
.karta > :last-child { margin-bottom: 0; }

/* Kafelki liczb — czytelne w rzędzie, nie rozjeżdżają się przy jednym. */
.kafelki { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0 0 1.25rem; }
.kafelek {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.kafelek-wartosc { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kafelek-etykieta { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .2rem; }
.kafelek-alarm { border-color: var(--crit); }
.kafelek-alarm .kafelek-wartosc { color: var(--crit); }
.kafelek a { color: inherit; text-decoration: none; }

/* ── Pusty stan ───────────────────────────────────────────────── */
.pusto {
  padding: 1.5rem 1rem; text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--radius); font-size: .9rem;
}

/* ── Etykiety stanu ───────────────────────────────────────────── */
.znacznik {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.znacznik-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.znacznik-alarm { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.znacznik-uwaga { background: color-mix(in srgb, #b7791f 18%, transparent); color: #8a5a00; }

/* ── Formularze w panelu ──────────────────────────────────────── */
.panel-tresc .pole { margin: 0 0 .9rem; }
.panel-tresc .pole label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 .25rem; }
.panel-tresc input[type=text], .panel-tresc input[type=number],
.panel-tresc input[type=email], .panel-tresc input[type=password], .panel-tresc select, .panel-tresc textarea {
  width: 100%; max-width: 32rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--ground); color: var(--ink); font: inherit; font-size: .9rem;
}
.panel-tresc .podpowiedz { font-size: .8rem; color: var(--ink-3); margin: .25rem 0 0; }

.rzad-akcji { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 0; }

/* ── Wąski ekran ──────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .panel-bok {
    position: fixed; inset: 0 auto 0 0; z-index: 20;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0); 
  }
  .panel-przelacznik:checked ~ .panel-bok { transform: translateX(0); box-shadow: 0 0 2rem rgba(0, 0, 0, .3); }
  .panel-hamburger { display: flex; }
  .panel-pasek { position: static; }
}

/* Odstępy w kartach. Nagłówki drugiego poziomu bez marginesu zlewały się
   z przyciskiem stojącym nad nimi — czytało się to jak podpis do guzika. */
.karta h3 { margin: 1.5rem 0 .5rem; font-size: .88rem; letter-spacing: .01em; }
.karta h3:first-child { margin-top: 0; }
.karta p { margin: 0 0 .6rem; }
.karta .rzad-akcji { margin: .85rem 0 0; }
.karta .lista-historii { margin: 0; }
.karta .lista-statusow { margin: 0; }

.karty { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }

/* Formularz ustawień w kolumnie do czytania. Rozciągnięty na całą szerokość
   ekranu wymusza wodzenie wzrokiem od etykiety po drugiej stronie monitora. */
.formularz-ustawien { max-width: 46rem; }
.formularz-ustawien fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1rem; margin: 0 0 .9rem;
}
.formularz-ustawien legend { font-size: .85rem; font-weight: 650; padding: 0 .35rem; }

/* ── Gwiazdki oceny ───────────────────────────────────────────────
   Kolor jest wzmocnieniem, nie nośnikiem: liczba stoi obok gwiazdek,
   a pełny opis w tekście dla czytnika ekranu. Daltonista i osoba
   czytająca uchem dostają tę samą informację, co reszta. */
.gwiazdki { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.gwiazdki-rysunek { letter-spacing: .06em; font-size: .95rem; line-height: 1; }
.gwiazdki-liczba { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.gwiazdki-dobre  .gwiazdki-rysunek { color: var(--ok); }
.gwiazdki-srednie .gwiazdki-rysunek { color: #b7791f; }
.gwiazdki-slabe  .gwiazdki-rysunek { color: var(--crit); }
.gwiazdki-slabe  .gwiazdki-liczba  { color: var(--crit); font-weight: 700; }

/* Komentarz z oceną 1–2 wyróżniony paskiem. Czerwona ramka dookoła
   krzyczałaby jak błąd systemu — pasek z boku wystarczy, żeby oko
   samo znalazło skargi na liście. */
.komentarz-slaba-ocena {
  border-left: 4px solid var(--crit);
  background: color-mix(in srgb, var(--crit) 4%, var(--surface));
}
.komentarz-naglowek { align-items: baseline; }

/* ── Zdjęcia przy komentarzu ──────────────────────────────────────
   Miniatury w rzędzie, pełne zdjęcie po kliknięciu w nowej karcie.
   Bez własnej nakładki: przeglądarka pokazuje obraz lepiej, a strona
   działa też wtedy, gdy skrypt się nie wczyta. */
.komentarz-zdjecia {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.komentarz-zdjecia img {
  display: block; width: auto; height: 8rem; max-width: 100%;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); object-fit: cover;
}
.komentarz-zdjecia a:focus-visible img { outline: 2px solid var(--accent); outline-offset: 2px; }
.komentarz-zdjecia img:hover { filter: brightness(.94); }

/* Podstrona z jednym zdjęciem.

   Wysokość obrazu jest ograniczona wysokością okna (`min()` z `70svh`),
   bo zdjęcie z telefonu w pionie inaczej wypycha treść komentarza poza
   ekran — a to komentarz mówi, po co to zdjęcie tu jest. */
.zdjecie-pelne { margin: 0 0 1.5rem; }
.zdjecie-pelne img {
  display: block; width: auto; max-width: 100%;
  max-height: min(70svh, 44rem);
  margin: 0 auto; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.zdjecie-pelne figcaption { max-width: 44rem; margin: 1rem auto 0; }
.zdjecie-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin: 0 0 .5rem; font-size: .88rem; color: var(--muted);
}
.zdjecie-komentarz {
  margin: 0; padding: .7rem 1rem;
  border-left: 3px solid var(--line); background: var(--surface-2);
  border-radius: 0 6px 6px 0;
}
.zdjecie-nawigacja {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 0 0 2rem;
}

.pole input[type=file] {
  width: 100%; max-width: 32rem; padding: .4rem;
  border: 1px dashed var(--line); border-radius: 6px;
  background: var(--surface); font: inherit; font-size: .88rem;
}

/* Podgląd zdjęć w panelu moderacji — mniejszy, bo moderator ocenia
   treść, a nie ogląda galerię. */
.sprawa-zdjecia { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sprawa-zdjecia img { display: block; height: 6rem; border-radius: 6px; border: 1px solid var(--line); }

/* Skala oceny wewnątrz formularza komentarza — węższa niż ta w sekcji
   „Oceń zachowanie", bo tu jest dodatkiem do treści, nie głównym zadaniem. */
.skala-przy-komentarzu { margin: 0 0 1rem; }
.skala-przy-komentarzu .skala-opcja { padding: .3rem .5rem; }
.skala-przy-komentarzu legend { font-size: .85rem; font-weight: 600; }

/* Stan modułu w ustawieniach — najpierw fakt, potem formularz. */
.stan-modulu { margin: 0 0 1rem; }
.stan-modulu .lista-statusow li { align-items: center; gap: .5rem; }
.stan-modulu .znacznik { margin-left: auto; }

/* ── Pojazd przy tablicy ──────────────────────────────────────── */
.pojazd-dane {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem; margin: 0 0 .75rem;
}
.pojazd-dane > div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem;
}
.pojazd-dane dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.pojazd-dane dd { margin: .15rem 0 0; font-weight: 600; }

.pojazd-formularz { margin: 1rem 0 0; }
.pojazd-formularz summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.pojazd-formularz summary:hover { text-decoration: underline; }
.pojazd-formularz .formularz { margin-top: .9rem; }

.pole-rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.pole-rzad .pole { margin: 0; }

/* ── Utrudnienia drogowe ──────────────────────────────────────────
   Waga zdarzenia niesiona paskiem z lewej, nie samym kolorem tekstu:
   „wypadek" ma być widoczny przy przewijaniu listy kciukiem. */
.lista-utrudnien { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .7rem; }
.utrudnienie {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong, var(--line));
  border-radius: var(--radius); padding: .8rem 1rem;
}
.utrudnienie.waga-wysoka  { border-left-color: var(--crit); }
.utrudnienie.waga-srednia { border-left-color: #b7791f; }
.utrudnienie.waga-niska   { border-left-color: var(--ink-3); }

.utrudnienie-gora { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.utrudnienie-tytul { margin: 0; font-weight: 600; line-height: 1.4; }
.utrudnienie-opis { margin: .35rem 0 0; color: var(--ink-2); font-size: .93rem; }
.utrudnienie-czas { font-size: .8rem; color: var(--ink-3); margin-left: auto; }

/* Numer drogi zapisany jak na znaku drogowym — czytelny skrót do tego,
   gdzie to jest, zanim ktokolwiek przeczyta opis. */
.droga {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: .78rem; letter-spacing: .03em;
}

.lista-utrudnien-skrot .utrudnienie { padding: .6rem .8rem; }


/* ═══ Etap 06 — tablica jak tablica ══════════════════════════════
   Wieniec dwunastu gwiazd rysowany jako obrazek tła pasa, a nie
   znacznikami w widoku. Powód jest praktyczny: pas występuje
   w siedmiu miejscach serwisu, część z nich to szablony układu,
   a tło ulepsza je wszystkie naraz i nie wymaga dotykania żadnego.

   Gwiazdy siedzą w górnej części pasa, kod kraju pod nimi — dokładnie
   tak, jak na prawdziwej tablicy. Poniżej pewnej wysokości gwiazdy
   znikają: w skali listy rankingowej byłyby żółtą plamą, a nie
   wieńcem, i psułyby czytelność samego numeru. */

.tablica-band {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20id%3D%22s%22%20fill%3D%22%23FC0%22%20d%3D%22M50.0%207.5L52.1%2014.1L59.0%2014.1L53.5%2018.1L55.6%2024.7L50.0%2020.6L44.4%2024.7L46.5%2018.1L41.0%2014.1L47.9%2014.1Z%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%2830%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%2860%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%2890%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28120%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28150%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28180%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28210%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28240%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28270%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28300%2050%2050%29%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22rotate%28330%2050%2050%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center 12%;
  background-size: 78% auto;
  align-items: flex-end;
  padding-bottom: .1rem;
  line-height: 1;
}

/* Poniżej tej wysokości wieniec jest nieczytelny — zostaje sam kod. */
.tablica-mini .tablica-band,
.tablica-band.bez-gwiazd { background-image: none; align-items: center; padding-bottom: 0; }

/* Proporcje prawdziwej tablicy: 520 na 110 mm, pas 40 mm szerokości.
   Stąd 7,7% szerokości i wyraźnie węższy pas niż wcześniejsze 1,1rem
   przy dużym numerze. */
.tablica-duza .tablica-band { width: 2.1rem; font-size: .72rem; }

.tablica-mala { height: 2.4rem; }
.tablica-mala .tablica-band { width: 1.4rem; font-size: .62rem; }
.tablica-mala .tablica-tekst { font-size: 1.15rem; padding: 0 .6rem; }

/* Numer tablicy nie jest zwykłym tekstem: znaki mają równą szerokość,
   żeby „WZ 11111" i „WZ 88888" miały tę samą długość, tak jak na blasze. */
.tablica-tekst { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Tablica zawsze na białym tle z czarnym numerem — także w ciemnym
   motywie. Tablica w odcieniach szarości przestaje być tablicą. */
@media (prefers-color-scheme: dark) {
  .tablica { border-color: #0b0b0b; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
}

/* ═══ Etap 01 usług — punkty usługowe ════════════════════════════ */

.kafle-uslug {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem;
}
.kafel-usluga a {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  text-decoration: none; color: inherit;
}
.kafel-usluga a:hover { border-color: var(--accent); }
.kafel-tytul { font-weight: 600; }
.kafel-liczba { color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.kafel-pusty a { opacity: .55; }

.szukaj-uslugi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem; align-items: end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.szukaj-uslugi .rzad-akcji { display: flex; gap: .5rem; flex-wrap: wrap; }

.miasta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.miasta a {
  display: inline-flex; gap: .35rem; align-items: baseline;
  padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; text-decoration: none; color: var(--ink-2); background: var(--surface);
}
.miasta a:hover { border-color: var(--accent); color: var(--accent); }
.miasta-ile { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* Siatka kafli zamiast kolumny pasków. Punkty porównuje się między sobą
   — „która ładowarka mocniejsza i bliżej" — a lista jednokolumnowa każe
   przewijać zamiast patrzeć. Znak kategorii z lewej zamiast kolorowego
   paska: pasek był ozdobą, znak niesie informację. */
.lista-punktow {
  list-style: none; margin: 1.25rem 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
}

.punkt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.punkt:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / .07);
}

.punkt-znak {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.ikona-kategorii { display: block; }

.punkt-tresc { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

/* Cały kafel klikalny, ale zaznaczalny tekst zostaje: nakładka
   rozciąga obszar odnośnika, zamiast owijać w niego wszystko. */
.punkt-nazwa {
  font-weight: 600; font-size: 1.02rem; line-height: 1.25;
  text-decoration: none; color: var(--ink);
  overflow-wrap: anywhere;
}
.punkt-nazwa::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.punkt:hover .punkt-nazwa { color: var(--accent); }
.punkt-nazwa:focus-visible { outline: none; }
.punkt:has(.punkt-nazwa:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.punkt-adres { margin: 0; color: var(--ink-2); font-size: .88rem; }
.punkt-bez-adresu { color: var(--ink-3); font-style: italic; }
.punkt-godziny { margin: .25rem 0 0; color: var(--ink-3); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .punkt { transition: none; }
  .punkt:hover { transform: none; }
}

/* Odległość wyrównana do prawej i cyframi o równej szerokości —
   lista posortowana od najbliższego ma się czytać kolumną liczb. */
.punkt-odleglosc { float: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dane-punktu {
  display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .4rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.dane-punktu dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); align-self: center; }
.dane-punktu dd { margin: 0; }

.okruszki { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--ink-3); margin: 1rem 0 0; }
.okruszki a { color: var(--ink-2); }

.stronicowanie { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; font-size: .92rem; }

/* Źródło danych nie jest ozdobą stopki, tylko warunkiem licencji ODbL —
   więc jest widoczne, a nie schowane pod rozwijaczem. */
.zrodla { color: var(--ink-3); font-size: .85rem; margin: 1.5rem 0 0; max-width: var(--measure); }

@media (max-width: 34rem) {
  .dane-punktu { grid-template-columns: 1fr; gap: .1rem; }
  .dane-punktu dd { margin-bottom: .6rem; }
}

/* ═══ Ceny paliw i drugi składnik logowania ══════════════════════ */

.lista-cen { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.cena {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius); padding: .7rem 1rem;
}
.cena-paliwo { font-weight: 600; }
.cena-wartosc {
  grid-row: 1 / 3; align-self: center; text-align: right;
  font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cena-jednostka { display: block; font-size: .72rem; font-weight: 400; color: var(--ink-3); }
.cena-zrodlo { font-size: .82rem; color: var(--ink-3); }

/* Cena starsza niż doba nadal coś mówi, ale serwis nie może udawać,
   że to cena z dzisiaj — stąd wygaszony pasek i przygaszona liczba. */
.cena-stara { border-left-color: var(--ink-3); }
.cena-stara .cena-wartosc { color: var(--ink-2); }

.formularz-ceny { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; align-items: end; }

/* Sekret i kody zapasowe: monospace i duży odstęp między znakami,
   bo to się przepisuje ręcznie, często z drugiego ekranu. */
.sekret-mfa code {
  display: inline-block; font-family: var(--mono); font-size: 1.05rem;
  letter-spacing: .12em; word-break: break-all;
  background: var(--surface-2); padding: .6rem .8rem; border-radius: var(--radius);
}

.kody-zapasowe {
  list-style: none; margin: 1rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem;
}
.kody-zapasowe code {
  display: block; font-family: var(--mono); font-size: 1rem; letter-spacing: .08em;
  text-align: center; background: var(--surface-2);
  padding: .5rem; border-radius: var(--radius);
}

.turnstile { margin: 1rem 0; }

/* ═══ Dział dróg ═════════════════════════════════════════════════ */

/* Numer drogi jak na znaku drogowym — czytelny skrót do tego, gdzie
   to jest, zanim ktokolwiek przeczyta nazwę odcinka. */
a.droga { text-decoration: none; }
a.droga:hover { filter: brightness(1.15); }

.droga-strona h1 .droga { font-size: 1.4rem; padding: .25rem .7rem; }

.statystyka-lista {
  list-style: none; margin: 1rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem;
}
.statystyka-lista li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .55rem .8rem;
}
.statystyka-etykieta { color: var(--ink-2); font-size: .9rem; }
.statystyka-liczba { font-weight: 700; font-variant-numeric: tabular-nums; }

.kotwice { margin: 1rem 0; }
.kotwice summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.lista-kotwic { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; }
.lista-kotwic code { font-family: var(--mono); color: var(--ink-3); }

/* ═══ Języki ═════════════════════════════════════════════════════ */

.jezyki { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; font-size: .88rem; }
.jezyk { color: var(--ink-3); text-decoration: none; }
.jezyk:hover { color: var(--accent); text-decoration: underline; }
.jezyk-biezacy { color: var(--ink); font-weight: 600; }

/* Adnotacja nad treścią, nie pod nią: czytelnik ma wiedzieć, czym jest
   tekst, zanim go przeczyta. Pasek z boku, nie tło na całą szerokość —
   informacja ma być widoczna, a nie krzyczeć głośniej niż treść. */
.tlumaczenie-maszynowe {
  margin: 1rem 0 1.5rem;
  padding: .6rem .9rem;
  border-left: 3px solid var(--ink-3);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-2);
  font-size: .88rem;
  max-width: var(--measure);
}

/* ═══ Dziennik zdarzeń ═══════════════════════════════════════════

   Strona, którą otwiera się wtedy, gdy coś nie działa — więc sama
   musi być czytelna w pośpiechu. Poziom niesie kolor paska z lewej,
   a nie tło całego wpisu: dwadzieścia czerwonych prostokątów pod
   sobą przestaje cokolwiek znaczyć.                                */

.odznaka {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid currentColor; white-space: nowrap;
}
.odznaka-ok    { color: var(--ok); }
.odznaka-blad  { color: var(--crit); }
.odznaka-uwaga { color: var(--warn); }

.komunikat-uwaga { border-left-color: var(--warn); color: var(--warn); }

.lista-logow { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }

.wpis-logu {
  padding: .6rem .8rem;
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wpis-logu.poziom-warning  { border-left-color: var(--warn); }
.wpis-logu.poziom-error,
.wpis-logu.poziom-critical { border-left-color: var(--crit); }

.wpis-gora {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--ink-3);
}
.wpis-gora time { font-family: var(--mono); }

/* Identyfikator zgłoszenia jest tym, co użytkownik przepisuje ze
   strony błędu — ma się dać zaznaczyć jednym kliknięciem. */
.slad {
  font-family: var(--mono); font-size: .78rem;
  background: var(--surface); padding: .1rem .35rem; border-radius: 4px;
  user-select: all;
}

.wpis-tresc {
  margin: .35rem 0 0; font-size: .92rem; color: var(--ink);
  overflow-wrap: anywhere;
}

.wpis-kontekst { margin: .4rem 0 0; }
.wpis-kontekst summary { cursor: pointer; font-size: .82rem; color: var(--ink-3); }
.wpis-kontekst summary:hover { color: var(--accent); }
.wpis-kontekst pre {
  margin: .4rem 0 0; padding: .6rem .7rem;
  background: var(--surface); border-radius: var(--radius);
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  /* Ślad stosu bywa szerszy niż ekran — przewija się w swoim
     pudełku, żeby nie rozpychać całej strony w poziomie. */
  overflow-x: auto; white-space: pre;
}

/* ═══ Kolejka danych pojazdu ═════════════════════════════════════

   Każdy wpis jest osobną decyzją, więc dostaje własny formularz.
   Bez ramki i cienia: to lista roboczych pozycji, a nie galeria kart. */

.lista-pojazdow { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.25rem; }

.pojazd-wpis {
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: grid;
  gap: .75rem;
}

.pojazd-gora {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--ink-3);
}

/* Dwa przyciski o przeciwnych skutkach stoją obok siebie — odstęp
   między nimi jest zabezpieczeniem, a nie estetyką. */
.pojazd-decyzja { display: grid; gap: .6rem; }
.pojazd-decyzja .rzad-akcji { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Cztery liczby jednego prostokąta stoją razem — czytane są jako para
   par, a nie jako cztery niezależne pola. */
.siatka-pol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin: .75rem 0 0;
}
.siatka-pol .pole { margin: 0; }

/* Przełącznik w nagłówku jest ciaśniejszy niż ten w stopce — stoi obok
   pozycji menu, nie pod treścią strony. */
.jezyki-naglowek {
  gap: .35rem;
  margin: 0;
  padding-left: .75rem;
  border-left: 1px solid var(--line);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Nawigacja to najważniejsza akcja na stronie punktu — i jedyna, którą
   ktoś klika stojąc przy drodze. Dlatego pełny kontrast, nie obrys. */
.przycisk-nawigacja::before { content: "➜ "; }

/* ═══ Serwis w liczbach ══════════════════════════════════════════

   Liczba przed opisem i wyraźnie większa od niego: kafel czyta się
   jednym spojrzeniem, a nie zdaniem. Cyfry tabelaryczne, żeby kolumny
   nie tańczyły przy odświeżeniu. */

.statystyki-serwisu { margin: 3rem 0 0; }
.statystyki-serwisu h2 { margin: 0 0 1rem; }

.statystyki-siatka {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.statystyka-kafel {
  background: var(--surface);
  padding: 1.1rem .9rem;
  display: flex; flex-direction: column; gap: .15rem;
  transition: background .15s ease;
}
.statystyka-kafel:hover { background: var(--surface-2); }

.statystyka-wartosc {
  font-size: 1.8rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--accent);
}
.statystyka-opis { font-size: .82rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .statystyka-kafel { transition: none; }
}

/* ═══ Średnia ocena — kolor i pasek ══════════════════════════════

   Ten sam próg co przy gwiazdkach: poniżej 2,5 źle, od 3,5 dobrze.
   Jeden system w całym serwisie, inaczej ta sama liczba znaczyłaby
   co innego w dwóch miejscach. Kolor nie jest jedynym nośnikiem —
   liczba i długość paska mówią to samo. */

.stat-ocena { position: relative; }
.stat-ocena .stat-wartosc { transition: color .2s ease; }

.ocena-slaba  .stat-wartosc { color: var(--crit); }
.ocena-srednia .stat-wartosc { color: var(--warn); }
.ocena-dobra  .stat-wartosc { color: var(--ok); }
.ocena-brak   .stat-wartosc { color: var(--ink-3); }

.ocena-pasek {
  display: block;
  height: 4px;
  margin: .5rem 0 0;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.ocena-wypelnienie {
  display: block; height: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: width .4s ease;
}
.ocena-slaba  .ocena-wypelnienie { background: var(--crit); }
.ocena-srednia .ocena-wypelnienie { background: var(--warn); }
.ocena-dobra  .ocena-wypelnienie { background: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .ocena-wypelnienie, .stat-ocena .stat-wartosc { transition: none; }
}

/* ═══ Lista języków ══════════════════════════════════════════════

   Wiersz na język: po lewej wybór, po prawej stan tłumaczenia.
   Procent pokrycia stoi obok pola wyboru celowo — włączenie języka
   bez tej informacji jest skokiem w ciemno. */

.lista-jezykow { list-style: none; margin: 1rem 0 0; padding: 0; }

.jezyk-wpis {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem .3rem;
  border-bottom: 1px solid var(--line);
}
.jezyk-wpis:first-child { border-top: 1px solid var(--line); }
.jezyk-wpis.jest-aktywny { background: var(--surface-2); }

.jezyk-wybor { display: flex; align-items: center; gap: .6rem; flex: 1 1 16rem; cursor: pointer; }
.jezyk-wybor input:disabled { cursor: default; }
.jezyk-nazwa { display: flex; flex-direction: column; gap: .1rem; }
.jezyk-nazwa strong { font-size: .98rem; }

.jezyk-stan { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* ═══ Ceny paliw na stronie głównej ══════════════════════════════

   Kafel odpowiada na jedno pytanie: czy drożeje. Dlatego kierunek
   zmiany niesie kolor całego wykresu, a nie tylko strzałkę obok
   liczby — linia jest największym elementem kafla i to ona czyta
   się pierwsza. */

.ceny-paliw-home { margin: 2.5rem 0 0; }

.ceny-siatka {
  list-style: none; margin: 1rem 0 .75rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}

.cena-kafel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem .7rem;
  display: flex; flex-direction: column; gap: .1rem;
  /* Kolor kierunku dziedziczy wykres przez `currentColor`. */
  color: var(--ink-3);
}
.cena-drozeje  { color: var(--crit); }
.cena-tanieje  { color: var(--ok); }
.cena-bez-zmian { color: var(--ink-3); }

.cena-gora { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cena-paliwo { font-weight: 600; font-size: .88rem; color: var(--ink-2); }
.cena-zmiana { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.cena-wartosc {
  margin: .2rem 0 0;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cena-waluta { font-size: .8rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.cena-wykres { display: block; width: 100%; height: 2.4rem; margin: .5rem 0 .35rem; }

.cena-stopka {
  margin: 0; font-size: .75rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Moc i marka na liście punktów. Kierowca elektryka wybiera ładowarkę
   po mocy — 22 kW i 150 kW to różnica między kawą a noclegiem. */

.punkt-cechy { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; }

.punkt-cecha {
  font-size: .74rem; font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Moc wyróżniona, bo to pierwsza rzecz, po której wybiera się ładowarkę. */
.punkt-cecha-moc { background: var(--accent); color: var(--accent-ink); }
.punkt-cecha-marka { background: var(--surface-2); color: var(--ink-2); font-weight: 500; }
.punkt-cecha-odleglosc { background: var(--ok-soft); color: var(--ok); }

/* Rozwijany wybór języka w nagłówku. Przy pięciu językach rząd odnośników
   zajmuje pół paska menu, a przy dziesięciu zawija się do drugiej linii.
   `details` zamiast skryptu — działa bez JavaScriptu i zamyka się Escape. */

.jezyki-menu { position: relative; margin-left: .5rem; }

.jezyki-menu > summary {
  list-style: none; cursor: pointer;
  padding: .25rem .55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-2);
  user-select: none;
}
.jezyki-menu > summary::-webkit-details-marker { display: none; }
.jezyki-menu > summary::after { content: " ▾"; color: var(--ink-3); }
.jezyki-menu > summary:hover { border-color: var(--accent); color: var(--accent); }
.jezyki-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jezyki-lista {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20;
  list-style: none; margin: 0; padding: .35rem;
  min-width: 10rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  display: grid; gap: .1rem;
}
.jezyki-lista .jezyk { display: block; padding: .35rem .5rem; border-radius: 4px; font-size: .88rem; }
.jezyki-lista a.jezyk:hover { background: var(--surface-2); text-decoration: none; }
.jezyki-lista .jezyk-biezacy { background: var(--surface-2); }

/* ═══ Statystyki ruchu ═══════════════════════════════════════════

   Sześć okien obok siebie w jednej tabeli — dopiero zestawione
   pokazują przyspieszenie: jeśli doba to połowa tygodnia, ruch
   właśnie się podwoił. Cyfry tabelaryczne, żeby kolumny dało się
   porównywać wzrokiem, a nie po kolei. */

.tabela-statystyk td.liczba {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.tabela-statystyk td.liczba-alarm { color: var(--crit); }
.tabela-statystyk th[scope="row"] { text-align: left; font-weight: 600; }
.tabela-statystyk th[scope="row"] .lista-meta { display: block; font-weight: 400; }
.tabela-statystyk tr.wiersz-api_bledy th[scope="row"] { padding-left: 1.25rem; font-weight: 400; }

.lista-kanalow { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lista-kanalow li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line);
}
.kanal-nazwa { flex: 1 1 10rem; }
.kanal-liczby { display: flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; }

/* Pasek długości zamiast wykresu: porównanie „która strona ma
   najwięcej" jest porównaniem długości, a nie odczytem liczby. */
.lista-stron { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }
.lista-stron li {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(4rem, 10rem) auto;
  align-items: center; gap: .75rem;
  font-size: .88rem;
}
.strona-pasek { display: block; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.strona-pasek span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.strona-ile { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

@media (max-width: 40rem) {
  .lista-stron li { grid-template-columns: 1fr auto; }
  .lista-stron .strona-pasek { grid-column: 1 / -1; }
}

/* Rodzaj dostępu do źródła. Fiolet dla otwartych — to jedyna kategoria,
   którą da się włączyć od ręki, więc ma się wyróżniać z listy. */

.dostep-otwarty     { color: #6b3fa0; border-color: currentColor; }
.dostep-klucz       { color: var(--warn); }
.dostep-rejestracja { color: var(--ink-3); }
.dostep-katalog     { color: var(--ink-3); opacity: .8; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dostep-otwarty { color: #b79bff; }
}
:root[data-theme="dark"] .dostep-otwarty { color: #b79bff; }

/* ── Informacja o ciasteczkach ───────────────────────────────────────
   Pasek przy dolnej krawędzi, nie okno na środku: treść ma być widoczna
   od razu, ale strona ma pozostać czytelna także przed kliknięciem.
   Okno blokujące serwis to wymuszenie zgody, a nie prośba o nią.

   `position: sticky` w normalnym przepływie na dole dokumentu daje ten
   sam efekt co `fixed`, ale nie zasłania stopki, gdy ktoś do niej
   dojedzie — a stopka jest akurat tym miejscem, gdzie leży polityka
   prywatności, do której pasek odsyła. */
.ciasteczka {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 24px rgb(0 0 0 / .12);
}

.ciasteczka-tresc { flex: 1 1 22rem; }
.ciasteczka-tresc p { margin: 0; font-size: .9rem; line-height: 1.45; }
.ciasteczka-drobne { margin-top: .35rem !important; color: var(--ink-3); font-size: .82rem !important; }
.ciasteczka-akcje { flex: 0 0 auto; margin: 0; }
.ciasteczka-akcje .przycisk { white-space: nowrap; }

@media (max-width: 40rem) {
  .ciasteczka { border-radius: 0; border-left: 0; border-right: 0; }
  .ciasteczka-akcje { flex: 1 1 100%; }
  .ciasteczka-akcje .przycisk { width: 100%; }
}

/* Wydruk bez paska — na papierze nie ma czego klikać. */
@media print { .ciasteczka { display: none; } }

/* ═══ Strona główna — warstwa wizualna ═══════════════════════════

   Wszystko poniżej jest dopisane po pierwszej wersji strony głównej
   i celowo stoi na końcu arkusza: nadpisuje wcześniejsze reguły
   zamiast je przepisywać, więc żadna inna strona nie zmienia wyglądu.

   Zasada, która trzyma to razem: kolor dostaje **jedna** rzecz w polu
   widzenia. Na górze wyszukiwarka, w cenach kierunek zmiany, w liczbach
   sama liczba. Gdy akcent dostaje wszystko, nie prowadzi już nigdzie. */

/* ── Nagłówek strony ─────────────────────────────────────────────
   Dwie warstwy gradientu zamiast jednej i pas jezdni u dołu. Motyw
   drogi jest rysowany gradientem, nie obrazkiem: skaluje się do każdej
   szerokości, waży zero bajtów i nie ma czego wczytywać. */
/* Mniej powietrza nad tablicą. Górny pas służył za tło dla znaku
   wodnego z kierownicą; po jego usunięciu został pusty prostokąt
   gradientu, który czytał się jak niedokończona strona. */
.hero { padding: clamp(1.75rem, 4vw, 3rem) 0 2.5rem; }

.hero::before {
  background:
    radial-gradient(52rem 20rem at 8% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%),
    radial-gradient(38rem 18rem at 92% 0%, color-mix(in srgb, var(--ok) 10%, transparent), transparent 70%);
}


.hero-tablica .tablica { box-shadow: 0 10px 26px rgb(0 0 0 / .18); }

/* Wyszukiwarka jest tu najważniejsza, więc dostaje więcej powierzchni
   i cień, który odkleja ją od tła. */
.szukaj { max-width: 38rem; box-shadow: 0 10px 30px rgb(0 0 0 / .08); }
.szukaj input { font-size: 1.3rem; padding: .85rem 1rem; }
.szukaj button { padding: .85rem 1.9rem; font-size: 1.02rem; }

/* Trzy fakty pod wyszukiwarką. Kropka rozdzielająca zamiast ramek —
   to jest jedna linijka tekstu, a nie kolejna tabela. */
.hero-fakty {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem 1.4rem;
  color: var(--ink-3); font-size: .9rem;
}
.hero-fakty li { display: flex; align-items: baseline; gap: .35rem; }
.hero-fakty li + li::before {
  content: "";
  width: 4px; height: 4px; margin-right: 1.05rem;
  border-radius: 50%;
  background: var(--line);
}
.hero-fakty strong {
  font-size: 1.15rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ── Nagłówki sekcji ─────────────────────────────────────────────
   Krótka kreska w kolorze akcentu przed tytułem. Tyle wystarczy, żeby
   sekcje czytały się jako osobne bloki — linia nad każdą z nich robiła
   ze strony kratkę. */
main > .sekcja > .sekcja-naglowek h2,
main > .ceny-paliw-home > .sekcja-naglowek h2,
main > .statystyki-serwisu > h2 {
  position: relative;
  padding-left: .85rem;
  font-size: 1.35rem;
}
main > .sekcja > .sekcja-naglowek h2::before,
main > .ceny-paliw-home > .sekcja-naglowek h2::before,
main > .statystyki-serwisu > h2::before {
  content: "";
  position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 2px;
  background: var(--accent);
}

/* ── Tablice na liście ───────────────────────────────────────────
   Uniesienie przy najechaniu, nie zmiana koloru ramki. Tablica jest
   przedmiotem, a przedmiot podnosi się do ręki. */
.lista-tablic a {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lista-tablic a:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgb(0 0 0 / .09);
}

/* Ostatnio oceniane jako karty: numer nad metryką, nie obok. Przy
   dwóch liczbach w jednej linii tablica przestawała być pierwsza. */
.lista-kart { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.lista-kart a {
  flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  .lista-tablic a { transition: none; }
  .lista-tablic a:hover { transform: none; }
}

/* ── Ceny paliw ──────────────────────────────────────────────────
   Kafle wyżej na stronie niż wcześniej, więc mają prawo być większe.
   Kolor kierunku dostaje cienki pasek u góry kafla — czytelny także
   dla kogoś, kto koloru linii nie rozróżnia. */
.ceny-paliw-home { margin: 0 0 .5rem; padding: 2.25rem 0 0; }
.ceny-siatka { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; }

.cena-kafel {
  position: relative;
  overflow: hidden;
  padding: 1.05rem 1.15rem .8rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cena-kafel::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 3px;
  background: currentColor;
  opacity: .9;
}
.cena-kafel:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(0 0 0 / .08); }

.cena-wartosc { font-size: 2.2rem; }
.cena-wykres { height: 3rem; margin: .65rem 0 .4rem; }
.cena-strzalka { font-size: .7em; }
.cena-zmiana { display: inline-flex; align-items: baseline; gap: .25rem; }

.ceny-puste .ceny-puste-opis { color: var(--ink-2); max-width: var(--measure); margin: 0 0 1rem; }

@media (prefers-reduced-motion: reduce) {
  .cena-kafel { transition: none; }
  .cena-kafel:hover { transform: none; }
}

/* ── Serwis w liczbach ───────────────────────────────────────────
   Liczby większe i z lekkim tłem w kolorze akcentu. To jest ostatnia
   rzecz przed zaproszeniem, więc ma zostawiać wrażenie skali. */
.statystyki-serwisu { margin: 3.25rem 0 0; }
.statystyka-kafel { padding: 1.35rem 1rem; }
.statystyka-wartosc { font-size: 2.1rem; }
.statystyka-kafel:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }

/* ── Zaproszenie do założenia konta ──────────────────────────────
   Pas w kolorze akcentu na całą szerokość treści. Jedyne takie miejsce
   na stronie — gdyby było drugie, przestałoby cokolwiek znaczyć. */
.zacheta {
  margin: 3rem 0 0;
  padding: 1.75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 12%, var(--surface)),
      color-mix(in srgb, var(--ok) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.zacheta-tresc { flex: 1 1 20rem; }
.zacheta-tresc h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.zacheta-tresc p { margin: 0; color: var(--ink-2); max-width: var(--measure); }
.zacheta-akcje { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Drugi przycisk bez wypełnienia: dwa jednakowe przyciski obok siebie
   to pytanie, a nie propozycja. */
.przycisk-cichy {
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.przycisk-cichy:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); filter: none; }

/* Kafle liczników nie rozciągają się bez końca. Przy jednym włączonym
   liczniku `1fr` robił z niego pas na całą szerokość strony — liczba
   „1" w polu na tysiąc pikseli wygląda jak błąd układu, nie jak dana. */
.statystyki-siatka { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 13rem)); justify-content: start; }

/* ═══ Ceny paliw — układ zestawieniowy ═══════════════════════════

   Pięć paliw w rzędzie, liczba jako największy element kafla i tabela
   wojewódzka pod spodem. Wzorem są branżowe zestawienia cen, bo tam
   ten układ jest sprawdzony: kierowca porównuje najpierw paliwa między
   sobą, a dopiero potem swoje województwo z sąsiednim.

   Kolor znaczka paliwa nie niesie informacji sam z siebie — nazwa stoi
   obok, a kolumna w tabeli ma podpis. Służy do odnajdywania kafla
   wzrokiem, nie do odczytu wartości. */

.ceny-siatka { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem; }

.cena-kafel { padding: 1.1rem 1.15rem .85rem; gap: 0; }

.cena-gora { align-items: center; justify-content: flex-start; gap: .5rem; margin-bottom: .1rem; }

.cena-znaczek {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; padding: .2rem .45rem;
  border-radius: 5px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2);
}
.cena-paliwo-pb95 .cena-znaczek    { background: #1f7a4d; color: #fff; }
.cena-paliwo-pb98 .cena-znaczek    { background: #a8571b; color: #fff; }
.cena-paliwo-on .cena-znaczek      { background: #2f3a45; color: #fff; }
.cena-paliwo-on_plus .cena-znaczek { background: #14324f; color: #fff; }
.cena-paliwo-lpg .cena-znaczek     { background: #1553a8; color: #fff; }

/* Liczba jest tu treścią, a nie ozdobą — dostaje tyle stopnia pisma,
   ile zmieści się bez zawijania przy pięciu kaflach w rzędzie. */
.cena-wartosc {
  margin: .35rem 0 .1rem;
  font-size: clamp(2.1rem, 4.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.cena-waluta { font-size: .78rem; margin-left: .1rem; }

.cena-zmiana {
  margin: 0; font-size: .84rem; font-weight: 600;
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
}
.cena-zmiana-opis { font-weight: 400; font-size: .74rem; color: var(--ink-3); }
.cena-zmiana-brak { color: var(--ink-3); font-weight: 500; }

.cena-wykres { height: 2.6rem; margin: .55rem 0 .5rem; }

/* Tydzień i miesiąc jako dwie krótkie pary, nie jako kolejny wykres.
   Kolor tylko na wartości — nagłówek zostaje neutralny, żeby kafel nie
   zamienił się w plamę. */
.cena-okresy {
  margin: 0 0 .5rem; padding: .5rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; gap: 1.1rem;
  font-size: .78rem;
}
.cena-okresy > div { display: flex; align-items: baseline; gap: .35rem; }
.cena-okresy dt { color: var(--ink-3); }
.cena-okresy dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cena-okresy .okres-drozeje dd { color: var(--crit); }
.cena-okresy .okres-tanieje dd { color: var(--ok); }

/* ── Tabela wojewódzka ───────────────────────────────────────────
   Nazwa województwa przyklejona przy przewijaniu w bok: przy pięciu
   kolumnach na telefonie liczba bez nazwy obok jest bezużyteczna. */
.tabela-ceny-regiony { font-variant-numeric: tabular-nums; }
.tabela-ceny-regiony caption {
  text-align: left; padding: .75rem 1rem .25rem;
  color: var(--ink-3); font-size: .82rem;
}
.tabela-ceny-regiony th[scope="row"] {
  position: sticky; left: 0;
  background: var(--surface);
  font-weight: 500; white-space: nowrap;
}
.tabela-ceny-regiony .kolumna-cena { text-align: right; white-space: nowrap; }
.tabela-ceny-regiony thead .kolumna-cena { color: var(--ink-2); }
.tabela-ceny-regiony .brak-danych { color: var(--ink-3); }
.tabela-ceny-regiony tbody tr:hover th[scope="row"],
.tabela-ceny-regiony tbody tr:hover td { background: var(--surface-2); }

/* Nazwa województwa w pierwszej kolumnie zapisana normalnie. Wersaliki
   z ogólnego stylu tabel są dla nagłówków kolumn — na nazwie własnej
   czytają się jak krzyk, a przy szesnastu wierszach jest to szesnaście
   krzyków pod rząd. */
.tabela-ceny-regiony th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: .88rem; }
.tabela-ceny-regiony th[scope="row"] a { text-decoration: none; color: var(--ink); }
.tabela-ceny-regiony th[scope="row"] a:hover { text-decoration: underline; color: var(--accent); }

/* Trzy okresy w jednym rzędzie muszą się zmieścić w kaflu szerokim na
   jedenaście rem, więc rozstaw jest mały, a wartości pod podpisami. */
.cena-okresy { justify-content: space-between; gap: .5rem; }
.cena-okresy > div { flex-direction: column; gap: 0; align-items: flex-start; }
.cena-okresy .okres-brak dd { color: var(--ink-3); font-weight: 500; }

/* `.cena-wartosc` istnieje też na stronie stacji, gdzie stoi w siatce
   i jest wyrównana do prawej. W kaflu na stronie głównej ma być przy
   lewej krawędzi razem z resztą — nazwa klasy jest wspólna, kontekst nie. */
.cena-kafel .cena-wartosc { text-align: left; grid-row: auto; align-self: auto; }

/* ═══ Wersja i dziennik zmian ════════════════════════════════════

   Numer wersji jest tu treścią, nie metryczką w rogu: to pierwsza
   rzecz, którą sprawdza się przy pytaniu „czy to, co widzę, jest już
   wgrane". Dlatego dostaje własny kafel i stopień pisma większy niż
   nagłówek strony. */

.kafel-wersji {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.wersja-etykieta { font-size: .8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.wersja-numer {
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.kafel-wersji .podpowiedz { max-width: var(--measure); margin-top: .5rem; }

/* Wpisy dziennika: numer i data w jednej linii nad treścią, kreska
   z lewej jako oś czasu. Lista numerowana, ale bez numerów — kolejność
   niesie już wersja, a druga numeracja obok niej tylko myli. */
.lista-zmian { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.lista-zmian > li {
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--line);
}
.lista-zmian > li:first-child { border-left-color: var(--accent); }
.zmiana-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.zmiana-wersja {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size: .92rem;
}
.zmiana-data { font-size: .8rem; color: var(--ink-3); }
.lista-zmian p { margin: 0 0 .35rem; }
.lista-zmian ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.lista-zmian code { font-size: .82rem; }

/* Wklejony plik dokumentacji. Nagłówki w nim zaczynają się od trzeciego
   poziomu, więc nie konkurują z nagłówkiem strony panelu. */
.dokument-wklejony h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.dokument-wklejony h4 { font-size: .98rem; margin: 1.1rem 0 .4rem; color: var(--ink-2); }
.dokument-wklejony p, .dokument-wklejony li { max-width: var(--measure); }
.dokument-wklejony blockquote {
  margin: .75rem 0; padding: .6rem .9rem;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.dokument-wklejony hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.dokument-wklejony .tabela-obudowa { margin: .75rem 0 1.25rem; }
.dokument-wklejony td:first-child { white-space: nowrap; }

/* Stan otwarcia punktu. Kolor i słowo, nie sam kolor: „Zamknięte" ma być
   czytelne także dla kogoś, kto zieleni od czerwieni nie odróżnia. */
.stan-godzin {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 999px;
  margin-right: .4rem;
}
.stan-otwarte { background: var(--ok-soft); color: var(--ok); }
.stan-zamkniete { background: var(--surface-2); color: var(--ink-2); }

/* Surowy zapis z OSM zostaje, ale schodzi na drugi plan — jest
   uzupełnieniem odpowiedzi, a nie odpowiedzią. */
.godziny-zapis { font-size: .82rem; color: var(--ink-3); }

/* ═══ Narzędzia dla kierowcy ═════════════════════════════════════ */

.narzedzia-siatka {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.narzedzie-kafel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem;
}
.narzedzie-kafel h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.narzedzie-kafel h2 a { text-decoration: none; }
.narzedzie-kafel h2 a:hover { text-decoration: underline; }
.narzedzie-kafel p { color: var(--ink-2); font-size: .92rem; margin: 0; }

.formularz-narzedzia { margin: 1.5rem 0 0; max-width: 52rem; }
.formularz-narzedzia .pole { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.formularz-narzedzia label, .pole-etykieta { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.formularz-narzedzia input[type="number"],
.formularz-narzedzia input[type="text"] {
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  max-width: 14rem;
}
.pola-rzad { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pole-wybor { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; margin-right: .75rem; }

.porcje { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem; }
.porcje legend { font-weight: 700; padding: 0 .4rem; }
.porcja-wiersz { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.porcja-wiersz input { flex: 1 1 6rem; max-width: 10rem; }

.tabela-kalkulatora input { max-width: 7rem; }

/* Wynik alkomatu. Liczba jest tu treścią, ostrzeżenie jej częścią —
   nie stopką, do której nikt nie dojedzie. */
.wynik-alkomat {
  margin: 1.5rem 0 0; padding: 1.5rem;
  border: 1px solid var(--line); border-left: 6px solid var(--ink-3);
  border-radius: var(--radius); background: var(--surface);
}
.wynik-nie-wolno { border-left-color: var(--crit); }
.wynik-ponizej { border-left-color: var(--ok); }
.wynik-etykieta { margin: 0; font-size: .82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.wynik-liczba { margin: .1rem 0 .3rem; font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wynik-nie-wolno .wynik-liczba { color: var(--crit); }
.wynik-ponizej .wynik-liczba { color: var(--ok); }
.wynik-werdykt { margin: 0 0 .75rem; font-weight: 700; font-size: 1.05rem; }
.wynik-czasy { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }
.wynik-widelki, .wynik-ostrzezenie { font-size: .88rem; color: var(--ink-2); max-width: var(--measure); }
.wynik-ostrzezenie {
  margin: 1rem 0 0; padding: .85rem 1rem;
  background: var(--surface-2); border-radius: var(--radius);
}

.wynik-kalkulatora { margin: 2rem 0 0; }
.progi-lista { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.progi-lista li {
  padding: .7rem .9rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}
.progi-lista .prog-nigdy { border-left-color: var(--ink-3); color: var(--ink-2); }
.najtanszy { color: var(--ok); font-weight: 700; }

/* ═══ Taryfikator mandatów ═══════════════════════════════════════

   Tabela pokazuje **stopień pewności danych**, bo część stawek udało
   się potwierdzić w dwóch źródłach, a części nie. Znacznik jest słowem,
   nie samym kolorem — „źródła rozbieżne" ma być czytelne również dla
   kogoś, kto barw nie rozróżnia, i po wydrukowaniu strony. */

.szukaj-taryfikator { margin-top: 1.25rem; }

.kategorie-mandatow {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.5rem 0 0;
}
.kategorie-mandatow a {
  font-size: .85rem; text-decoration: none;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  background: var(--surface);
}
.kategorie-mandatow a:hover { border-color: var(--accent); color: var(--accent); }
.kategorie-mandatow .kategoria-aktywna {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

.tabela-mandatow { font-variant-numeric: tabular-nums; }
.tabela-mandatow th[scope="row"] {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  display: flex; flex-direction: column; gap: .15rem;
  max-width: 34rem;
}
.mandat-nazwa { font-weight: 600; }
.mandat-podstawa { font-size: .78rem; color: var(--ink-3); font-family: var(--mono); }
.mandat-uwaga { font-size: .82rem; color: var(--ink-2); }

.pewnosc-znak {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
.pewnosc-brak .pewnosc-znak { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pewnosc-rozne .pewnosc-znak { background: var(--surface-2); color: var(--ink-2); }

.lista-wyjasnien { margin: .75rem 0 0; padding-left: 1.2rem; }
.lista-wyjasnien li { margin-bottom: .35rem; color: var(--ink-2); max-width: var(--measure); }

/* Nota o pochodzeniu danych. Wyróżniona, ale nie krzykliwa: ma zostać
   przeczytana, a nie zdominować stronę. */
.nota-ai {
  margin: 2.5rem 0 0; padding: .9rem 1.1rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .85rem; color: var(--ink-2);
  max-width: var(--measure);
}

/* Pierwsza kolumna taryfikatora zostaje komórką tabeli. `display: flex`
   na `th` wyjmuje ją z układu tabelarycznego — wiersz przestaje trzymać
   szerokości kolumn i w przeglądarce widać przesunięty, szary blok. */
.tabela-mandatow th[scope="row"] { display: table-cell; }
.tabela-mandatow .mandat-nazwa,
.tabela-mandatow .mandat-podstawa,
.tabela-mandatow .mandat-uwaga { display: block; }
.tabela-mandatow .pewnosc-znak { display: inline-block; margin: .2rem 0; }
.tabela-mandatow td, .tabela-mandatow th { vertical-align: top; }

/* ═══ Generator dokumentów ═══════════════════════════════════════ */

.formularz-dokumentu { max-width: 44rem; }

.sekcja-formularza {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem .4rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
}
.sekcja-formularza legend { font-weight: 700; padding: 0 .4rem; }

.formularz-dokumentu .pole input[type="text"],
.formularz-dokumentu .pole input[type="date"],
.formularz-dokumentu .pole textarea {
  max-width: 100%; width: 100%;
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.formularz-dokumentu textarea { resize: vertical; }
.pole-pomoc { font-size: .8rem; color: var(--ink-3); }
.wymagane { color: var(--crit); }

/* Brakujące pole po odesłaniu formularza. Ramka i słowo w komunikacie
   nad formularzem — sam kolor obwódki nie mówi, czego brakuje. */
.pole-brakuje input, .pole-brakuje textarea { border-color: var(--crit); }
.pole-brakuje label { color: var(--crit); }

/* Archiwum dokumentów w panelu. Formularz usuwania stoi w jednej linii
   z odsyłaczem podglądu, więc nie może rozpychać wiersza tabeli. */
.formularz-w-linii { display: inline; margin: 0; }
.rzad-akcji { white-space: nowrap; }
.lista-opisowa { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .35rem 1rem; margin: 1rem 0 0; }
.lista-opisowa dt { color: var(--ink-3); font-size: .85rem; font-family: var(--mono); }
.lista-opisowa dd { margin: 0; }

/* ── Katalog modeli ───────────────────────────────────────────────────
   Siatka kafli, a nie tabela: o modelu auta najpierw decyduje zdjęcie.
   `auto-fill` z `minmax` daje tyle kolumn, ile się mieści, bez ani
   jednego zapytania medialnego — a przy jednym kaflu w rzędzie
   `justify-content: start` pilnuje, żeby nie rozciągnął się na
   szerokość ekranu (ta sama pułapka co przy kafelkach cen paliw). */
.siatka-modeli {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    justify-content: start;
    margin: 1.5rem 0;
}

.kafel-modelu {
    background: var(--tlo-kafla, #fff);
    border: 1px solid var(--obramowanie, #e4e7ec);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.kafel-modelu:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(16, 24, 40, .1); }
.kafel-modelu-link { display: block; color: inherit; text-decoration: none; }

.kafel-modelu-zdjecie {
    aspect-ratio: 3 / 2;
    background: var(--tlo-drugie, #f4f6f8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kafel-modelu-zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.kafel-modelu-brak { color: var(--tekst-drugi, #98a2b3); }

.kafel-modelu-tresc { padding: .85rem 1rem 1rem; }
.kafel-modelu-marka { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-drugi, #667085); }
.kafel-modelu-nazwa { margin: .15rem 0 .5rem; font-size: 1.05rem; line-height: 1.3; }

.kafel-modelu-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; font-size: .82rem; color: var(--tekst-drugi, #667085); }
.kafel-modelu-meta span { background: var(--tlo-drugie, #f4f6f8); border-radius: .35rem; padding: .1rem .45rem; }

.kafel-modelu-ocena { margin: 0; font-size: .85rem; }
.kafel-modelu-ocena strong { font-size: 1.15rem; }
.kafel-modelu-ocena-brak { color: var(--tekst-drugi, #98a2b3); }

.filtry-katalogu { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.filtry-katalogu a { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--obramowanie, #e4e7ec); text-decoration: none; font-size: .88rem; }
.filtry-katalogu a.kategoria-aktywna { background: var(--akcent, #1d4ed8); color: #fff; border-color: transparent; }
.filtry-rozdzielacz { width: 1px; height: 1.25rem; background: var(--obramowanie, #e4e7ec); }

.chmura-marek { display: flex; flex-wrap: wrap; gap: .4rem; }
.chmura-marek a { display: inline-flex; gap: .35rem; align-items: baseline; padding: .3rem .7rem; border-radius: .4rem; background: var(--tlo-drugie, #f4f6f8); text-decoration: none; font-size: .9rem; }
.chmura-marek a span { font-size: .75rem; color: var(--tekst-drugi, #667085); }

/* Strona modelu: zdjęcie i dane obok siebie, jedno pod drugim na wąskim. */
.model-glowna { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; margin: 1.5rem 0; }
@media (max-width: 48rem) { .model-glowna { grid-template-columns: 1fr; } }

.model-zdjecie img { width: 100%; height: auto; border-radius: .75rem; }
.model-atrybucja { margin: .5rem 0 0; font-size: .78rem; color: var(--tekst-drugi, #667085); }
.model-streszczenie { color: var(--tekst-drugi, #475467); }
.model-ocena-duza { margin: .75rem 0; font-size: .9rem; }
.model-ocena-duza strong { font-size: 2.25rem; line-height: 1; }

.model-dane { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0 0; }
.model-dane div { background: var(--tlo-drugie, #f4f6f8); border-radius: .5rem; padding: .6rem .75rem; }
.model-dane dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tekst-drugi, #667085); }
.model-dane dd { margin: .15rem 0 0; font-weight: 600; }

/* Rozkład ocen — słupki mówią więcej niż sama średnia: 3,0 ze samych
   trójek to co innego niż 3,0 z jedynek i piątek. */
.rozklad-ocen { max-width: 24rem; margin: 1rem 0; }
.rozklad-wiersz { display: grid; grid-template-columns: 1.25rem 1fr 2.5rem; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.rozklad-pasek { display: block; height: .6rem; border-radius: 999px; background: var(--tlo-drugie, #f4f6f8); overflow: hidden; }
.rozklad-pasek span { display: block; height: 100%; background: var(--akcent, #1d4ed8); }
.rozklad-liczba { font-size: .82rem; color: var(--tekst-drugi, #667085); text-align: right; }

.lista-opinii { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.opinia { border: 1px solid var(--obramowanie, #e4e7ec); border-radius: .6rem; padding: .9rem 1rem; }
.opinia-naglowek { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 .4rem; }
.opinia-ocena { background: var(--akcent, #1d4ed8); color: #fff; border-radius: .35rem; padding: .05rem .4rem; font-size: .8rem; }
.opinia-szczegol { font-size: .8rem; color: var(--tekst-drugi, #667085); }
.opinia-tresc { margin: 0; }

.pole-gwiazdki { border: 0; padding: 0; margin: 0 0 .75rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pole-gwiazdki legend { padding: 0; font-weight: 600; }
.pole-gwiazdki label { display: inline-flex; gap: .25rem; align-items: center; padding: .25rem .6rem; border: 1px solid var(--obramowanie, #e4e7ec); border-radius: .4rem; cursor: pointer; }
.pole-gwiazdki input:checked + span { font-weight: 700; }

.siatka-rankingow { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kafel-rankingu { display: block; padding: 1rem 1.1rem; border: 1px solid var(--obramowanie, #e4e7ec); border-radius: .6rem; text-decoration: none; color: inherit; }
.kafel-rankingu:hover { border-color: var(--akcent, #1d4ed8); }
.kafel-rankingu h2 { margin: 0 0 .35rem; font-size: 1.02rem; }
.kafel-rankingu p { margin: 0; font-size: .85rem; color: var(--tekst-drugi, #667085); }

.tabela-rankingu .pozycja { font-variant-numeric: tabular-nums; color: var(--tekst-drugi, #667085); }
.zrodlo-danych { margin-top: 2rem; font-size: .8rem; color: var(--tekst-drugi, #667085); }
.przyciski-rzad { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }

/* ── Ogłoszenia ───────────────────────────────────────────────────────
   Ta sama siatka co w katalogu modeli, ale kafle są szersze: przy
   ogłoszeniu liczy się cena i przebieg, a te muszą się zmieścić w jednym
   wierszu, żeby dało się porównywać wzrokiem po kolumnie. */
.siatka-ogloszen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
    justify-content: start;
    margin: 1.5rem 0;
}

.kafel-ogloszenia {
    background: var(--tlo-kafla, #fff);
    border: 1px solid var(--obramowanie, #e4e7ec);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.kafel-ogloszenia:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(16, 24, 40, .1); }
.kafel-ogloszenia a { display: block; color: inherit; text-decoration: none; }

.kafel-ogloszenia-zdjecie {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--tlo-drugie, #f4f6f8);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--tekst-drugi, #98a2b3);
    font-size: .85rem;
}

.kafel-ogloszenia-zdjecie img { width: 100%; height: 100%; object-fit: cover; }

.kafel-ogloszenia-licznik {
    position: absolute; right: .5rem; bottom: .5rem;
    background: rgba(16, 24, 40, .72); color: #fff;
    border-radius: .3rem; padding: .1rem .4rem; font-size: .75rem;
}

.kafel-ogloszenia-cena { margin: .2rem 0 .5rem; font-size: 1.2rem; font-weight: 700; }

/* Formularz filtrów układa się w wiersz i zawija — na telefonie każde
   pole zajmuje wtedy pełną szerokość bez zapytania medialnego. */
.filtry-formularz {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end;
    margin: 1rem 0; padding: 1rem;
    background: var(--tlo-drugie, #f4f6f8); border-radius: .6rem;
}
.filtry-formularz label { display: block; font-size: .78rem; color: var(--tekst-drugi, #667085); }
.filtry-formularz input, .filtry-formularz select { min-width: 8rem; }

.pola-obok { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem 1rem; }
.formularz-ogloszenia textarea { min-height: 12rem; }

.galeria-miniatur { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.galeria-miniatur img { border-radius: .4rem; }
.galeria-miniatur figure { margin: 0; }
.galeria-miniatur figcaption { text-align: center; font-size: .75rem; }

.ogloszenie-tresc { white-space: normal; line-height: 1.7; }
.ogloszenie-telefon { font-size: 1.05rem; }

.lista-moich-ogloszen { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.moje-ogloszenie { border: 1px solid var(--obramowanie, #e4e7ec); border-radius: .6rem; padding: 1rem; }
.moje-ogloszenie-tresc { display: flex; gap: 1rem; align-items: start; }
.moje-ogloszenie-tresc img { border-radius: .4rem; object-fit: cover; }
.moje-ogloszenie h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.moje-ogloszenie-stan { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0; }

.stan-ok    { color: #027a48; font-weight: 600; }
.stan-czeka { color: #b54708; font-weight: 600; }
.stan-zle   { color: #b42318; font-weight: 600; }

.przycisk-tekstowy { background: none; border: 0; padding: .25rem .5rem; color: var(--akcent, #1d4ed8); cursor: pointer; text-decoration: underline; font: inherit; }
.przycisk-niebezpieczny { background: none; border: 0; padding: .25rem .5rem; color: #b42318; cursor: pointer; text-decoration: underline; font: inherit; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ── Logowanie zewnętrzne ─────────────────────────────────────────────
   Przyciski dostawców są odsyłaczami, nie przyciskami formularza — to
   przejście na cudzą stronę, nie operacja u nas. Wygląd upodabniamy do
   przycisku, bo tego oczekuje człowiek, ale semantyka zostaje linkiem. */
.logowanie-zewnetrzne { margin: 1.5rem 0 0; }

.logowanie-zewnetrzne-albo {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 1rem; color: var(--tekst-drugi, #667085); font-size: .85rem;
}
.logowanie-zewnetrzne-albo::before,
.logowanie-zewnetrzne-albo::after {
    content: ""; flex: 1; height: 1px; background: var(--obramowanie, #e4e7ec);
}

.przycisk-dostawcy {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; margin-bottom: .6rem; padding: .7rem 1rem;
    border: 1px solid var(--obramowanie, #d0d5dd); border-radius: .5rem;
    background: #fff; color: #1d2939; text-decoration: none; font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.przycisk-dostawcy:hover { border-color: #98a2b3; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.przycisk-dostawcy svg { flex: none; }

/* Wspolne konto CoreInfra jest pierwsze na liscie i jedyne wypelnione:
   dla czlowieka z kontem w ktoryms z naszych portali to droga najkrotsza,
   a dwa jednakowo wygladajace przyciski nie mowia, ktory wybrac. */
.przycisk-dostawcy-coreinfra {
    border-color: var(--noc, #161b21);
    background: var(--noc, #161b21);
    color: #fff;
}
.przycisk-dostawcy-coreinfra:hover {
    border-color: #000;
    background: #000;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}

.logowanie-zewnetrzne-nota { margin-top: .75rem; }

.lista-tozsamosci { list-style: none; padding: 0; margin: .5rem 0 1.25rem; display: grid; gap: .5rem; }
.lista-tozsamosci li {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline;
    padding: .6rem .8rem; border: 1px solid var(--obramowanie, #e4e7ec); border-radius: .5rem;
}
.lista-tozsamosci form { margin-left: auto; }

/* ── Mapa punktów ─────────────────────────────────────────────────────
   Płótno ma stałą wysokość i `aspect-ratio` w zapasie: Leaflet liczy
   rozmiar przy inicjalizacji, a kontener bez wysokości daje mapę
   o zerowej wysokości i wrażenie, że nic się nie wczytało. */
.mapa-blok { margin: 1.5rem 0; }

.mapa-naglowek {
    display: flex; flex-wrap: wrap; gap: .75rem;
    align-items: center; justify-content: space-between;
}
.mapa-naglowek h2 { margin: 0; }

.mapa-nota { margin: .35rem 0 .75rem; }

.mapa-plotno {
    height: clamp(18rem, 55vh, 34rem);
    border-radius: .6rem;
    border: 1px solid var(--obramowanie, #e4e7ec);
    overflow: hidden;
    background: var(--tlo-drugie, #f4f6f8);
}

/* Leaflet rysuje własne panele nad naszymi warstwami — bez tego mapa
   potrafi zasłonić menu przy przewijaniu na telefonie. */
.mapa-plotno .leaflet-pane,
.mapa-plotno .leaflet-control { z-index: 1; }
.mapa-plotno .leaflet-popup-content p { margin: .3rem 0; }

/* Ikona na rozdrożu usług — kafel czyta się sylwetką, nie tytułem. */
.kafel-usluga .kafel-znak { display: block; margin-bottom: .4rem; color: var(--akcent, #1d4ed8); }
.kafel-pusty .kafel-znak { color: var(--tekst-drugi, #98a2b3); }

/* Filtry przy liście punktów — ten sam język wizualny co filtry katalogu. */
.filtry-punktow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.filtry-punktow a { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--obramowanie, #e4e7ec); text-decoration: none; font-size: .85rem; }
.filtry-punktow a.kategoria-aktywna { background: var(--akcent, #1d4ed8); color: #fff; border-color: transparent; }
.filtry-etykieta { font-size: .8rem; color: var(--tekst-drugi, #667085); }

/* Zabezpieczenie na wypadek, gdyby ten arkusz dojechał tylko częściowo:
   żaden rysunek w treści nie ma prawa urosnąć ponad swój kontener.
   Reguła jest tania, a ratuje stronę przed wyglądem awarii. */
.cena-wykres { max-width: 100%; }

/* ── Nagłówek strony głównej po usunięciu znaku wodnego ───────────────
   Kierownica wypełniała prawą połowę nagłówka. Po jej usunięciu treść
   wyrównana do lewej zostawiała pustą połowę ekranu, co czyta się jak
   niedokończona strona, a nie jak zamysł. Wyśrodkowanie zamyka układ:
   tablica, nagłówek, wyszukiwarka i liczniki stoją w jednej osi.

   Tylko na szerokim ekranie — na telefonie kolumna i tak zajmuje całą
   szerokość, a wyśrodkowany tekst czyta się gorzej niż wyrównany. */
/* UWAGA — reguła powyżej opisuje nagłówek strony głównej, którego już
   nie ma: stronę główną przejął `.hero-2` ze zdjęciem i tekstem do lewej.
   Wyśrodkowanie zostało więc **tylko na podstronach**, i to ono było
   największym rozjazdem w serwisie: dwadzieścia podstron środkowało
   tytuł, dziesięć wyrównywało do lewej, a strona główna do lewej.
   Wyrównanie jest teraz jedno — do lewej, jak na stronie głównej.
   Kto będzie chciał wyśrodkować konkretną podstronę, dopisze
   `hero-srodek`. */
@media (min-width: 60rem) {
  .hero.hero-srodek { text-align: center; }
  .hero.hero-srodek .hero-opis { margin-left: auto; margin-right: auto; }
  .hero.hero-srodek .szukaj { margin-left: auto; margin-right: auto; }
  .hero.hero-srodek .hero-fakty { justify-content: center; }
  .hero.hero-srodek #q-podpowiedz { text-align: center; }
}

/* Wyszukiwarka jest głównym działaniem na tej stronie — może zająć
   więcej miejsca niż akapit tekstu, dla którego liczy się długość
   wiersza. */
.hero .szukaj { max-width: 42rem; }

/* ── Menu na wąskim ekranie ───────────────────────────────────────────
   Pozycji w menu przybyło (modele, ogłoszenia) i na telefonie ostatnie
   z nich wychodziły poza ekran — bez paska przewijania, więc po prostu
   znikały. Zamiast chować je pod przyciskiem z trzema kreskami, na który
   trzeba jeszcze kliknąć, pozwalamy im się przewijać w poziomie:
   wszystkie zostają dostępne, a układ nagłówka się nie zmienia.

   `-webkit-overflow-scrolling` i ukryty pasek: pasek przewijania pod
   menu wygląda jak usterka, a przewijanie palcem działa bez niego. */
@media (max-width: 52rem) {
  .naglowek-in { gap: .6rem; }

  .nawigacja {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Margines ujemny z dopełnieniem: pierwsza i ostatnia pozycja mają
       oddech przy krawędzi, a przewijanie zaczyna się od samego brzegu. */
    margin-right: calc(-1 * var(--gutter, 1rem));
    padding-right: var(--gutter, 1rem);
  }

  .nawigacja::-webkit-scrollbar { display: none; }
  .nawigacja > * { flex: none; white-space: nowrap; }

  /* Nazwa serwisu ustępuje miejsca menu — tablica sama w sobie mówi,
     gdzie jesteśmy, i pozostaje odsyłaczem do strony głównej. */
  .marka-nazwa { display: none; }
}

/* Podpowiadany adres kanału w panelu źródeł ruchu. Łamie się w środku,
   bo adres pliku XML nie mieści się w kolumnie tabeli, a rozpychanie
   tabeli w bok kosztuje więcej niż złamany adres. */
.adres-podpowiedz { word-break: break-all; user-select: all; }

/* Sonda źródeł w panelu: pole adresu ma być szerokie, bo adresy plików
   XML bywają długie, a wklejony adres ucięty w polu to pierwsza rzecz,
   przez którą ktoś sprawdzi zły link. */
.sonda-zrodla { margin: .75rem 0 1rem; }
.sonda-zrodla label { display: block; font-weight: 600; margin-bottom: .35rem; }
.sonda-zrodla .rzad-akcji { display: flex; gap: .5rem; flex-wrap: wrap; }
.sonda-zrodla input[type="url"] { flex: 1 1 22rem; min-width: 0; }
.sonda-zrodla .podpowiedz { margin-top: .4rem; }

/* ── Archiwum cen paliw ────────────────────────────────────────────
   Paleta serii sprawdzona narzędziem: pasmo jasności, próg nasycenia,
   rozróżnialność sąsiednich par przy daltonizmie (ΔE ≥ 8) i kontrast
   wobec tła. Wersja ciemna to te same barwy przestrojone na ciemne
   tło, a nie automatyczne odwrócenie — odwrócenie psuje i kontrast,
   i rozróżnialność naraz. */
.ceny-archiwum { margin: 0 0 3rem; }

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

.zakres-czasu { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.zakres-czasu a, .zakres-czasu span {
  padding: .3rem .75rem; border-radius: 999px; font-size: .875rem;
  border: 1px solid var(--line); text-decoration: none; color: var(--ink-2);
}
.zakres-czasu a:hover { border-color: var(--accent); color: var(--accent); }
.zakres-wybrany { background: var(--accent); border-color: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 600; }

.wykres-legenda { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.legenda-wpis { display: flex; align-items: baseline; gap: .4rem; font-size: .9rem; }
.legenda-znak { width: 12px; height: 3px; border-radius: 2px; background: currentColor; align-self: center; }
.legenda-nazwa { color: var(--ink-2); }
.legenda-cena { color: var(--ink); font-variant-numeric: tabular-nums; }
.legenda-zmiana { font-size: .8rem; font-variant-numeric: tabular-nums; }
.legenda-zmiana.w-gore { color: var(--crit); }
.legenda-zmiana.w-dol { color: var(--ok); }

.wykres-cen { margin: 0 0 2rem; }
.wykres-cen svg { width: 100%; height: auto; max-height: 22rem; display: block; }
.wykres-siatka { stroke: var(--line); stroke-width: 1; }
.wykres-os { fill: var(--ink-3); font-size: 12px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.wykres-linia { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Pierścień w kolorze tła pod znacznikiem końca: dwie serie, które
   kończą się na tej samej cenie, inaczej zlewają się w jedną kropkę. */
.wykres-koniec { stroke: var(--surface); stroke-width: 2; }

/* Barwa niesie tożsamość serii i nic więcej — nazwa paliwa stoi
   w legendzie i w nagłówku kolumny tabeli, więc nikt nie musi
   odczytywać serii z samego koloru. */
.seria-1 { color: #2a78d6; }
.seria-2 { color: #eb6834; }
.seria-3 { color: #1baf7a; }
.seria-4 { color: #eda100; }
.seria-5 { color: #e87ba4; }
path.wykres-linia.seria-1 { stroke: #2a78d6; } circle.seria-1 { fill: #2a78d6; }
path.wykres-linia.seria-2 { stroke: #eb6834; } circle.seria-2 { fill: #eb6834; }
path.wykres-linia.seria-3 { stroke: #1baf7a; } circle.seria-3 { fill: #1baf7a; }
path.wykres-linia.seria-4 { stroke: #eda100; } circle.seria-4 { fill: #eda100; }
path.wykres-linia.seria-5 { stroke: #e87ba4; } circle.seria-5 { fill: #e87ba4; }

.tabela-ceny td.liczba, .tabela-ceny th.liczba { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-color-scheme: dark) {
  .seria-1 { color: #3987e5; }
  .seria-2 { color: #d95926; }
  .seria-3 { color: #199e70; }
  .seria-4 { color: #c98500; }
  .seria-5 { color: #d55181; }
  path.wykres-linia.seria-1 { stroke: #3987e5; } circle.seria-1 { fill: #3987e5; }
  path.wykres-linia.seria-2 { stroke: #d95926; } circle.seria-2 { fill: #d95926; }
  path.wykres-linia.seria-3 { stroke: #199e70; } circle.seria-3 { fill: #199e70; }
  path.wykres-linia.seria-4 { stroke: #c98500; } circle.seria-4 { fill: #c98500; }
  path.wykres-linia.seria-5 { stroke: #d55181; } circle.seria-5 { fill: #d55181; }
}
.wykres-podpis { display: flex; flex-direction: column; gap: .5rem; margin-top: .35rem; }
.wykres-serie { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.wykres-cen + .wykres-cen { margin-top: 1.5rem; }
.sekcja-linki { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }

/* Tabele przedziałów czasu w statystykach. Kolumn jest dziesięć, więc
   liczby muszą być wąskie i wyrównane do prawej — inaczej oko nie
   porówna sąsiednich okien, a po to ta tabela istnieje. */
.tabela-okna td.liczba, .tabela-okna th.liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-okna .okno-puste { color: var(--ink-3); }
.tabela-okna code { font-size: .85em; }
.lista-liczb { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
.lista-liczb strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }

/* ── Bloki działowe na stronie głównej ─────────────────────────────
   Cztery działy, które miały własne strony i wpisy w mapie witryny,
   a na stronie głównej ani jednego odnośnika. */
.lista-utrudnien { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.utrudnienie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .6rem .75rem; background: var(--surface); border-radius: var(--radius);
  border-left: 3px solid var(--line);
}
/* Waga zdarzenia niesiona **paskiem i słowem**, nie samym kolorem —
   przy „utrudnieniu na drodze" pomyłka kosztuje więcej niż estetyka. */
.utrudnienie.waga-wysoka { border-left-color: var(--crit); }
.utrudnienie.waga-srednia { border-left-color: var(--warn); }
.utrudnienie.waga-niska { border-left-color: var(--ink-3); }
.utrudnienie-droga { font-weight: 700; font-variant-numeric: tabular-nums; }
.utrudnienie-tytul { flex: 1 1 20rem; color: var(--ink-2); }
.utrudnienie-region { color: var(--ink-3); font-size: .82rem; }

.kafle-uslug { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.kafle-uslug a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .6rem .75rem; background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--line); text-decoration: none;
}
.kafle-uslug a:hover { border-color: var(--accent); }
.kafel-nazwa { color: var(--ink-2); }
.kafel-ile { font-weight: 700; font-variant-numeric: tabular-nums; }

.kafle-narzedzi { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kafle-narzedzi a {
  display: block; padding: .75rem .9rem; background: var(--surface);
  border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none;
}
.kafle-narzedzi a:hover { border-color: var(--accent); }
.kafle-narzedzi strong { display: block; }
.kafle-narzedzi span { display: block; margin-top: .2rem; color: var(--ink-3); font-size: .85rem; }

.kafle-modeli { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kafle-modeli a {
  display: inline-block; padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); text-decoration: none; font-size: .9rem; color: var(--ink-2);
}
.kafle-modeli a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Narzędzia: podział na to, co narzędzie robi ───────────────────
   Pięć jednakowych prostokątów czytało się jak spis treści. Grupa
   z ikoną i konkretną liczbą na kaflu odróżnia rachunek robiony
   w dwie sekundy od formularza na dziesięć pól. */
.narzedzia-grupa { margin: 0 0 2.5rem; }
.grupa-naglowek { display: flex; gap: .85rem; align-items: flex-start; margin: 0 0 1rem; }
.grupa-naglowek h2 { margin: 0; font-size: 1.25rem; }
.grupa-naglowek .podpowiedz { margin: .2rem 0 0; }
.grupa-ikona {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--accent-soft); color: var(--accent);
}
.grupa-ikona svg { width: 1.4rem; height: 1.4rem; }

.narzedzie-kafel .kafel-link { display: block; text-decoration: none; }
.narzedzie-kafel .kafel-link:hover h3 { text-decoration: underline; }
/* Liczba jest tu treścią, nie ozdobą: to ona dowodzi, że po drugiej
   stronie są prawdziwe dane, a nie kolejny pusty formularz. */
.kafel-liczba { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.kafel-podpis { display: block; margin: .15rem 0 .6rem; color: var(--ink-3); font-size: .82rem; }
.narzedzie-kafel h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.narzedzie-glowny { grid-column: 1 / -1; }
.narzedzie-glowny .kafel-liczba { font-size: 2rem; }

@media (min-width: 48rem) {
  .narzedzie-glowny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem; align-items: center; }
  .narzedzie-glowny p { margin: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   FRONT 2.0 — układ ze zdjęciem w nagłówku, pasek liczb, bloki
   działowe. Wszystko dopisane niżej, bo kolejność w CSS decyduje:
   nowe reguły nadpisują stare bez ich usuwania, więc podmiana
   idzie strona po stronie, a nie całym serwisem naraz.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --noc: #101a26;          /* pasek nawigacji i stopka-wezwanie */
  --noc-2: #18242f;
  --zolty: #f2c024;        /* akcja główna — jedyny żółty w serwisie */
  --zolty-ink: #16202b;
  --zielen: #6fae3f;       /* przycisk szukania */
  --zielen-ink: #ffffff;
}

/* ── Nagłówek ────────────────────────────────────────────────── */
.naglowek-2 { background: var(--noc); color: #eef2f6; position: relative; z-index: 20; }
.naglowek-2 .kontener { display: flex; align-items: center; gap: 1.25rem; min-height: 3.5rem; }
.marka-2 { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; flex: 0 0 auto; }
.marka-znak {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px;
  background: var(--zolty); color: var(--zolty-ink); font-weight: 800; font-size: .8rem; letter-spacing: -.02em;
}
.marka-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.marka-tekst b { font-size: 1rem; letter-spacing: .01em; }
.marka-tekst span { font-size: .62rem; color: #8fa3b5; letter-spacing: .08em; text-transform: uppercase; }

.nawigacja-2 { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nawigacja-2::-webkit-scrollbar { display: none; }
.nawigacja-2 a { color: #cfd9e3; text-decoration: none; padding: .45rem .6rem; border-radius: 6px; font-size: .92rem; white-space: nowrap; }
.nawigacja-2 a:hover { background: var(--noc-2); color: #fff; }
.nawigacja-2 .akcja-zolta {
  background: var(--zolty); color: var(--zolty-ink); font-weight: 700;
  padding: .5rem .9rem; border-radius: 8px;
}
.nawigacja-2 .akcja-zolta:hover { background: #ffd043; color: var(--zolty-ink); }

/* ── Hero ze zdjęciem ────────────────────────────────────────── */
.hero-2 { position: relative; color: #fff; overflow: hidden; }
.hero-2 img.hero-tlo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Przyciemnienie od lewej: tekst musi być czytelny na zdjęciu
   niezależnie od tego, co akurat jest pod nim — a zdjęcie wolno
   kiedyś podmienić na jaśniejsze. */
.hero-2::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,18,28,.94) 0%, rgba(10,18,28,.78) 42%, rgba(10,18,28,.30) 78%, rgba(10,18,28,.12) 100%);
}
.hero-2 .kontener { position: relative; z-index: 2; padding: 3rem 0 2.25rem; }
.hero-2-siatka { display: grid; gap: 2rem; align-items: start; }
.hero-2 h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.12; margin: 0 0 .75rem; max-width: 16ch; }
.hero-2-opis { color: #c8d4df; margin: 0 0 1.5rem; max-width: 44ch; font-size: 1.02rem; }

.szukaj-2 { display: flex; gap: .5rem; background: #fff; border-radius: 10px; padding: .35rem; max-width: 34rem; }
.szukaj-2 input { flex: 1 1 auto; min-width: 0; border: 0; padding: .7rem .85rem; font-size: .98rem; background: transparent; color: #12171c; }
.szukaj-2 input:focus { outline: 2px solid var(--zielen); outline-offset: -2px; border-radius: 6px; }
.szukaj-2 button { background: var(--zielen); color: var(--zielen-ink); border: 0; padding: .7rem 1.5rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
.szukaj-2 button:hover { filter: brightness(1.08); }

.skroty { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; }
.skroty a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem;
  border-radius: 999px; background: rgba(255,255,255,.10); color: #e6edf4;
  text-decoration: none; font-size: .85rem; border: 1px solid rgba(255,255,255,.16);
}
.skroty a:hover { background: rgba(255,255,255,.18); }
.skroty svg { width: 16px; height: 16px; }

/* Karta oceny kierowcy w hero */
.karta-oceny {
  background: var(--surface); color: var(--ink); border-radius: 12px; padding: 1.25rem;
  box-shadow: 0 18px 40px rgba(6,12,20,.35); max-width: 22rem;
}
.karta-oceny h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.karta-oceny .podpowiedz { margin: 0 0 .75rem; }
.tablica-pole { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; }
.tablica-kraj {
  background: #003399; color: #fff; display: grid; place-items: center; padding: 0 .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
}
.tablica-pole input { flex: 1 1 auto; min-width: 0; border: 0; padding: .65rem .75rem; font-size: 1.15rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--ink); }

@media (min-width: 62rem) {
  .hero-2-siatka { grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); gap: 3rem; }
  .hero-2 .kontener { padding: 4rem 0 3rem; }
}

/* ── Pasek liczb ─────────────────────────────────────────────── */
.pasek-liczb {
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: -1.75rem 0 2.5rem; position: relative; z-index: 5;
}
.liczba-kafel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem 1rem; display: block; text-decoration: none; color: inherit;
}
.liczba-kafel:hover { border-color: var(--accent); }
.liczba-glowa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.liczba-etykieta { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.liczba-wartosc { font-size: 1.65rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.liczba-podpis { font-size: .78rem; color: var(--ink-3); }
.liczba-ikona { width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.liczba-ikona svg { width: 1.05rem; height: 1.05rem; }
.ikona-czerwona { background: #fdeaea; color: #b42318; }
.ikona-zielona  { background: #e4f4ea; color: #0b6e4f; }
.ikona-niebieska{ background: #e6edfb; color: #1d4ed8; }
.ikona-fiolet   { background: #efe8fb; color: #6b3fd4; }
.ikona-pomarancz{ background: #fdf0e0; color: #8a5a00; }
.ikona-blekit   { background: #e2f2f7; color: #14657d; }

@media (prefers-color-scheme: dark) {
  .ikona-czerwona { background: #3a1c1a; color: #e8776e; }
  .ikona-zielona  { background: #12302a; color: #4fbf93; }
  .ikona-niebieska{ background: #17243f; color: #7ba3ff; }
  .ikona-fiolet   { background: #241c3d; color: #a58cf0; }
  .ikona-pomarancz{ background: #33270f; color: #d9a441; }
  .ikona-blekit   { background: #142a33; color: #63c2d8; }
}

/* ── Stopka-wezwanie z licznikami ────────────────────────────── */
.stopka-cta { background: var(--noc); color: #eef2f6; border-radius: 12px; padding: 2rem 1.5rem; margin: 2.5rem 0 0; }
.stopka-cta h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.stopka-cta p { color: #a9bacb; margin: 0 0 1.5rem; max-width: 52ch; }
.cta-liczby { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cta-liczby strong { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cta-liczby span { color: #8fa3b5; font-size: .82rem; }

/* Hero wyrwane z kontenera na pełną szerokość okna. Zdjęcie przycięte
   do kolumny tekstu wygląda jak wklejony obrazek, a nie jak nagłówek
   strony — a to jest pierwsza rzecz, którą widzi czytelnik. */
.hero-2 { margin-inline: calc(50% - 50vw); width: 100vw; }
.hero-2 > .kontener { margin-inline: auto; }
/* Pasek liczb zostaje w kolumnie treści, ale wjeżdża na zdjęcie. */
.pasek-liczb { margin-top: -2.25rem; }
.pasek-liczb { list-style: none; padding: 0; }
.skroty { list-style: none; }

/* ═══════════════════════════════════════════════════════════════
   Ceny hurtowe paliw i wykresy
   ═══════════════════════════════════════════════════════════════ */

.ceny-kafle {
    list-style: none; margin: 0 0 1.25rem; padding: 0;
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cena-kafel {
    border: 1px solid var(--line, #d6dbd6); border-radius: .6rem;
    background: var(--surface, #fff); overflow: hidden;
}
.cena-kafel > a {
    display: block; padding: .85rem .9rem; text-decoration: none; color: inherit;
}
.cena-kafel > a:hover { background: var(--surface-2, #e9ece7); }
.cena-nazwa {
    display: block; font-size: .82rem; color: var(--ink-3, #6c7783);
    text-transform: uppercase; letter-spacing: .03em;
}
.cena-liczba {
    display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.15;
    /* Cyfry o stalej szerokosci: bez tego liczba drga w poziomie przy
       kazdej zmianie ceny i kafle przestaja byc rownej szerokosci. */
    font-variant-numeric: tabular-nums;
}
.cena-jednostka { font-size: .95rem; font-weight: 500; color: var(--ink-3, #6c7783); }
.cena-zmiana { display: block; font-size: .85rem; font-weight: 600; margin-top: .15rem; }
.cena-data { display: block; font-size: .78rem; color: var(--ink-3, #6c7783); margin-top: .3rem; }

/* Kierunek zmiany niesie kolor ORAZ slowo ORAZ trojkat. Sam kolor
   odpada: czerwien i zielen to najczestsza para nie do odroznienia. */
.cena-wzrost .cena-zmiana { color: #b3261e; }
.cena-spadek .cena-zmiana { color: #14672f; }
.cena-bez .cena-zmiana { color: var(--ink-3, #6c7783); font-weight: 500; }

.ceny-przelaczniki {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    margin: 0 0 1rem;
}
.przelacznik-grupa { display: flex; flex-wrap: wrap; gap: .3rem; }
.przelacznik {
    display: inline-block; padding: .35rem .75rem; border-radius: 999px;
    border: 1px solid var(--line, #d6dbd6); background: var(--surface, #fff);
    color: var(--ink-2, #414b55); text-decoration: none; font-size: .85rem;
}
.przelacznik:hover { border-color: var(--ink-3, #6c7783); }
.przelacznik-aktywny {
    background: var(--accent, #003399); border-color: var(--accent, #003399);
    color: var(--accent-ink, #fff); font-weight: 600;
}

.uwaga-zrodla {
    border-left: 3px solid var(--accent, #003399);
    background: var(--surface-2, #e9ece7);
    padding: .8rem 1rem; margin: 0 0 1.25rem; border-radius: 0 .4rem .4rem 0;
}

/* ── Wykres ────────────────────────────────────────────────────── */

.wykres {
    margin: 0 0 1.75rem; padding: 1rem;
    border: 1px solid var(--line, #d6dbd6); border-radius: .6rem;
    background: var(--surface, #fff);
}
.wykres-tytul { font-weight: 600; margin-bottom: .6rem; }
/* Wysokosc na stale: bez niej SVG z preserveAspectRatio="none" rozciaga
   sie do proporcji viewBoxa i na telefonie robi sie wyzszy niz ekran. */
.wykres-plotno { display: block; width: 100%; height: 300px; }
.wykres-siatka { stroke: var(--line, #d6dbd6); stroke-width: 1; }
.wykres-os { fill: var(--ink-3, #6c7783); font-size: 11px; }
.wykres-linia { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wykres-podpis { font-size: 11px; font-weight: 600; fill: var(--ink-2, #414b55); }

.wykres-legenda {
    list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    margin: .6rem 0 0; padding: 0; font-size: .85rem; color: var(--ink-2, #414b55);
}
.wykres-legenda li { display: flex; align-items: center; gap: .35rem; }
.wykres-znacznik { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

.wykres-tabela { margin-top: .75rem; font-size: .9rem; }
.wykres-tabela summary { cursor: pointer; color: var(--ink-2, #414b55); }
.tabela-przewijana { overflow-x: auto; }
.wykres-tabela table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.wykres-tabela caption { text-align: left; color: var(--ink-3, #6c7783); padding-bottom: .4rem; }
.wykres-tabela th, .wykres-tabela td {
    text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line, #d6dbd6);
}
.wykres-tabela td { font-variant-numeric: tabular-nums; }

/* Kolory serii. Paleta przeszla komplet sprawdzen rozroznialnosci
   w obu trybach — opis i wyniki stoja w WholesaleProduct::kolor(). */
.wykres-seria-benzyna-95 { stroke: #2a78d6; }
.wykres-seria-benzyna-98 { stroke: #eda100; }
.wykres-seria-olej-napedowy { stroke: #008300; }
.wykres-seria-autogaz { stroke: #e87ba4; }
.wykres-seria-on-arktyczny { stroke: #4a3aa7; }
.wykres-seria-ekoterm { stroke: #e34948; }

text.wykres-seria-benzyna-95, .wykres-legenda .wykres-seria-benzyna-95 { fill: #2a78d6; background: #2a78d6; }
text.wykres-seria-benzyna-98, .wykres-legenda .wykres-seria-benzyna-98 { fill: #b87c00; background: #eda100; }
text.wykres-seria-olej-napedowy, .wykres-legenda .wykres-seria-olej-napedowy { fill: #008300; background: #008300; }
text.wykres-seria-autogaz, .wykres-legenda .wykres-seria-autogaz { fill: #b3527a; background: #e87ba4; }
text.wykres-seria-on-arktyczny, .wykres-legenda .wykres-seria-on-arktyczny { fill: #4a3aa7; background: #4a3aa7; }
text.wykres-seria-ekoterm, .wykres-legenda .wykres-seria-ekoterm { fill: #c22e2d; background: #e34948; }

.ceny-zrodlo { margin-top: 2rem; }
.ceny-hurt-home { margin-bottom: 2rem; }

/* Prognoza MIKA. Ramka jest wyraźnie inna niż kafle z cenami: to nie
   jest dana, tylko nasza opinia, i ma się od danych odróżniać na pierwszy
   rzut oka, zanim ktokolwiek przeczyta nagłówek. */
.prognoza-mika {
  margin-top: 2rem; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.prognoza-mika h2 { margin-top: 0; }
.mika-teza { font-size: 1.05rem; margin: 0 0 .9rem; }
.mika-dni { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }
.mika-dni li {
  flex: 1 1 4.5rem; text-align: center; padding: .45rem .3rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.mika-dzien { display: block; font-size: .74rem; color: var(--ink-3); }
.mika-cena { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.mika-uczciwosc { margin: 0; font-size: .9rem; color: var(--ink-2); }

/* Wyniki dla listy numerów wklejonych naraz. */
.wyniki-listy { max-width: 46rem; margin: 0 auto; }
.lista-wynikow { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .5rem; }
.wynik { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.wynik-tresc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .7rem .9rem; text-decoration: none; color: inherit;
}
a.wynik-tresc:hover { border-color: var(--accent); }
.wynik-tablica {
  font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* Numer, ktorego nie rozpoznalismy, jest wyszarzony, a nie czerwony:
   to nie jest blad czlowieka, tylko brak dopasowania do formatu. */
.wynik-tablica-bledna { color: var(--ink-3); font-weight: 600; }
.wynik-oceny { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wynik-liczby { font-size: .85rem; color: var(--ink-3); }
/* Profil z historia jest tym, po co ktos wklejal liste — ma sie wyroznic
   bez czytania. */
.wynik-jest { border-left: 3px solid var(--accent); }
.wynik-limit { opacity: .65; }
.szukaj-lista { display: grid; gap: .5rem; margin-top: 1.5rem; }
.szukaj-lista textarea {
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: inherit; resize: vertical;
}
.szukaj-2-podpowiedz { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-3); }
.szukaj-2-podpowiedz code { font-size: .95em; }

/* Lista migracji rozjechanych z zapisem — nazwa i dwa wyjscia obok. */
.lista-rozjazdow { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; }
.lista-rozjazdow li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lista-rozjazdow form { margin: 0; }

/* Profil demonstracyjny. Ostrzezenie ma byc widoczne od razu i nie
   udawac zwyklej podpowiedzi — dlatego pasek, a nie drobny druk. */
.ostrzezenie-demo {
  padding: .7rem .9rem; border-radius: var(--radius);
  border: 1px dashed var(--warn, #b26a00); color: var(--ink-2);
  background: var(--surface); font-size: .92rem;
}
.demo-tresc { max-width: 28rem; }
.demo-ocena { margin-left: .4rem; color: var(--ink-3); font-size: .8rem; }
.demo-opublikowana { opacity: .7; }
.demo-anulowana { opacity: .45; text-decoration: line-through; }

/* Komentarz gościa. Znacznik jest wyciszony celowo: ma odróżniać wpis
   bez konta, a nie piętnować go — treść liczy się tak samo, tylko autora
   nie da się z niczym powiązać. */
.znacznik-gosc {
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line); font-weight: 600;
}

/* Powiadomienia o cenie paliwa — próg i lista własnych progów. */
.powiadomienia-cen { margin-top: 2rem; }
.lista-powiadomien { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.lista-powiadomien li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2);
}
.lista-powiadomien form { margin: 0; }
/* Próg i kierunek stoją w jednej linii, bo to jedna decyzja. Rozbite
   na osobne wiersze wyglądałyby jak dwa niezależne ustawienia. */
.formularz-prog { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin: 0; }
.formularz-prog .pole { margin: 0; }
.formularz-prog select, .formularz-prog input {
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: inherit;
}
.formularz-prog input { max-width: 8rem; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wykres-seria-benzyna-95 { stroke: #3987e5; }
    :root:not([data-theme="light"]) .wykres-seria-benzyna-98 { stroke: #c98500; }
    :root:not([data-theme="light"]) .wykres-seria-autogaz { stroke: #d55181; }
    :root:not([data-theme="light"]) .wykres-seria-on-arktyczny { stroke: #9085e9; }
    :root:not([data-theme="light"]) .wykres-seria-ekoterm { stroke: #e66767; }
    :root:not([data-theme="light"]) text.wykres-seria-benzyna-95 { fill: #3987e5; }
    :root:not([data-theme="light"]) text.wykres-seria-benzyna-98 { fill: #c98500; }
    :root:not([data-theme="light"]) text.wykres-seria-olej-napedowy { fill: #2eb82e; }
    :root:not([data-theme="light"]) text.wykres-seria-autogaz { fill: #d55181; }
    :root:not([data-theme="light"]) .cena-wzrost .cena-zmiana { color: #ff8a80; }
    :root:not([data-theme="light"]) .cena-spadek .cena-zmiana { color: #6ede8a; }
}
:root[data-theme="dark"] .wykres-seria-benzyna-95 { stroke: #3987e5; }
:root[data-theme="dark"] .wykres-seria-benzyna-98 { stroke: #c98500; }
:root[data-theme="dark"] .wykres-seria-autogaz { stroke: #d55181; }
:root[data-theme="dark"] .wykres-seria-on-arktyczny { stroke: #9085e9; }
:root[data-theme="dark"] .wykres-seria-ekoterm { stroke: #e66767; }
:root[data-theme="dark"] text.wykres-seria-benzyna-95 { fill: #3987e5; }
:root[data-theme="dark"] text.wykres-seria-benzyna-98 { fill: #c98500; }
:root[data-theme="dark"] text.wykres-seria-olej-napedowy { fill: #2eb82e; }
:root[data-theme="dark"] text.wykres-seria-autogaz { fill: #d55181; }
:root[data-theme="dark"] .cena-wzrost .cena-zmiana { color: #ff8a80; }
:root[data-theme="dark"] .cena-spadek .cena-zmiana { color: #6ede8a; }

/* Wiecej niz jeden panel to wiecej niz jeden rysunek pod soba. Kazdy
   z osobna moze byc nizszy — razem i tak zajmuja tyle, ile jeden wysoki,
   a zaden nie wypycha reszty strony poza ekran telefonu. */
.wykres-paneli-2 .wykres-plotno, .wykres-paneli-3 .wykres-plotno { height: 200px; }
.wykres-plotno + .wykres-plotno { margin-top: .35rem; }