/* wykres.css — blok wykresu serii czasowej (makro `wykres_czasowy`, ADR-0032 A).
   Ładowany przez OBA shelle (base.html i analizy/raport.html), bo makro renderuje się
   w decku raportu I w starym detalu analityka, a te mają rozłączne arkusze komponentów
   (report.css vs main.css). Reguły są tu RAZ — kopia w obu plikach rozjeżdża się po
   pierwszej zmianie (CLAUDE.md #4), a report.css jako całość w shellu aplikacji
   przemalowałby .btn/.pill/.tabs/.table-wrap, które main.css ma własne.
   Tokeny WYŁĄCZNIE z tokens.css (ładowany przez oba shelle) — lokalne aliasy raportu
   (--paper/--radius/--text/--muted) żyją pod .report, którego detal nie ma; wartości
   są 1:1 z ich mapowaniem. --font-head istnieje tylko w raporcie, stąd fallback.
   Deck-only zostaje w report.css: .legend (main.css ma własną, grid) i ukrywanie serii
   niewyróżnionych (sparowane z raport.js). */
.chart-blok { margin-top: 22px; }
/* Pierwszy blok w karcie: odstęp od tytułu daje padding `.rk-karta-body` (Ekran 01). */
.rk-karta-body > .chart-blok:first-child { margin-top: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.chart-title { font-family: var(--font-head, var(--font-sans)); font-size: 15px; font-weight: 600; color: var(--color-text); }
.chart-sub { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 10px; }
.chart-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.chart-wrap { border: 1px solid var(--border-violet); border-radius: var(--radius-1); padding: 16px 12px 8px; background: var(--color-surface); overflow-x: auto; }
.chart-wrap > svg { display: block; width: 100%; height: auto; min-width: 520px; }

/* W rzędzie Ekranu 01 wykres dociąga się do wysokości panelu obok — SVG skaluje się
   proporcjonalnie (`preserveAspectRatio` domyślne), więc rysunek nie jest rozciągany.
   Selektory `.chart-*` mieszkają w tym arkuszu, nawet gdy dotyczą układu deck-only. */
.chart-plachta { fill: transparent; }
.chart-prowadnica { stroke: var(--color-border); stroke-width: 1; }
.chart-prowadnica:not(.jest) { display: none; }
.chart-dymek { pointer-events: none; }
.chart-dymek:not(.jest) { display: none; }
.chart-dymek rect { fill: var(--color-text); }
.chart-dymek text { fill: var(--color-surface); }
.chart-dymek .dymek-naglowek { fill: var(--color-border); letter-spacing: .6px; }
.chart-dymek .dymek-wartosc { text-anchor: end; font-weight: 700; }

.ekran-rzad-glowna { display: flex; flex-direction: column; }
.ekran-rzad-glowna .chart-blok,
.ekran-rzad-glowna .chart-okno:not([hidden]),
.ekran-rzad-glowna .chart-wrap { display: flex; flex-direction: column; flex: 1; }
.ekran-rzad-glowna .chart-wrap > svg { flex: 1; min-height: 0; }
/* Ekran 01: cztery słupki nie mają czym dorównać siedmiu obszarom Gotowości obok, więc
   `flex:1` rozpychałby pustkę MIĘDZY wykresem a priorytetami. Treść zostaje zwarta,
   różnica wysokości ląduje na dole kolumny. */
.podsumowanie .ekran-rzad-glowna .chart-blok { flex: none; }
/* Makro słupków domen podaje tytuł bez `.chart-head`, więc nie dziedziczy jego odstępu
   12px i podpis pierwszej domeny kleił się do tytułu. Ta sama liczba, jedno źródło. */
.podsumowanie .chart-blok > .chart-title { margin-bottom: 12px; }