/*! zr-kalkulatory – style modułu fotowoltaika 1.0.2. Plik generowany – nie edytuj. */
/* Rdzeń interfejsu kalkulatora – elementy spoza makiet zbudowane z tokenów design systemu (--zr-*, --color-*, --space-*).
   Karta wyniku, formularz, pola, przełączniki, wykres i pasek mobile pochodzą z CSS motywu (kalkulatory.css, podstawa.css);
   tu tylko uzupełnienia. Każdy moduł dostaje własną kopię tego pliku (brak wspólnych zasobów w czasie działania). */

.zr-kalk { min-height: 240px; }
.zr-kalk__start { padding: var(--space-32) 0; color: var(--color-ink-muted); }
.zr-kalk.is-gotowy { min-height: 0; }
.zr-kalk-awaria { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-24); background: var(--color-surface); border-left: 4px solid var(--color-error); border-radius: var(--radius-leaf-sm); }

/* Formularz: legenda przełącznika segmentowego, przełącznik tak/nie w jednym wierszu, ostrzeżenie (nie blokuje) */
.zr-kalk-legend { margin-bottom: var(--space-8); }
.zr-kalk-przelacznik { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-16); }
.zr-kalk-przelacznik .zr-field__hint { grid-column: 1 / -1; }
.zr-kalk-przelacznik input:disabled + .zr-switch__track { opacity: .6; cursor: not-allowed; }
.zr-field__hint.zr-kalk-ostrzezenie { color: var(--color-ink); font-weight: 500; }
.zr-field__hint.zr-kalk-ostrzezenie::before { content: "Uwaga: "; font-weight: 600; }
.zr-field__error:not([hidden]) { display: flex; }
.zr-field__error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.zr-field__hint a, .zr-kalk-info a { color: var(--color-primary); font-weight: 500; }
.zr-kalk-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); padding: var(--space-16); background: var(--color-surface); border-radius: var(--radius-leaf-sm); font-size: 15px; line-height: 22px; }
.zr-kalk-info[hidden] { display: none; }

/* „Więcej ustawień” – rozwijana część formularza (pola trybu zaawansowanego) */
.zr-kalk-wiecej { padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-kalk-wiecej > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 44px; list-style: none; cursor: pointer; color: var(--color-primary); }
.zr-kalk-wiecej > summary::-webkit-details-marker { display: none; }
.zr-kalk-wiecej > summary svg { width: 24px; height: 24px; flex: none; transition: transform .2s ease; }
.zr-kalk-wiecej[open] > summary svg { transform: rotate(180deg); }
.zr-kalk-wiecej__pola { display: flex; flex-direction: column; gap: var(--space-24); margin-top: var(--space-16); }
.zr-kalk-wiecej__grupa { display: flex; flex-direction: column; gap: var(--space-24); }
.zr-kalk-wiecej__tytul { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); text-transform: none; }
.zr-kalk-formularz [hidden] { display: none !important; }
.zr-kalk-formularz > h2.is-pusta + * { margin-top: 0; }

/* Karta wyniku: przedział, informacje, komunikaty, „Pokaż obliczenia”, przyciski „Przenieś wynik do…” */
.zr-kalk-wynik { display: flex; flex-direction: column; gap: var(--space-24); }
.zr-kalk-wynik[hidden] { display: none; }
.zr-kalk-przedzial { margin-top: calc(-1 * var(--space-16)); font-size: 15px; line-height: 22px; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.zr-kalk-info-wyniku { font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
div.zr-kalk-info-wyniku { display: flex; flex-direction: column; gap: 6px; }
.zr-kalk-uwaga { font-weight: 600; }
.zr-kalk-komunikaty { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.zr-kalk-komunikaty .zr-result__tip { margin-top: 0; padding-bottom: var(--space-16); }
.zr-kalk-komunikaty a { color: var(--color-primary); font-weight: 500; }
.zr-kalk-obliczenia { border-top: var(--stroke-hairline) solid var(--color-line); padding-top: var(--space-16); font-size: 15px; line-height: 22px; }
.zr-kalk-obliczenia > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--color-primary); font-weight: 600; }
.zr-kalk-obliczenia ol { margin: var(--space-8) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.zr-kalk-przenies { display: flex; flex-direction: column; gap: var(--space-8); }
.zr-kalk-przenies[hidden] { display: none; }
.zr-kalk-przenies .zr-btn svg { width: 20px; height: 20px; flex: none; }
.zr-kalk-przenies .zr-btn { white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.zr-result.is-empty .zr-result__value { color: var(--color-ink-muted); }

/* Wykres słupkowy (SVG): wartość przy każdym słupku, wybrany – kolor akcentu, obrys i „· wybrane”; wąs = przedział */
.zr-kalk-wykres .zr-chart__track { display: block; height: 14px; }
.zr-kalk-wykres__svg { display: block; width: 100%; height: 14px; overflow: visible; }
.zr-kalk-wykres__slupek { fill: var(--color-primary); }
.zr-chart__row.is-selected .zr-kalk-wykres__slupek { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.zr-kalk-wykres__was { stroke: var(--color-ink); stroke-width: 1px; opacity: .55; }
.zr-kalk-wykres .zr-chart__row { grid-template-columns: minmax(84px, 128px) minmax(0, 1fr) auto; }
.zr-kalk-wykres .zr-chart__name { overflow-wrap: anywhere; }

/* Tabela w karcie wyniku (zr-table--stack) */
.zr-kalk-tabela { width: 100%; font-variant-numeric: tabular-nums; }

/* Pasek wyniku na mobile nie zasłania stopki; w druku tylko wynik */
@media (max-width: 767px) {
  .zr-kalk-kol-wynik { min-width: 0; }
  .zr-kalk-wykres .zr-chart__row { grid-template-columns: minmax(72px, 104px) minmax(0, 1fr) auto; gap: 8px; }
}
@media print {
  .zr-kalk-pasek, .zr-result__actions, .zr-kalk-przenies, .zr-kalk-wiecej > summary { display: none !important; }
  .zr-result--collapsible { display: flex !important; position: static !important; }
  .zr-kalk-obliczenia:not([open]) > :not(summary) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .zr-kalk-wiecej > summary svg { transition: none; }
}

/* Zakładki kalkulatora (wzorzec ARIA tabs) */
.zr-kalk-zakladki { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-24); border-bottom: var(--stroke-hairline) solid var(--color-line); }
.zr-kalk-zakladka { min-height: 44px; padding: 10px var(--space-16); margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-ink-muted); font: inherit; font-weight: 600; cursor: pointer; }
.zr-kalk-zakladka[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-primary); }
.zr-kalk-zakladka:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.zr-kalk-panel[hidden] { display: none; }
/* Drugi wynik główny w karcie (np. moc i roczne zużycie) */
.zr-kalk-wynik2 { padding-top: var(--space-24); border-top: var(--stroke-hairline) solid var(--color-line); }
.zr-kalk-wynik2 .zr-result__value { margin-top: var(--space-8); }
.zr-kalk-wynik2 .zr-kalk-przedzial { margin-top: var(--space-8); }
/* Gotowe przykłady nad formularzem */
.zr-kalk-przyklady { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.zr-kalk-przyklady > p { width: 100%; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-muted); }
/* Tabele w „Pokaż obliczenia” */
.zr-kalk-obliczenia table { width: 100%; margin-top: var(--space-8); border-collapse: collapse; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.zr-kalk-obliczenia th, .zr-kalk-obliczenia td { padding: 4px 6px; border-bottom: var(--stroke-hairline) solid var(--color-line); text-align: right; }
.zr-kalk-obliczenia th:first-child, .zr-kalk-obliczenia td:first-child { text-align: left; }
.zr-kalk-obliczenia .zr-kalk-przewijane { overflow-x: auto; }
.zr-kalk-komunikaty-blok { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.zr-kalk-komunikaty-blok .zr-kalk-komunikaty { align-self: stretch; }
.zr-kalk-komunikaty > li[hidden] { display: none !important; }

/* Kalkulator 1 – fotowoltaika: przełącznik wariantu magazynu i wykres liniowy „Zysk a liczba paneli” (SVG). */
.zr-kalk-wariant { width: 100%; }
.zr-kalk-krzywa { display: flex; flex-direction: column; gap: var(--space-8); }
.zr-kalk-krzywa__svg { width: 100%; height: auto; display: block; overflow: visible; }
.zr-kalk-krzywa__zakres { fill: var(--color-band-light); }
.zr-kalk-krzywa__zero { stroke: var(--color-ink-muted); stroke-width: 1; }
.zr-kalk-krzywa__rowne { stroke: var(--color-ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.zr-kalk-krzywa__linia { fill: none; stroke: var(--color-primary); stroke-width: 2; opacity: .55; }
.zr-kalk-krzywa__linia.is-magazyn { stroke-dasharray: 6 4; }
.zr-kalk-krzywa__linia.is-wybrana { opacity: 1; stroke-width: 2.5; }
.zr-kalk-krzywa__punkt { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 1.5; }
.zr-kalk-krzywa__os, .zr-kalk-krzywa__opis { font-family: var(--font-sans); font-size: 10px; fill: var(--color-ink-muted); }
/* Dwa warianty mocy (najszybszy zwrot / największy łączny zysk) – obok siebie, na wąskiej karcie jeden pod drugim. */
.zr-kalk-dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8); }
.zr-kalk-dwa__w { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px 4px 12px 4px; background: var(--color-surface); color: var(--color-ink); }
.zr-kalk-dwa__lbl { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.zr-kalk-dwa__moc { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; }
.zr-kalk-dwa__opis { margin: 0; font-size: 14px; line-height: 20px; }
.zr-kalk-dwa__wyjasnienie, .zr-kalk-dwa__szczegoly { margin: 0; font-size: 14px; line-height: 20px; }
.zr-kalk-dwa__szczegoly { font-weight: 700; }
.zr-kalk-krzywa__punkt.is-zwrot { fill: var(--color-accent); }
.zr-kalk-krzywa__punkt.is-twoja { fill: var(--color-surface); }
.zr-kalk-krzywa__opis.is-zwrot, .zr-kalk-krzywa__opis.is-zysk { font-weight: 700; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }