/* ============================================================
   System panelu piotrdejneka.com — wspólny dla operatora,
   panelu klienta, logowania i strony stanu.

   DLACZEGO JEDEN PLIK. Do 24.09.2026 każdy z tych widoków miał
   własny arkusz: panel klienta rysował BIAŁE karty na ciemnym
   tle, panel operatora własny zestaw reguł, logowanie trzeci.
   Ten sam przycisk wyglądał w trzech miejscach inaczej, a zmiana
   koloru wymagała trzech poprawek. Tutaj są zmienne i komponenty;
   arkusze stron dokładają tylko to, co naprawdę specyficzne.

   MOTYW JEST CIEMNY W CAŁOŚCI. Powierzchnie różnią się jasnością
   i obrysem, nie kolorem — stąd trzy poziomy: tło, panel, karta.
   ============================================================ */

@import url('fonts.css');

:root {
	/* --- powierzchnie ------------------------------------- */
	--tlo:       #0b0b10;
	--panel:     #14141c;
	--karta:     #1c1c26;
	--karta-2:   #23232f;   /* wiersz podświetlony, pole formularza */
	--obrys:     #2a2a38;
	--obrys-2:   #363648;   /* obrys pod kursorem */

	/* --- tekst -------------------------------------------- */
	--tekst:     #ecedf2;
	--tekst-2:   #9aa0b0;
	--tekst-3:   #6b7180;

	/* --- znaczenia ---------------------------------------- */
	--akcent:    #5e60ce;
	--akcent-2:  #7274e0;
	--akcent-tlo: rgba(94, 96, 206, .16);
	--ok:        #3dd68c;
	--ok-tlo:    rgba(61, 214, 140, .14);
	--ostrz:     #f0b429;
	--ostrz-tlo: rgba(240, 180, 41, .14);
	--blad:      #ff6b6b;
	--blad-tlo:  rgba(255, 107, 107, .14);

	/* --- miary -------------------------------------------- */
	/* Jedna szerokość dla nagłówka, treści i stopki - pasek ma się kończyć
	   dokładnie tam, gdzie kończy się zawartość. Wzięta z piotrdejneka.com:
	   pełna szerokość okna minus 20 px marginesu, z górnym ograniczeniem,
	   żeby na szerokim monitorze tabela nie rozciągała się przez metr. */
	--szer:   1400px;
	--luz:    20px;

	--r:    14px;
	--r-s:  9px;
	--r-xs: 6px;

	/* Skala odstępów. Panel operatora używa ciaśniejszej (patrz
	   style.css), panel klienta luźniejszej (klient.css) —
	   różnica jest w jednej zmiennej, nie w setkach reguł. */
	--odstep: 18px;

	--cien: 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

/* Kontrolki rysowane przez przegladarke - kalendarz przy polu daty, pola
   wyboru, paski przewijania - nie wiedza same, ze motyw jest ciemny.
   color-scheme mowi im to jednym slowem; bez tego kalendarz otwieral sie
   bialy, a "ptaszek" byl systemowo niebieski, obok naszego akcentu. */
:root { color-scheme: dark; accent-color: #5e60ce; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100%;
	background: var(--tlo);
	color: var(--tekst);
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------- typografia */

h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 15px; line-height: 1.35; margin: 0; }

.podtytul { margin: 0 0 var(--odstep); color: var(--tekst-2); font-size: 14.5px; }

/* Nagłówek sekcji: wersaliki, mały rozmiar — ma organizować, nie krzyczeć. */
.naglowek-sekcji {
	margin: 0 0 10px;
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--tekst-3);
}

.szary  { color: var(--tekst-2); }
.pusto  { color: var(--tekst-3); text-align: center; padding: 26px 10px; margin: 0; }
code    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

a { color: var(--akcent-2); text-decoration-color: rgba(114, 116, 224, .45); text-underline-offset: 2px; }
a:hover { color: var(--tekst); }

/* ------------------------------------------------------ układ */

main { max-width: var(--szer); margin: 0 auto; padding: 26px var(--luz) 56px; }

/* RYTM PIONOWY. Bloki na poziomie strony dzieli jeden odstęp, a nagłówek
   sekcji dostaje większy, bo zaczyna nową myśl. Bez tego karty sklejały się
   ze sobą i ekran czytał się jak jedna długa lista. */
main > * + * { margin-top: var(--odstep); }
main > h1 + .podtytul { margin-top: 2px; }
main > .naglowek-sekcji { margin-top: calc(var(--odstep) * 1.7); margin-bottom: 8px; }
main > h2 { margin-top: calc(var(--odstep) * 1.7); }

.siatka { display: grid; gap: var(--odstep); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* -------------------------------------------------------- karta */

.karta {
	background: var(--karta);
	border: 1px solid var(--obrys);
	border-radius: var(--r);
	padding: var(--odstep);
	box-shadow: var(--cien);
}

.karta + .karta { margin-top: var(--odstep); }
/* W siatce odstepy daje grid. Bez tego wyjatku pierwszy kafel stal
   o jeden odstep wyzej niz pozostale - widac to bylo jako krzywy rzad. */
.siatka > .karta + .karta, .siatka > .karta { margin-top: 0; }
.karta > h2:first-child { margin-top: 0; }

/* Karta jako kafel z jedną liczbą — używana na przeglądach. */
.kafel { display: flex; flex-direction: column; gap: 3px; }
.kafel .liczba { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.kafel .opis   { color: var(--tekst-2); font-size: 13.5px; }
.kafel .dopisek{ color: var(--tekst-3); font-size: 12.5px; }

.liczba.ok    { color: var(--ok); }
.liczba.ostrz { color: var(--ostrz); }
.liczba.blad  { color: var(--blad); }

/* ------------------------------------------------------ tabela */

.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
	text-align: left; padding: 9px 12px;
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--tekst-3);
	border-bottom: 1px solid var(--obrys);
	white-space: nowrap;
}

td { padding: 11px 12px; border-bottom: 1px solid rgba(42, 42, 56, .6); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--karta-2); }

/* Liczby w kolumnie czyta się porównując rzędy wielkości — do prawej
   i cyframi o stałej szerokości, żeby się nie przesuwały. */
.liczbowo { text-align: right; font-variant-numeric: tabular-nums; }

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

button, .btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 10px 16px;
	font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
	color: #fff; background: var(--akcent);
	border: 1px solid transparent; border-radius: var(--r-s);
	cursor: pointer; text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, .btn:hover { background: var(--akcent-2); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--akcent-2); outline-offset: 2px;
}

/* Drugi plan: to samo znaczenie, mniejsza waga wizualna. */
.btn-drugi {
	color: var(--tekst); background: transparent;
	border-color: var(--obrys-2);
}
.btn-drugi:hover { background: var(--karta-2); color: var(--tekst); border-color: var(--akcent); }

/* Działanie nieodwracalne — spokojne, dopóki nikt na nie nie najedzie. */
.btn-cichy {
	color: var(--tekst-2); background: transparent; border-color: var(--obrys);
	font-weight: 600;
}
.btn-cichy:hover { color: var(--blad); border-color: var(--blad); background: var(--blad-tlo); }

.btn-maly { padding: 7px 12px; font-size: 13px; }

/* ---------------------------------------------------- znaczniki */

.znacznik {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 9px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700;
	background: var(--karta-2); color: var(--tekst-2);
	border: 1px solid var(--obrys);
}
.znacznik::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.znacznik.ok    { color: var(--ok);    background: var(--ok-tlo);    border-color: transparent; }
.znacznik.ostrzezenie { color: var(--ostrz); background: var(--ostrz-tlo); border-color: transparent; }
.znacznik.blad  { color: var(--blad);  background: var(--blad-tlo);  border-color: transparent; }
.znacznik.neutral { color: var(--tekst-2); }

/* ------------------------------------------------------ alerty */

/* Kropka jest ustawiona bezwzglednie, a nie jako pierwszy element ukladu
   elastycznego. Przy flexie KAZDE dziecko alertu stawalo sie osobna kolumna,
   wiec zdanie z <strong> i <code> rozpadalo sie na pionowe paski (zlapane
   24.09.2026 na karcie z danymi dostepu do skrzynki). Teraz tresc plynie
   normalnie, niezaleznie od tego, z czego jest zlozona. */
.alert {
	position: relative;
	padding: 12px 15px 12px 30px; border-radius: var(--r-s);
	margin-bottom: var(--odstep);
	font-size: 14.5px; font-weight: 500; line-height: 1.55;
	border: 1px solid transparent;
}
.alert::before {
	content: ""; position: absolute; left: 14px; top: 20px;
	width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.alert.sukces { background: var(--ok-tlo);    color: var(--ok);    border-color: rgba(61, 214, 140, .3); }
.alert.blad   { background: var(--blad-tlo);  color: var(--blad);  border-color: rgba(255, 107, 107, .3); }
.alert.info   { background: var(--akcent-tlo); color: var(--akcent-2); border-color: rgba(94, 96, 206, .35); }
.alert.uwaga  { background: var(--ostrz-tlo); color: var(--ostrz); border-color: rgba(240, 180, 41, .3); }

/* --------------------------------------------------- formularze */

label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--tekst-2); }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="url"], select, textarea {
	width: 100%; padding: 10px 13px;
	font: inherit; font-size: 14.5px;
	color: var(--tekst); background: var(--karta-2);
	border: 1px solid var(--obrys); border-radius: var(--r-s);
}
input::placeholder, textarea::placeholder { color: var(--tekst-3); }
input:hover, select:hover, textarea:hover { border-color: var(--obrys-2); }
textarea { min-height: 96px; resize: vertical; }

.pole { margin-bottom: 14px; }
.pole-pomoc { margin-top: 6px; font-size: 13px; color: var(--tekst-3); line-height: 1.5; }
.rzad { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.w-linii { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.w-linii input { flex: 1 1 13rem; min-width: 0; }

/* ------------------------------------------------ pasek postępu */

.pasek-blok + .pasek-blok { margin-top: 14px; }
.pasek-opis { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 6px; }
.pasek-liczby { color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.linia-tla { height: 6px; border-radius: 999px; background: var(--karta-2); overflow: hidden; }
.linia-wyp { height: 100%; border-radius: 999px; background: var(--akcent); }
.linia-wyp.ok { background: var(--ok); }
.linia-wyp.ostrzezenie { background: var(--ostrz); }
.linia-wyp.blad { background: var(--blad); }

/* ------------------------------------------------------ pigułka

   Jasny pasek na ciemnym tle - ten sam zabieg co na piotrdejneka.com:
   nawigacja jest jedynym elementem, który ma się odcinać od reszty,
   więc jako jedyny jest jasny. Szerokość równa treści pod spodem. */

.gora { padding: 16px var(--luz) 0; }

.pill {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
	max-width: var(--szer); margin: 0 auto;
	padding: 11px 12px 11px 22px;
	background: rgba(255, 255, 255, .96);
	color: #12141a;
	border-radius: 16px;
}
.pill-marka {
	font-weight: 800; font-size: 16.5px; letter-spacing: -0.03em;
	color: #12141a; text-decoration: none;
}
/* Ogólna reguła a:hover rozjaśnia odnośniki do prawie bieli - na jasnej
   pigułce znaczyło to "logo znika pod kursorem". Tu kursor ma dawać akcent. */
.pill-marka:hover, .pill-marka:focus-visible { color: var(--akcent); }
.pill nav { display: flex; flex-wrap: wrap; gap: 2px; }
.pill nav a {
	padding: 8px 14px; border-radius: 10px;
	font-size: 14.5px; font-weight: 600; color: #4a5160; text-decoration: none;
	transition: background-color .15s, color .15s;
}
.pill nav a:hover { color: #12141a; background: rgba(18, 20, 26, .06); }
.pill nav a.aktywny, .pill nav a.aktywna { color: #fff; background: var(--akcent); }

.pill-prawo { display: flex; gap: 14px; align-items: center; margin-left: auto; font-size: 13.5px; }
.pill-kto { color: #6b7280; }
.pill-prawo a {
	padding: 8px 15px; border-radius: 999px;
	border: 1.5px solid rgba(18, 20, 26, .18);
	color: #12141a; font-weight: 600; text-decoration: none;
}
.pill-prawo a:hover { border-color: var(--akcent); color: var(--akcent); }

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

.stopka {
	max-width: var(--szer);
	margin: 0 auto; padding: 22px var(--luz) 40px;
	border-top: 1px solid var(--obrys);
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	align-items: baseline; justify-content: space-between;
	font-size: 13px; color: var(--tekst-3);
}
.stopka a { color: var(--tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--tekst); }

@media (max-width: 720px) {
	:root { --odstep: 14px; }
	main { padding: 18px 14px 48px; }
	h1 { font-size: 22px; }
	:root { --luz: 14px; }
	.pill { padding: 12px 14px; }

	/* Na telefonie zakładki jadą w poziomie zamiast łamać się na dwa
	   wiersze - pasek zostaje niski, a przewijanie w bok jest tu
	   naturalne. Marginesy ujemne, żeby pierwsza i ostatnia zakładka
	   dotykały krawędzi paska. */
	.pill nav {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin: 0 -4px; padding: 0 4px; width: 100%;
		-webkit-overflow-scrolling: touch;
	}
	.pill nav::-webkit-scrollbar { display: none; }
	.pill nav a { white-space: nowrap; }
	.pill-prawo { margin-left: 0; width: 100%; justify-content: space-between; }
	.stopka { flex-direction: column; }
}

/* Ruch tylko dla tych, którzy go chcą. */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------ wykresy

   Bez bibliotek zewnętrznych: wykresy są zwykłym HTML-em i SVG
   rysowanym po stronie serwera. Nic się nie dociąga z sieci, nic
   nie czeka na JavaScript — panel ma działać także wtedy, gdy
   skrypt się nie wykona.

   KOLOR NIESIE STAN, NIE WIELKOŚĆ. Zieleń/bursztyn/czerwień to
   stany zarezerwowane (dobrze / uwaga / źle) i nigdy nie służą
   jako „kolejna seria”. Przy każdym znaczniku stoi opis w tytule
   i w tekście alternatywnym — kolor nie jest jedynym nośnikiem. */

.wykres-naglowek {
	display: flex; flex-wrap: wrap; gap: 10px 18px;
	align-items: baseline; justify-content: space-between;
	margin-bottom: 14px;
}
.wykres-naglowek h2 { margin: 0; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 12.5px; color: var(--tekst-2); }
.legenda-poz { display: inline-flex; align-items: center; gap: 6px; }
.probka { width: 9px; height: 9px; border-radius: 3px; background: var(--tekst-3); }
.probka.ok { background: var(--ok); }
.probka.ostrz { background: var(--ostrz); }
.probka.blad { background: var(--blad); }

/* Pasek dni: jeden prostokąt = doba. Zaokrąglone końce, 2 px przerwy
   między znacznikami — sąsiadujące dni mają być policzalne wzrokiem. */
.dni { display: flex; gap: 2px; align-items: stretch; }
.dzien {
	flex: 1 1 0; min-width: 4px; height: 34px;
	border-radius: 3px; background: var(--karta-2);
}
.dzien.ok { background: var(--ok); }
.dzien.ostrz { background: var(--ostrz); }
.dzien.blad { background: var(--blad); }
.dzien:hover { outline: 2px solid var(--tekst); outline-offset: 1px; }

.dni-opis { margin: 10px 0 0; font-size: 13.5px; color: var(--tekst-2); }

/* Słupki miesięczne — wysokość niesie wielkość, więc jeden kolor
   dla całej serii; wyróżniamy tylko miesiąc bieżący. */
.slupki { display: flex; gap: 10px; align-items: flex-end; height: 132px; }
.slupek { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }
.slupek-wyp { border-radius: 4px 4px 2px 2px; background: var(--obrys-2); min-height: 3px; }
.slupek.biezacy .slupek-wyp { background: var(--akcent); }
.slupek.ponad .slupek-wyp { background: var(--ostrz); }
.slupek-podpis { font-size: 11.5px; color: var(--tekst-3); text-align: center; white-space: nowrap; }
.slupek-wartosc { font-size: 12px; color: var(--tekst-2); text-align: center; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ listy i fakty */

/* Lista pozycji z odznaką po lewej — zgłoszenia, zdarzenia, zadania.
   Każdy wiersz ma trzy pola: stan, treść, czas. Treść rozpycha się
   na resztę szerokości, żeby czas trzymał się prawej krawędzi. */
.lista-prosta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-prosta li {
	display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
	padding-bottom: 10px; border-bottom: 1px solid rgba(42, 42, 56, .6);
}
.lista-prosta li:last-child { border-bottom: none; padding-bottom: 0; }
.lista-tresc { flex: 1 1 14rem; min-width: 0; }

/* Pary nazwa-wartość: nazwa wąsko i wyciszona, wartość szeroko. */
.fakty { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 14.5px; }
.fakty dt { color: var(--tekst-2); }
.fakty dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.domena-nazwa { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* -------------------------------------------------- blok naczelny

   Pierwsze zdanie ekranu: czy wszystko działa. Reszta strony jest
   dowodem na to zdanie, więc ten blok ma mieć największą wagę
   wizualną - ale bez krzyku: kolor niesie tylko kropka i obrys. */

.hero { display: grid; gap: 8px; }
.hero-stan {
	display: flex; align-items: center; gap: 11px;
	margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
}
.hero-opis { margin: 0; color: var(--tekst-2); font-size: 15px; }
.hero-opis strong { color: var(--tekst); font-weight: 700; }

.kropka { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.hero--ok .kropka { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-tlo); }
.hero--ok { border-color: rgba(61, 214, 140, .35); }
.hero--uwaga .kropka { background: var(--ostrz); box-shadow: 0 0 0 4px var(--ostrz-tlo); }
.hero--uwaga { border-color: rgba(240, 180, 41, .4); }

/* Zdanie zamykające kartę: odnośnik dalej albo wyjaśnienie. */
.pod-karta { margin: 14px 0 0; font-size: 13.5px; color: var(--tekst-2); }

.dostepnosc-liczby { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dostepnosc-liczby .liczba { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }

/* Zwijana treść stała - regulamin usługi czyta się raz. */
.rozwijane {
	background: var(--karta); border: 1px solid var(--obrys);
	border-radius: var(--r); padding: 16px var(--odstep);
}
.rozwijane summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.rozwijane[open] summary { margin-bottom: 14px; }
.fakty--szeroko { grid-template-columns: minmax(12rem, auto) 1fr; }
.fakty--szeroko dd { text-align: left; color: var(--tekst-2); }

/* ------------------------------------------------------ zgłoszenia */

.siatka--dwie { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.zgloszenia { display: grid; gap: 12px; }

.zgloszenie {
	background: var(--karta); border: 1px solid var(--obrys);
	border-radius: var(--r); padding: 16px var(--odstep);
}
.zgloszenie header {
	display: flex; flex-wrap: wrap; gap: 10px;
	align-items: baseline; justify-content: space-between;
}
.zgloszenie h3 { font-size: 16px; font-weight: 700; }
.zgloszenie-opis { margin: 10px 0 0; color: var(--tekst-2); font-size: 14.5px; }

/* Ślad sprawy: co się z nią działo i kiedy. Kropki między pozycjami
   zamiast obwódek — to jeden ciąg zdarzeń, nie lista niezależnych faktów. */
.zgloszenie-slad {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	margin: 12px 0 0; font-size: 13.5px; color: var(--tekst-3);
}
.zgloszenie-slad > span + span::before { content: "·"; margin-right: 10px; color: var(--obrys-2); }
.zgloszenie-slad > .znacznik + span::before,
.zgloszenie-slad > span + .znacznik::before { content: none; }
.zgloszenie--zamkniete { background: transparent; }

/* Wybór spośród dwóch możliwości, z których każda niesie skutek:
   obie widoczne naraz, z opisem, zamiast listy rozwijanej. */
.wybor { border: none; margin: 0 0 14px; padding: 0; }
.wybor legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--tekst-2); }
.wybor-poz {
	display: flex; gap: 11px; align-items: flex-start;
	margin: 0 0 8px; padding: 13px 15px;
	background: var(--karta-2); border: 1px solid var(--obrys);
	border-radius: var(--r-s); cursor: pointer; font-weight: 400;
}
.wybor-poz:hover { border-color: var(--obrys-2); }
.wybor-poz:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
.wybor-poz input { width: auto; margin-top: 3px; accent-color: var(--akcent); }
.wybor-poz > span { display: grid; gap: 3px; }
.wybor-poz strong { color: var(--tekst); font-size: 15px; }
.wybor-poz .szary { font-size: 13.5px; line-height: 1.5; }

.pusto-karta { text-align: center; padding: 34px var(--odstep); }
.pusto-tytul { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.pusto-karta p:last-child { margin: 0; max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------- rachunek

   Pozycje z kwotami: opis szeroko, kwota do prawej, podsumowanie
   oddzielone linią. Bez nagłówków kolumn - przy dwóch kolumnach
   są szumem, a nie pomocą. */
.rachunek td { padding: 12px 0; }
.rachunek td:first-child { padding-right: 20px; }
.rachunek .szary { display: block; font-size: 13px; margin-top: 2px; }
.rachunek tfoot td {
	border-top: 1px solid var(--obrys); border-bottom: none;
	padding-top: 14px; font-weight: 800; font-size: 16px;
}
.rachunek tbody tr:hover td { background: transparent; }

/* Pola wyboru: wieksze niz domyslne i wyrownane do pierwszego wiersza
   etykiety - przy dwuwierszowym opisie domyslne wyrownanie do srodka
   wyglada jak przesuniete. */
input[type="checkbox"], input[type="radio"] {
	width: 17px; height: 17px; margin: 2px 0 0;
	accent-color: var(--akcent); flex: 0 0 auto;
}

/* Wykres liniowy - cienka kreska, wypełnienie tylko jako tło dla oka.
   Siatki i osi nie ma celowo: to przebieg w czasie przy pasku, który
   podaje dokładne liczby, a nie samodzielny wykres do odczytu wartości. */
.wykres-blok { margin: 14px 0 20px; }
.wykres { display: block; width: 100%; height: 120px; overflow: visible; }
.wykres-linia { fill: none; stroke: var(--akcent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wykres-pole { fill: rgba(94, 96, 206, .16); stroke: none; }
.wykres-punkt { fill: var(--akcent-2); stroke: var(--karta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wykres circle:hover { fill: rgba(255, 255, 255, .12); }

.wykres-podpis {
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	justify-content: space-between; align-items: baseline;
	margin: 8px 0 0; font-size: 12.5px; color: var(--tekst-3);
}
.wykres-podpis > span:nth-child(2) { flex: 1 1 16rem; text-align: center; }
.wykres-podpis strong { color: var(--tekst-2); }