/* ============================================================================
   POWŁOKA PORTALU I KOMPONENTY

   Odwzorowanie układu portalu Cosmedica (host .NET + SvelteKit) w czystym
   CSS-ie, bo silnik zostaje nasz: vanilla ES modules bez kroku budowania.
   Dzięki temu zmiana wyglądu nie wymaga przebudowy bundla - plik ładuje się
   obok aplikacji i działa po odświeżeniu.

   Nic tutaj nie zawiera literału koloru ani kroju: wszystko czyta tokeny
   z `stx.css`. Jeżeli potrzebujesz nowego odcienia - dopisujesz TOKEN,
   nie heks w regule.

   Kolejność sekcji odpowiada kolejności czytania ekranu: belka, nawigacja,
   nagłówek strony, filtry, treść (karty), szuflada agenta.
   ========================================================================== */

/* ====================================================================== */
/* 0. PODSTAWA                                                            */
/* ====================================================================== */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	/* `flow-root` zatrzymuje wyciek górnego marginesu `.stx-main` na body.
	   Bez tego dokument jest o wysokość belki wyższy od okna i każda strona
	   dostaje pasek przewijania na 46 pikseli pustki. */
	display: flow-root;
	background: var(--stx-page);
	color: var(--stx-text);
	font-family: var(--stx-font-sans);
	font-size: var(--stx-fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Liczby w raporcie ZAWSZE tabelarycznie - inaczej kolumna kwot faluje
   i porównanie dwóch wierszy przestaje być porównaniem rzutu oka. */
.stx-num, .stx-kpi-value, table.stx-table td, .stx-delta {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

button { font: inherit; color: inherit; }
a { color: var(--stx-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
	outline: none;
	box-shadow: var(--stx-ring);
	border-radius: var(--stx-radius-control);
}

/* ====================================================================== */
/* 1. BELKA GÓRNA                                                         */
/* ====================================================================== */

.stx-topbar {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--stx-topbar-h);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 16px;
	background: var(--stx-surface);
	border-bottom: 1px solid var(--stx-line);
}

/* Wordmark: nazwa produktu, kropka marki, kreska i nazwa klienta. Kreska
   jest separatorem, nie ozdobą - mówi „ten produkt, u tego klienta". */
.stx-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-body);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
	white-space: nowrap;
}
.stx-wordmark .wm-produkt { color: var(--stx-text); }
.stx-wordmark .wm-kropka { color: var(--stx-wordmark-dot); }
.stx-wordmark .wm-kreska {
	color: var(--stx-line);
	margin: 0 5px;
	font-weight: 400;
}
.stx-wordmark .wm-klient { color: var(--stx-primary); }

.stx-topbar-spacer { flex: 1 1 auto; }

/* Przyciski belki są ciche: ikona w kółku, które zapala się dopiero pod
   kursorem. Belka ma nieść markę i stan, nie konkurować z treścią. */
.stx-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: var(--stx-radius-control);
	background: transparent;
	color: var(--stx-text-muted);
	cursor: pointer;
	transition: background var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-icon-btn:hover { background: var(--stx-hover-surface); color: var(--stx-text); }
.stx-icon-btn svg { width: 17px; height: 17px; }

/* ====================================================================== */
/* 2. NAWIGACJA BOCZNA                                                    */
/* ====================================================================== */

.stx-sidebar {
	position: fixed;
	top: var(--stx-topbar-h);
	bottom: 0;
	left: 0;
	width: var(--stx-sidebar-w);
	z-index: 30;
	display: flex;
	flex-direction: column;
	background: var(--stx-surface);
	border-right: 1px solid var(--stx-line);
	transition: width var(--stx-dur) var(--stx-ease);
	overflow: hidden;
}

/* Pasek ze strzałką zwijania. Siedzi NAD listą, nie w niej, żeby przy
   zwiniętym menu nie trzeba było szukać, czym się je rozwija. */
.stx-sidebar-top {
	display: flex;
	justify-content: flex-end;
	padding: 10px 12px 6px;
	flex: 0 0 auto;
}

.stx-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 10px 20px;
	scrollbar-width: thin;
	scrollbar-color: var(--stx-line) transparent;
}
.stx-nav::-webkit-scrollbar { width: 6px; }
.stx-nav::-webkit-scrollbar-thumb { background: var(--stx-line); border-radius: var(--stx-radius-pill); }

/* Etykieta grupy - mikro-kapitaliki z dużym światłem. Grupuje, ale nie
   zabiera uwagi pozycjom. */
.stx-nav-group {
	padding: 18px 10px 6px;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-muted);
	white-space: nowrap;
}

.stx-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	margin: 1px 0;
	border: 0;
	border-radius: var(--stx-radius-control);
	background: transparent;
	color: var(--stx-text);
	font-size: var(--stx-fs-body);
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-nav-item:hover { background: var(--stx-hover-surface); }
.stx-nav-item .ikona {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--stx-text-muted);
	transition: color var(--stx-dur-fast) var(--stx-ease);
}
.stx-nav-item .etykieta { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.stx-nav-item .szewron {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--stx-text-muted);
	transition: transform var(--stx-dur) var(--stx-ease);
}
.stx-nav-item[aria-expanded='true'] .szewron { transform: rotate(180deg); }

/* Pozycja aktywna to PIGUŁKA w barwie marki - jedyne miejsce w nawigacji,
   gdzie marka dochodzi do głosu. */
.stx-nav-item.aktywna {
	background: var(--stx-tint-strong);
	color: var(--stx-primary-strong);
	font-weight: 600;
}
.stx-nav-item.aktywna .ikona { color: var(--stx-primary); }

/* Pozycje podrzędne nie mają ikon: hierarchię niesie wcięcie i stopień
   wielkości. Osiem ikon pod rząd byłoby ośmioma drobnymi zagadkami. */
.stx-nav-sub { display: none; padding: 2px 0 6px; }
.stx-nav-sub.otwarta { display: block; }
.stx-nav-sub .stx-nav-item {
	padding-left: 42px;
	font-size: var(--stx-fs-cell);
	color: var(--stx-text-muted);
}
.stx-nav-sub .stx-nav-item.aktywna {
	background: var(--stx-tint-primary);
	color: var(--stx-primary-strong);
	font-weight: 600;
}

/* Zwinięte menu: zostają same ikony. Etykiety chowamy, a nie skracamy -
   ucięty napis czyta się gorzej niż jego brak. */
body.menu-zwiniete .stx-sidebar { width: var(--stx-sidebar-w-collapsed); }
body.menu-zwiniete .stx-nav-item .etykieta,
body.menu-zwiniete .stx-nav-item .szewron,
body.menu-zwiniete .stx-nav-group { display: none; }
body.menu-zwiniete .stx-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
body.menu-zwiniete .stx-nav-sub { display: none !important; }
body.menu-zwiniete .stx-sidebar-top .szewron-zwijania { transform: rotate(180deg); }

/* ====================================================================== */
/* 3. OBSZAR TREŚCI                                                       */
/* ====================================================================== */

.stx-main {
	margin-top: var(--stx-topbar-h);
	margin-left: var(--stx-sidebar-w);
	min-height: calc(100vh - var(--stx-topbar-h));
	transition: margin-left var(--stx-dur) var(--stx-ease);
}
body.menu-zwiniete .stx-main { margin-left: var(--stx-sidebar-w-collapsed); }

.stx-strona {
	max-width: 1560px;
	padding: 24px 36px 72px;
}

/* Agent nie ma sufitu szerokości: rozmowa ze śladem analizy obok wypełnia
   ekran, bo to miejsce pracy, a nie dokument do czytania. Raport ma sufit,
   bo przy 30-calowym monitorze wiersz na całą szerokość jest nie do
   przeczytania.

   Nie ma też sufitu wysokości - strona agenta zajmuje dokładnie okno, jak
   każdy komunikator. Przewija się WNĘTRZE rozmowy i wnętrze śladu, nie
   strona: pole pytania zostaje na miejscu, bo przy długiej rozmowie szukanie
   go przez przewijanie w dół jest pracą, której nikt nie zamawiał.

   Dokument nie przewija się wcale. Bez tego margines górny `.stx-main`
   dokłada wysokość belki do wysokości dokumentu i okno dostaje pasek
   przewijania na 46 pikseli pustki. */
body[data-strona="agent"],
body[data-strona="agent-portal"] { overflow: hidden; }

body[data-strona="agent"] .stx-strona,
body[data-strona="agent-portal"] .stx-strona {
	max-width: none;
	height: calc(100vh - var(--stx-topbar-h));
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---- Nagłówek strony -------------------------------------------------- */

.stx-okruszki {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--stx-fs-cell);
	color: var(--stx-text-muted);
	margin-bottom: 10px;
}
.stx-okruszki .sep { color: var(--stx-line); }
.stx-okruszki .biezacy { color: var(--stx-text); font-weight: 500; }

.stx-naglowek-rzad {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}
.stx-naglowek-rzad .rosnie { flex: 1 1 420px; min-width: 0; }

.stx-tytul-strony {
	margin: 0 0 4px;
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-page-title);
	font-weight: 800;
	letter-spacing: var(--stx-tracking-title);
	color: var(--stx-text);
}

/* Pytanie decyzyjne stoi NAD filtrami, bo określa, po co ta strona w ogóle
   istnieje. Etykieta jest szara, nie markowa: to podpis roli zdania, a nie
   odnośnik - a błękit w tym miejscu konkurował z nawigacją o to samo znaczenie. */
.stx-pytanie {
	margin: 0 0 4px;
	font-size: var(--stx-fs-body);
	color: var(--stx-text-muted);
	max-width: 88ch;
	line-height: 1.5;
}
.stx-pytanie b {
	color: var(--stx-text-soft);
	font-weight: 700;
	font-size: var(--stx-fs-label-sm);
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
}

/* Pigułka źródła: kropka stanu + nazwa zbioru. Mówi, NA CZYM liczone są
   liczby obok - bez tego raport jest anonimowy. */
.stx-zrodlo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--stx-radius-pill);
	background: var(--stx-tint-primary);
	border: 1px solid var(--stx-line-primary);
	font-size: var(--stx-fs-micro);
	color: var(--stx-primary-strong);
	white-space: nowrap;
}
.stx-zrodlo .kropka {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--stx-good);
	flex: 0 0 auto;
}
.stx-zrodlo.pusto { background: var(--stx-tint-neutral); border-color: var(--stx-line); color: var(--stx-text-muted); }
.stx-zrodlo.pusto .kropka { background: var(--stx-status-none); }

.stx-naglowek-prawo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.stx-odswiezenie {
	font-size: var(--stx-fs-label);
	color: var(--stx-text-muted);
	text-align: right;
	line-height: 1.35;
	white-space: pre-line;
}

/* ====================================================================== */
/* 4. BELKA FILTRÓW                                                       */
/* ====================================================================== */

.stx-filtry {
	margin: 18px 0 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--stx-line);
}

.stx-filtry-pasek {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.stx-filtry-przelacz {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	padding: 4px 2px;
	color: var(--stx-text-muted);
	font-size: var(--stx-fs-control);
	cursor: pointer;
}
.stx-filtry-przelacz:hover { color: var(--stx-text); }
.stx-filtry-przelacz svg { width: 14px; height: 14px; }
.stx-filtry-przelacz .szewron { transition: transform var(--stx-dur) var(--stx-ease); }
.stx-filtry-przelacz[aria-expanded='false'] .szewron { transform: rotate(180deg); }

/* Stan filtrów czyta się JEDNYM ciągiem, z kropkami jako separatorem -
   to jest zdanie o tym, co właśnie widzisz, a nie lista kontrolek. */
.stx-filtry-stan {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	flex-wrap: wrap;
}
.stx-filtry-stan .kropka { color: var(--stx-line-primary); }

.stx-filtry-pola {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px var(--stx-gap-col);
	margin-top: 14px;
}
.stx-filtry.zwiniete .stx-filtry-pola { display: none; }

.stx-pole label {
	display: block;
	margin-bottom: 5px;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}

/* Kontrolka wygląda jak kontrolka: hairline, 8 px promienia, strzałka
   rysowana tłem (własna, bo natywna różni się w każdej przeglądarce). */
.stx-select, .stx-input {
	width: 100%;
	height: var(--stx-control-h-lg);
	padding: 0 30px 0 11px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background-color: var(--stx-surface);
	color: var(--stx-text);
	font-size: var(--stx-fs-control);
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C6679' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10l4-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 14px;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), box-shadow var(--stx-dur-fast) var(--stx-ease);
}
.stx-input { padding-right: 11px; background-image: none; cursor: text; }
.stx-select:hover, .stx-input:hover { border-color: var(--stx-line-primary); }
.stx-select:focus, .stx-input:focus { border-color: var(--stx-primary); box-shadow: var(--stx-ring); }

.stx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: var(--stx-control-h-lg);
	padding: 0 14px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text);
	font-size: var(--stx-fs-control);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), background var(--stx-dur-fast) var(--stx-ease);
}
.stx-btn:hover { border-color: var(--stx-line-primary); background: var(--stx-hover-tint); }
.stx-btn-primary {
	background: var(--stx-primary);
	border-color: var(--stx-primary);
	color: var(--stx-on-primary);
	font-weight: 500;
}
.stx-btn-primary:hover { background: var(--stx-primary-strong); border-color: var(--stx-primary-strong); }

/* Grupa przełączników (listing asortymentu u Cosmediki): jeden pasek,
   wybrany segment w barwie marki. */
.stx-segmenty {
	display: inline-flex;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	overflow: hidden;
	background: var(--stx-surface);
}
.stx-segmenty button {
	border: 0;
	border-right: 1px solid var(--stx-line);
	background: transparent;
	padding: 0 16px;
	height: var(--stx-control-h-lg);
	font-size: var(--stx-fs-control);
	color: var(--stx-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--stx-dur-fast) var(--stx-ease);
}
.stx-segmenty button:last-child { border-right: 0; }
.stx-segmenty button:hover { background: var(--stx-hover-surface); }
.stx-segmenty button.wybrany {
	background: var(--stx-primary);
	color: var(--stx-on-primary);
	font-weight: 500;
}

/* ====================================================================== */
/* 5. SEKCJE I KARTY                                                      */
/* ====================================================================== */

.stx-sekcja { margin-top: 26px; }

/* Nadtytuł sekcji - mikro-kapitaliki w barwie marki. Mówi, jaką ROLĘ gra
   blok poniżej (Wynik / Objaśnienie / Szczegóły). */
/* Nadtytuł sekcji mówi, jaką ROLĘ gra blok poniżej (Wynik / Objaśnienie /
   Szczegóły). Był w barwie marki i powtarzał się dwa-trzy razy na stronę,
   obok okruszków, etykiety „Pytanie decyzyjne" i pigułki źródła - przez co
   błękit CRH przestał cokolwiek wyróżniać. Marka wraca do chromu (nawigacja,
   odnośniki, kontrolki); nadtytuł zostaje tym, czym jest: cichą etykietą
   roli nad głośnym tytułem. */
.stx-kicker {
	font-size: var(--stx-fs-label-sm);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-soft);
	margin-bottom: 5px;
}

.stx-sekcja-tytul {
	margin: 0 0 14px;
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-section-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-title);
	color: var(--stx-text);
}

.stx-siatka {
	display: grid;
	gap: var(--stx-gap-col);
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.stx-siatka-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.stx-siatka-1 { grid-template-columns: 1fr; }

/* Karta jest PŁASKA: hairline i 8 px promienia, bez cienia. Cień zarezerwowany
   dla warstw unoszonych - gdyby miała go karta, nic by się nad nią nie wybijało. */
.stx-karta {
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	padding: var(--stx-card-pad);
	min-width: 0;
}
.stx-karta-tytul {
	margin: 0 0 12px;
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
}

/* Karta z wykresem zwęża się DO WYKRESU.
   Płótno jest ograniczone do 760 px szerokości projektowej (patrz sekcja 5b),
   więc w karcie na pełne pasmo zostawałyby po bokach dwieście pikseli bieli
   - wykres pływałby w pudełku. Karta mierzy się z treścią zamiast rozciągać
   się na całą sekcję; jest to ta sama zasada co w tabeli wyżej, tylko dla
   drugiego rodzaju dowodu. */
.stx-karta:has(> .stx-wykres) { max-width: calc(760px + 2 * var(--stx-card-pad)); }

/* Na wąskim ekranie wykres NIE zmniejsza się w nieskończoność.
   Płótno skaluje się proporcjonalnie, więc przy 340 px szerokości podpisy
   osi schodziły do sześciu pikseli - wykres był obrazkiem wykresu, a nie
   wykresem. Poniżej progu czytelności karta przewija się w bok, dokładnie
   jak tabela obok: lepiej przesunąć palcem i odczytać, niż zobaczyć
   wszystko naraz i nie odczytać nic. */
.stx-karta:has(> .stx-wykres) { overflow-x: auto; scrollbar-width: thin; }
.stx-wykres { min-width: 420px; }

/* Tak samo karta z tabelą. Tabela jest teraz szeroka na tyle, na ile wymaga
   jej treść (patrz sekcja „Tabela"), więc karta rozciągnięta na całą sekcję
   zostawiałaby obok niej czterysta pikseli pustej bieli - pudełko większe
   od rzeczy, którą pakuje. `fit-content` każe karcie zmierzyć się z treścią
   i zatrzymać się na krawędzi sekcji, gdy treść jest szersza. */
.stx-karta:has(> .stx-tabela-opakowanie) {
	width: fit-content;
	max-width: 100%;
}

/* Proza w karcie: opis skrótu nawigacyjnego albo treść założenia. Stopień
   pisma ten sam co w tabeli - karta objaśniająca nie ma konkurować z kaflem. */
.stx-karta-opis {
	margin: 0;
	font-size: var(--stx-fs-body);
	line-height: 1.45;
	color: var(--stx-text-soft);
}
.stx-karta-opis + .stx-kicker { margin-top: 12px; }

/* ---- Węzeł prowadzący na inną stronę ---------------------------------- */

/* Karta skrótu i przypis o założeniach prowadzą dalej, więc muszą zachowywać
   się jak odnośnik: kursor, obrys przy fokusie, reakcja na hover. Nie są
   przyciskiem i nie dostają jego formy - czynność jest „przejdź", nie „wykonaj". */
.klikalny {
	cursor: pointer;
	transition: border-color var(--stx-dur) var(--stx-ease),
	            background var(--stx-dur) var(--stx-ease);
}
.klikalny:hover { border-color: var(--stx-brand); }
.klikalny:focus-visible {
	outline: 2px solid var(--stx-brand);
	outline-offset: 2px;
}
.stx-nota.klikalny:hover { color: var(--stx-text); }
.stx-nota-odnosnik { color: var(--stx-primary); font-weight: 600; }
.stx-nota-odnosnik::after { content: ' →'; }
.stx-nota.klikalny:hover .stx-nota-odnosnik { text-decoration: underline; }

/* ---- Kafel KPI -------------------------------------------------------- */

.stx-kpi {
	display: flex;
	flex-direction: column;
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	padding: var(--stx-kpi-pad);
	min-width: 0;
	transition: box-shadow var(--stx-dur-fast) var(--stx-ease), border-color var(--stx-dur-fast) var(--stx-ease);
}
.stx-kpi:hover { box-shadow: var(--stx-shadow-hover); }

/* Rezultat ma tło w barwie marki, objaśnienie zostaje białe. To jedyna
   różnica formy między „co się stało" a „dlaczego" - i wystarcza. */
.stx-kpi.rezultat { background: var(--stx-tint-primary); border-color: var(--stx-line-primary); }

.stx-kpi .rola {
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin-bottom: 3px;
}
.stx-kpi .nazwa {
	font-size: var(--stx-fs-label);
	font-weight: 600;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text);
	margin-bottom: 8px;
	line-height: 1.3;
}
.stx-kpi-value {
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-kpi);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-title);
	line-height: 1.05;
	color: var(--stx-text);
}
.stx-kpi-value .sufiks {
	font-size: var(--stx-fs-kpi-suffix);
	font-weight: 500;
	/* Odstep liczony z kroju sufiksu, nie staly: symbol („PLN/t") znosi ciasne
	   przyleganie, ale slowo („ton") zlewa sie wtedy z liczba w jeden wyraz. */
	margin-left: 0.18em;
	color: var(--stx-text-muted);
}
/* Kafel bez pomiaru: brak danych nie udaje liczby ani jej nie zastępuje
   kreską wielkości liczby - zajmuje to samo miejsce, ale mówi po polsku,
   czego brakuje, i nie przyciąga wzroku jak wynik. */
.stx-kpi-value.bez-pomiaru {
	font-family: var(--stx-font-sans);
	font-size: var(--stx-fs-card-title);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--stx-text-soft);
	padding: 4px 0 3px;
}
.stx-kpi .baza {
	margin-top: 6px;
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
}

/* Delta: trójkąt + liczba + punkt odniesienia. Kierunek trójkąta mówi,
   DOKĄD poszła liczba, kolor - czy to dobrze. Rozdzielenie jest celowe:
   przy koszcie spadek jest dobry, przy marży odwrotnie. */
.stx-delta {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin-top: 7px;
	font-size: var(--stx-fs-micro);
	font-weight: 600;
}
.stx-delta .strzalka { font-size: var(--stx-fs-num); }
.stx-delta .odniesienie { font-weight: 400; color: var(--stx-text-muted); }
.stx-delta.dobrze { color: var(--stx-good); }
.stx-delta.zle { color: var(--stx-bad); }
.stx-delta.obojetnie { color: var(--stx-neutral); }

.stx-kpi .nota {
	margin-top: 8px;
	font-size: var(--stx-fs-micro);
	font-style: italic;
	color: var(--stx-text-muted);
	line-height: 1.25;
}

/* Stopka kafla: legenda i iskierka. Oddzielona hairlinem słabszym niż
   ramka karty - to podział WEWNĄTRZ, nie kolejna krawędź. */
.stx-kpi-stopka {
	margin-top: auto;
	padding-top: 10px;
}
/* Legenda MUSI dać się ścieśnić. Bez tego jej szerokość minimalna staje się
   szerokością minimalną kafla i narzuca siatce liczbę kolumn - cztery kafle
   nie zmieściłyby się nigdy, choć miejsca na ekranie jest aż nadto. */
.stx-kpi-legenda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-muted);
	margin-bottom: 4px;
}
.stx-kpi-legenda .seria { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.stx-kpi-legenda > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.stx-kpi-legenda .kreska { width: 13px; height: 2px; background: var(--stx-actual); border-radius: 1px; }
.stx-kpi-legenda .kreska.baza { background: var(--stx-py); }

.stx-iskra { display: block; width: 100%; height: 38px; overflow: visible; }
.stx-iskra path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.stx-iskra path.ac { stroke: var(--stx-actual); }
.stx-iskra path.py { stroke: var(--stx-py); stroke-dasharray: 3 3; }

/* ---- Pasek rankingu --------------------------------------------------- */

.stx-ranking { display: flex; flex-direction: column; gap: 9px; }
.stx-ranking-wiersz {
	display: grid;
	grid-template-columns: minmax(110px, 1.3fr) 1fr minmax(78px, auto);
	align-items: center;
	gap: 12px;
	font-size: var(--stx-fs-cell);
}
.stx-ranking-wiersz .etykieta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-tor {
	position: relative;
	height: 10px;
	border-radius: var(--stx-radius-bar);
	background: var(--stx-bar-track);
	overflow: hidden;
}
.stx-tor i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	border-radius: var(--stx-radius-bar);
	background: var(--stx-bar);
}
.stx-tor i.dobrze { background: var(--stx-bar-good); }
.stx-tor i.zle { background: var(--stx-bar-bad); }
.stx-ranking-wiersz .wartosc { text-align: right; font-weight: 600; }

/* ---- Tabela ----------------------------------------------------------- */

.stx-tabela-opakowanie {
	overflow-x: auto;
	scrollbar-width: thin;
	margin: 0 calc(var(--stx-card-pad) * -1) calc(var(--stx-card-pad) * -1);
}
/* Tabela wypełnia kartę, ale luz dostaje WYŁĄCZNIE kolumna toru.
   Przy zwykłym `width: 100%` nadmiar szerokości lądował w kolumnach
   opisowych i między „Miesiącem" a „UC 2024" otwierała się dwustupikselowa
   dziura - wiersz rozpadał się wzrokowo na dwie osobne tabele. Oddanie
   nadmiaru torowi domyka oba końce: tabela dochodzi do krawędzi karty,
   a dłuższy tor to po prostu dokładniejszy wykres odchyleń. Gdy treść
   i tak się nie mieści, kolumny liczbowe mają `nowrap` i karta przewija
   się w bok jak dotąd.

   Bez `min-width: max-content` - w parze z komórką toru ustawioną na
   `width: 100%` obie miary nakręcały się nawzajem i tabela rosła do
   pół miliona pikseli. */
table.stx-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: var(--stx-fs-cell);
}

/* Nagłówek dwupiętrowy: CO jest mierzone, a pod spodem W CZYM.
   „UC 2024 (PLN/t)" w jednym wersaliku rozpychał kolumnę i wyglądał jak
   usterka; rozłożony na dwa piętra czyta się raz jako „UC", a jednostka
   stoi tam, gdzie jej szuka wzrok. Linia pod nagłówkiem jest MOCNA
   (notacja IBCS): to ona oddziela opis od danych, więc nie może być
   tej samej wagi co hairline między wierszami. */
table.stx-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--stx-surface);
	padding: 0 var(--stx-card-pad) 7px;
	text-align: left;
	vertical-align: bottom;
	border-bottom: 1px solid color-mix(in srgb, var(--stx-text) 62%, transparent);
	white-space: nowrap;
}
table.stx-table th .co {
	display: block;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	color: var(--stx-text);
}
table.stx-table th .w-czym {
	display: block;
	margin-top: 2px;
	font-size: var(--stx-fs-tiny);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stx-text-soft);
}
table.stx-table th.liczba .co,
table.stx-table th.liczba .w-czym { text-align: right; }
/* Nagłówek kolumny z torem siada nad SAMĄ liczbą, nie nad liczbą plus torem. */
/* Nagłówek stoi nad LICZBĄ, nie nad słupkiem. Tor rośnie razem z kolumną,
   więc nagłówek rezerwuje miejsce pustym bliźniakiem toru - te same `flex`
   i `min-width`, więc napis kończy się tam, gdzie kończy się liczba. */
table.stx-table th.z-torem .co,
table.stx-table th.z-torem .w-czym {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 10px;
}
table.stx-table th.z-torem .co::after,
table.stx-table th.z-torem .w-czym::after {
	content: '';
	flex: 1 1 auto;
	min-width: 64px;
}

table.stx-table td {
	padding: 6px var(--stx-card-pad);
	border-bottom: 1px solid var(--stx-line-soft);
}
table.stx-table tbody tr:last-child td { border-bottom: 0; }
table.stx-table tbody tr:hover td { background: var(--stx-row-hover); }
/* Liczby do prawej i bez łamania. Szerokości kolumn nie wymuszamy wcale -
   przy `width: max-content` na tabeli każda kolumna i tak jest dokładnie
   tak szeroka, jak jej najszersza zawartość, więc nie ma luzu do rozdania. */
table.stx-table td.liczba, table.stx-table th.liczba {
	text-align: right;
	white-space: nowrap;
}

/* Barwa odchylenia BEZ pogrubienia.
   Dwadzieścia wierszy czerwieni w wadze 600 to ściana, w której nie widać
   już, który wiersz jest ważny - a gdy wszystkie odchylenia mają ten sam
   znak, różnicuje je WIELKOŚĆ, nie barwa. Kolor zostaje (niesie znak),
   wagę przejmuje tor obok liczby. */
table.stx-table td.dobrze { color: var(--stx-good); }
table.stx-table td.zle { color: var(--stx-bad); }

/* Tor porównawczy w kolumnie odchylenia - ten sam klocek co w odpowiedzi
   agenta, żeby ta sama liczba czytała się tak samo w raporcie i w rozmowie. */
table.stx-table .num { display: inline-block; vertical-align: middle; }
/* Szerokości kolumn zostają AUTOMATYCZNE. Dwie próby ręcznego sterowania
   nimi skończyły się tabelą na pół miliona pikseli: `width: 100%` na
   komórce toru podbija min-content całej tabeli, a `width: 1px` na
   pozostałych komórkach robi to samo od drugiej strony. Układ `auto`
   rozdziela luz sam, a tor i tak zabiera wszystko, co zostanie w JEGO
   kolumnie - i to wystarcza, żeby tabela dochodziła do krawędzi. */
table.stx-table td.z-torem .para {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
table.stx-table td.z-torem .para .num { flex: 0 0 auto; }
table.stx-table .tor {
	position: relative;
	display: inline-block;
	flex: 1 1 auto;
	min-width: 64px;
	height: 8px;
	vertical-align: middle;
	background: var(--stx-bar-track);
	border-radius: 1px;
}
table.stx-table .tor i {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--udzial);
	background: var(--stx-bar-soft);
	border-radius: 1px;
}
table.stx-table .tor i.dodatni { left: 0; }
table.stx-table .tor i.ujemny { right: 0; }
/* Oś zera pośrodku toru tylko tam, gdzie wartości idą w obie strony;
   przy samych dodatnich lewa krawędź toru JEST zerem i druga kreska
   tylko by ją podrabiała. */
table.stx-table .tor.obustronny::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -1px;
	bottom: -1px;
	width: 1px;
	background: var(--stx-line-weak);
}
table.stx-table .tor.obustronny i.dodatni { left: 50%; width: calc(var(--udzial) / 2); }
table.stx-table .tor.obustronny i.ujemny { right: 50%; width: calc(var(--udzial) / 2); }

/* ---- Stany puste i komunikaty ---------------------------------------- */

/* Stan pusty jest EKRANEM, nie komunikatem wciśniętym w pasek.
   Kreskowana ramka na całą szerokość pasma, z tekstem w jednej linii pod
   górną krawędzią, czytała się jak awaria układu, a nie jak informacja.
   Teraz: wąska kolumna, wyrównana do lewej jak każda inna treść, z wyraźnym
   zdaniem o tym, CZEGO brakuje, i drugim o tym, CO z tym zrobić.

   Bez kreskowanej ramki - kreska przerywana w interfejsie znaczy „tu coś
   upuść", a tu nie ma czego upuszczać. Została sama powierzchnia wklęsła. */
.stx-pusto {
	max-width: 56ch;
	margin: 8px 0;
	padding: 24px 24px 26px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-note);
	background: var(--stx-surface-sunken);
	color: var(--stx-text-muted);
	font-size: var(--stx-fs-body);
	line-height: 1.5;
	text-align: left;
}
.stx-pusto b {
	display: block;
	margin-bottom: 6px;
	color: var(--stx-text);
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
}

.stx-nota {
	padding: 12px 14px;
	border-left: 3px solid var(--stx-line-primary);
	border-radius: 0 var(--stx-radius-chip) var(--stx-radius-chip) 0;
	background: var(--stx-tint-primary);
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
}

/* Ostrzeżenie o danych.
   Różni się od noty ROLĄ, nie głośnością: nota objaśnia miarę, ostrzeżenie
   mówi, czego tą miarą policzyć się NIE DA. Dostaje więc stopień pisma treści,
   a nie przypisu, i kreskę w barwie odchylenia niekorzystnego - tej samej,
   którą strona oznacza wzrost kosztu. Nie jest to blok alarmowy: pełne tło
   krzyczałoby na każdej stronie raportu, a on ma być czytany, nie omijany. */
.stx-ostrzezenie {
	max-width: 80ch;
	padding: 14px 16px;
	border: 1px solid var(--stx-line);
	border-left: 3px solid var(--stx-bad);
	border-radius: 0 var(--stx-radius-note) var(--stx-radius-note) 0;
	background: var(--stx-surface-sunken);
	font-size: var(--stx-fs-body);
	line-height: 1.45;
	color: var(--stx-text-muted);
}
.stx-ostrzezenie b {
	display: block;
	margin-bottom: 4px;
	color: var(--stx-text);
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
}

/* ====================================================================== */
/* 5b. WYKRESY (notacja IBCS)                                             */
/*                                                                        */
/* Wykresy nie noszą kolorów w atrybutach - mają klasy, a barwę dostają   */
/* stąd. Dlatego tryb ciemny i rebranding nie wymagają ani jednej linii   */
/* JS-a: zmienia się token, a rysunek idzie za nim.                      */
/* ====================================================================== */

/* Rysunek wykresów (`.stx-wykres`, klasy `w-*`) mieszka w `wykresy.css` -
   ten sam plik czyta odpowiedź agenta, bo wykres z rozmowy ma wyglądać
   dokładnie tak jak wykres z raportu. */

/* ====================================================================== */
/* 6. AGENT - STRONA PORTALU                                              */
/*                                                                        */
/* Agent jest pozycją menu, a nie szufladą nad raportem, więc dostaje      */
/* układ STRONY: rozmowa w środku, ŚLAD ANALIZY w kolumnie obok.          */
/*                                                                        */
/* Lista wcześniejszych rozmów jest rozwijana, a nie trzecią kolumną:      */
/* potrzebna jest raz, w chwili wracania do starego wątku, a ślad musi być */
/* widoczny bez przerwy. Metryczka „skąd te liczby" mieści się w jednej    */
/* linijce nad rozmową i rozwija na żądanie - stałe karty obok rozmowy     */
/* zabierały połowę ekranu, żeby powtarzać to samo przy każdym pytaniu.    */
/* ====================================================================== */

/* Dwie kolumny: rozmowa i ślad. Rozmowa bierze całą resztę szerokości, bo
   niesie te same wykresy i tabele, co strony raportu - ściśnięta do miary
   wiersza pokazywałaby je mniejsze niż wszystko inne w portalu. Miarę wiersza
   trzyma sama proza odpowiedzi (`.stx-odp-proza`), a nie kolumna.

   Ślad ma 330 px: tyle potrzebuje wycinek zapytania SQL, żeby dało się go
   przeczytać bez rozwijania - a to jest cały sens tej kolumny. */
.stx-agent-uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 18px;
	align-items: stretch;
	margin-top: 18px;
	/* `min-height: 0` jest tu konieczne: domyślne `auto` nie pozwala elementowi
	   siatki skurczyć się poniżej treści, więc rozmowa rozpychałaby stronę
	   zamiast przewijać się w środku. */
	flex: 1 1 auto;
	min-height: 0;
}

/* ---- Lista rozmów (rozwijana, z wyszukiwaniem) ------------------------ */

/* Przełącznik siedzi w pasku metryczki agenta, po prawej. Tam szuka go wzrok,
   bo tam stoi reszta informacji o tej rozmowie: okres, baza, ogniwo. */
.stx-rozmowy { position: relative; flex: 0 0 auto; }

.stx-rozmowy-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 330px;
	height: var(--stx-control-h-sm);
	padding: 0 9px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text-muted);
	font: inherit;
	font-size: var(--stx-fs-micro);
	cursor: pointer;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-rozmowy-przycisk:hover { border-color: var(--stx-primary); color: var(--stx-primary); }
.stx-rozmowy-przycisk:focus-visible { outline: none; border-color: var(--stx-primary); box-shadow: var(--stx-ring); }
.stx-rozmowy-przycisk .ikona { width: 14px; height: 14px; flex: 0 0 auto; }
/* Tytuł bieżącej rozmowy na przycisku odpowiada na pytanie, które pada
   najczęściej: czy to jeszcze ten wątek, w którym liczyłem wczoraj wypał. */
.stx-rozmowy-przycisk .biezaca {
	min-width: 0;
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--stx-text);
}
.stx-rozmowy-przycisk .biezaca.pusta { color: var(--stx-text-soft); }
.stx-rozmowy-przycisk .szewron {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	color: var(--stx-text-soft);
	transition: transform var(--stx-dur-fast) var(--stx-ease);
}
.stx-rozmowy-przycisk[aria-expanded="true"] .szewron { transform: rotate(180deg); }

/* Panel wychodzi z prawej krawędzi przycisku, bo przycisk stoi przy prawej
   krawędzi karty rozmowy - otwierany w lewo wychodziłby za ekran. */
.stx-rozmowy-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	width: min(430px, calc(100vw - 48px));
	max-height: min(70vh, 520px);
	display: flex;
	flex-direction: column;
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	box-shadow: var(--stx-shadow-pop);
	overflow: hidden;
}
.stx-rozmowy-panel[hidden] { display: none; }

.rz-glowa {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--stx-line);
}
.rz-szukaj {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	height: var(--stx-control-h);
	padding: 0 10px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text-soft);
}
.rz-szukaj:focus-within { border-color: var(--stx-primary); box-shadow: var(--stx-ring); }
.rz-szukaj svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rz-wejscie {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--stx-fs-body);
	color: var(--stx-text);
	outline: none;
}
.rz-wejscie::placeholder { color: var(--stx-text-soft); }
/* Pierścień fokusu rysuje OPAKOWANIE (`.rz-szukaj:focus-within`), więc samo
   pole musi go sobie odpuścić - globalna reguła `:focus-visible` dokładała
   drugi, wewnętrzny prostokąt i pole wyglądało jak podwójnie obramowane. */
.rz-wejscie:focus-visible { box-shadow: none; }
/* Krzyżyk z pola `search` w WebKicie ma własny rysunek i własny kolor -
   frazę czyści się klawiaturą albo Escape, nie jego ikoną. */
.rz-wejscie::-webkit-search-cancel-button { appearance: none; }

.rz-nowa {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: var(--stx-control-h);
	padding: 0 11px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text-muted);
	font: inherit;
	font-size: var(--stx-fs-control);
	cursor: pointer;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.rz-nowa:hover { border-color: var(--stx-primary); color: var(--stx-primary); }
.rz-nowa svg { width: 14px; height: 14px; }

.rz-lista {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 6px;
}
/* Grupa dat zamiast daty w każdym wierszu: „Dziś" raz na górze czyta się
   szybciej niż „dziś 14:20" przy każdej z dwunastu rozmów. */
.rz-grupa {
	padding: 9px 8px 4px;
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-soft);
}
.rz-poz {
	display: flex;
	align-items: stretch;
	border-radius: calc(var(--stx-radius-card) - 3px);
}
.rz-poz:hover { background: var(--stx-row-hover); }
.rz-poz.aktywna { background: var(--stx-tint-primary); }
.rz-otworz {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 4px 8px 10px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--stx-text);
	border-radius: inherit;
}
.rz-otworz:focus-visible { outline: none; box-shadow: var(--stx-ring); }
/* Tytuł to pierwsze zdanie pytania. Dwie linie wystarczą, żeby rozpoznać
   rozmowę; trzecia zamieniłaby listę w ścianę tekstu. */
.rz-otworz .tytul {
	font-size: var(--stx-fs-body);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rz-poz.aktywna .tytul { font-weight: 600; }
.rz-otworz .tytul mark {
	padding: 0 1px;
	border-radius: 2px;
	background: var(--stx-tint-strong);
	color: inherit;
}
.rz-otworz .meta { font-size: var(--stx-fs-micro); color: var(--stx-text-muted); }

.rz-usun {
	flex: 0 0 auto;
	width: 32px;
	border: 0;
	background: none;
	color: var(--stx-text-muted);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.rz-usun svg { width: 15px; height: 15px; }
.rz-poz:hover .rz-usun,
.rz-usun:focus-visible { opacity: 1; }
.rz-usun:hover { color: var(--stx-bad); }

.rz-pusto {
	padding: 16px 10px;
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	line-height: 1.55;
}
.rz-stopka {
	flex: 0 0 auto;
	padding: 8px 12px;
	border-top: 1px solid var(--stx-line);
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-soft);
}
.rz-stopka:empty { display: none; }

/* ---- Ślad analizy ----------------------------------------------------- */

/* Kolumna dowodu. Ta sama karta co kafel raportu, bo to jest część raportu:
   liczba bez zapytania, które ją policzyło, nie jest wynikiem analizy. */
.stx-slad {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	overflow: hidden;
}
/* Zwinięty ślad: rozmowa dostaje całą szerokość, a panel znika z układu
   (nie chowamy go samą przezroczystością - pusta kolumna 330 px zostawiałaby
   dziurę obok wykresu). Wraca przyciskiem w metryczce albo kliknięciem
   w pasek stanu tury. */
/* Zwijanie jest przejściem SZEROKOŚCI ścieżki siatki, a nie znikaniem kolumny:
   `grid-template-columns` interpoluje się tylko wtedy, gdy po obu stronach jest
   tyle samo ścieżek. Kolumna schodzi do zera razem z odstępem, więc rozmowa
   rozsuwa się płynnie zamiast przeskakiwać na pełną szerokość. */
.stx-agent-uklad {
	transition: grid-template-columns var(--stx-dur) var(--stx-ease),
		column-gap var(--stx-dur) var(--stx-ease);
}
body.slad-zwiniety .stx-agent-uklad {
	grid-template-columns: minmax(0, 1fr) 0px;
	column-gap: 0;
}
.stx-slad {
	min-width: 0;
	transition: opacity var(--stx-dur-fast) var(--stx-ease);
}
body.slad-zwiniety .stx-slad {
	opacity: 0;
	border-width: 0;
	pointer-events: none;
}
.stx-slad-przelacz { flex: 0 0 auto; height: var(--stx-control-h-sm); }
.stx-slad-przelacz svg { width: 14px; height: 14px; }
.stx-slad-przelacz[aria-pressed="true"] {
	border-color: var(--stx-line-primary);
	color: var(--stx-primary);
	background: var(--stx-tint-primary);
}
.stx-slad-zwin {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 2px;
	border: 0;
	border-radius: var(--stx-radius-chip);
	background: none;
	color: var(--stx-text-soft);
	cursor: pointer;
}
.stx-slad-zwin:hover { background: var(--stx-hover-tint); color: var(--stx-text); }
.stx-slad-zwin svg { width: 13px; height: 13px; }

.stx-slad-glowa {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px var(--stx-card-pad) 11px;
	border-bottom: 1px solid var(--stx-line);
}
.stx-slad-glowa .tytul {
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
	color: var(--stx-text);
}
.stx-slad-glowa .meta {
	margin-left: auto;
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	font-variant-numeric: tabular-nums;
}
.stx-slad-tresc {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: 12px 16px 18px;
}

.stx-slad-pusto {
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	line-height: 1.55;
}
.stx-slad-pusto .lead { margin: 0 0 10px; }
.stx-slad-pusto .plan { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.stx-slad-pusto .plan li { color: var(--stx-text-soft); }

/* ---- Tura śladu ------------------------------------------------------- */

.stx-slad-tura {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--stx-line-soft);
}
.stx-slad-tura:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.tura-glowa {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
	padding: 0 0 8px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--stx-text-muted);
}
.tura-glowa:hover { color: var(--stx-primary); }
.tura-pytanie {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--stx-fs-micro);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tura-szewron {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 2px;
	transition: transform var(--stx-dur-fast) var(--stx-ease);
}
.stx-slad-tura:not(.otwarta) .szyna { display: none; }
.stx-slad-tura:not(.otwarta) .tura-szewron { transform: rotate(-90deg); }

/* Przyjście z paska stanu w rozmowie: tura mignie, żeby było widać, która
   z kilku w kolumnie należy do klikniętej odpowiedzi. */
.stx-slad-tura.blysk { animation: stx-slad-blysk 1.2s var(--stx-ease); }
@keyframes stx-slad-blysk {
	0%, 100% { background: transparent; }
	15% { background: var(--stx-tint-primary); }
}

/* ---- Szyna kroków ---------------------------------------------------- */

/* Kreska z kulkami, jedna pod drugą: kolejność wykonania jest tu treścią,
   a nie ozdobą - to ona mówi, co z czego wynikło. */
.szyna { position: relative; padding-left: 15px; }
.szyna::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--stx-line);
}
.szyna .krok { position: relative; padding: 4px 0; }
.szyna .krok .kulka {
	position: absolute;
	left: -15px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--stx-line-weak);
	box-shadow: 0 0 0 2.5px var(--stx-surface);
}
/* Stan, nie kategoria: trwa (kolor marki), wykonany (neutralny), odrzucony
   (czerwony). Skill dostaje obrys zamiast czwartego koloru - w kolumnie obok
   wykresów IBCS każdy kolor więcej zabiera znaczenie kolorom na wykresie. */
.szyna .krok.stan-trwa .kulka { background: var(--stx-primary); animation: stx-slad-puls 1.3s var(--stx-ease) infinite; }
.szyna .krok.stan-ok .kulka { background: var(--stx-neutral); }
.szyna .krok.stan-info .kulka { background: var(--stx-line-weak); }
.szyna .krok.stan-blad .kulka { background: var(--stx-bad); }
.szyna .krok.stan-skill .kulka {
	width: 8px;
	height: 8px;
	background: var(--stx-surface);
	border: 1.5px solid var(--stx-neutral);
}
@keyframes stx-slad-puls {
	0%, 100% { box-shadow: 0 0 0 2.5px var(--stx-surface), 0 0 0 2.5px transparent; }
	50% { box-shadow: 0 0 0 2.5px var(--stx-surface), 0 0 0 5px var(--stx-tint-strong); }
}

.szyna .krok .tresc { min-width: 0; }
.szyna .krok .t {
	font-size: var(--stx-fs-cell);
	line-height: 1.35;
	color: var(--stx-text);
}
.szyna .krok.stan-ok .t { color: var(--stx-text-muted); }
.szyna .krok .d {
	margin-top: 2px;
	font-size: var(--stx-fs-num);
	line-height: 1.45;
	color: var(--stx-text-soft);
}
.szyna .krok .t code,
.szyna .krok .d code {
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	color: var(--stx-text);
}
.szyna .krok.klikalny { cursor: pointer; }

/* Zapytanie w śladzie pokazuje POCZĄTEK tekstu, ścięty gradientem: pełne SQL
   w wąskiej kolumnie zepchnęłoby resztę analizy poniżej ekranu. Całość
   rozwija przycisk pod spodem. */
.szyna .krok pre.sql {
	margin: 6px 0 0;
	padding: 7px 9px;
	max-height: 92px;
	overflow: hidden;
	border-radius: var(--stx-radius-chip);
	background: var(--stx-surface-sunken);
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--stx-text-muted);
	mask-image: linear-gradient(to bottom, #000 62px, transparent 92px);
}
.szyna .krok pre.sql b { font-weight: 600; color: var(--stx-text); }

.krok-wiecej {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--stx-fs-num);
	color: var(--stx-primary);
	cursor: pointer;
}
.krok-wiecej:hover { text-decoration: underline; }

/* ---- Okno zapytania (cel, całe SQL, wynik) --------------------------- */

/* Zapytanie i jego wynik otwierają się w oknie, a nie w śladzie: w kolumnie
   szerokiej na 330 px SQL łamie się co kilka słów, a z tabeli widać dwie
   kolumny. Okno daje pełną szerokość i nie odbiera jej rozmowie. */
.stx-zapytanie .zap-cel {
	font-size: var(--stx-fs-body);
	color: var(--stx-text);
	margin-bottom: 10px;
}
.stx-zapytanie pre.sql.pelne {
	max-height: none;
	mask-image: none;
	margin: 0;
	padding: 12px 14px;
	background: var(--stx-surface-sunken);
	border-radius: var(--stx-radius-card);
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--stx-text-muted);
}
.stx-zapytanie pre.sql.pelne b { font-weight: 600; color: var(--stx-text); }
.stx-zapytanie .zap-nota {
	margin-top: 10px;
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-soft);
}
/* Wynik przewija się W SOBIE - okno ma zostać na swoim miejscu, nawet gdy
   zapytanie oddało dwadzieścia kolumn i dwieście wierszy. */
.stx-zapytanie .zap-tabela {
	margin-top: 4px;
	max-height: 52vh;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.stx-zapytanie .zap-tabela thead th {
	position: sticky;
	top: 0;
	background: var(--stx-surface);
	z-index: 1;
}

table.podglad-tab {
	width: 100%;
	margin-top: 7px;
	border-collapse: collapse;
	font-size: var(--stx-fs-num);
}
.podglad-tab th {
	padding: 0 6px 3px 0;
	border-bottom: 1px solid var(--stx-line);
	font-size: var(--stx-fs-label);
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-muted);
	white-space: nowrap;
}
.podglad-tab td {
	padding: 3px 6px 3px 0;
	border-bottom: 1px solid var(--stx-line-soft);
	color: var(--stx-text);
}
/* Liczby w podglądzie stoją w kolumnie, krojem maszynowym: to surowy wynik
   zapytania, więc ma się czytać jak wynik, a nie jak tabela raportu. */
.podglad-tab td.num {
	text-align: right;
	font-family: var(--stx-font-mono);
	font-variant-numeric: tabular-nums;
}

/* ---- Wątki sub-agentów ----------------------------------------------- */

/* Wątek jest osobną sesją, więc jego kroki schodzą o poziom niżej - wplecione
   w szynę główną kłamałyby o tym, że główny agent je widział. */
.szyna-watku {
	margin: 2px 0 6px 2px;
	padding-left: 13px;
	border-left: 1px dashed var(--stx-line);
}
.szyna-watku::before { display: none; }
.szyna-watku.zwinieta { display: none; }
.szyna-watku .krok .kulka { left: -13px; }

.watek-raport {
	margin: 5px 0 2px;
	padding: 8px 9px;
	border-radius: var(--stx-radius-chip);
	background: var(--stx-tint-neutral);
	font-size: var(--stx-fs-num);
}
.watek-raport.blad { background: var(--stx-tint-bad); }
.wr-lab {
	margin-bottom: 4px;
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-muted);
}
.wr-tresc { line-height: 1.5; color: var(--stx-text); white-space: pre-wrap; }
.wr-wyniki { margin-top: 5px; color: var(--stx-text-soft); }
.wr-wyniki code { font-family: var(--stx-font-mono); }

/* ---- Rachunek kontekstu ---------------------------------------------- */

/* Pasek stoi POZA obszarem przewijania śladu: rachunek ma być widoczny także
   wtedy, gdy analiza ma kilkanaście kroków i ślad jest przewinięty na dół. */
.stx-slad-rachunek {
	flex: 0 0 auto;
	border-top: 1px solid var(--stx-line);
	background: var(--stx-surface);
	border-radius: 0 0 var(--stx-radius-card) var(--stx-radius-card);
}
.sr-glowa {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px var(--stx-card-pad);
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	color: var(--stx-text-muted);
}
.sr-glowa:hover { color: var(--stx-primary); }
.sr-lab {
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
}
.sr-val {
	margin-left: auto;
	font-size: var(--stx-fs-micro);
	font-variant-numeric: tabular-nums;
	color: var(--stx-text);
}
.sr-szewron {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	transition: transform var(--stx-dur-fast) var(--stx-ease);
}
.sr-glowa[aria-expanded="true"] .sr-szewron { transform: rotate(180deg); }
.sr-tresc { padding: 0 var(--stx-card-pad) 13px; }
.sr-tresc[hidden] { display: none; }
.sr-sklad { font-size: var(--stx-fs-num); line-height: 1.5; color: var(--stx-text-muted); }
.sr-skille { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.sr-skille:empty { display: none; }
.sr-chip {
	padding: 2px 7px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-pill);
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-muted);
}
.sr-tab {
	margin-top: 9px;
	display: grid;
	grid-template-columns: auto repeat(3, minmax(40px, 1fr));
	gap: 4px 8px;
	align-items: baseline;
}
.sr-th {
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-soft);
	text-align: right;
}
.sr-lab2 { font-size: var(--stx-fs-num); color: var(--stx-text-muted); }
.sr-num {
	font-size: var(--stx-fs-num);
	text-align: right;
	font-family: var(--stx-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--stx-text);
}

/* ---- Startery ---------------------------------------------------------- */

/* Pigułki nad polem pytania. Są tam, gdzie wzrok i tak jest w chwili pisania,
   i zostają po pierwszej odpowiedzi - karta na środku pustej rozmowy znikała
   z pierwszym pytaniem i nigdy nie wracała. */
.stx-startery {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 9px;
}
.stx-starter {
	padding: 5px 11px;
	border: 1px solid var(--stx-line);
	border-radius: 999px;
	background: var(--stx-surface);
	color: var(--stx-text-muted);
	font: inherit;
	font-size: var(--stx-fs-micro);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-starter:hover { border-color: var(--stx-primary); color: var(--stx-primary); }

/* ---- Metryczka --------------------------------------------------------- */

.stx-agent-meta {
	padding: 10px var(--stx-card-pad);
	border-bottom: 1px solid var(--stx-line);
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
}

/* Rząd metryczki jest stały - rozwinięcie dokłada wiersz pod nim, zamiast
   zawijać go i przesuwać „Nową rozmowę". */
.stx-agent-meta .pasek {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 28px;
}
.stx-agent-meta .stan { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stx-agent-meta .stan b { color: var(--stx-text); font-weight: 600; }
.stx-agent-meta .sep { color: var(--stx-line); }
.stx-agent-meta .rosnie { flex: 1 1 auto; }

.stx-agent-meta .stx-btn {
	height: 28px;
	padding: 0 10px;
	font-size: var(--stx-fs-label-sm);
	flex: 0 0 auto;
}

/* Przełącznik jest odnośnikiem, nie przyciskiem akcji: odsłania opis, a nie
   zmienia stanu danych. */
.stx-link-przelacz {
	flex: 0 0 auto;
	padding: 2px 0;
	border: 0;
	background: none;
	color: var(--stx-primary);
	font-size: var(--stx-fs-label-sm);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	cursor: pointer;
}
/* Strzałka w bok mówiła „rozwinie się tutaj". Po przeniesieniu treści do okna
   znak musi zapowiadać okno, a nie rozwinięcie - stąd wielokropek. */
.stx-link-przelacz::after { content: ' ▸'; }
.stx-link-przelacz[aria-expanded='true']::after { content: ' ▾'; }
.stx-link-przelacz[aria-haspopup='dialog']::after { content: '…'; }
.stx-link-przelacz:focus-visible { outline: 2px solid var(--stx-primary); outline-offset: 2px; border-radius: 3px; }

/* ---- Okno „Skąd te dane" ---------------------------------------------- */

/* Źródło, miara i założenia rachunku czyta się RAZ - przy pierwszym kontakcie
   z agentem. Rozwijane pod paskiem zabierało pół wysokości rozmowy i spychało
   odpowiedź poza ekran; okno pokazuje to samo, tylko wtedy, gdy ktoś pyta. */
.stx-skad {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px 26px;
	font-size: var(--stx-fs-body);
	line-height: 1.5;
	color: var(--stx-text-muted);
}
.stx-skad .skad-blok { min-width: 0; }
.stx-skad h3 {
	margin: 0 0 7px;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-soft);
}
.stx-skad p { margin: 0 0 8px; }
.stx-skad p:last-child { margin-bottom: 0; }
.skad-mocne {
	margin-bottom: 5px;
	font-size: var(--stx-fs-card-title);
	font-weight: 600;
	color: var(--stx-text);
	overflow-wrap: anywhere;
}

/* Trzynaście nazw tabel w jednym zdaniu czytało się jak lista błędów -
   pigułki rozkładają je na siatkę, w której widać, ile ich jest. */
.skad-tabele { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.skad-tabele code {
	padding: 2px 7px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-chip);
	background: var(--stx-surface-sunken);
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	color: var(--stx-text);
}
.skad-nota { font-size: var(--stx-fs-micro); color: var(--stx-text-soft); }

/* Wzór miary stoi w ramce, bo to definicja, a nie zdanie o niej: ktoś, kto
   sprawdza liczbę agenta, przepisuje go do własnego arkusza. */
.skad-wzor {
	margin-bottom: 8px;
	padding: 9px 11px;
	border-left: 2px solid var(--stx-line-primary);
	border-radius: 0 var(--stx-radius-chip) var(--stx-radius-chip) 0;
	background: var(--stx-surface-sunken);
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	line-height: 1.55;
	color: var(--stx-text);
}
.skad-teraz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	border-radius: var(--stx-radius-chip);
	background: var(--stx-tint-primary);
	font-size: var(--stx-fs-micro);
}
.skad-teraz b { color: var(--stx-text); font-weight: 600; }
.skad-teraz .sep { color: var(--stx-line-weak); }

/* Założenia idą przez całą szerokość okna: każde jest decyzją metodyczną,
   od której zależy liczba, więc żadne nie może wypaść poniżej zgięcia. */
.skad-zalozenia { display: grid; gap: 10px; }
.stx-skad .skad-blok:has(.skad-zalozenia) { grid-column: 1 / -1; }
.skad-zal {
	padding-left: 11px;
	border-left: 2px solid var(--stx-line);
}
.skad-zal .nazwa { font-weight: 600; color: var(--stx-text); }
.skad-zal .tresc { font-size: var(--stx-fs-micro); }

/* ---- Karta rozmowy ----------------------------------------------------- */

.stx-agent {
	display: flex;
	flex-direction: column;
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	min-height: 0;
}

/* To ten element przewija się przy długiej rozmowie - nie strona. Dzięki
   temu metryczka zostaje nad rozmową, a pole pytania pod nią, zawsze w tym
   samym miejscu ekranu. */
.stx-agent-rozmowa {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: var(--stx-card-pad);
	font-size: var(--stx-fs-body);
}

.stx-agent-stopka {
	flex: 0 0 auto;
	padding: 12px var(--stx-card-pad) 14px;
	border-top: 1px solid var(--stx-line);
	background: var(--stx-surface);
	border-radius: 0 0 var(--stx-radius-card) var(--stx-radius-card);
}

.stx-prompt { display: flex; gap: 8px; align-items: flex-end; }
.stx-prompt-pole {
	flex: 1 1 auto;
	min-height: 38px;
	max-height: 180px;
	padding: 9px 11px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text);
	font: inherit;
	font-size: var(--stx-fs-body);
	resize: none;
	/* Pole rośnie z treścią, więc pasek przewijania byłby pustym ozdobnikiem.
	   Włącza go dopiero JS, gdy tekst przerośnie sufit wysokości. */
	overflow-y: hidden;
	scrollbar-width: thin;
}
.stx-prompt-pole:focus { border-color: var(--stx-primary); box-shadow: var(--stx-ring); outline: none; }
.stx-prompt .stx-btn { height: 38px; flex: 0 0 auto; }
.stx-prompt .stx-btn svg { width: 15px; height: 15px; }
.stx-prompt-nota { margin-top: 7px; font-size: var(--stx-fs-label-sm); color: var(--stx-text-soft); }

/* W trakcie liczenia pole zostaje aktywne - pytanie dopisane w tej chwili
   trafi do następnej tury, zamiast zginąć razem z zamiarem. */
.stx-agent.pracuje .stx-prompt-pole { opacity: .85; }

/* ---- Wnętrze rozmowy --------------------------------------------------- */

.stx-agent-powitanie p { margin: 0 0 14px; color: var(--stx-text-muted); }

.stx-podpowiedzi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 8px;
}

/* Podpowiedź jest pytaniem do kliknięcia, nie przyciskiem akcji - stąd
   wyrównanie do lewej i tekst w pełnym brzmieniu, bez skracania. */
.stx-podpowiedz {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text);
	font-size: var(--stx-fs-cell);
	line-height: 1.45;
	cursor: pointer;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), background var(--stx-dur-fast) var(--stx-ease);
}
.stx-podpowiedz:hover { border-color: var(--stx-line-primary); background: var(--stx-tint-primary); }

/* Pytanie użytkownika.
   Pasek pastelowego tła na 1080 px nie czytał się jako „to zapytałem ja" -
   czytał się jako jeszcze jedno pudełko. Tożsamość niesie teraz PIONOWA
   KRESKA w barwie marki i wąska miara wiersza: wypowiedź jest krótka
   i cytowana, więc ma szerokość cytatu, nie szerokość strony.

   To pierwszy głos dwugłosu: kreska marki = użytkownik, kreska szara
   (ślad i dowód niżej) = agent. Jedno urządzenie, dwie barwy, zero ramek. */
.stx-agent-pytanie {
	max-width: 62ch;
	margin: 34px 0 16px;
	padding: 1px 0 1px 14px;
	border-left: 2px solid var(--stx-primary);
	color: var(--stx-text);
	font-size: var(--stx-fs-card-title);
	font-weight: 500;
	line-height: 1.45;
}
.stx-agent-pytanie:first-child { margin-top: 0; }

/* Pasek stanu tury: jedno zdanie o tym, co się właśnie dzieje, i licznik
   czasu. Kroki poszły do śladu w kolumnie obok - tutaj zostaje odpowiedź na
   pytanie „czy jeszcze warto czekać". Kliknięcie przewija ślad do tej tury.

   Wcięcie zgadza się z wcięciem dowodu niżej - to jedna oś, nie dwie. */
.stx-agent-stan {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 2px 0 16px;
	padding: 7px 11px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-chip);
	background: var(--stx-surface);
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
}
.stx-agent-stan.klikalny { cursor: pointer; }
.stx-agent-stan.klikalny:hover { border-color: var(--stx-line-primary); color: var(--stx-primary); }
.stx-agent-stan .etykieta { flex: 1 1 auto; min-width: 0; }
.stx-agent-stan .czas {
	flex: 0 0 auto;
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	font-variant-numeric: tabular-nums;
	color: var(--stx-text-soft);
}

/* Kółko, nie pasek postępu: analiza nie ma znanego końca, więc pasek
   dobiegający do krawędzi obiecywałby coś, czego nie wiemy. */
.stx-agent-stan .kolko {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--stx-line);
	border-top-color: var(--stx-primary);
	animation: stx-stan-obrot 0.8s linear infinite;
}
.stx-agent-stan.gotowy .kolko,
.stx-agent-stan.blad .kolko {
	border: 0;
	animation: none;
	background: var(--stx-neutral);
	width: 8px;
	height: 8px;
	margin: 0 2px;
}
.stx-agent-stan.blad { border-color: color-mix(in srgb, var(--stx-bad) 35%, var(--stx-line)); }
.stx-agent-stan.blad .kolko { background: var(--stx-bad); }
@keyframes stx-stan-obrot {
	to { transform: rotate(360deg); }
}

/* ---- Odpowiedź: TEZA · DOWÓD · PRZYPIS · DALEJ ------------------------- */

/* Odpowiedź nie jest listą bloków, tylko notatką analityczną o czterech
   rejestrach. Rejestry różni POŁOŻENIE i STOPIEŃ PISMA, nie ramki:
   teza stoi przy marginesie i jest największa, dowód jest wcięty na oś,
   przypis i propozycje wracają do marginesu już ściszone.

   Ramek tu nie ma celowo. Poprzedni układ dawał każdemu kawałkowi własne
   pudełko i właśnie to zrównywało je wagą - pudełko wokół tabeli mówi
   „osobna rzecz", a tabela jest tu częścią jednego wywodu. */
.stx-agent-odpowiedz { margin-bottom: 34px; }

/* TEZA - zdanie, które się cytuje.
   Waga 400, nie 700: pogrubienie niesie tu TYLKO liczbę, bo to liczba jest
   odpowiedzią. Zdanie wokół niej ma ją podać, a nie z nią konkurować. */
.stx-odp-teza {
	max-width: 62ch;
	margin: 0 0 18px;
	font-size: var(--stx-fs-section-title);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.004em;
	color: var(--stx-text);
	text-wrap: pretty;
}
/* Liczba w tezie przechodzi na krój nagłówkowy. Archivo jest węższy
   i bardziej konstrukcyjny od Intera, więc kwota wychodzi ze zdania
   bez podnoszenia głosu - i jest to ten sam krój, którym portal pisze
   wartości kafli KPI, więc liczba z rozmowy i liczba z raportu wyglądają
   na jedną liczbę. */
.stx-odp-teza strong {
	font-family: var(--stx-font-head);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* DOWÓD - wszystko, co tezę utrzymuje, zawieszone na jednej osi.
   Oś jest tą samą kreską co ślad kroków powyżej: razem czytają się jako
   jedno pasmo pracy agenta pod jego własnym zdaniem. */
.stx-odp-dowod {
	padding-left: 14px;
	/* --stx-line wystarcza na ramkę karty, ale 2 px tej barwy na bieli jest
	   praktycznie niewidoczne, a niewidoczna oś zostawia samo wcięcie - czyli
	   wygląda na pomyłkę. Kreska liczona z tekstu widać ją też w ciemnym. */
	border-left: 2px solid color-mix(in srgb, var(--stx-text) 13%, transparent);
}
/* Rytm pionowy metodą „sowy": zerujemy margines KAŻDEGO dziecka (figure ma
   własny od przeglądarki), a odstęp dokładamy dopiero między sąsiadami.
   Obie reguły mają tę samą specyficzność, więc rozstrzyga kolejność - i to
   jest tu zamierzone, a nie przypadkowe. */
.stx-odp-dowod > * { margin: 0; }
.stx-odp-dowod > * + * { margin-top: 20px; }

/* Kafel w odpowiedzi nie rozciąga się na całą szerokość: jeden wynik
   rozlany na 1080 px wygląda jak baner, a nie jak liczba. */
.stx-odp .stx-siatka {
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(220px, 268px));
	justify-content: start;
}
.stx-odp .stx-karta { padding: 16px 18px; }

.stx-odp-proza { line-height: 1.5; max-width: 76ch; }
.stx-odp-proza > :first-child { margin-top: 0; }
.stx-odp-proza > :last-child { margin-bottom: 0; }
.stx-odp-proza p { margin: 0 0 10px; }
.stx-odp-proza ul,
.stx-odp-proza ol { margin: 0 0 10px; padding-left: 20px; }
.stx-odp-proza li { margin-bottom: 4px; }
.stx-odp-proza h1,
.stx-odp-proza h2,
.stx-odp-proza h3 {
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
	margin: 16px 0 6px;
}
.stx-odp-proza code {
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-cell);
	background: var(--stx-surface-sunken);
	border-radius: var(--stx-radius-chip);
	padding: 1px 4px;
}
/* Blok kodu w odpowiedzi to prawie zawsze SQL, którym agent liczył -
   przydatny, ale drugorzędny wobec wyniku, więc drobny i stonowany. */
.stx-odp-proza pre {
	overflow-x: auto;
	padding: 10px 12px;
	border-radius: var(--stx-radius-chip);
	background: var(--stx-surface-sunken);
	font-size: var(--stx-fs-micro);
	margin: 0 0 10px;
}

/* Proza, która przepisała tabelę wierszami, złożona w jedną linię.
   Treści nie usuwamy - ranking bywa potrzebny do wklejenia w notatkę -
   ale pięć punktów listy obok tabeli, z której pochodzą, to pięć razy
   to samo. W jednym wierszu drobnym pismem widać, że to streszczenie. */
.stx-odp-streszczenie {
	margin: 0 0 10px;
	font-size: var(--stx-fs-micro);
	line-height: 1.5;
	color: var(--stx-text-soft);
}
.stx-odp-streszczenie span + span::before {
	content: '·';
	margin: 0 7px;
	color: var(--stx-line-weak);
}

/* ---- Dowód: tabela i wykres ------------------------------------------- */

/* Blok dowodu nie ma karty ani ramki - wyróżnia go tytuł i linia nagłówka
   tabeli. Karta wokół tabeli w notatce analitycznej to pudełko w pudełku. */
.stx-dowod-tytul {
	margin-bottom: 9px;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}
.stx-dowod-stopka {
	margin-top: 7px;
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-soft);
}

/* Tabela wypełnia szerokość bloku, ale luz dostaje WYŁĄCZNIE kolumna toru.
   Kolumny opisowe i liczbowe mierzą się treścią - rozpychane, otwierały
   między „Nazwą" a pierwszą liczbą dwustupikselową dziurę i wiersz rozpadał
   się wzrokowo na dwie osobne tabele. Oddanie nadmiaru torowi rozwiązuje
   oba problemy naraz: tabela dochodzi do krawędzi, a szerszy tor to po
   prostu dokładniejszy wykres odchyleń. */
.stx-dowod-przewijanie {
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
}
table.stx-dowod-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--stx-fs-cell);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Nagłówek dwupiętrowy: CO jest mierzone, a pod spodem W CZYM albo KIEDY.
   Dzięki temu „Koszt 2025" obok „Koszt 2024" czyta się raz jako „Koszt",
   a rok rozstrzyga niżej, drobnym pismem - zamiast dwa razy krzyczeć
   wersalikiem to samo słowo. */
table.stx-dowod-tabela th {
	padding: 0 0 7px;
	text-align: left;
	vertical-align: bottom;
	white-space: nowrap;
	border-bottom: 1px solid color-mix(in srgb, var(--stx-text) 65%, transparent);
}
table.stx-dowod-tabela th .co {
	display: block;
	font-size: var(--stx-fs-label);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	color: var(--stx-text);
}
table.stx-dowod-tabela th .w-czym {
	display: block;
	margin-top: 2px;
	font-size: var(--stx-fs-tiny);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stx-text-soft);
}
table.stx-dowod-tabela th.liczba .co,
table.stx-dowod-tabela th.liczba .w-czym { text-align: right; }
/* Nagłówek kolumny z torem siada nad SAMĄ liczbą, nie nad liczbą plus torem
   - inaczej wisiałby w powietrzu nad pustym paskiem. */
/* Nagłówek kolumny z torem ma stać nad LICZBĄ, a nie nad słupkiem. Dopóki
   tor miał stałe 64 px, wystarczał stały margines; teraz tor rośnie razem
   z kolumną, więc nagłówek rezerwuje miejsce pustym bliźniakiem toru -
   te same `flex` i `min-width`, więc napis kończy się dokładnie tam, gdzie
   kończy się liczba pod nim. */
table.stx-dowod-tabela th.z-torem .co,
table.stx-dowod-tabela th.z-torem .w-czym {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 10px;
}
table.stx-dowod-tabela th.z-torem .co::after,
table.stx-dowod-tabela th.z-torem .w-czym::after {
	content: '';
	flex: 1 1 auto;
	min-width: 64px;
}

table.stx-dowod-tabela td {
	padding: 6px 0;
	border-bottom: 1px solid var(--stx-line-soft);
	color: var(--stx-text);
}
table.stx-dowod-tabela tbody tr:last-child td { border-bottom: 0; }
table.stx-dowod-tabela th + th,
table.stx-dowod-tabela td + td { padding-left: 26px; }
table.stx-dowod-tabela td.liczba { text-align: right; white-space: nowrap; }
table.stx-dowod-tabela tbody tr:hover td { background: var(--stx-row-hover); }

/* TOR PORÓWNAWCZY w kolumnie odchylenia - jedyne ryzyko tego ekranu.
   To nie jest ozdoba tabeli, tylko wykres odchyleń, który notacja IBCS
   i tak każe postawić obok wyniku - wpuszczony do środka, żeby nie wodzić
   wzrokiem między dwoma obiektami. Skala jest wspólna dla całej kolumny,
   zero jest wspólne, a nośnikiem jest DŁUGOŚĆ i STRONA zera.

   Barwy oceny tu NIE MA: nazwa kolumny nie mówi, czy wzrost tej miary jest
   dobry, a zgadnięta zieleń kłamałaby głośniej, niż milczy jej brak. */
table.stx-dowod-tabela .num { display: inline-block; vertical-align: middle; }
/* Szerokości kolumn zostają AUTOMATYCZNE. Dwie próby ręcznego sterowania
   nimi skończyły się tabelą na pół miliona pikseli: `width: 100%` na
   komórce toru podbija min-content całej tabeli, a `width: 1px` na
   pozostałych komórkach robi to samo od drugiej strony. Układ `auto`
   rozdziela luz sam, a tor i tak zabiera wszystko, co zostanie w JEGO
   kolumnie - i to wystarcza, żeby tabela dochodziła do krawędzi. */
table.stx-dowod-tabela td.z-torem .para {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
table.stx-dowod-tabela td.z-torem .para .num { flex: 0 0 auto; }
table.stx-dowod-tabela .tor {
	position: relative;
	display: inline-block;
	flex: 1 1 auto;
	min-width: 64px;
	height: 8px;
	vertical-align: middle;
	background: var(--stx-bar-track);
	border-radius: 1px;
}
table.stx-dowod-tabela .tor i {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--udzial);
	background: var(--stx-bar-soft);
	border-radius: 1px;
}
table.stx-dowod-tabela .tor i.dodatni { left: 0; }
table.stx-dowod-tabela .tor i.ujemny { right: 0; }
/* Kolumna z wartościami po obu stronach zera dostaje oś pośrodku toru;
   kolumna samych dodatnich nie dostaje jej wcale, bo lewa krawędź toru
   JEST zerem i druga kreska tylko by ją podrabiała. */
table.stx-dowod-tabela .tor.obustronny::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -1px;
	bottom: -1px;
	width: 1px;
	background: var(--stx-line-weak);
}
table.stx-dowod-tabela .tor.obustronny i.dodatni { left: 50%; width: calc(var(--udzial) / 2); }
table.stx-dowod-tabela .tor.obustronny i.ujemny { right: 50%; width: calc(var(--udzial) / 2); }

/* ---- Przypis metodyczny ----------------------------------------------- */

/* Zakres miary, czego dane nie rozstrzygają. Ważne i ciche naraz - da się
   to pogodzić tylko położeniem: stoi pod dowodem, pisane stopniem przypisu,
   bez tła i bez ramki. Kto odpowiedź sprawdza, ten tu zejdzie; kto cytuje
   liczbę, temu to nie przesłoni liczby. */
/* Kreska nad przypisem jest KRÓTKA, jak separator przypisu w składzie
   książkowym. Linia na całą szerokość kolumny dzieliłaby stronę na dwie
   części - a przypis nie jest drugą częścią, tylko marginesem pierwszej. */
.stx-odp-przypisy {
	max-width: 80ch;
	margin-top: 22px;
	padding-top: 11px;
	background: linear-gradient(to right, var(--stx-line) 0 110px, transparent 110px) top left / 100% 1px no-repeat;
}
.stx-odp-przypisy > * + * { margin-top: 7px; }
.stx-przypis {
	font-size: var(--stx-fs-micro);
	line-height: 1.45;
	color: var(--stx-text-soft);
}
.stx-przypis .co {
	font-size: var(--stx-fs-label-sm);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}
.stx-przypis .co::after { content: ' · '; letter-spacing: 0; }
.stx-odp-przypisy .stx-nota {
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	color: var(--stx-text-soft);
}

/* Pytania dalsze: wąskie pigułki, bo to skrót, a nie wezwanie do działania. */
.stx-odp-dalej { margin-top: 22px; }
.stx-propozycje { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.stx-propozycje-wstep {
	margin-right: 3px;
	font-size: var(--stx-fs-label-sm);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-soft);
}
.stx-chip {
	padding: 6px 12px;
	border: 1px solid var(--stx-line);
	border-radius: 999px;
	background: var(--stx-surface);
	color: var(--stx-text-muted);
	font-size: var(--stx-fs-label-sm);
	cursor: pointer;
	transition: border-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-chip:hover { border-color: var(--stx-line-primary); color: var(--stx-primary); }

.stx-agent-blad {
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid var(--stx-line);
	border-left: 3px solid var(--stx-bad);
	border-radius: 0 var(--stx-radius-chip) var(--stx-radius-chip) 0;
	background: var(--stx-tint-bad);
	font-size: var(--stx-fs-cell);
}
.stx-agent-blad b { display: block; margin-bottom: 3px; }

@media (max-width: 760px) {
	.stx-agent-meta { font-size: var(--stx-fs-label-sm); }
	.stx-podpowiedzi { grid-template-columns: 1fr; }
	/* Na telefonie oś dowodu zwęża się do kreski z minimalnym wcięciem -
	   14 px wcięcia przy 390 px szerokości to już zabrana kolumna tabeli. */
	.stx-odp-dowod { padding-left: 10px; }
	.stx-agent-pytanie { padding-left: 10px; font-size: var(--stx-fs-body); }
	.stx-odp-teza { font-size: var(--stx-fs-card-title); }
	table.stx-dowod-tabela th + th,
	table.stx-dowod-tabela td + td { padding-left: 16px; }
	/* Na telefonie tor schodzi do kreski: tabela i tak nie ma luzu do oddania,
	   a 64 px rezerwy zabierałoby kolumnę liczb. Nagłówek idzie za nim sam,
	   bo jego pusty bliźniak ma tę samą miarę. */
	table.stx-dowod-tabela .tor,
	table.stx-dowod-tabela th.z-torem .co::after,
	table.stx-dowod-tabela th.z-torem .w-czym::after { min-width: 44px; }
}

/* Poniżej progu dwie kolumny obok siebie nie mają sensu, a sztywna wysokość
   okna zamieniłaby rozmowę w okienko na parę linii. Wracamy do przewijania
   całej strony. */
@media (max-width: 1180px) {
	body[data-strona="agent"],
	body[data-strona="agent-portal"] { overflow: visible; }
	body[data-strona="agent"] .stx-strona,
	body[data-strona="agent-portal"] .stx-strona {
		height: auto;
		padding-bottom: 72px;
		display: block;
		overflow: visible;
	}
	.stx-agent-uklad { grid-template-columns: minmax(0, 1fr); }
	.stx-agent-rozmowa { overflow-y: visible; min-height: 220px; }
	/* Ślad schodzi POD rozmowę i dostaje sufit wysokości: w jednej kolumnie
	   kilkanaście kroków odepchnęłoby pole pytania na drugi ekran. */
	.stx-slad { max-height: 420px; }
	.stx-slad-tresc { overflow-y: auto; }
	/* Panel rozmów otwierany z prawej krawędzi mieści się wtedy w ekranie
	   tylko wyrównany do lewej - przycisk stoi blisko środka. */
	.stx-rozmowy-panel { right: auto; left: 0; }
}

/* ====================================================================== */
/* 7. EKRAN STARTOWY                                                      */
/* ====================================================================== */

.stx-boot {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: var(--stx-page);
	transition: opacity var(--stx-dur) var(--stx-ease);
}
.stx-boot.znika { opacity: 0; pointer-events: none; }
.stx-boot-tresc { text-align: center; max-width: 320px; }
.stx-boot .pasek {
	height: 3px;
	margin: 16px 0 10px;
	border-radius: var(--stx-radius-pill);
	background: var(--stx-bar-track);
	overflow: hidden;
}
.stx-boot .pasek i {
	display: block;
	height: 100%;
	width: 36%;
	border-radius: var(--stx-radius-pill);
	background: var(--stx-primary);
	animation: stx-boot-biegnie 1.1s var(--stx-ease) infinite;
}
@keyframes stx-boot-biegnie {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}
.stx-boot .komunikat { font-size: var(--stx-fs-micro); color: var(--stx-text-muted); }

/* ---- Logowanie -------------------------------------------------------- */
/* Formularz wchodzi w miejsce paska postępu: ten sam ekran, ten sam znak.
   Logowanie ma być pierwszym ekranem produktu, nie przerwą w jego pracy. */
.stx-boot-tresc.logowanie { max-width: 340px; width: 100%; text-align: left; }
.stx-boot-tresc.logowanie .stx-wordmark { justify-content: flex-start; margin-bottom: 22px; }
.stx-log {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-card);
	background: var(--stx-surface);
	box-shadow: var(--stx-shadow-pop);
}
.stx-log-lead {
	margin: 0;
	font-size: var(--stx-fs-micro);
	line-height: 1.5;
	color: var(--stx-text-muted);
}
.stx-log-pole { display: flex; flex-direction: column; gap: 5px; }
.stx-log-pole span {
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-soft);
}
.stx-log-pole input {
	height: var(--stx-control-h);
	padding: 0 11px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-page);
	font: inherit;
	font-size: var(--stx-fs-body);
	color: var(--stx-text);
	outline: none;
}
.stx-log-pole input:focus { border-color: var(--stx-primary); box-shadow: var(--stx-ring); }
/* Pole rysuje pierścień samo; globalna reguła dołożyłaby drugi. */
.stx-log-pole input:focus-visible { box-shadow: var(--stx-ring); }
.stx-log-blad {
	margin: 0;
	min-height: 1em;
	font-size: var(--stx-fs-micro);
	color: var(--stx-bad);
}
.stx-log-blad:empty { display: none; }
.stx-log .stx-btn { justify-content: center; height: 38px; }

/* ====================================================================== */
/* 8. WĄSKI EKRAN                                                         */
/* ====================================================================== */

@media (max-width: 960px) {
	.stx-sidebar {
		transform: translateX(-100%);
		transition: transform var(--stx-dur) var(--stx-ease);
		box-shadow: var(--stx-shadow-fab);
	}
	body.menu-otwarte .stx-sidebar { transform: translateX(0); }
	.stx-main, body.menu-zwiniete .stx-main { margin-left: 0; }
	.stx-strona { padding: 18px 16px 72px; }
}

/* ====================================================================== */
/* 9. WEJŚCIE TREŚCI                                                      */
/*                                                                        */
/* Klasę `stx-wejscie` nakłada wyłącznie js/portal/ruch.js, więc bez JS   */
/* nic nie jest ukryte. Opóźnienie kaskady wchodzi zmienną, bo liczy je   */
/* ten sam moduł, który zna kolejność elementów w siatce.                 */
/* ====================================================================== */

.stx-wejscie {
	opacity: 0;
	transform: translateY(14px);
}
.stx-wejscie.widoczny {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--stx-dur-wejscie) var(--stx-ease) var(--r-opoznienie, 0ms),
		transform var(--stx-dur-wejscie) var(--stx-ease) var(--r-opoznienie, 0ms);
}

/* Słupek rośnie od linii zera. Punkt zaczepienia ustawia wykresy.js stylem
   inline, bo tylko on zna położenie zera w danej skali - słupek ujemny
   z zaczepieniem u dołu rósłby w odwrotną stronę. */
.stx-wejscie .w-rosnie {
	transform: scaleY(0);
	transform-box: view-box;
}
.stx-wejscie.widoczny .w-rosnie {
	transform: none;
	transition: transform var(--stx-dur-slupek) var(--stx-ease) var(--r-opoznienie, 0ms);
}

/* Pasek porównawczy w tabeli i rankingu wyjeżdża od swojej krawędzi
   zaczepienia: dodatni rośnie w prawo, ujemny w lewo - tak jak jest
   pozycjonowany. */
.stx-wejscie .tor i,
.stx-wejscie .stx-tor i {
	transform: scaleX(0);
	transform-origin: left center;
}
.stx-wejscie .tor i.ujemny { transform-origin: right center; }
.stx-wejscie.widoczny .tor i,
.stx-wejscie.widoczny .stx-tor i {
	transform: none;
	transition: transform var(--stx-dur-slupek) var(--stx-ease) var(--r-opoznienie, 0ms);
}

/* Druk i zrzut całej strony nie przewijają: wszystko, co czeka na swoją
   kolej, wyszłoby puste. Do druku odsłaniamy bezwarunkowo. */
/* ====================================================================== */
/* 10. DASHBOARDY - KAFLE Z ROZMOWY                                       */
/*                                                                        */
/* Agent odpowiada na pytanie raz; dashboard trzyma tę odpowiedź na stałe. */
/* Przejście między jednym a drugim to JEDEN przycisk przy dowodzie -      */
/* dlatego siedzi na nim, a nie w osobnym pasku narzędzi nad rozmową.      */
/* ====================================================================== */

/* ---- Akcja przy dowodzie ---------------------------------------------- */

.stx-dowod.ma-akcje { position: relative; }

/* Przycisk pojawia się dopiero przy najechaniu: w spoczynku dowód ma być
   dowodem, nie panelem sterowania. Fokus klawiaturą odsłania go tak samo,
   bo inaczej istniałby tylko dla myszy. */
.stx-do-dashboardu {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px 4px 7px;
	border: 1px solid var(--stx-line);
	border-radius: 999px;
	background: var(--stx-surface);
	color: var(--stx-text-muted);
	font: inherit;
	font-size: var(--stx-fs-label-sm);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--stx-dur-fast) var(--stx-ease),
	            border-color var(--stx-dur-fast) var(--stx-ease),
	            color var(--stx-dur-fast) var(--stx-ease);
}
.stx-do-dashboardu svg { width: 13px; height: 13px; }
.stx-dowod:hover .stx-do-dashboardu,
.stx-do-dashboardu:focus-visible { opacity: 1; }
.stx-do-dashboardu:hover { border-color: var(--stx-primary); color: var(--stx-primary); }

/* ---- Okno wyboru celu -------------------------------------------------- */

.stx-modal-tlo {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: color-mix(in srgb, var(--stx-text) 38%, transparent);
}
.stx-modal {
	width: min(100%, 460px);
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: var(--stx-surface);
	border-radius: var(--stx-radius-card);
	box-shadow: var(--stx-shadow-pop);
	overflow: hidden;
}
/* Okno z treścią do czytania (źródło, założenia) jest szersze niż okno
   z formularzem: definicja miary łamana co cztery słowa czyta się gorzej niż
   ta sama definicja w jednym wierszu. */
.stx-modal.szerokie { width: min(100%, 860px); }

.stx-modal-glowa {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px var(--stx-card-pad) 12px;
	border-bottom: 1px solid var(--stx-line);
}
.stx-modal-glowa h2 {
	margin: 0;
	flex: 1 1 auto;
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
}
.stx-modal-zamknij {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: var(--stx-radius-control);
	background: none;
	color: var(--stx-text-soft);
	cursor: pointer;
	transition: background var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-modal-zamknij:hover { background: var(--stx-hover-surface); color: var(--stx-text); }
.stx-modal-zamknij svg { width: 16px; height: 16px; }
.stx-modal-cialo { padding: 14px var(--stx-card-pad); overflow-y: auto; }

/* ---- Konfiguracja agenta ---------------------------------------------- */
/* Opis stoi przy KAŻDYM ustawieniu, bo każde z nich kupuje jedno kosztem
   drugiego: dokładność czasem, równoległość limitem zapytań na minutę. */
.stx-ust { display: flex; flex-direction: column; }
.stx-ust-wiersz {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 15px 0;
	border-bottom: 1px solid var(--stx-line-soft, var(--stx-line));
}
.stx-ust-wiersz:last-child { border-bottom: 0; }
.stx-ust-opis-blok { flex: 1 1 auto; min-width: 0; }
.stx-ust-tytul {
	font-family: var(--stx-font-head);
	font-size: var(--stx-fs-card-title);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-head);
	color: var(--stx-text);
}
.stx-ust-opis {
	margin-top: 4px;
	font-size: var(--stx-fs-micro);
	line-height: 1.5;
	color: var(--stx-text-muted);
	max-width: 62ch;
}
.stx-ust-kontrolka { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.stx-ust-model { display: flex; gap: 8px; }
.stx-ust-model .stx-select { min-width: 150px; }

.stx-ust-blok { padding: 15px 0; border-bottom: 1px solid var(--stx-line-soft, var(--stx-line)); }
.stx-ust-blok-tytul {
	font-size: var(--stx-fs-label);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-text-soft);
}
.stx-ust-blok-opis {
	margin-top: 5px;
	font-size: var(--stx-fs-micro);
	line-height: 1.5;
	color: var(--stx-text-muted);
	max-width: 68ch;
}
.stx-ust-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.stx-ust-pozycja {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 11px;
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface-sunken);
}
.stx-ust-pozycja .tekst { flex: 1 1 auto; min-width: 0; }
.stx-ust-pozycja .nazwa {
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-cell);
	color: var(--stx-text);
}
.stx-ust-pozycja .opis {
	margin-top: 2px;
	font-size: var(--stx-fs-micro);
	line-height: 1.45;
	color: var(--stx-text-muted);
}
.stx-ust-pozycja { align-items: flex-start; }
.stx-ust-pozycja .glowa { display: flex; align-items: center; gap: 7px; }
.stx-ust-pozycja .zrodlo {
	font-size: var(--stx-fs-label-sm);
	text-transform: uppercase;
	letter-spacing: var(--stx-tracking-label);
	color: var(--stx-primary);
}
.stx-ust-pozycja .stx-link-przelacz { margin-top: 5px; }
.stx-ust-pozycja .podglad[hidden] { display: none; }
/* Definicja jest tekstem do czytania, nie kodem do kopiowania - wąska miara
   i zawijanie, inaczej instrukcja na 80 znaków rozpycha okno. */
.stx-ust-podglad { margin-top: 8px; }
.stx-ust-podglad .fakty {
	margin-bottom: 6px;
	font-size: var(--stx-fs-label-sm);
	color: var(--stx-text-soft);
}
.stx-ust-podglad .tresc {
	margin: 0;
	max-height: 260px;
	overflow: auto;
	padding: 10px 11px;
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	border: 1px solid var(--stx-line);
	font-family: var(--stx-font-mono);
	font-size: var(--stx-fs-num);
	line-height: 1.55;
	color: var(--stx-text-muted);
	white-space: pre-wrap;
	word-break: break-word;
}
.stx-przelacznik.zablokowany { opacity: 0.45; cursor: not-allowed; }

/* Przełącznik: stan czytelny z kształtu, nie tylko z koloru. */
.stx-przelacznik { flex: 0 0 auto; display: inline-flex; cursor: pointer; }
.stx-przelacznik input { position: absolute; opacity: 0; width: 0; height: 0; }
.stx-przelacznik .tor {
	position: relative;
	width: 38px;
	height: 21px;
	border-radius: var(--stx-radius-pill);
	background: var(--stx-bar-track);
	transition: background var(--stx-dur-fast) var(--stx-ease);
}
.stx-przelacznik .tor::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--stx-surface);
	box-shadow: var(--stx-shadow-row);
	transition: transform var(--stx-dur-fast) var(--stx-ease);
}
.stx-przelacznik input:checked + .tor { background: var(--stx-primary); }
.stx-przelacznik input:checked + .tor::after { transform: translateX(17px); }
.stx-przelacznik input:focus-visible + .tor { box-shadow: var(--stx-ring); }
.stx-modal-pole { display: block; margin-bottom: 14px; }
.stx-modal-pole span {
	display: block;
	margin-bottom: 5px;
	font-size: var(--stx-fs-label);
	font-weight: 600;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}
.stx-modal-pole input,
.stx-modal-nazwa {
	width: 100%;
	height: var(--stx-control-h);
	padding: 0 10px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface);
	color: var(--stx-text);
	font: inherit;
	font-size: var(--stx-fs-control);
}
.stx-modal-pole input:focus,
.stx-modal-nazwa:focus { border-color: var(--stx-primary); box-shadow: var(--stx-ring); outline: none; }

.stx-modal-etykieta {
	margin-bottom: 7px;
	font-size: var(--stx-fs-label);
	font-weight: 600;
	letter-spacing: var(--stx-tracking-label);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}
.stx-modal-opcje { display: flex; flex-direction: column; gap: 2px; }
.stx-modal-opcja {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 10px;
	border-radius: var(--stx-radius-control);
	cursor: pointer;
}
.stx-modal-opcja:hover { background: var(--stx-row-hover); }
.stx-modal-opcja input { margin-top: 2px; accent-color: var(--stx-primary); }
.stx-modal-opcja .tekst { flex: 1 1 auto; min-width: 0; }
.stx-modal-opcja .nazwa { display: block; font-size: var(--stx-fs-body); }
.stx-modal-opcja .meta {
	display: block;
	margin-top: 2px;
	font-size: var(--stx-fs-micro);
	color: var(--stx-text-muted);
	line-height: 1.35;
}
.stx-modal-opcja .stx-modal-nazwa { margin-top: 7px; }

.stx-modal-blad {
	margin-top: 10px;
	font-size: var(--stx-fs-micro);
	color: var(--stx-bad);
}
.stx-modal-stopka {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px var(--stx-card-pad) 16px;
	border-top: 1px solid var(--stx-line);
}

/* ---- Strona dashboardów ------------------------------------------------ */

.stx-zakladki {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 18px 0 4px;
	padding: 3px;
	border: 1px solid var(--stx-line);
	border-radius: var(--stx-radius-control);
	background: var(--stx-surface-sunken);
	width: fit-content;
	max-width: 100%;
}
.stx-zakladka {
	padding: 0 13px;
	height: var(--stx-control-h-sm);
	border: 0;
	border-radius: calc(var(--stx-radius-control) - 2px);
	background: none;
	color: var(--stx-text-muted);
	font: inherit;
	font-size: var(--stx-fs-control);
	cursor: pointer;
}
.stx-zakladka:hover { color: var(--stx-text); }
.stx-zakladka.aktywna {
	background: var(--stx-surface);
	color: var(--stx-text);
	font-weight: 600;
	box-shadow: var(--stx-shadow-row);
}

.stx-sekcja-glowa-bi {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.stx-sekcja-glowa-bi .stx-sekcja-tytul { margin-bottom: 14px; }

/* Nota o dashboardzie zbudowanym przez agenta. Stoi w rozmowie jak wypowiedz,
   nie jak komunikat systemu - bo to jest wynik tury, a nie awaria. */
.stx-agent-dashboard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 0;
	padding: 11px 14px;
	border: 1px solid var(--stx-line-primary);
	border-radius: var(--stx-radius-card);
	background: var(--stx-tint-primary);
	font-size: var(--stx-fs-body);
}
.stx-agent-dashboard .tresc { flex: 1 1 auto; min-width: 0; }
.stx-agent-dashboard b { font-weight: 600; }
.stx-agent-dashboard .akcje { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.stx-agent-dashboard .stx-btn { height: var(--stx-control-h-sm); }

/* Podpis okresu pod tytulem kafla. Stoi POD tytulem, a nie przy liczbie:
   dotyczy calego kafla, nie pojedynczej wartosci. */
.stx-kafel-okres {
	margin: -6px 0 12px;
	font-size: var(--stx-fs-label);
	color: var(--stx-text-muted);
	letter-spacing: var(--stx-tracking-label-sm);
}

.stx-kafel-akcje {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--stx-line-soft);
	display: flex;
	justify-content: flex-end;
}

@media print {
	.stx-do-dashboardu, .stx-kafel-akcje, .stx-zakladki { display: none; }
}

@media print {
	.stx-wejscie,
	.stx-wejscie .w-rosnie,
	.stx-wejscie .tor i,
	.stx-wejscie .stx-tor i {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.stx-wejscie,
	.stx-wejscie .w-rosnie,
	.stx-wejscie .tor i,
	.stx-wejscie .stx-tor i {
		opacity: 1;
		transform: none;
	}
}

/* ====================================================================== */
/* 11. ZATRZYMANIE NA KONTROLI DANYCH                                     */
/* ====================================================================== */

/* Ten ekran zastępuje CAŁY raport, więc nie udaje ostrzeżenia: stoi na
   pełnej szerokości treści i mówi, czego nie policzyliśmy i dlaczego.
   Barwy błędu używamy oszczędnie - w nagłówku i na kresce przy pozycji.
   Czerwone tło pod tabelą rozbieżności utrudniłoby odczytanie liczb,
   a to one są tu dowodem. */
.stx-blokada {
	max-width: 980px;
	margin: 0 auto;
	padding: 4px 0 40px;
}
.stx-blokada-glowa {
	font-size: var(--stx-fs-section-title);
	font-weight: 700;
	line-height: 1.25;
	color: var(--stx-bad);
}
.stx-blokada-wstep {
	max-width: 72ch;
	margin: 9px 0 0;
	font-size: var(--stx-fs-body);
	color: var(--stx-text-soft);
}
.stx-blokada-pozycja {
	margin-top: 26px;
	padding: var(--stx-card-pad);
	border: 1px solid var(--stx-line);
	border-left: 3px solid var(--stx-bad);
	border-radius: var(--stx-radius-card);
	background: var(--stx-surface);
}
.stx-blokada-kod {
	font-size: var(--stx-fs-label-sm);
	font-weight: 700;
	letter-spacing: var(--stx-tracking-label-sm);
	text-transform: uppercase;
	color: var(--stx-text-muted);
}
.stx-blokada-tytul {
	margin-top: 5px;
	font-size: var(--stx-fs-card-title);
	font-weight: 600;
	color: var(--stx-text);
}
.stx-blokada-skutek {
	max-width: 72ch;
	margin: 6px 0 0;
	font-size: var(--stx-fs-body);
	color: var(--stx-text-soft);
}
.stx-blokada-licznik {
	margin: 14px 0 8px;
	font-size: var(--stx-fs-label);
	color: var(--stx-text-muted);
}
.stx-blokada > .stx-nota { margin-top: 26px; }

/* Dyktowanie: przycisk tej samej wysokości co „Zapytaj", bez podpisu.
   Czerwony tylko, gdy mikrofon słucha. */
.stx-prompt .dykt { width: 38px; padding: 0; justify-content: center; color: var(--stx-text-soft); }
.stx-prompt .dykt.slucha {
	background: var(--stx-bad); border-color: var(--stx-bad); color: #fff;
	animation: stx-dykt-puls 1.8s ease-in-out infinite;
}
@keyframes stx-dykt-puls { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stx-bad) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .stx-prompt .dykt.slucha { animation: none; } }
.stx-prompt-nota.blad { color: var(--stx-bad); }