/* ======================================================================
   WYKRESY PORTALU CRH - notacja IBCS z kitu stx-bi (Cosmedica)

   Rysuje je `js/portal/wykresy.js`; tu są tylko kolory i kreski, wszystkie
   przez tokeny `--stx-*` z `stx.css`. Osobny plik, bo tych samych wykresów
   używają dwie strony: portal (`portal.html`) i agent w ramce
   (`index.html?osadzony=portal`), który nie ładuje reszty `portal.css`.
   ====================================================================== */

/* Wykres ma viewBox 760×300 i `preserveAspectRatio: meet`, więc przy
   `width: 100%` jego WYSOKOŚĆ rośnie razem z szerokością karty. W karcie
   na pełne pasmo (≈1150 px) dawało to płótno wysokie na 450 px, z czego
   300 px było powietrzem nad czterema słupkami - i to był główny powód,
   dla którego strony raportu wyglądały na rozrzedzone.

   Dlatego ograniczamy płótno do jego SZEROKOŚCI PROJEKTOWEJ: przy 760 px
   wykres ma dokładnie zaprojektowane 300 px wysokości, a w kartach węższych
   skaluje się jak dotąd. Wyśrodkowanie, bo figura węższa od karty wyrównana
   do lewej czyta się jak niedokończony układ. */
.stx-wykres {
	display: block;
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	height: auto;
	overflow: visible;
}

/* Siatka pomaga odczytać poziom i ma na tym poprzestać: jaśniejsza od
   hairline'u karty, bez linii pionowych. */
.w-linia-siatki { stroke: var(--stx-line-soft); stroke-width: 1; }
.w-linia-zera { stroke: var(--stx-line); stroke-width: 1.4; }

.w-etykieta-osi,
.w-etykieta-kat,
.w-legenda-tekst {
	font-family: var(--stx-font-sans);
	fill: var(--stx-text-soft);
}
.w-etykieta-osi { font-size: var(--stx-fs-num); font-variant-numeric: tabular-nums; }
.w-etykieta-kat { font-size: var(--stx-fs-label); }
.w-legenda-tekst { font-size: var(--stx-fs-label-sm); }

/* Adnotacja nad słupkiem jest WYNIKIEM odczytu, więc ma wagę tekstu, a nie
   podpisu osi - to jedyny napis na wykresie, który wolno przeczytać pierwszy. */
.w-adnotacja {
	font-family: var(--stx-font-sans);
	font-size: var(--stx-fs-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	fill: var(--stx-text);
}
.w-adnotacja.w-dobrze { fill: var(--stx-good); }
.w-adnotacja.w-zle { fill: var(--stx-bad); }

/* Scenariusze: AC pełne i ciemne, PY jaśniejsze, plan konturem. */
rect.w-ac, .w-probka.w-ac { fill: var(--stx-actual); }
rect.w-py, .w-probka.w-py { fill: var(--stx-py); }
rect.w-plan, .w-probka.w-plan { fill: none; stroke: var(--stx-plan); stroke-width: 1.2; }
.w-probka.w-slaba { fill: var(--stx-line-weak); }
.w-probka.kontur { fill: none; stroke: currentColor; stroke-width: 1.2; }

path.w-linia { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
path.w-linia.w-ac { stroke: var(--stx-actual); }
path.w-linia.w-py { stroke: var(--stx-py); }
path.w-linia.w-plan { stroke: var(--stx-primary); stroke-dasharray: 5 4; stroke-width: 1.5; }
path.w-linia.w-slaba { stroke: var(--stx-line-weak); stroke-width: 1.3; }

/* Odchylenie - jedyne miejsce, gdzie barwa jest oceną. */
rect.w-dobrze-slupek { fill: var(--stx-good); }
rect.w-zle-slupek { fill: var(--stx-bad); }
rect.w-neutralny { fill: var(--stx-neutral); }
rect.w-suma { fill: var(--stx-bar); }
/* Krok bez liczby. Kreskowanie, a nie kolor: brak danej nie jest ani
   dobrym, ani złym wynikiem, i nie może udawać słupka o wartości zero. */
rect.w-brak { fill: var(--stx-line-weak); opacity: 0.5; }
line.w-lacznik { stroke: var(--stx-line); stroke-width: 1; stroke-dasharray: 2 2; }

/* Pasmo tolerancji - hue marki, siła przez opacity (patrz tokens: silnik
   rysunku nie rozwiązałby color-mix). */
rect.w-pasmo { fill: var(--stx-primary); opacity: var(--stx-band-opacity); }

/* Składowe stosu: skala siły, nie tęcza. Udział czyta się z długości
   segmentu, a tożsamość - z legendy i stałej kolejności. */
rect.w-s1, .w-probka.w-s1 { fill: var(--stx-actual); }
rect.w-s2, .w-probka.w-s2 { fill: color-mix(in srgb, var(--stx-actual) 72%, var(--stx-surface)); }
rect.w-s3, .w-probka.w-s3 { fill: color-mix(in srgb, var(--stx-actual) 54%, var(--stx-surface)); }
rect.w-s4, .w-probka.w-s4 { fill: color-mix(in srgb, var(--stx-actual) 38%, var(--stx-surface)); }
rect.w-s5, .w-probka.w-s5 { fill: color-mix(in srgb, var(--stx-actual) 24%, var(--stx-surface)); }
/* Ostatnia składowa („pozostałe") dostaje akcent, żeby reszta nie zlewała
   się z tłem karty przy pięciu i więcej kategoriach. */
rect.w-s6, .w-probka.w-s6 { fill: color-mix(in srgb, var(--stx-primary) 45%, var(--stx-surface)); }

rect.w-skladowa { stroke: var(--stx-surface); stroke-width: 0.6; }