/* Przełącznik dzień/noc w nagłówku i mini pasku (assets/js/dark.js). Ładowany tylko bez miksera (czc_mikser wyłączony),
   bo w mikserze tryb wybiera się w pasku. Wygląd jak ikonka kota: kreska w kolorze tekstu, hover kolorem palety. */
html .czc-theme-tgl { all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; cursor: pointer; color: var(--c-ink); transition: background .12s; }
.czc-theme-tgl svg { width: 19px; height: 19px; display: block; overflow: visible; }
.czc-theme-tgl .th-moon { display: none; }
html[data-theme="dark"] .czc-theme-tgl .th-moon { display: block; }
html[data-theme="dark"] .czc-theme-tgl .th-sun { display: none; }
/* ikona pokazuje aktualny tryb (jasny = słońce, ciemny = księżyc); hover bez losowego koloru: słońce wypełnione na żółto, księżyc wypełniony kolorem tekstu */
.czc-theme-tgl:hover { background: none; }
.czc-theme-tgl:hover .th-sun { fill: var(--c-1); }
.czc-theme-tgl:hover .th-moon { fill: currentColor; }
html[data-theme="dark"] .czc-theme-tgl:hover { background: none; }
.czc-theme-tgl:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }
.czc-theme-tgl.spin svg { animation: czc-tgl-spin .45s ease; }
@keyframes czc-tgl-spin { from { transform: rotate(-90deg) scale(.6); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .czc-theme-tgl.spin svg { animation: none; } }
@media (max-width: 700px) {
	html .czc-theme-tgl { width: 26px; height: 26px; }
	.czc-theme-tgl::after { content: ''; position: absolute; inset: -7px -4px; } /* pole dotyku 40 px jak przy koncie i koszyku */
}