/* ==========================================================================
Wyszukiwarka adresów (wersja robocza): arkusz stylów
Estetyka: karta atlasu. Ciepły papier, atrament, poziomice, pinezka.
Motywy: jasny i ciemny z jednego zestawu zmiennych (light-dark()).
Fonty: tylko systemowe (zero zewnętrznych fontów).
========================================================================== */
:root {
color-scheme: light dark;
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Charter, Georgia, "Noto Serif", serif;
--font-ui: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* powierzchnie */
--tlo: light-dark(#F2EEE3, #0A1720);
--powierzchnia: light-dark(#FFFDF8, #12232E);
--powierzchnia-2: light-dark(#F6F1E5, #183040);
--powierzchnia-3: light-dark(#EAE4D3, #1E3A4B);
/* tekst */
--tekst: light-dark(#14232B, #E9EFF1);
--tekst-2: light-dark(#475A63, #A6B8C0);
/* linie: dekoracyjne oraz obrysy elementów interaktywnych (>= 3:1) */
--linia: light-dark(#DCD5C3, #223A48);
--obrys: light-dark(#6B7D84, #6F8792);
/* akcent (petrol / cyjan nocny) */
--akcent: light-dark(#0B6370, #5FC9D6);
--akcent-hover: light-dark(#084F5A, #86DCE6);
--akcent-tlo: light-dark(#DBEDEF, #133540);
--akcent-tekst: light-dark(#084A54, #9BE3EC);
--na-akcencie: light-dark(#FFFFFF, #04202A);
--fokus: light-dark(#0B6370, #7BD8E4);
--halo: light-dark(rgb(11 99 112 / .20), rgb(95 201 214 / .26));
--pin: light-dark(#D7452B, #FF7B57);
--mark-tlo: light-dark(#FFE59A, #6B5A12);
/* poziomice w tle */
--kontur-cienki: light-dark(#E2DAC6, #14303D);
--kontur-gruby: light-dark(#DCD2BB, #1C3D4E);
/* cienie */
--cien-kolor: light-dark(rgb(20 35 43 / .17), rgb(0 0 0 / .55));
--cien-1: 0 1px 2px var(--cien-kolor), 0 8px 20px -12px var(--cien-kolor);
--cien-2: 0 1px 2px var(--cien-kolor), 0 22px 44px -26px var(--cien-kolor);
--cien-panel: 0 2px 4px var(--cien-kolor), 0 28px 56px -22px var(--cien-kolor);
/* statusy: tło, tekst (>= 4.5:1), ramka */
--st-ok-tlo: light-dark(#DCF1E2, #11301F);
--st-ok-tekst: light-dark(#0B5A2C, #8EE3AE);
--st-ok-ramka: light-dark(#2E8B57, #2F8F5A);
--st-pyt-tlo: light-dark(#FFF0C7, #3A2D06);
--st-pyt-tekst: light-dark(#684200, #FFD770);
--st-pyt-ramka: light-dark(#A57300, #B58A12);
--st-uwaga-tlo: light-dark(#FFE0C8, #40200C);
--st-uwaga-tekst: light-dark(#7A3200, #FFB985);
--st-uwaga-ramka: light-dark(#CC5F12, #C8691F);
--st-blad-tlo: light-dark(#FBDCD8, #431519);
--st-blad-tekst: light-dark(#8B1A12, #FFA79F);
--st-blad-ramka: light-dark(#C0392B, #C4453C);
--st-neutr-tlo: light-dark(#E4EBEE, #1E3340);
--st-neutr-tekst: light-dark(#2B424D, #B5CAD3);
--st-neutr-ramka: light-dark(#6F8791, #7391A0);
/* kafelki OSM w trybie ciemnym */
--filtr-ciemny: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.7);
--filtr-kafli: none;
}
:root[data-motyw="jasny"] { color-scheme: light; }
:root[data-motyw="ciemny"] { color-scheme: dark; --filtr-kafli: var(--filtr-ciemny); }
@media (prefers-color-scheme: dark) {
:root:not([data-motyw="jasny"]) { --filtr-kafli: var(--filtr-ciemny); }
}
/* warianty statusu: ustawiają trzy zmienne dziedziczone przez plakietki i paski */
.st--ok { --st-tlo: var(--st-ok-tlo); --st-tekst: var(--st-ok-tekst); --st-ramka: var(--st-ok-ramka); }
.st--pytanie { --st-tlo: var(--st-pyt-tlo); --st-tekst: var(--st-pyt-tekst); --st-ramka: var(--st-pyt-ramka); }
.st--uwaga { --st-tlo: var(--st-uwaga-tlo); --st-tekst: var(--st-uwaga-tekst); --st-ramka: var(--st-uwaga-ramka); }
.st--blad { --st-tlo: var(--st-blad-tlo); --st-tekst: var(--st-blad-tekst); --st-ramka: var(--st-blad-ramka); }
.st--neutralny { --st-tlo: var(--st-neutr-tlo); --st-tekst: var(--st-neutr-tekst); --st-ramka: var(--st-neutr-ramka); }
/* ---------- baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--tlo);
color: var(--tekst);
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
p, h1, h2, h3, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--mark-tlo); color: var(--tekst); }
:focus-visible {
outline: 3px solid var(--fokus);
outline-offset: 3px;
}
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikona {
width: 1.25em; height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
mark {
background: var(--mark-tlo);
color: inherit;
border-radius: .2em;
padding: 0 .06em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ---------- układ strony ---------- */
.strona { position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; }
.kolumna { width: min(100% - 2rem, 74rem); margin-inline: auto; }
.glowna { flex: 1 0 auto; padding-bottom: 1rem; }
.bez-js { padding: 1rem; border: 1px solid var(--st-blad-ramka); border-radius: .75rem; background: var(--st-blad-tlo); color: var(--st-blad-tekst); }
/* ---------- nagłówek ---------- */
.naglowek { position: relative; padding-top: .75rem; }
.pasek {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
min-height: 3rem;
}
.nadtytul {
font-size: .78rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--tekst-2);
}
.wstep {
display: grid; gap: 1.5rem 3rem;
align-items: end;
padding-block: clamp(1.5rem, 5vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.25rem);
}
@media (min-width: 62rem) {
.wstep { grid-template-columns: minmax(0, 1fr) auto; }
}
.tytul {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.2rem, 1.15rem + 4.4vw, 4.1rem);
line-height: 1.04;
letter-spacing: -.018em;
text-wrap: balance;
}
.tytul__uwaga {
display: block;
margin-top: .55em;
font-size: max(.34em, .95rem);
font-style: italic;
letter-spacing: .01em;
color: var(--tekst-2);
}
.lead {
max-width: 38rem;
margin-top: 1.1rem;
font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
line-height: 1.55;
color: var(--tekst-2);
text-wrap: pretty;
}
.statystyka {
display: flex; flex-direction: column; gap: .2rem;
padding: .2rem 0 .2rem 1.35rem;
border-left: 3px solid var(--pin);
}
.statystyka__liczba {
font-family: var(--font-serif);
font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
}
.statystyka__opis {
font-size: .76rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--tekst-2);
}
/* ---------- przełącznik motywu ---------- */
.motyw {
display: inline-flex; align-items: center; gap: .7rem;
min-height: 2.75rem;
padding: .2rem .35rem .2rem 1rem;
border: 1px solid var(--obrys);
border-radius: 999px;
background: color-mix(in srgb, var(--powierzchnia) 80%, transparent);
font-size: .9rem; font-weight: 650;
transition: background-color .2s, border-color .2s;
}
.motyw:hover { background: var(--powierzchnia); border-color: var(--akcent); }
.motyw__tor {
position: relative; flex: none;
width: 3.4rem; height: 2.05rem;
border-radius: 999px;
background: var(--powierzchnia-3);
border: 1px solid var(--obrys);
}
.motyw__galka {
position: absolute; top: 50%; left: .2rem;
width: 1.5rem; height: 1.5rem; margin-top: -.75rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--akcent); color: var(--na-akcencie);
transition: transform .28s cubic-bezier(.3, .8, .3, 1);
}
.motyw__galka .ikona { grid-area: 1 / 1; width: 1rem; height: 1rem; }
.motyw__ksiezyc { display: none; }
.motyw[aria-checked="true"] .motyw__galka { transform: translateX(1.38rem); }
.motyw[aria-checked="true"] .motyw__slonce { display: none; }
.motyw[aria-checked="true"] .motyw__ksiezyc { display: block; }
/* ---------- przyciski ---------- */
.przycisk {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
min-height: 2.75rem;
padding: .5rem 1.1rem;
border: 1.5px solid transparent;
border-radius: 999px;
font-weight: 650; line-height: 1.2;
text-decoration: none;
transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .2s;
}
.przycisk--glowny { background: var(--akcent); color: var(--na-akcencie); }
.przycisk--glowny:hover { background: var(--akcent-hover); }
.przycisk--wt { background: var(--powierzchnia); border-color: var(--obrys); color: var(--tekst); }
.przycisk--wt:hover { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent-tekst); }
.przycisk--maly { padding: .4rem .95rem; font-size: .92rem; }
.przycisk[aria-busy="true"], .przycisk[aria-disabled="true"] { cursor: progress; }
.przycisk--ok, .przycisk--ok:hover {
background: var(--st-ok-tlo); border-color: var(--st-ok-ramka); color: var(--st-ok-tekst);
}
.przycisk--blad, .przycisk--blad:hover {
background: var(--st-blad-tlo); border-color: var(--st-blad-ramka); color: var(--st-blad-tekst);
}
/* ---------- wyszukiwarka ---------- */
.szukaj { position: relative; z-index: 30; max-width: 58rem; }
.szukaj__etykieta {
display: block; margin: 0 0 .55rem .3rem;
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.szukaj__obszar { position: relative; }
.szukaj__rzad { display: flex; align-items: stretch; gap: .75rem; }
.pole {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: .5rem;
min-height: 4.4rem;
padding: 0 .5rem 0 1.2rem;
background: var(--powierzchnia);
border: 2px solid var(--obrys);
border-radius: 1.3rem;
box-shadow: var(--cien-1);
transition: border-color .15s, box-shadow .25s;
}
.pole:focus-within {
border-color: var(--akcent);
outline: 3px solid var(--fokus);
outline-offset: 2px;
box-shadow: var(--cien-2);
}
.pole__ikona { width: 1.45rem; height: 1.45rem; color: var(--akcent); }
.pole input {
flex: 1 1 auto; min-width: 0;
height: 100%;
padding: 1rem .35rem;
border: 0; outline: 0;
background: transparent;
color: var(--tekst);
font-size: clamp(1.15rem, 1.02rem + .55vw, 1.5rem);
font-weight: 500;
text-overflow: ellipsis;
}
.pole input::placeholder { color: var(--tekst-2); opacity: 1; font-weight: 400; }
.pole__czysc {
flex: none;
display: grid; place-items: center;
width: 2.75rem; height: 2.75rem;
border: 0; border-radius: 50%;
background: transparent; color: var(--tekst-2);
transition: background-color .15s, color .15s;
}
.pole__czysc:hover { background: var(--powierzchnia-3); color: var(--tekst); }
.pole__czysc .ikona { width: 1.2rem; height: 1.2rem; }
.pole__ladowanie, .kolko {
flex: none;
width: 1.4rem; height: 1.4rem;
border: .2rem solid var(--powierzchnia-3);
border-top-color: var(--akcent);
border-radius: 50%;
}
.szukaj__wyslij {
flex: none;
min-height: 4.4rem;
padding-inline: 1.7rem;
border-radius: 1.3rem;
font-size: 1.05rem;
box-shadow: var(--cien-1);
}
.szukaj__wyslij:hover { transform: translateY(-1px); }
.szukaj__narzedzia {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: .5rem 1.25rem;
margin-top: .7rem;
min-height: 2.75rem;
}
.pomoc {
flex: 1 1 18rem;
font-size: .92rem; line-height: 1.5;
color: var(--tekst-2);
}
.pomoc--brak, .pomoc--info { color: var(--tekst); }
.pomoc--blad { color: var(--st-blad-tekst); }
.pomoc__ikona { display: inline-block; vertical-align: -.2em; margin-right: .4rem; }
.pomoc--blad .pomoc__ikona { color: var(--st-blad-ramka); }
.pomoc--brak .pomoc__ikona, .pomoc--info .pomoc__ikona { color: var(--st-pyt-ramka); }
.poprawka {
display: inline-block;
min-height: 1.75rem;
margin-inline: .1rem 0;
padding: .1rem .6rem;
border: 1px solid transparent;
border-radius: .55rem;
background: var(--akcent-tlo);
color: var(--akcent-tekst);
font-weight: 700;
transition: border-color .15s;
}
.poprawka:hover { border-color: var(--akcent); }
.pomoc__ponow {
margin-left: .35rem;
min-height: 1.75rem; padding: .1rem .7rem;
border: 1px solid var(--obrys); border-radius: 999px;
background: var(--powierzchnia);
font-weight: 650;
}
.pomoc__ponow:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
/* lokalizacja */
.lokalizacja { flex: none; display: flex; align-items: center; gap: .6rem; }
.lokalizacja__znacznik {
display: inline-flex; align-items: center; gap: .6rem;
padding: .25rem .3rem .25rem .9rem;
border: 1.5px solid var(--akcent);
border-radius: 999px;
background: var(--akcent-tlo);
color: var(--akcent-tekst);
font-weight: 650; font-size: .92rem;
}
.lokalizacja__kropka {
width: .65rem; height: .65rem; border-radius: 50%;
background: var(--akcent);
}
.lokalizacja__wylacz {
min-height: 2.25rem;
padding: 0 .9rem;
border: 1.5px solid var(--akcent); border-radius: 999px;
background: transparent; color: inherit;
font-weight: 650;
}
.lokalizacja__wylacz:hover { background: var(--akcent); color: var(--na-akcencie); }
.lokalizacja__blad {
margin-top: .5rem;
padding: .65rem .95rem;
border: 1px solid var(--st-blad-ramka); border-radius: .85rem;
background: var(--st-blad-tlo); color: var(--st-blad-tekst);
font-size: .92rem; line-height: 1.45;
}
/* panel podpowiedzi */
.panel {
position: absolute; z-index: 60;
left: 0; right: 0; top: 100%;
margin-top: .45rem;
overflow: hidden;
background: var(--powierzchnia);
border: 1px solid var(--obrys);
border-radius: 1.2rem;
box-shadow: var(--cien-panel);
}
.opcja {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "ikona tekst znacznik";
align-items: center; gap: .15rem .9rem;
min-height: 3.9rem;
padding: .7rem 1.1rem;
border-top: 1px solid var(--linia);
cursor: pointer;
}
.opcja:first-child { border-top: 0; }
.opcja[aria-selected="true"] {
background: var(--akcent-tlo);
box-shadow: inset 4px 0 0 var(--akcent);
}
.opcja__ikona {
grid-area: ikona;
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem;
border-radius: .8rem;
background: var(--powierzchnia-2);
color: var(--akcent);
}
.opcja[aria-selected="true"] .opcja__ikona { background: var(--powierzchnia); }
.opcja__tekst { grid-area: tekst; min-width: 0; display: flex; flex-direction: column; }
.opcja__etykieta { font-size: 1.06rem; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.opcja__opis { font-size: .875rem; color: var(--tekst-2); line-height: 1.35; }
.opcja__znacznik { grid-area: znacznik; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.znacznik {
display: inline-block;
padding: .12rem .55rem;
border: 1px solid var(--st-ramka, var(--obrys));
border-radius: 999px;
background: var(--st-tlo, transparent);
color: var(--st-tekst, var(--tekst-2));
font-size: .75rem; font-weight: 700; line-height: 1.5;
white-space: nowrap;
}
.panel__stopka {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
padding: .55rem 1.1rem;
border-top: 1px solid var(--linia);
background: var(--powierzchnia-2);
font-size: .8rem; color: var(--tekst-2);
}
.panel__bias { font-weight: 650; color: var(--akcent-tekst); }
.panel__klawisze { margin-left: auto; }
@media (hover: none), (pointer: coarse) {
.panel__klawisze { display: none; }
.panel__stopka:has(.panel__bias:empty) { display: none; }
}
/* przykłady */
.przyklady { max-width: 58rem; margin-top: 1.75rem; }
.przyklady__tytul {
margin: 0 0 .65rem .3rem;
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.przyklady__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (min-width: 52rem) {
.przyklady__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.przyklad {
width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
min-height: 4.2rem;
padding: .8rem .95rem;
text-align: left;
border: 1px solid var(--linia);
border-radius: 1.05rem;
background: color-mix(in srgb, var(--powierzchnia) 72%, transparent);
transition: border-color .15s, background-color .15s, transform .2s, box-shadow .2s;
}
.przyklad:hover {
border-color: var(--akcent);
background: var(--powierzchnia);
box-shadow: var(--cien-1);
transform: translateY(-2px);
}
.przyklad__q { font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.przyklad__opis { font-size: .8125rem; color: var(--tekst-2); line-height: 1.35; }
/* ---------- wyniki ---------- */
.wyniki { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.wyniki__siatka { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
.wyniki__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.wyniki__mapa { position: sticky; top: 1rem; }
}
.wyniki__karta[aria-busy="true"] .karta { opacity: .5; pointer-events: none; transition: opacity .2s; }
.karta {
position: relative;
padding: clamp(1.25rem, 3vw, 1.9rem);
padding-top: clamp(1.5rem, 3.4vw, 2.1rem);
background: var(--powierzchnia);
border: 1px solid var(--linia);
border-radius: 1.6rem;
/* pasek koloru statusu u góry karty (cień wewnętrzny zamiast pseudo-elementu) */
box-shadow: inset 0 .4rem 0 0 var(--st-ramka), var(--cien-2);
overflow: hidden;
}
.karta__gora {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: .6rem 1rem;
}
.karta__nadtytul {
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.plakietka {
display: inline-flex; align-items: center; gap: .5rem;
padding: .4rem .9rem .4rem .65rem;
border: 1.5px solid var(--st-ramka);
border-radius: 999px;
background: var(--st-tlo);
color: var(--st-tekst);
font-size: .92rem; font-weight: 700; line-height: 1.25;
}
.plakietka .ikona { width: 1.2rem; height: 1.2rem; }
.adres {
margin-top: 1rem;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.55rem);
line-height: 1.12;
letter-spacing: -.012em;
overflow-wrap: break-word;
text-wrap: balance;
}
.adres__opis { margin-top: .35rem; color: var(--tekst-2); }
.pewnosc { display: flex; align-items: center; gap: .85rem; margin-top: 1.15rem; }
.pewnosc__pasek {
flex: 1 1 auto; height: .55rem;
border-radius: 999px;
background: var(--powierzchnia-3);
overflow: hidden;
}
.pewnosc__wypelnienie {
display: block; height: 100%;
width: calc(var(--p, 0) * 100%);
border-radius: inherit;
background: var(--st-ramka);
transform-origin: left center;
}
.pewnosc__tekst {
flex: none;
font-size: .9rem; font-weight: 650;
font-variant-numeric: tabular-nums;
}
.uwagi { display: grid; gap: .55rem; margin-top: 1.1rem; }
.uwaga {
display: flex; align-items: flex-start; gap: .65rem;
padding: .7rem .9rem;
border: 1px solid var(--st-ramka);
border-radius: .9rem;
background: var(--st-tlo);
color: var(--st-tekst);
font-size: .94rem; line-height: 1.45;
}
.uwaga .ikona { margin-top: .12rem; width: 1.15rem; height: 1.15rem; }
.uwaga b { font-weight: 700; }
.uwaga__zamiana { white-space: nowrap; }
.skladniki { margin-top: 1.35rem; border-top: 1px solid var(--linia); }
.skladnik {
display: flex; align-items: baseline; gap: .9rem;
padding: .6rem 0;
border-bottom: 1px solid var(--linia);
}
.skladnik dt {
flex: 0 0 11rem;
font-size: .76rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--tekst-2);
}
.skladnik dd {
flex: 1 1 auto; min-width: 0;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.skladnik--mono dd { font-family: var(--font-mono); font-size: .9em; letter-spacing: -.01em; }
.skladnik__brak { color: var(--tekst-2); }
.akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.25rem; }
.akcje__etykieta {
margin-right: .15rem;
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.alternatywy { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--linia); }
.alternatywy__tytul {
margin-bottom: .7rem;
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.alternatywy__lista { display: grid; gap: .5rem; }
.alt {
width: 100%;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
min-height: 3.5rem;
padding: .6rem .85rem;
text-align: left;
border: 1px solid var(--linia);
border-radius: .95rem;
background: var(--powierzchnia);
transition: border-color .15s, background-color .15s;
}
.alt:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.alt__ikona { color: var(--akcent); }
.alt__tekst { display: flex; flex-direction: column; min-width: 0; }
.alt__etykieta { font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.alt__opis { font-size: .85rem; color: var(--tekst-2); line-height: 1.35; }
.alt__koniec { display: flex; align-items: center; gap: .55rem; }
.alt__strzalka { color: var(--tekst-2); width: 1.1rem; height: 1.1rem; }
.alt:hover .alt__strzalka { color: var(--akcent-tekst); }
.karta__zrodlo {
margin-top: 1.5rem;
font-size: .78rem; line-height: 1.5;
color: var(--tekst-2);
}
.karta--brak .adres { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); }
.karta__akcja { margin-top: 1.1rem; }
/* szkielet ładowania */
.szkielet { display: grid; gap: .75rem; }
.szkielet__linia {
height: 1rem; border-radius: .5rem;
background: linear-gradient(90deg, var(--powierzchnia-3) 0%, var(--powierzchnia-2) 50%, var(--powierzchnia-3) 100%);
background-size: 220% 100%;
}
.szkielet__linia--duza { height: 2.4rem; width: 82%; margin-top: .5rem; }
.szkielet__linia--krotka { width: 46%; }
/* ---------- mapa ---------- */
.mapa-rama {
position: relative; isolation: isolate;
overflow: hidden;
background: var(--powierzchnia);
border: 1px solid var(--linia);
border-radius: 1.6rem;
box-shadow: var(--cien-2);
}
.mapa-okno { position: relative; }
.mapa {
position: relative; z-index: 0;
height: clamp(22rem, 62vh, 40rem);
background: var(--powierzchnia-3);
font-family: var(--font-ui);
}
@media (max-width: 61.99rem) { .mapa { height: 23rem; } }
.mapa__opis {
padding: .75rem 1.1rem .85rem;
border-top: 1px solid var(--linia);
font-size: .84rem; line-height: 1.5;
color: var(--tekst-2);
}
.mapa__stan {
position: absolute; z-index: 5;
inset: 0;
display: grid; place-content: center; justify-items: center; gap: .8rem;
padding: 1.5rem;
text-align: center;
background: var(--powierzchnia-3);
color: var(--tekst);
}
.mapa__stan p { max-width: 24rem; }
.mapa__celownik {
position: absolute; z-index: 4;
inset: 0;
display: grid; place-items: center;
pointer-events: none;
opacity: 0;
transition: opacity .15s;
}
.mapa__celownik svg {
width: 3rem; height: 3rem;
fill: none; stroke: var(--tekst); stroke-width: 2.5; stroke-linecap: round;
filter: drop-shadow(0 0 2px var(--powierzchnia)) drop-shadow(0 0 1px var(--powierzchnia));
}
.mapa-rama[data-celownik] .mapa__celownik { opacity: 1; }
/* obrys fokusu mapy rysowany nakładką (panele Leaflet mają własne z-index i zasłaniałyby zwykły outline) */
.mapa-rama[data-celownik] .mapa-okno::after {
content: "";
position: absolute; z-index: 6;
inset: 0;
border: 3px solid var(--fokus);
border-radius: 1.6rem 1.6rem 0 0;
pointer-events: none;
}
/* Leaflet: dopasowanie do motywu (specyficzność podniesiona przez .mapa-rama) */
.mapa-rama .leaflet-container { background: var(--powierzchnia-3); font: inherit; }
.mapa-rama .leaflet-tile-pane { filter: var(--filtr-kafli); }
/* Leaflet 1.9.4 dodaje plus-lighter na kafelkach, co w Chrome daje jasne szwy na łączeniach */
.mapa-rama .leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.mapa-rama .leaflet-bar { border: 1px solid var(--obrys); border-radius: .85rem; box-shadow: var(--cien-1); overflow: hidden; }
.mapa-rama .leaflet-bar a,
.mapa-rama .leaflet-touch .leaflet-bar a {
display: block;
width: 2.75rem; height: 2.75rem; line-height: 2.75rem;
background: var(--powierzchnia); color: var(--tekst);
border-bottom: 1px solid var(--linia);
font: 700 1.5rem/2.75rem var(--font-ui);
text-align: center;
}
.mapa-rama .leaflet-bar a:last-child { border-bottom: 0; }
.mapa-rama .leaflet-bar a:hover,
.mapa-rama .leaflet-bar a:focus-visible { background: var(--akcent-tlo); color: var(--akcent-tekst); }
.mapa-rama .leaflet-bar a.leaflet-disabled { background: var(--powierzchnia-2); color: var(--tekst-2); cursor: default; }
.mapa-rama .leaflet-bar a:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.mapa-rama .leaflet-control-attribution {
margin: 0;
padding: .2rem .55rem;
background: var(--powierzchnia);
color: var(--tekst-2);
font-size: .75rem; line-height: 1.5;
border-top-left-radius: .6rem;
}
.mapa-rama .leaflet-control-attribution a { color: var(--akcent-tekst); text-decoration: underline; padding: .2rem 0; }
/* wskazany punkt (klik w mapę / Twoja lokalizacja) i linia odległości do adresu */
.mapa-rama .punkt-wskazany { fill: var(--akcent); fill-opacity: 1; stroke: #fff; stroke-width: 3px; }
.mapa-rama .linia-odleglosci {
fill: none; stroke: var(--tekst); stroke-width: 2.5px;
stroke-dasharray: 1 7; stroke-linecap: round; opacity: .9;
}
/* pinezka (rozmiar w pikselach, zgodny z iconSize w app.js) */
.pin { background: none; border: 0; }
.pin svg { display: block; width: 38px; height: 51px; overflow: visible; }
.pin__cien { fill: rgb(0 0 0 / .28); }
.pin__korpus { fill: var(--pin); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.pin__oczko { fill: #fff; }
/* ---------- stopka ---------- */
.stopka {
margin-top: 4rem;
padding-block: 1.6rem 2.6rem;
border-top: 1px solid var(--linia);
font-size: .875rem; line-height: 1.55;
color: var(--tekst-2);
}
.stopka .kolumna { display: grid; gap: .45rem; }
.stopka p { max-width: 62rem; }
.stopka__glowna { color: var(--tekst); font-weight: 550; }
.stopka__mala { font-size: .8rem; }
/* ---------- poziomice w tle (dekoracja) ----------
Kształt z maski SVG (data-URI), kolor z zmiennych motywu. Pseudo-elementy nie są
elementami DOM, więc nie wpływają na drzewo dostępności ani na liczenie kontrastu. */
.naglowek::before,
.naglowek::after {
content: "";
position: absolute;
z-index: -1;
top: 0; left: 0;
width: 100%;
height: min(46rem, 100vh);
pointer-events: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: right top;
mask-position: right top;
}
.naglowek::before {
background: var(--kontur-cienki);
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.naglowek::after {
background: var(--kontur-gruby);
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- animacje (tylko gdy użytkownik nie ogranicza ruchu) ---------- */
@keyframes wejscie { from { opacity: 0; transform: translateY(14px); } }
@keyframes obrot { to { transform: rotate(360deg); } }
@keyframes blysk { to { background-position: -220% 0; } }
@keyframes karta-wejscie { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes plakietka-wejscie { from { opacity: 0; transform: scale(.82); } }
@keyframes wypelnij { from { transform: scaleX(0); } }
@keyframes panel-wejscie { from { opacity: 0; transform: translateY(-6px); } }
@keyframes upadek { 0% { transform: translateY(-34px); opacity: 0; } 55% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
.wejscie { animation: wejscie .8s cubic-bezier(.22, .7, .2, 1) backwards; }
.wejscie-0 { animation-delay: 0ms; }
.wejscie-1 { animation-delay: 90ms; }
.wejscie-2 { animation-delay: 180ms; }
.wejscie-3 { animation-delay: 270ms; }
.wejscie-4 { animation-delay: 360ms; }
.pole__ladowanie, .kolko { animation: obrot .75s linear infinite; }
.szkielet__linia { animation: blysk 1.3s linear infinite; }
.panel { animation: panel-wejscie .16s ease-out; }
.karta { animation: karta-wejscie .5s cubic-bezier(.22, .7, .2, 1) backwards; }
.karta .plakietka { animation: plakietka-wejscie .45s cubic-bezier(.3, 1.4, .5, 1) .12s backwards; }
.pewnosc__wypelnienie { animation: wypelnij .9s cubic-bezier(.22, .7, .2, 1) .2s backwards; }
.pin--nowy svg { animation: upadek .55s cubic-bezier(.3, .8, .3, 1) backwards; }
}
/* ---------- układ mobilny ---------- */
@media (max-width: 40rem) {
.motyw__tekst {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.motyw { padding: .2rem; gap: 0; }
.szukaj__rzad { gap: .55rem; }
.pole { min-height: 3.9rem; gap: .35rem; border-radius: 1.1rem; padding-left: .85rem; }
.pole input { font-size: 1.0625rem; padding-inline: .15rem; }
.szukaj__wyslij { min-height: 3.9rem; width: 3.9rem; padding: 0; border-radius: 1.1rem; }
.szukaj__wyslij-tekst {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.szukaj__wyslij .ikona { width: 1.5rem; height: 1.5rem; }
.szukaj__narzedzia { flex-direction: column; align-items: stretch; }
.pomoc { flex: 0 0 auto; }
.lokalizacja { flex: 1 1 auto; }
.lokalizacja .przycisk--wt { width: 100%; min-height: 3rem; }
.lokalizacja__znacznik { width: 100%; justify-content: space-between; }
.opcja {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "ikona etykieta etykieta" "ikona opis znacznik";
column-gap: .75rem;
padding-inline: .9rem;
}
.opcja__tekst { display: contents; }
.panel__klawisze { display: none; }
.panel__stopka:has(.panel__bias:empty) { display: none; }
.opcja__etykieta { grid-area: etykieta; }
.opcja__opis { grid-area: opis; align-self: center; }
.opcja__ikona { align-self: center; }
.wstep { gap: 1rem; padding-block: 1.1rem 1.25rem; }
.lead { margin-top: .7rem; font-size: .98rem; line-height: 1.5; }
.statystyka { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .1rem .65rem; }
.statystyka__liczba { font-size: 1.7rem; }
.skladnik dt { flex-basis: 6.6rem; font-size: .7rem; letter-spacing: .06em; }
.akcje__etykieta { flex: 0 0 100%; margin-bottom: -.1rem; }
/* plakietka (np. „prawdopodobny”, odległość) schodzi pod nazwę; bez plakietki strzałka zostaje po prawej */
.alt:has(.znacznik) {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "ikona tekst" ". koniec";
align-items: start;
row-gap: .4rem;
padding-block: .7rem;
}
.alt:has(.znacznik) .alt__ikona { grid-area: ikona; margin-top: .12rem; }
.alt:has(.znacznik) .alt__tekst { grid-area: tekst; }
.alt:has(.znacznik) .alt__koniec { grid-area: koniec; justify-content: space-between; }
.skladnik--dlugi { flex-direction: column; gap: .15rem; }
.skladnik--dlugi dt { flex: none; }
.karta { border-radius: 1.35rem; }
.mapa-rama { border-radius: 1.35rem; }
.stopka { margin-top: 3rem; }
}
@media (max-width: 30rem) {
.statystyka { padding-left: 1rem; }
}
/* ---------- tryb wysokiego kontrastu ---------- */
@media (forced-colors: active) {
.pole:focus-within, .opcja[aria-selected="true"] { outline: 3px solid Highlight; }
.plakietka, .uwaga, .znacznik { border: 1.5px solid CanvasText; forced-color-adjust: none; }
.naglowek::before, .naglowek::after { display: none; }
}
/* ==========================================================================
Narzędzia: menu stron, wsad z pliku, weryfikacja adresu
(nowe klasy; nie zmieniają wyglądu wyszukiwarki z index.html)
========================================================================== */
/* ---------- menu stron ---------- */
.menu { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; }
.menu__link {
display: inline-flex; align-items: center;
min-height: 2.6rem;
padding: .3rem 1.05rem;
border: 1px solid var(--linia);
border-radius: 999px;
background: color-mix(in srgb, var(--powierzchnia) 72%, transparent);
color: var(--tekst);
font-size: .92rem; font-weight: 650;
text-decoration: none;
transition: background-color .15s, border-color .15s, color .15s;
}
.menu__link:hover { border-color: var(--akcent); background: var(--akcent-tlo); color: var(--akcent-tekst); }
.menu__link[aria-current="page"] { border-color: var(--akcent); background: var(--akcent); color: var(--na-akcencie); }
/* ---------- formularze (wspólne) ---------- */
.wpis { display: block; min-width: 0; }
.wpis__etykieta {
display: block; margin: 0 0 .4rem .15rem;
font-size: .76rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--tekst-2);
}
.wpis__opis { margin-top: .45rem; font-size: .84rem; line-height: 1.45; color: var(--tekst-2); }
.wybierak, .wpis__pole {
display: block; width: 100%;
min-height: 3rem;
padding: .55rem .95rem;
border: 1.5px solid var(--obrys);
border-radius: .95rem;
background-color: var(--powierzchnia);
color: var(--tekst);
font-size: 1rem;
box-shadow: var(--cien-1);
transition: border-color .15s, box-shadow .2s;
}
.wybierak {
appearance: none; -webkit-appearance: none;
padding-right: 2.5rem;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.25rem) 52%, calc(100% - .9rem) 52%;
background-size: .4rem .4rem, .4rem .4rem;
background-repeat: no-repeat;
text-overflow: ellipsis;
cursor: pointer;
}
.wybierak:hover, .wpis__pole:hover { border-color: var(--akcent); }
.wybierak:focus-visible, .wpis__pole:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--akcent); }
.wpis__pole::placeholder { color: var(--tekst-2); opacity: 1; }
.wybierak:disabled, .wpis__pole:disabled { opacity: .6; cursor: not-allowed; }
.ustawienia { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.1rem; align-items: start; }
.ustawienia--4 { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.ustawienia[hidden] { display: none; }
.pole-opcji { display: flex; align-items: flex-start; gap: .65rem; min-height: 2.75rem; padding: .35rem 0; cursor: pointer; line-height: 1.4; }
.pole-opcji input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--akcent); }
.pole-opcji--wybor { align-self: end; padding-bottom: .5rem; }
.suwak { display: block; width: 100%; height: 2.4rem; accent-color: var(--akcent); cursor: pointer; }
output { font-variant-numeric: tabular-nums; color: var(--tekst); }
.komunikat-krok {
margin-top: 1rem;
padding: .75rem 1rem;
border: 1px solid var(--st-blad-ramka); border-radius: .9rem;
background: var(--st-blad-tlo); color: var(--st-blad-tekst);
font-size: .95rem; line-height: 1.45;
}
.komunikat-krok--info { border-color: var(--st-neutr-ramka); background: var(--st-neutr-tlo); color: var(--st-neutr-tekst); }
.komunikat-krok--ostrzezenie { border-color: var(--st-pyt-ramka); background: var(--st-pyt-tlo); color: var(--st-pyt-tekst); }
.komunikat-krok[hidden] { display: none; }
/* ---------- wsad: kroki ---------- */
.wsad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: .25rem; max-width: 62rem; }
.krok {
position: relative;
padding: clamp(1.1rem, 2.8vw, 1.8rem);
background: var(--powierzchnia);
border: 1px solid var(--linia);
border-radius: 1.6rem;
box-shadow: var(--cien-1);
}
.krok[hidden] { display: none; }
.krok__gora { display: flex; align-items: flex-start; gap: .95rem; margin-bottom: 1.1rem; }
.krok__nr {
flex: none;
display: grid; place-items: center;
width: 2.3rem; height: 2.3rem;
border-radius: 50%;
background: var(--akcent-tlo); color: var(--akcent-tekst);
font-weight: 700; font-variant-numeric: tabular-nums;
}
.krok__tytul {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
line-height: 1.15; letter-spacing: -.01em;
}
.krok__podtytul { margin-top: .3rem; font-size: .95rem; line-height: 1.5; color: var(--tekst-2); max-width: 46rem; }
/* wznowienie zapisanego zadania */
.wznow {
display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
padding: 1rem 1.15rem;
border: 1.5px solid var(--akcent);
border-radius: 1.2rem;
background: var(--akcent-tlo); color: var(--akcent-tekst);
}
.wsad > .wznow { box-shadow: var(--cien-1); }
.wznow[hidden] { display: none; }
.wznow > .ikona { width: 1.5rem; height: 1.5rem; }
.wznow__tekst { flex: 1 1 18rem; min-width: 0; }
.wznow__tytul { font-size: 1rem; font-weight: 700; }
.wznow__tekst p { margin-top: .2rem; font-size: .92rem; line-height: 1.45; }
.wznow__akcje { display: flex; flex-wrap: wrap; gap: .5rem; }
.wznow--w-kroku { margin-bottom: 1.1rem; }
/* strefa upuszczania pliku */
.zona {
display: grid; justify-items: center; gap: .55rem;
padding: clamp(1.5rem, 4vw, 2.6rem) 1.25rem;
text-align: center;
border: 2px dashed var(--obrys);
border-radius: 1.3rem;
background: var(--powierzchnia-2);
transition: border-color .15s, background-color .15s;
}
.zona[hidden] { display: none; }
.zona--nad { border-color: var(--akcent); border-style: solid; background: var(--akcent-tlo); }
.zona__ikona { width: 2.8rem; height: 2.8rem; color: var(--akcent); }
.zona__tekst { font-size: 1.2rem; font-weight: 650; }
.zona__podp { max-width: 32rem; margin-bottom: .55rem; font-size: .93rem; line-height: 1.5; color: var(--tekst-2); }
.plik-wejscie { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.plik-wejscie:focus-visible + .przycisk, .zona:focus-within .przycisk--glowny { outline: 3px solid var(--fokus); outline-offset: 3px; }
.zona .przycisk { cursor: pointer; }
/* wczytany plik */
.plik {
display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem;
padding: .9rem 1.05rem;
border: 1px solid var(--linia); border-radius: 1.05rem;
background: var(--powierzchnia-2);
}
.plik[hidden] { display: none; }
.plik__ikona { width: 1.8rem; height: 1.8rem; color: var(--akcent); }
.plik__tekst { flex: 1 1 14rem; min-width: 0; }
.plik__nazwa { font-weight: 650; overflow-wrap: anywhere; }
.plik__meta { margin-top: .1rem; font-size: .88rem; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
/* wybor trybu */
.wybor { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0; padding: 0; border: 0; }
.wybor__opcja {
display: flex; align-items: flex-start; gap: .75rem;
padding: .95rem 1.05rem;
border: 1.5px solid var(--linia); border-radius: 1.05rem;
background: var(--powierzchnia);
cursor: pointer;
transition: border-color .15s, background-color .15s;
}
.wybor__opcja:hover { border-color: var(--akcent); }
.wybor__opcja:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); box-shadow: inset 4px 0 0 var(--akcent); }
.wybor__opcja:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wybor__opcja input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--akcent); }
.wybor__opcja strong { display: block; font-weight: 650; }
.wybor__opcja small { display: block; margin-top: .15rem; font-size: .86rem; color: var(--tekst-2); }
/* tabele */
.podglad { margin-top: 1.4rem; }
.podglad__tytul { margin-bottom: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.podglad__opis { margin-top: .55rem; font-size: .84rem; color: var(--tekst-2); }
.tab-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--linia); border-radius: 1rem; background: var(--powierzchnia); }
.tab-wrap:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.tab { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.4; }
.tab th, .tab td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linia); }
.tab tr:last-child td { border-bottom: 0; }
.tab th {
position: sticky; top: 0; z-index: 1;
background: var(--powierzchnia-2);
font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2);
white-space: nowrap;
}
.tab td { max-width: 22rem; overflow-wrap: break-word; }
.tab--podglad th, .tab--podglad td { white-space: nowrap; }
.tab--podglad td.tab__zap, .tab--podglad th.tab__zap { white-space: normal; min-width: 14rem; }
.tab .tab__nr { color: var(--tekst-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab .tab__zap { font-weight: 650; background: var(--akcent-tlo); color: var(--akcent-tekst); }
.tab th.tab__zap { background: var(--akcent-tlo); color: var(--akcent-tekst); }
.tab .tab__pusty { color: var(--tekst-2); }
.tab--wyniki td, .tab--wyniki th { white-space: normal; }
.tab .tab__dopisek { display: block; margin-top: .15rem; font-size: .8rem; color: var(--tekst-2); }
.tab--wyniki th { white-space: nowrap; }
/* postep */
.start__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.start__przycisk { min-height: 3.4rem; padding-inline: 1.7rem; font-size: 1.05rem; }
.start__przycisk[disabled] { opacity: .55; cursor: not-allowed; }
.postep { display: grid; gap: .85rem; margin-top: 1.4rem; }
.postep[hidden] { display: none; }
.postep__pasek { height: .95rem; border-radius: 999px; background: var(--powierzchnia-3); overflow: hidden; }
.postep__wypelnienie { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--akcent); transition: width .35s cubic-bezier(.22, .7, .2, 1); }
.postep--zakonczony .postep__wypelnienie { background: var(--st-ok-ramka); }
.postep--przerwany .postep__wypelnienie { background: var(--st-pyt-ramka); }
.postep__opis { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.postep__uwaga { padding: .6rem .9rem; border: 1px solid var(--st-pyt-ramka); border-radius: .85rem; background: var(--st-pyt-tlo); color: var(--st-pyt-tekst); font-size: .9rem; line-height: 1.45; }
.postep__uwaga[hidden] { display: none; }
.ladowanie-pliku { display: grid; gap: .6rem; margin-top: 1rem; }
.ladowanie-pliku[hidden] { display: none; }
.mini-statystyki { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .65rem; margin: 0; }
.mini-statystyki > div { padding: .65rem .85rem; border: 1px solid var(--linia); border-radius: .95rem; background: var(--powierzchnia-2); }
.mini-statystyki dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.mini-statystyki dd { margin-top: .15rem; font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
/* liczniki jako filtry */
.chipy { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
display: inline-flex; align-items: center; gap: .55rem;
min-height: 2.75rem;
padding: .25rem .8rem .25rem .95rem;
border: 1.5px solid var(--st-ramka, var(--obrys));
border-radius: 999px;
background: var(--powierzchnia);
color: var(--tekst);
font-size: .92rem; font-weight: 650;
transition: background-color .15s, box-shadow .15s;
}
.chip:hover { background: var(--st-tlo, var(--akcent-tlo)); }
.chip[aria-pressed="true"] { background: var(--st-tlo, var(--akcent-tlo)); color: var(--st-tekst, var(--akcent-tekst)); box-shadow: inset 0 0 0 1.5px var(--st-ramka, var(--akcent)); }
.chip[disabled] { opacity: .5; cursor: default; }
.chip__liczba { padding: .1rem .55rem; border-radius: 999px; background: var(--st-tlo, var(--powierzchnia-3)); color: var(--st-tekst, var(--tekst)); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__liczba { background: var(--powierzchnia); }
.chip__procent { font-size: .78rem; font-weight: 600; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__procent { color: inherit; }
.wyniki__uwaga { margin-top: .9rem; padding: .6rem .9rem; border: 1px solid var(--st-neutr-ramka); border-radius: .85rem; background: var(--st-neutr-tlo); color: var(--st-neutr-tekst); font-size: .9rem; line-height: 1.45; }
.wyniki__uwaga[hidden] { display: none; }
.tab-wrap--wyniki { margin-top: 1.1rem; }
.stron { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .85rem; }
.stron__opis { font-size: .9rem; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.stron__przyciski { display: flex; gap: .5rem; }
.stron__przyciski [disabled] { opacity: .5; cursor: default; }
.pobierz { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--linia); }
.pobierz__opis { flex: 1 1 100%; font-size: .86rem; line-height: 1.5; color: var(--tekst-2); }
.pobierz .przycisk[aria-busy="true"] { cursor: progress; opacity: .75; }
/* prywatnosc i limity */
.info-blok { padding: 1.25rem clamp(1.1rem, 2.8vw, 1.8rem); border: 1px solid var(--linia); border-radius: 1.4rem; background: color-mix(in srgb, var(--powierzchnia) 70%, transparent); }
.info-blok__tytul { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.info-blok__tytul .ikona { color: var(--akcent); }
.info-blok__lista { display: grid; gap: .6rem; margin-top: .85rem; padding-left: 1.15rem; list-style: disc; font-size: .93rem; line-height: 1.55; color: var(--tekst); }
.info-blok__lista li::marker { color: var(--akcent); }
/* ---------- weryfikacja adresu ---------- */
.weryf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: .25rem; }
.weryf__formularz { max-width: 62rem; }
.formpola { display: grid; gap: .9rem; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: clamp(1.1rem, 2.8vw, 1.7rem); border: 1px solid var(--linia); border-radius: 1.6rem; background: var(--powierzchnia); box-shadow: var(--cien-1); }
.formpola[hidden] { display: none; }
.formpola__ulica { grid-column: span 5; }
.formpola__numer { grid-column: span 2; }
.formpola__kod { grid-column: span 2; }
.formpola__msc { grid-column: span 3; }
.formpola__jedno { grid-column: 1 / -1; }
.formpola__akcje { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .25rem; }
.formpola__przelacz { padding: 0; border: 0; background: none; color: var(--akcent-tekst); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; min-height: 2.75rem; }
.formpola__przelacz:hover { color: var(--akcent); }
.weryf__przyklady { max-width: 62rem; }
.weryf__wskazowka { grid-column: 1 / -1; font-size: .88rem; line-height: 1.5; color: var(--tekst-2); }
.wyjasnienie { margin-top: 1.1rem; padding: .9rem 1.05rem; border-radius: 1rem; border: 1px solid var(--st-ramka); background: var(--st-tlo); color: var(--st-tekst); }
.wyjasnienie__tytul { font-size: 1.02rem; font-weight: 700; }
.wyjasnienie__tekst { margin-top: .25rem; font-size: .94rem; line-height: 1.5; }
.czy-chodzilo { margin-top: 1.1rem; }
.czy-chodzilo__tytul { margin-bottom: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.czy-chodzilo__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.zapytanie-info { margin-top: 1rem; font-size: .86rem; color: var(--tekst-2); }
.zapytanie-info code { font-family: var(--font-mono); font-size: .95em; padding: .1rem .4rem; border-radius: .4rem; background: var(--powierzchnia-2); color: var(--tekst); overflow-wrap: anywhere; }
/* ---------- układ mobilny: narzędzia ---------- */
@media (max-width: 52rem) {
.formpola__ulica { grid-column: span 12; }
.formpola__numer { grid-column: span 6; }
.formpola__kod { grid-column: span 6; }
.formpola__msc { grid-column: span 12; }
}
@media (max-width: 40rem) {
.menu { gap: .4rem; }
.menu__link { min-height: 2.5rem; padding-inline: .8rem; font-size: .88rem; }
.krok { border-radius: 1.35rem; }
.krok__gora { gap: .75rem; }
.krok__nr { width: 2.05rem; height: 2.05rem; }
.zona { padding-inline: 1rem; }
.start__akcje .przycisk { flex: 1 1 100%; }
.pobierz .przycisk { flex: 1 1 100%; }
.stron__przyciski { width: 100%; }
.stron__przyciski .przycisk { flex: 1 1 0; }
.mini-statystyki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chip { min-height: 2.75rem; gap: .4rem; padding: .2rem .6rem .2rem .8rem; font-size: .88rem; }
.chip__procent { display: none; }
/* tabela wyników jako karty */
.tab--wyniki thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.tab--wyniki, .tab--wyniki tbody { display: block; }
.tab--wyniki tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: .25rem; padding: .8rem .95rem; border-bottom: 1px solid var(--linia); }
.tab--wyniki tr:last-child { border-bottom: 0; }
.tab--wyniki td { display: block; max-width: none; padding: 0; border: 0; }
.tab--wyniki td.tab__nr { grid-column: 1; grid-row: 1; }
.tab--wyniki td.tab__st { grid-column: 2; grid-row: 1; }
.tab--wyniki td.tab__pew { grid-column: 3; grid-row: 1; justify-self: end; font-size: .82rem; color: var(--tekst-2); }
.tab--wyniki td.tab__pew::before { content: "pewność "; }
.tab--wyniki td.tab__zap { grid-column: 1 / -1; grid-row: 2; margin-top: .3rem; background: none; color: inherit; }
.tab--wyniki td.tab__wynik { grid-column: 1 / -1; grid-row: 3; }
.tab--wyniki td.tab__wynik::before { content: "Znaleziono: "; font-size: .78rem; font-weight: 700; color: var(--tekst-2); }
.tab--wyniki td.tab__gmina { grid-column: 1 / -1; grid-row: 4; font-size: .84rem; color: var(--tekst-2); }
.tab--wyniki td.tab__gmina::before { content: "gmina "; }
.tab--wyniki td.tab__brak { display: none; }
.tab--podglad th:not(.tab__nr):not(.tab__zap), .tab--podglad td:not(.tab__nr):not(.tab__zap) { display: none; }
.tab-wrap--wyniki { max-height: none; }
}
@media (forced-colors: active) {
.chip, .wybor__opcja, .krok, .zona, .wznow { border: 1.5px solid CanvasText; }
.chip[aria-pressed="true"], .wybor__opcja:has(input:checked) { outline: 3px solid Highlight; }
}
/* Pokaz w narzędziu: „Podpowiadaj blisko”, „Czemu warto” i (niżej) karta wyniku w stylu formularza dostawy.
Wszystkie elementy są statyczne: bez migania i pulsowania. */
/* Podpowiadaj blisko */
.blisko { max-width: 58rem; margin-bottom: 1.4rem; }
.blisko__etykieta {
margin: 0 0 .55rem .3rem;
font-size: .78rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2);
}
.blisko__opis {
max-width: 52rem; min-height: 3em;
margin: .65rem 0 0 .3rem;
font-size: .9rem; line-height: 1.5;
color: var(--tekst-2);
}
.znacznik--km { font-variant-numeric: tabular-nums; color: var(--akcent-tekst); }
/* sekcje pokazu */
.pokaz { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pokaz__tytul {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem);
line-height: 1.12; letter-spacing: -.012em;
text-wrap: balance;
}
.pewnosc__opis { margin-top: .5rem; font-size: .86rem; line-height: 1.5; color: var(--tekst-2); }
/* Czemu warto */
.zalety__lista { max-width: 58rem; margin-top: 1.4rem; border-top: 1px solid var(--linia); }
.zaleta {
display: grid; grid-template-columns: auto minmax(0, 17rem) minmax(0, 1fr);
align-items: start; gap: .2rem 1.1rem;
padding: 1.05rem 0;
border-bottom: 1px solid var(--linia);
}
.zaleta__ikona { width: 1.6rem; height: 1.6rem; margin-top: .1rem; color: var(--akcent); }
.zaleta__tytul { font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.zaleta__tekst { color: var(--tekst-2); line-height: 1.55; }
@media (max-width: 52rem) {
.zaleta { grid-template-columns: auto minmax(0, 1fr); }
.zaleta__tekst { grid-column: 2; }
}
@media (max-width: 40rem) {
.blisko { margin-bottom: 1.1rem; }
.blisko__etykieta { margin-bottom: .45rem; }
.blisko__opis { margin-top: .5rem; font-size: .85rem; min-height: 3em; } /* dwie linie zarezerwowane, żeby pole wyszukiwania nie skakało przy zmianie tekstu */
}
/* ==========================================================================
Karta wyniku w stylu formularza dostawy w sklepie (app.js: kartaFormularza, naglowekElement, pole)
Nagłówek „Adres dostawy”, pod nim pola jak w koszyku; to samo dla adresu, pikietażu i miejsc.
========================================================================== */
.karta--sklep { padding: clamp(1.1rem, 2.6vw, 1.5rem); border-radius: 1rem; box-shadow: var(--cien-1); }
.sklep__gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; min-height: 2rem; }
.sklep__tytul {
display: flex; align-items: center; gap: .6rem;
margin: 0;
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
line-height: 1.2;
}
.sklep__tytul .ikona { width: 1.4rem; height: 1.4rem; color: var(--akcent); }
.sklep__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .85rem; margin: 0 0 0 auto; font-size: .84rem; line-height: 1.4; color: var(--tekst-2); }
.sklep__status { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 650; color: var(--st-tekst); }
.sklep__status .ikona { width: 1.15rem; height: 1.15rem; }
.sklep__pewnosc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sklep__podpis { font-variant-numeric: tabular-nums; }
.sklep__pola { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem .9rem; margin: 1.1rem 0 0; }
.sklep__pole { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; }
.sklep__pole--ulica, .sklep__pole--msc { grid-column: span 4; }
.sklep__pole--numer, .sklep__pole--kod { grid-column: span 2; }
.sklep__pole--pol { grid-column: span 3; }
.sklep__pole--cala { grid-column: 1 / -1; }
.sklep__pole dt { font-size: .82rem; font-weight: 600; color: var(--tekst-2); letter-spacing: 0; text-transform: none; }
.sklep__pole dd { margin: 0; min-width: 0; }
.sklep__wartosc {
display: flex; align-items: center; min-height: 2.75rem; padding: .6rem .8rem;
background: var(--powierzchnia-2);
border: 1px solid color-mix(in srgb, var(--obrys) 45%, transparent);
border-radius: .6rem;
font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere;
}
/* pomoc pod polem (np. „Takich adresów jest więcej, dopisz miejscowość.”): zwykły szary tekst, bez ramki, ikony i koloru ostrzeżenia */
.sklep__pomoc { display: block; margin-top: .35rem; font-size: .84rem; line-height: 1.35; color: var(--tekst-2); }
/* brak wyniku: pierwsza linijka i krótki opis zamiast pól */
.sklep__brak { margin-top: 1.1rem; }
.sklep__brak-tytul { font-size: 1.05rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.sklep__brak-opis { margin-top: .3rem; color: var(--tekst-2); line-height: 1.5; }
.karta--sklep .pewnosc__opis { margin-top: .9rem; }
.karta--sklep .uwagi { margin-top: .9rem; }
.karta--sklep .uwaga { padding: 0; border: 0; border-radius: 0; background: none; font-size: .88rem; color: var(--tekst-2); }
.karta--sklep .akcje { margin-top: 1rem; }
.karta--sklep .alternatywy { margin-top: 1.2rem; padding-top: 1rem; }
.karta--sklep .karta__akcja { margin-top: 1rem; }
/* przycisk „Moja lokalizacja” w trakcie ustalania położenia: kółko (obrót w bloku animacji) zamiast ikony; app.js przełącza hidden */
.gps__kolko { width: 1.1rem; height: 1.1rem; border-width: .17rem; }
@media (max-width: 36rem) {
.sklep__pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sklep__pole--ulica, .sklep__pole--msc, .sklep__pole--cala { grid-column: 1 / -1; }
.sklep__pole--numer, .sklep__pole--kod, .sklep__pole--pol { grid-column: span 1; }
.sklep__meta { margin-left: 0; flex-basis: 100%; }
}
@media (forced-colors: active) {
.sklep__wartosc { border: 1.5px solid CanvasText; }
}
/* ==========================================================================
Dodaj to u siebie w sklepie (index.html, sekcja #sklepy; app.js: podepnijInstrukcje): prosta lista wierszy jak „Czemu warto”,
nazwa po lewej, treść po prawej. Bez kart, plakietek i animacji.
========================================================================== */
.sklepy__lista { max-width: 74rem; margin-top: 1.4rem; border-top: 1px solid var(--linia); }
.sklepy__wiersz {
display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .6rem 1.5rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--linia);
}
.sklepy__nazwa { font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
.sklepy__tresc { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; min-width: 0; max-width: 46rem; }
.sklepy__tresc p { margin: 0; line-height: 1.55; color: var(--tekst-2); }
.sklepy__tresc b { font-weight: 650; color: var(--tekst); }
.sklepy code { font-family: var(--font-mono); font-size: .86em; }
/* bloki kodu: jednolinijkowy (adres) i wielolinijkowy (skrypt), oba z przyciskiem „Kopiuj” */
.sklepy__kod {
align-self: stretch; min-width: 0;
border: 1px solid var(--linia); border-radius: .7rem;
background: var(--powierzchnia-2);
}
.sklepy__kod code { color: var(--tekst); }
.sklepy__kod--linia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; padding: .55rem .6rem .55rem .85rem; }
.sklepy__kod--linia code { min-width: 0; overflow-wrap: anywhere; font-size: .86rem; }
.sklepy__kod--blok { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem .8rem; padding: .7rem .6rem .7rem .85rem; }
.sklepy__kod--blok pre { flex: 1 1 18rem; min-width: 0; margin: 0; padding: 0; overflow-x: auto; }
.sklepy__kod pre code { display: block; font-size: .78rem; line-height: 1.6; white-space: pre; tab-size: 2; }
@media (max-width: 52rem) {
.sklepy__wiersz { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Rozwijane bloki na stronie głównej narzędzia („Podpowiadaj blisko”, „Przykłady”): domyślnie zwinięte, nagłówek jak cicha etykieta.
========================================================================== */
.rozwin { max-width: 58rem; margin-bottom: 1rem; }
.rozwin__naglowek {
display: inline-flex; align-items: center; gap: .55rem;
min-height: 2.25rem; padding: .2rem .1rem; margin-left: .2rem;
font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--tekst-2); cursor: pointer; list-style: none;
}
.rozwin__naglowek::-webkit-details-marker { display: none; }
.rozwin__naglowek::before {
content: ""; width: .5rem; height: .5rem;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(-45deg); transition: transform .15s;
}
.rozwin[open] > .rozwin__naglowek::before { transform: rotate(45deg); }
.rozwin__naglowek:hover { color: var(--akcent-tekst); }
.rozwin > .przyklady__lista, .rozwin > .blisko { margin-top: .5rem; }
/* nazwa grupy przycisków „Podpowiadaj blisko” jest już w nagłówku rozwijanego bloku: zostaje tylko dla czytników ekranu */
.rozwin .blisko__etykieta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* „Podpowiadaj blisko” i „Przykłady”: jedno pod drugim, pod polem wyszukiwania */
.rozwin-grupa { display: flex; flex-direction: column; max-width: 58rem; margin-top: .6rem; }
.rozwin-grupa > .rozwin { margin-bottom: 0; }