/* swiadectwa.energii.pl: tylko elementy specyficzne dla serwisu. Kolory wyłącznie ze zmiennych wspólnego energii.css
   (--serwis, --serwis-tlo, --serwis-tekst dla body.s-swiadectwa; zapasowo --akcent / --grunt-2 / --tusz). */
.s-swiadectwa { --sw-akcent: var(--serwis, var(--akcent)); --sw-tlo: var(--serwis-tlo, var(--grunt-2)); --sw-tekst: var(--serwis-tekst, var(--tusz)); }

.sw-hero { background: var(--sw-tlo); color: var(--sw-tekst); padding-bottom: 28px; }
.sw-hero .okruchy, .sw-hero .okruchy a { color: var(--sw-tekst); }
.sw-glowa { max-width: 860px; padding-top: 12px; }
.sw-glowa h1 { margin-bottom: 16px; }
.sw-glowa .wstep { color: var(--sw-tekst); }
.sw-stan { font-size: 14px; margin: 8px 0 0; opacity: .8; }

.sw-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
@media (min-width: 1000px) { .sw-uklad { grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; } }
.sw-tresc { min-width: 0; max-width: 820px; }
.sw-tresc h2:first-child { margin-top: 0; }
.sw-boczne { min-width: 0; }
@media (min-width: 1000px) { .sw-mapa { position: sticky; top: 84px; } }
.sw-mapa { border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; }
.sw-mapa-h { font-weight: 800; margin: 0 0 8px; }
.sw-mapa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1000px) { .sw-mapa ul { display: block; } .sw-mapa li { margin: 0 0 2px; } }
.sw-mapa a { display: inline-block; padding: 5px 8px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tusz); }
.sw-mapa a:hover { background: var(--grunt-2); }
.sw-mapa a[aria-current] { background: var(--sw-tlo); color: var(--sw-akcent); }

.sw-lista { padding-left: 1.2em; }
.sw-lista li { margin-bottom: 8px; }
.sw-przypis { font-size: 13px; color: var(--szary); white-space: normal; }
.sw-przypis a { color: var(--szary); }
.sw-tresc a { color: var(--sw-akcent); }

.sw-kafle { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 8px 0 24px; }
.sw-kafel { border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px 16px; background: var(--grunt); }
.sw-kafel-e { font-size: 13px; color: var(--szary); margin: 0 0 4px; }
.sw-kafel-w { font: 700 22px/1.2 var(--font-tekst); margin: 0; }
.sw-kafel-j { font-size: 14px; font-weight: 600; color: var(--szary); white-space: nowrap; }
.sw-kafel-d { font-size: 13px; color: var(--szary); margin: 4px 0 0; }

.sw-miasta { list-style: none; padding: 0; display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sw-miasta li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--linia); padding: 4px 0; }
.sw-miasta .liczba { color: var(--szary); font-size: 14px; }

.sw-podstawa { margin-top: 40px; border-top: 1px solid var(--linia); padding-top: 8px; font-size: 15px; }
.sw-podstawa h2 { font-size: 20px; }
.sw-podstawa li { margin-bottom: 6px; }
.sw-faq h2 { margin-top: 40px; }
.sw-tabela-dane { margin: 8px 0 16px; }
.sw-tabela-dane summary { cursor: pointer; font-weight: 700; font-size: 15px; margin-bottom: 8px; }

/* wykresy SVG (jedna seria, kolor serwisu) */
.sw-wykres { margin: 12px 0 8px; }
.sw-wykres-w { overflow-x: auto; }
.wykres-svg { display: block; width: 100%; height: auto; }
.wykres-svg.w-waski { max-width: 640px; }
.wykres-svg.w-szeroki { min-width: 600px; }
.sw-wykres figcaption { font-size: 14px; color: var(--szary); margin-top: 6px; }
.w-siatka { stroke: var(--linia); stroke-width: 1; }
.w-baza { stroke: var(--szary); stroke-width: 1; }
.w-os { fill: var(--szary); font: 500 12px var(--font-tekst); }
.w-slupek { fill: var(--sw-akcent); }
.w-slupek-jasny { fill-opacity: .45; }
.w-traf { fill: transparent; }
.w-punkt:hover .w-slupek { fill-opacity: .8; }
.w-znacznik { stroke: var(--tusz); stroke-width: 1; }
.w-znacznik-t { fill: var(--tusz); font: 700 12px var(--font-tekst); }

/* kalkulator */
.sw-kalk { display: grid; gap: 16px; }
.sw-pyt { border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px 16px; margin: 0; min-width: 0; }
.sw-pyt legend { font-weight: 800; padding: 0 6px; }
.sw-pyt-d { font-weight: 500; color: var(--szary); font-size: 14px; }
.sw-kalk-js .sw-pyt-d { display: none; }
.sw-opcja { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 16px; padding: 8px 6px; border-radius: 8px; cursor: pointer; margin: 0; }
.sw-opcja:hover { background: var(--grunt-2); }
.sw-opcja input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--sw-akcent); }
.sw-opcja[hidden], .sw-pyt[hidden] { display: none; }
.sw-kalk-p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sw-wynik-miejsce { margin-top: 24px; }
.sw-wynik { border-radius: var(--promien); padding: 18px 20px; border: 2px solid var(--linia); background: var(--grunt); }
.sw-wynik h2 { margin-top: 4px; font-size: 24px; }
.sw-wynik-w { display: inline-block; font-weight: 800; font-size: 14px; padding: 3px 10px; border-radius: 999px; margin: 0; background: var(--grunt-2); }
.sw-wynik-tak { border-color: var(--zielen); }
.sw-wynik-tak .sw-wynik-w { background: var(--zielen); color: #fff; }
.sw-wynik-nie { border-color: var(--sw-akcent); }
.sw-wynik-nie .sw-wynik-w { background: var(--sw-akcent); color: #fff; }
.sw-wynik-sprawdz { border-color: var(--akcent-2); }
.sw-wynik-sprawdz .sw-wynik-w { background: var(--akcent-2); color: var(--tusz); }