@charset "utf-8";

/* Skorka wodkazespirytusu.pl -- odtworzenie marinelli bez Drupala.
   Paleta i typografia przeniesione z oryginalnego motywu:
   pomaranczowy #f97e05, niebieski #054b81 / #156aa3, tlo #17293d. */

:root { --pomaranczowy: #f97e05; --pomaranczowy-ciemny: #c77405; --niebieski: #054b81; --niebieski-jasny: #156aa3; --tlo: #17293d; --tekst: #222; --tekst-slaby: #666; --ramka: #ccc; --ramka-slaba: #e2e2e2; --papier: #fff; --szerokosc: 980px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; background: var(--tlo) url("/assets/img/backgrounds/body.gif"); color: var(--tekst); font: 14px/1.55 "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; }

.clear-both, .clear_both { clear: both; font-size: 0; height: 0; line-height: 0; }

/* --- ukladu szkielet --- */
#totalContainer { width: var(--szerokosc); max-width: 100%; margin: 0 auto; padding: 0 10px; }
#pageBorder { background: var(--papier); border-radius: 4px; box-shadow: 0 0 12px rgba(0,0,0,.35); }
#innerContent { padding: 20px 24px 28px; }
#siteContent { min-height: 300px; }

/* --- naglowek --- */
#top { padding: 14px 0 10px; }
#branding { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
#title-slogan { flex: 0 0 auto; }
#site-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: bold; }
#site-title a { color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#site-title a:hover { color: var(--pomaranczowy); }
#site-slogan { margin: 3px 0 0; color: #b9c7d6; font-size: 13px; font-weight: normal; }

/* --- menu glowne --- */
#navigation-primary { margin: 10px 0 0; }
#navigation-primary ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
#navigation-primary li { margin: 0 2px 2px 0; }
#navigation-primary a { display: block; padding: 8px 14px; background: var(--niebieski); color: #fff; text-decoration: none; font-size: 13px; border-radius: 3px 3px 0 0; }
#navigation-primary a:hover, #navigation-primary a.active { background: var(--pomaranczowy); color: #fff; }

/* --- typografia tresci --- */
#page-title { margin: 0 0 14px; font-size: 27px; line-height: 1.2; color: var(--niebieski); }
h2 { font-size: 20px; color: var(--niebieski); margin: 24px 0 8px; }
h3 { font-size: 16px; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--niebieski-jasny); }
a:hover { color: var(--pomaranczowy); }
.lead { font-size: 15px; color: #444; }
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; max-width: 100%; }
td, th { padding: 6px 8px; vertical-align: top; }
hr { border: 0; border-top: 1px solid var(--ramka-slaba); margin: 20px 0; }

/* --- okruchy --- */
.breadcrumb { margin: 0 0 12px; font-size: 12px; color: var(--tekst-slaby); }
.breadcrumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--ramka); }

/* --- kalkulator (klasy .scrolls/.line/.label/.slider/.value jak w oryginale) --- */
.head { color: #000; margin: 0 0 14px; }
.head span { display: block; margin: 0 0 6px; }
.button { display: inline-block; margin: 6px 8px 6px 0; padding: 4px 10px 4px 22px; background: url("/assets/img/button.png") no-repeat left center; color: #000; text-decoration: none; border: 1px solid var(--ramka); border-radius: 3px; font-size: 13px; }
.button:hover { border-color: var(--pomaranczowy); color: #000; }

/* Bez sztywnego min-height: blok urósł o wiersz kontrakcji i wybór jednostek,
   a stała wysokość z czasów krótszego kalkulatora powodowała, że treść
   wylewała się poza niebieskie tło. */
/*
 * Tło kalkulatora. Oryginał używał bg3.png — panelu 925x347 dopasowanego
 * do ówczesnej wysokości. Kalkulator urósł o wiersz kontrakcji i wybór
 * jednostek, więc obrazek kończył się w połowie bloku i niżej prześwitywał
 * płaski kolor: wyglądało to jak ucięte pudełko. Ten sam gradient
 * (#0823b7 → #1b45f0 → #001ef9, odczytany z pikseli bg3.png) zapisany
 * w CSS skaluje się do dowolnej wysokości i waży zero bajtów.
 */
.scrolls { background: linear-gradient(180deg, #0823b7 0%, #1b45f0 52%, #143afc 88%, #001ef9 100%); border-radius: 8px; color: #fff; font-size: 18px; padding: 22px 22px 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.scrolls a { color: #ffd9a8; }
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.line.last { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); }
.label { flex: 0 0 200px; min-height: 10px; }
.slider { flex: 1 1 380px; min-width: 180px; }
.value { flex: 0 0 auto; white-space: nowrap; }
.value input { width: 72px; padding: 3px 5px; background: #d6fe81; border: 1px solid #9cbf55; border-radius: 2px; font: inherit; font-size: 15px; color: #123; }
.value input[readonly] { background: #eef7d8; }
.value span { margin: 0 3px; }

/* suwak -- odpowiednik jQuery UI, bez jQuery */
.wzs-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: #dfe6ec; border: 1px solid #9aa8b4; border-radius: 5px; outline: none; }
.wzs-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--pomaranczowy); border: 1px solid var(--pomaranczowy-ciemny); border-radius: 50%; cursor: pointer; }
.wzs-slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--pomaranczowy); border: 1px solid var(--pomaranczowy-ciemny); border-radius: 50%; cursor: pointer; }
.wzs-slider:focus-visible { box-shadow: 0 0 0 3px rgba(249,126,5,.5); }

/* --- listy przepisow --- */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.recipe-card { border: 1px solid var(--ramka-slaba); border-radius: 4px; padding: 12px; background: #fcfcfc; }
.recipe-card h2 { margin: 8px 0 6px; font-size: 17px; }
.recipe-card h2 a { text-decoration: none; }
.recipe-card .thumb { display: block; }
.recipe-card .thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: 3px; }
.recipe-card .teaser { font-size: 13px; color: var(--tekst-slaby); }
.recipe-card .more a { font-size: 13px; font-weight: bold; }

.recipe-photo { margin: 0 0 16px; }
.recipe-photo img { max-width: 380px; border-radius: 4px; }
.field-skladniki ul, .field-przygotowanie ol { padding-left: 22px; }

.recipe-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.recipe-list li { font-size: 13px; }

/* --- forum (archiwum) --- */
.forum-list { list-style: none; margin: 18px 0 0; padding: 0; }
.forum-list li { padding: 12px 0; border-bottom: 1px solid var(--ramka-slaba); }
.forum-list h2 { margin: 0 0 4px; font-size: 17px; }
.submitted { margin: 0 0 4px; font-size: 12px; color: var(--tekst-slaby); }
.forum-archive-note, .comments-closed { padding: 8px 12px; background: #fff6e5; border-left: 3px solid var(--pomaranczowy); font-size: 13px; color: #6a4a12; }

/* --- komentarze --- */
.comments { margin-top: 26px; border-top: 1px solid var(--ramka-slaba); padding-top: 12px; }
.comment { padding: 10px 0; border-bottom: 1px dotted var(--ramka); }
.comment h3 { margin: 0 0 2px; font-size: 15px; }

/* --- wyszukiwarka --- */
.search-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.search-form label { flex: 1 0 100%; font-size: 13px; color: var(--tekst-slaby); }
.search-form input[type="search"] { flex: 1 1 320px; padding: 7px 10px; border: 1px solid var(--ramka); border-radius: 3px; font: inherit; }
.search-form button { padding: 7px 18px; background: var(--pomaranczowy); border: 1px solid var(--pomaranczowy-ciemny); border-radius: 3px; color: #fff; font: inherit; font-weight: bold; cursor: pointer; }
.search-form button:hover { background: var(--pomaranczowy-ciemny); }
.search-results { list-style: none; padding: 0; }
.search-results li { padding: 10px 0; border-bottom: 1px solid var(--ramka-slaba); }
.search-results h2 { margin: 0 0 3px; font-size: 17px; }
.search-results .url { margin: 0; font-size: 12px; color: #2a8a2a; }
.result-count { font-size: 13px; color: var(--tekst-slaby); }

/* --- rozne --- */
.tags { margin: 18px 0 0; font-size: 12px; color: var(--tekst-slaby); }
.tag { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; background: #eef2f6; border-radius: 10px; }
.big-links { list-style: none; padding: 0; }
.big-links li { margin: 0 0 6px; font-size: 16px; }
.sitemap-group ul { columns: 2; column-gap: 30px; }
@media (max-width: 600px) { .sitemap-group ul { columns: 1; } }

/* --- reklamy --- */
/* Rozmiary jednostek AdSense ustawia CSS (wzorzec Google: stały rozmiar
   + media queries). Format automatyczny dobierał w nagłówku kwadrat na całą
   szerokość, który spychał treść pod krawędź ekranu telefonu. */
.adslot { margin: 14px 0; text-align: center; }
.adslot ins { display: inline-block; }

/* nagłówek: baner mobilny -> pełny leaderboard w miarę miejsca */
.adslot-top { flex: 1 1 auto; min-width: 0; min-height: 100px; }
.adslot-top ins { width: 320px; height: 100px; }
@media (min-width: 500px) { .adslot-top { min-height: 60px; } .adslot-top ins { width: 468px; height: 60px; } }
@media (min-width: 800px) { .adslot-top { min-height: 90px; } .adslot-top ins { width: 728px; height: 90px; } }

/* --- stopka --- */
#footer { padding: 16px 4px 30px; color: #c6d2de; font-size: 13px; }
#footer .block-title h2 { margin: 0 0 8px; font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
#footer ul.menu { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { color: var(--pomaranczowy); text-decoration: underline; }
#footer .legal { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; color: #9fb0c1; }

/* --- telefony --- */
@media (max-width: 760px) {
	#totalContainer { padding: 0 6px; }
	#innerContent { padding: 14px 12px 20px; }
	#site-title { font-size: 24px; }
	#page-title { font-size: 22px; }
	#navigation-primary a { padding: 7px 10px; font-size: 12px; }
	.scrolls { font-size: 16px; padding: 18px 14px; }
	.label { flex: 1 0 100%; }
	.slider { flex: 1 1 100%; }
	.line { gap: 6px; }
}

/* --- reklama w treści przepisu (300x600, oblewana tekstem jak w oryginale) --- */
/* min-height rezerwuje miejsce zanim reklama się wczyta -- bez tego treść
   przeskakuje w dół (CLS), co psuje ocenę strony i widoczność reklamy. */
.adslot-in_content { float: right; width: 300px; max-width: 100%; margin: 0 0 12px 18px; min-height: 600px; }
@media (max-width: 700px) { .adslot-in_content { float: none; width: 300px; margin: 0 auto 14px; min-height: 250px; } }

/* --- tagi --- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; align-items: baseline; }
.tag-cloud a { display: inline-block; padding: 4px 10px; background: #eef2f6; border: 1px solid var(--ramka-slaba); border-radius: 12px; text-decoration: none; }
.tag-cloud a:hover { background: var(--pomaranczowy); border-color: var(--pomaranczowy-ciemny); color: #fff; }
.tag-cloud a:hover .count { color: #fff; }
.tag-cloud .count { margin-left: 6px; font-size: .75em; color: var(--tekst-slaby); }
.tag-cloud .tag-w1 { font-size: 13px; }
.tag-cloud .tag-w2 { font-size: 15px; }
.tag-cloud .tag-w3 { font-size: 17px; }
.tag-cloud .tag-w4 { font-size: 20px; font-weight: bold; }
.tag-results { list-style: none; padding: 0; }
.tag-results li { padding: 10px 0; border-bottom: 1px solid var(--ramka-slaba); }
.tag-results h2 { margin: 0 0 3px; font-size: 17px; }
.back-link { margin-top: 18px; }
.tags a.tag { text-decoration: none; }
.tags a.tag:hover { background: var(--pomaranczowy); color: #fff; }

/* --- bloczek "Zobacz inne przepisy" (błękitne pudełko jak w oryginale, #BCDBE9) --- */
.related-box { clear: both; width: 340px; max-width: 100%; margin: 26px 0 30px; padding: 14px 18px; background: #bcdbe9; border-radius: 6px; }
.related-box h2 { margin: 0 0 8px; font-size: 19px; color: #1b3c52; }
.related-box ul { margin: 0; padding-left: 20px; }
.related-box li { margin: 0 0 5px; }
.related-box li::marker { color: #4a7b96; }
.related-box a { color: var(--niebieski-jasny); text-decoration: none; }
.related-box a:hover { color: #b35a00; text-decoration: underline; }

/* --- kontakt w stopce --- */
#footer .footer-contact { margin: 12px 0 0; font-size: 13px; }
#footer .footer-contact a { text-decoration: underline; }

/* ============ dopracowanie: responsywność i drobiazgi ============ */

/* Filmy z forum: sztywne 640x390 nie mieściły się na telefonie.
   Opakowanie trzyma proporcję 16:9 przy dowolnej szerokości. */
.video-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 0 0 16px; background: #000; border-radius: 4px; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Szerokie tabele (strony kreatora) mają własny pasek przewijania,
   zamiast rozpychać całą stronę w poziomie. */
.nodecontent table { display: block; overflow-x: auto; max-width: 100%; }
@media (min-width: 761px) { .nodecontent table { display: table; } }

/* Nagłówek: na wąskim ekranie nazwa serwisu i reklama jedna pod drugą. */
@media (max-width: 760px) {
	#branding { flex-direction: column; align-items: stretch; gap: 10px; }
	#title-slogan { text-align: center; }
}

/* Menu: zamiast łamać 7 pozycji na cztery rzędy, jeden rząd
   przewijany poziomo — kciukiem, jak w aplikacji. */
@media (max-width: 760px) {
	#navigation-primary ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	#navigation-primary ul::-webkit-scrollbar { display: none; }
	#navigation-primary li { flex: 0 0 auto; }
	#navigation-primary a { white-space: nowrap; border-radius: 3px; }
}

/* Palce potrzebują większych celów niż kursor (zalecane min. 44 px). */
@media (max-width: 760px) {
	#navigation-primary a { padding: 11px 14px; }
	#footer ul.menu a { display: inline-block; padding: 5px 0; }
	.value input { min-height: 38px; font-size: 16px; } /* 16px = iOS nie przybliża pola */
	.wzs-slider { height: 14px; }
	.wzs-slider::-webkit-slider-thumb { width: 26px; height: 26px; }
	.wzs-slider::-moz-range-thumb { width: 26px; height: 26px; }
	.search-form input[type="search"] { font-size: 16px; min-height: 40px; }
	.search-form button { min-height: 40px; }
}

/* Zdjęcie przepisu obok tekstu na szerokim ekranie, nad tekstem na wąskim. */
@media (min-width: 761px) {
	.recipe-photo { float: left; margin: 0 20px 12px 0; }
	.recipe-photo img { max-width: 260px; }
}
@media (max-width: 760px) {
	.recipe-photo img { max-width: 100%; }
}
.field-skladniki, .field-przygotowanie { clear: none; }
.related-box { clear: both; }

/* Widoczny znacznik fokusu — bez niego nie da się nawigować klawiaturą. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--pomaranczowy); outline-offset: 2px; }

/* Długie nazwy tagów i adresy nie rozpychają układu. */
.search-results .url, .tag-cloud a, .breadcrumb li { overflow-wrap: anywhere; }

/* Płynne odstępy nagłówków — na telefonie mniejsze. */
@media (max-width: 760px) {
	h2 { font-size: 18px; margin: 18px 0 6px; }
	.related-box { width: 100%; }
}

/* Czytelniejsza szerokość wiersza w długich tekstach prawnych. */
.page-legal .nodecontent, .page-legal p, .page-legal li { max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}

/* --- kontrakcja objętości --- */
.kontrakcja { clear: both; margin: 30px 0 0; padding: 18px 20px; background: #f5f8fa; border: 1px solid var(--ramka-slaba); border-left: 4px solid var(--niebieski); border-radius: 4px; }
.kontrakcja h2 { margin-top: 0; }
.kontrakcja h3 { color: #1b3c52; }
.kontrakcja .uwaga { margin-bottom: 0; padding: 10px 12px; background: #fff6e5; border-left: 3px solid var(--pomaranczowy); font-size: 13px; color: #6a4a12; }
.kontrakcja-tab { margin: 14px 0 18px; font-size: 13px; background: #fff; border: 1px solid var(--ramka-slaba); }
.kontrakcja-tab caption { padding: 0 0 6px; text-align: left; font-size: 12px; color: var(--tekst-slaby); }
.kontrakcja-tab th, .kontrakcja-tab td { border: 1px solid var(--ramka-slaba); text-align: right; }
.kontrakcja-tab thead th { background: #eef2f6; text-align: center; }

/* podpowiedź przy wyniku rzeczywistym */
.scrolls .hint { display: inline-block; margin-left: 8px; font-size: 13px; color: #ffd9a8; white-space: normal; }
.line.last-real { margin-top: 4px; }
@media (max-width: 760px) { .scrolls .hint { display: block; margin: 4px 0 0; } }

/* --- menu mobilne (hamburger) --- */
.menu-toggle { display: none; }

@media (max-width: 760px) {
	.menu-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 11px 14px; background: var(--niebieski); border: 0; border-radius: 3px; color: #fff; font: inherit; font-size: 15px; font-weight: bold; cursor: pointer; text-align: left; }
	.menu-toggle:hover { background: var(--pomaranczowy); }

	/* Trzy kreski rysowane bez obrazka. */
	.menu-toggle-ikona { position: relative; display: block; width: 22px; height: 2px; background: #fff; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; transition: background-color .15s; }
	.menu-toggle[aria-expanded="true"] .menu-toggle-ikona { background: transparent; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }

	/* Menu chowamy dopiero, gdy JS potwierdzi, że umie je otworzyć.
	   Bez skryptu .js-menu nie istnieje i nawigacja zostaje widoczna. */
	.js-menu #primary { display: none; }
	.js-menu #primary.menu-otwarte { display: block; }

	/* W trybie rozwijanym pozycje idą jedna pod drugą — poziome przewijanie
	   z wcześniejszej wersji ma sens tylko wtedy, gdy menu jest zawsze widoczne. */
	#navigation-primary ul { flex-wrap: wrap; overflow: visible; }
	#navigation-primary li { flex: 1 0 100%; margin: 0 0 1px; }
	#navigation-primary a { border-radius: 2px; }
}

/* --- przełącznik języka --- */
#footer .lang-switch { margin: 12px 0 0; font-size: 13px; }
#footer .lang-switch-label { color: #9fb0c1; margin-right: 6px; }
#footer .lang-switch a, #footer .lang-switch .lang-current { display: inline-block; margin: 0 8px 4px 0; }
#footer .lang-switch .lang-current { color: var(--pomaranczowy); font-weight: bold; }

/* --- przełącznik jednostek w kalkulatorze --- */
.scrolls .units { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25); font-size: 15px; }
.scrolls .units select { padding: 5px 8px; border: 1px solid #9aa8b4; border-radius: 3px; font: inherit; font-size: 14px; }

/* --- wybór jednostek na górze kalkulatora --- */
.scrolls .units-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.28); }
.scrolls .units-row label { font-size: 15px; color: #cfe3f2; }
.scrolls .units-row select { padding: 6px 10px; background: #fff; border: 1px solid #9aa8b4; border-radius: 4px; font: inherit; font-size: 14px; color: #123; cursor: pointer; }
.scrolls .units-row select:hover { border-color: var(--pomaranczowy); }

/* wiersz wyniku rzeczywistego: podpowiedź pod spodem, nie obok — inaczej
   nachodziła na sąsiedni wiersz przy dłuższym tekście */
.line.last-real { margin-top: 6px; align-items: flex-start; }
.scrolls .hint { display: block; flex: 1 0 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #ffd9a8; white-space: normal; }

/* wyniki wyraźnie oddzielone od pól wejściowych */
.scrolls .line.last { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.28); }
.scrolls .value input { min-width: 84px; width: auto; }

/* --- wybór języka w nagłówku --- */
.lang-picker { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-picker-label { font-size: 12px; color: #b9c7d6; }
.lang-picker select { padding: 5px 8px; background: #fff; border: 1px solid #7f95ab; border-radius: 3px; font: inherit; font-size: 13px; color: #123; cursor: pointer; }
.lang-picker select:hover { border-color: var(--pomaranczowy); }
.lang-picker-fallback { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lang-picker-fallback a { color: #fff; font-size: 13px; }

@media (max-width: 760px) {
	.lang-picker { margin: 0; justify-content: center; }
}

/* --- schemat kreatora (inline SVG) --- */
.kreator-schemat { margin: 24px 0 26px; padding: 16px 14px 10px; background: #f5f8fa; border: 1px solid var(--ramka-slaba); border-radius: 6px; overflow-x: auto; }
.kreator-schemat figcaption { margin: 0 0 10px; font-size: 13px; color: var(--tekst-slaby); }
.kreator-schemat svg { display: block; width: 100%; min-width: 620px; height: auto; }

.kr-linie path { stroke: #a8bccd; stroke-width: 2; }
.kr-etykieta { font: 600 12px "Trebuchet MS", Tahoma, sans-serif; fill: var(--tekst-slaby); }

.kr-wezel rect { fill: #fff; stroke: #7f9db5; stroke-width: 1.5; transition: fill .12s, stroke .12s; }
.kr-wezel .kr-tytul { font: bold 14px "Trebuchet MS", Tahoma, sans-serif; fill: var(--niebieski); }
.kr-wezel .kr-podpis { font: 12px "Trebuchet MS", Tahoma, sans-serif; fill: var(--tekst-slaby); }
.kr-wezel { cursor: pointer; }
.kr-wezel:hover rect { fill: #fff3e2; stroke: var(--pomaranczowy); }
.kr-wezel:focus-visible rect { stroke: var(--pomaranczowy); stroke-width: 3; }

/* Wyniki odróżniamy wypełnieniem, nie tylko kształtem — sam kolor
   nie wystarcza osobom nierozróżniającym barw, więc dokładamy grubszą ramkę. */
.kr-wynik rect { fill: #eaf3ea; stroke: #5c8a5c; stroke-width: 2; }
.kr-wynik .kr-tytul { fill: #2f5d2f; }

/* Krok, na którym czytelnik właśnie jest. */
.kr-aktywny rect { fill: var(--pomaranczowy); stroke: var(--pomaranczowy-ciemny); stroke-width: 2.5; }
.kr-aktywny .kr-tytul, .kr-aktywny .kr-podpis { fill: #fff; }

@media (max-width: 760px) {
	.kreator-schemat { padding: 12px 8px 8px; }
	.kreator-schemat figcaption { font-size: 12px; }
}

/* --- wykres kontrakcji --- */
.wykres-kontrakcji { margin: 20px 0 22px; padding: 14px 14px 8px; background: #fff; border: 1px solid var(--ramka-slaba); border-radius: 6px; overflow-x: auto; }
.wykres-kontrakcji figcaption { margin: 0 0 8px; font-size: 13px; color: var(--tekst-slaby); }
.wykres-kontrakcji svg { display: block; width: 100%; min-width: 420px; height: auto; }
.wk-pasmo { fill: rgba(249,126,5,.12); }
.wk-siatka line { stroke: #e2e8ee; stroke-width: 1; }
.wk-siatka .wk-tick { stroke: #b6c2cd; }
.wk-os { font: 11px "Trebuchet MS", Tahoma, sans-serif; fill: var(--tekst-slaby); }
.wk-tytul-osi { font: 600 12px "Trebuchet MS", Tahoma, sans-serif; fill: var(--niebieski); }
.wk-obszar { fill: rgba(5,75,129,.10); }
.wk-linia { stroke: var(--niebieski); stroke-width: 2.5; stroke-linejoin: round; }
.wk-max { fill: var(--pomaranczowy); stroke: #fff; stroke-width: 1.5; }
.wk-max-opis { font: bold 12px "Trebuchet MS", Tahoma, sans-serif; fill: var(--pomaranczowy-ciemny); }

/* --- schemat aparatu destylacyjnego --- */
.schemat-aparatu { margin: 22px 0; padding: 14px; background: #f7fafc; border: 1px solid var(--ramka-slaba); border-radius: 6px; overflow-x: auto; }
.schemat-aparatu figcaption { margin: 0 0 8px; font-size: 13px; color: var(--tekst-slaby); }
.schemat-aparatu svg { display: block; width: 100%; min-width: 520px; height: auto; }

.ap-korpus { fill: #e8eef4; stroke: #6c8399; stroke-width: 2; }
.ap-szklo  { fill: rgba(190,225,240,.55); stroke: #4d8ba8; }
.ap-metal  { fill: #dde3e8; stroke: #5d6b78; }
.ap-rurka  { fill: none; stroke-width: 8; stroke-linecap: round; }
.ap-deflegmator { fill: #cfe0ee; stroke: #4d7f9e; stroke-width: 2; }
.ap-ciecz { fill: #c9a86a; }
.ap-destylat { fill: #d8ecf5; }
.ap-chlodnica-plaszcz { fill: rgba(120,190,225,.28); stroke: #4d8ba8; stroke-width: 2; }
.ap-palnik { fill: #6c8399; }
.ap-plomien { fill: none; stroke: var(--pomaranczowy); stroke-width: 2.5; stroke-linecap: round; }
.ap-rura { fill: none; stroke: #6c8399; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ap-woda-linia { fill: none; stroke: #3f9fd0; stroke-width: 2.5; stroke-dasharray: 6 4; }
.ap-woda-opis { fill: #2c7ba6; }
.ap-strzalki path { fill: none; stroke: var(--pomaranczowy-ciemny); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ap-pary { fill: var(--pomaranczowy-ciemny); font-weight: bold; }
.ap-nazwa { font: bold 13px "Trebuchet MS", Tahoma, sans-serif; fill: var(--niebieski); }
.ap-etykieta { font: 11px "Trebuchet MS", Tahoma, sans-serif; fill: var(--tekst-slaby); }

/* --- słownik pojęć --- */
.slownik-spis { margin: 18px 0 26px; padding: 12px 16px; background: #f5f8fa; border: 1px solid var(--ramka-slaba); border-radius: 6px; }
.slownik-spis ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.slownik { margin: 0; }
.slownik-haslo { padding: 16px 0; border-top: 1px solid var(--ramka-slaba); scroll-margin-top: 12px; }
.slownik-haslo:target { background: #fff6e5; border-left: 4px solid var(--pomaranczowy); padding-left: 14px; }
.slownik dt { margin: 0 0 6px; font-size: 18px; font-weight: bold; color: var(--niebieski); }
.slownik-synonimy { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; color: var(--tekst-slaby); font-style: italic; }
.slownik dd { margin: 0; }
.slownik dd ul { padding-left: 22px; }
.slownik-zobacz { margin: 8px 0 0; font-size: 13px; color: var(--tekst-slaby); }

/* odsyłacz "co to?" przy wyniku kalkulatora */
.scrolls .hint-link { font-size: 13px; color: #ffd9a8; white-space: nowrap; }

/* --- indeks słownika --- */
.slownik-lista { list-style: none; margin: 20px 0 0; padding: 0; }
.slownik-lista li { padding: 14px 0; border-bottom: 1px solid var(--ramka-slaba); }
.slownik-lista h2 { margin: 0 0 2px; font-size: 18px; }
.slownik-lista h2 a { text-decoration: none; }
.slownik-synonimy { margin: 0 0 4px; font-size: 12px; font-style: italic; color: var(--tekst-slaby); }
.slownik-skrot { margin: 0; font-size: 14px; }

/* --- pojedyncze hasło --- */
.haslo-synonimy { margin: -6px 0 16px; font-size: 13px; font-style: italic; color: var(--tekst-slaby); }
.haslo-tresc h2 { font-size: 19px; margin: 26px 0 8px; }
.haslo-tresc p, .haslo-tresc li { max-width: 68ch; }
.haslo-tresc .uwaga-tresc { padding: 12px 14px; background: #fdecea; border-left: 4px solid #c0392b; color: #7d241a; }

/* notka o kontrakcji pod kalkulatorem — skrócona, pełne hasło jest w słowniku */
.kontrakcja .wiecej { margin: 4px 0 0; font-weight: bold; }
.kontrakcja .wiecej a { text-decoration: none; }
.kontrakcja .wiecej a:hover { text-decoration: underline; }

/* Akapit z frazami SEO na końcu treści kalkulatora oblewał ostatni przycisk
   z presetem — wygląda to na błąd składu. Zaczyna się poniżej przycisków. */
.bottom-info { overflow: hidden; }
.bottom-info > span:last-child,
.bottom-info > p:last-of-type { display: block; clear: both; padding-top: 14px; }
.bottom-info .seo-frazy { clear: both; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ramka-slaba); font-size: 13px; color: var(--tekst-slaby); }

/* --- lista proporcji na płyn dezynfekujący --- */
.dezynfekcja { margin: 26px 0 0; }
.dezynfekcja h2, .dezynfekcja h3 { text-align: center; }
.dezynfekcja h3 { margin-top: 22px; font-size: 17px; color: var(--niebieski); }
.dez-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 14px; margin: 10px 0 0; }
.dez-lista .button { margin: 0; }