/**
 * Optymalizator rozkroju.
 *
 * Zmienne stoja w zasiegu narzedzia, a nie w :root - arkusz wczytuje sie
 * na dowolnej stronie serwisu i nie moze ruszac palety poza soba.
 */

.sdopt {
	--sdopt-zielen: #2d6a4f;
	--sdopt-zielen-ciemna: #1b4332;
	--sdopt-drewno: #c8935a;
	--sdopt-linia: #d3d7d0;
	--sdopt-tlo: #f4f7f5;

	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sdopt-linia);
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.55;
}

.sdopt__tytul {
	margin: 0 0 6px;
	font-size: 1.25rem;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__wstep {
	margin: 0 0 20px;
	color: #46685a;
	font-size: .92rem;
}

.sdopt__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 26px;
	align-items: start;
}

.sdopt__etykieta {
	display: block;
	margin: 0 0 5px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #46685a;
}

.sdopt__pole {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--sdopt-linia);
	border-radius: 6px;
	background: #fff;
	font-size: .95rem;
	font-family: inherit;
	color: #1f2d26;
}

.sdopt__pole:focus {
	outline: 2px solid var(--sdopt-zielen);
	outline-offset: 1px;
	border-color: var(--sdopt-zielen);
}

.sdopt__podpis {
	margin: 5px 0 16px;
	font-size: .8rem;
	color: #6b8378;
}

.sdopt__pary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 4px;
}

.sdopt__naglowek-listy {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.sdopt__tabela {
	width: 100%;
	border-collapse: collapse;
}

.sdopt__tabela th {
	padding: 0 8px 6px 0;
	text-align: left;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b8378;
}

.sdopt__tabela td {
	padding: 0 8px 8px 0;
	vertical-align: top;
}

/* Lewy margines pierwszej kolumny.

   Wiersz niekompletny dostaje pomaranczowy pasek malowany wewnatrz komorki
   (inset box-shadow). Bez lewego marginesu pasek klad sie na tekscie
   i zjadal pierwsze litery komunikatu "brak dlugosci".

   Margines jest staly, a nie dokladany dopiero przy bledzie - inaczej
   wiersz przeskakiwalby w bok w chwili, gdy komunikat sie pojawia,
   czyli dokladnie wtedy, gdy uzytkownik patrzy na pole. */

.sdopt__tabela th:first-child,
.sdopt__tabela td:first-child {
	padding-left: 12px;
}

.sdopt__tabela th:last-child,
.sdopt__tabela td:last-child {
	width: 34px;
	padding-right: 0;
}

.sdopt__ukryte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.sdopt__usun {
	width: 30px;
	height: 34px;
	padding: 0;
	background: none;
	border: 1px solid var(--sdopt-linia);
	border-radius: 6px;
	color: #8a5a3b;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.sdopt__usun:hover {
	background: #f7efe8;
	border-color: #c9a184;
	color: #8a5a3b;
}

/* Przycisk w postaci odnosnika. Bez podkreslenia - w tym serwisie
   odnosniki nigdy nie sa podkreslone, wiec sygnalem jest obramowanie. */
.sdopt__link {
	padding: 4px 12px;
	background: none;
	border: 1px solid var(--sdopt-zielen);
	border-radius: 999px;
	color: var(--sdopt-zielen);
	font-size: .8rem;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sdopt__link:hover,
.sdopt__link:focus-visible {
	background: var(--sdopt-zielen);
	color: #fff;
	text-decoration: none;
}

.sdopt__akcje {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--sdopt-linia);
}

.sdopt__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--sdopt-zielen);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .22),
		0 3px 0 rgba(9, 26, 18, .3);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.sdopt__btn:hover,
.sdopt__btn:focus-visible {
	background: var(--sdopt-zielen-ciemna);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .28),
		0 4px 0 rgba(9, 26, 18, .32),
		0 10px 20px rgba(9, 26, 18, .22);
}

/*
 * Klasa bazowa niesie caly wyglad przycisku, a modyfikator glowny nie mial
 * zadnej reguly - byl wiec bez efektu. Rozdzielamy: baza to przycisk
 * drugorzedny, modyfikator dodaje wage.
 */
.sdopt__btn--glowny {
	padding: 13px 28px;
	font-size: 1rem;
	background: var(--sdopt-zielen-ciemna);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .24),
		0 4px 0 rgba(9, 26, 18, .34);
}

.sdopt__btn--glowny:hover,
.sdopt__btn--glowny:focus-visible {
	background: #143528;
	color: #fff;
}

/* ---------- wynik ---------- */

.sdopt__wynik {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 2px solid var(--sdopt-zielen);
}

.sdopt__blad {
	margin: 0;
	padding: 12px 14px;
	background: #fdf2f2;
	border-left: 3px solid #b32d2e;
	border-radius: 4px;
	color: #7a2224;
}

.sdopt__mierniki {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}

.sdopt__miernik {
	padding: 12px 14px;
	background: var(--sdopt-tlo);
	border-radius: 8px;
	border-left: 3px solid var(--sdopt-zielen);
}

.sdopt__miernik-nazwa {
	display: block;
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b8378;
}

.sdopt__miernik-wartosc {
	display: block;
	margin-top: 2px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__podtytul {
	margin: 0 0 10px;
	font-size: 1rem;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__zakup {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sdopt__zakup li {
	padding: 8px 14px;
	background: var(--sdopt-tlo);
	border: 1px solid var(--sdopt-linia);
	border-radius: 999px;
	font-size: .9rem;
}

.sdopt__wzor {
	margin-bottom: 16px;
}

.sdopt__wzor-opis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
	font-size: .9rem;
}

.sdopt__odpad-opis {
	color: #6b8378;
	font-size: .82rem;
}

.sdopt__pasek {
	display: flex;
	height: 30px;
	overflow: hidden;
	border-radius: 5px;
	border: 1px solid var(--sdopt-linia);
}

.sdopt__odcinek,
.sdopt__reszta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	font-size: .72rem;
	overflow: hidden;
}

.sdopt__odcinek {
	background: linear-gradient(180deg, #d8a874 0%, var(--sdopt-drewno) 100%);
	color: #3a2413;
	border-right: 1px solid rgba(0, 0, 0, .18);
}

.sdopt__odcinek span,
.sdopt__reszta span {
	padding: 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sdopt__reszta {
	background: repeating-linear-gradient(
		135deg,
		#e6e9e5 0 6px,
		#dde2dc 6px 12px
	);
	color: #5c6b61;
}

.sdopt__reszta--uzyteczna {
	background: repeating-linear-gradient(
		135deg,
		#d7e6db 0 6px,
		#c8dccd 6px 12px
	);
	color: #2d5540;
}

.sdopt__akcje-wynik {
	margin: 22px 0 0;
}

@media (max-width: 820px) {

	.sdopt {
		padding: 18px 16px;
	}

	.sdopt__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sdopt__mierniki {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Wiele przekrojow w jednym zadaniu.

   Realne zamowienie to krokwie, murlaty i kontrlaty naraz. Kazdy przekroj
   dostaje wlasny blok, bo ma wlasne dlugosci handlowe i wlasna liste
   odcinkow - ale zestawienie do zamowienia jest jedno.
   -------------------------------------------------------------------------- */

/* Trzy pola warunkow ciecia w jednym rzedzie.

   Przy dwoch kolumnach zapas spadal do drugiego rzedu i wygladal na
   ustawienie osobnej kategorii, choc jest tym samym co dwa pozostale -
   poprawka do wyliczenia przed zamowieniem. Trzy kolumny po 160 px
   z odstepami mieszcza sie w 512 px, czyli w kazdej szerokosci, przy
   ktorej ta sekcja w ogole stoi w rzedzie. */

.sdopt__ustawienia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 160px));
	gap: 16px;
	margin-bottom: 20px;
}

.sdopt__przekroj {
	margin-bottom: 18px;
	padding: 16px 18px;
	background: var(--sdopt-tlo);
	border: 1px solid var(--sdopt-linia);
	border-radius: 8px;
	border-left: 3px solid var(--sdopt-zielen);
}

.sdopt__przekroj-glowa {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 4px;
}

.sdopt__pole--produkt {
	flex: 1 1 auto;
	min-width: 0;
}

.sdopt__czesc {
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sdopt-linia);
}

.sdopt__czesc:last-of-type {
	border-bottom: 0;
}

@media (max-width: 820px) {

	/* Ponizej 820 px pola trzymaja te sama szerokosc co wyzej, ale zawijaja
	   sie same, gdy przestaja sie miescic. Rozciaganie ich na cala szerokosc
	   dawaloby na tablecie trzy pola po 250 px na wpisanie jednej liczby. */
	.sdopt__ustawienia {
		grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
		justify-content: start;
	}

	.sdopt__przekroj {
		padding: 14px;
	}
}

.sdopt__przekroj-wybor {
	flex: 1 1 auto;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Druk.

   Plan ciecia idzie do reki operatora pily, wiec na wydruku zostaje sam
   wynik: bez pol formularza, bez przyciskow, bez tla. Paski zachowujemy,
   ale w wersji, ktora nie zjada tonera - z ramka zamiast wypelnienia.
   -------------------------------------------------------------------------- */

@media print {

	.sdopt__ustawienia,
	.sdopt__przekroj,
	.sdopt__akcje,
	.sdopt__akcje-wynik,
	.sdopt__wstep {
		display: none;
	}

	.sdopt {
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 11pt;
	}

	.sdopt__wynik {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.sdopt__mierniki {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.sdopt__miernik {
		padding: 6px 8px;
		background: none;
		border: 1px solid #999;
		border-left-width: 3px;
	}

	.sdopt__zakup li {
		background: none;
		border: 1px solid #999;
	}

	.sdopt__odcinek {
		background: none;
		border: 1px solid #333;
		border-right-width: 2px;
		color: #000;
	}

	.sdopt__reszta,
	.sdopt__reszta--uzyteczna {
		background: none;
		border: 1px dashed #777;
		color: #333;
	}

	.sdopt__czesc {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.sdopt__wzor {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* --------------------------------------------------------------------------
   Wybor dwustopniowy, narzedzia wiersza i dlugosci nominalne.
   -------------------------------------------------------------------------- */

.sdopt__prowadnica {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.sdopt__prowadnica li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--sdopt-tlo);
	border: 1px solid var(--sdopt-linia);
	border-radius: 8px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__prowadnica-numer,
.sdopt__krok {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sdopt-zielen);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
}

.sdopt__przekroj-glowa--dalej {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--sdopt-linia);
}

.sdopt__krok-tytul {
	flex: 1 1 auto;
	margin: 0;
	font-size: .98rem;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__usun--pozycja {
	flex: 0 0 auto;
}

.sdopt__wybor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 16px;
	margin-bottom: 4px;
}

.sdopt__przeliczone {
	display: block;
	margin-top: 4px;
	font-size: .76rem;
	color: var(--sdopt-zielen);
}

.sdopt__naddatek {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: .76rem;
	color: #6b8378;
	cursor: pointer;
}

.sdopt__dzialania {
	display: flex;
	gap: 6px;
}

.sdopt__narzedzia {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 10px;
}

.sdopt__dlugosci {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.sdopt__dlugosc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var(--sdopt-linia);
	border-radius: 999px;
	font-size: .86rem;
	cursor: pointer;
}

.sdopt__dlugosc:hover {
	border-color: var(--sdopt-zielen);
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__tabela th:last-child,
.sdopt__tabela td:last-child {
	width: 72px;
}

@media (max-width: 820px) {

	.sdopt__prowadnica {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.sdopt__wybor {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Krok 3: drabinka dlugosci, wlasna dlugosc, ustawienia zaawansowane.
   -------------------------------------------------------------------------- */

.sdopt__dlugosci-narzedzia {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 4px;
}

.sdopt__licznik {
	margin-left: auto;
	font-size: .8rem;
	font-weight: 600;
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__wlasna {
	margin-top: 14px;
}

.sdopt__wlasna-pola {
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: 340px;
}

.sdopt__pole--waski {
	max-width: 130px;
}

.sdopt__zaawansowane {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--sdopt-linia);
}

.sdopt__zaawansowane summary {
	font-size: .82rem;
	font-weight: 600;
	color: var(--sdopt-zielen);
	cursor: pointer;
}

.sdopt__zaawansowane summary:hover {
	color: var(--sdopt-zielen-ciemna);
}

.sdopt__zaawansowane-tresc {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Wiersz odcinka - jedna linia pod polem.

   Podpowiedz i naddatek staly wczesniej jedno pod drugim, przez co wiersz
   mial okolo 88 px. Przy dziesieciu pozycjach tabela wychodzila poza ekran.
   -------------------------------------------------------------------------- */

.sdopt__pod-polem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-top: 3px;
	min-height: 18px;
}

.sdopt__przeliczone {
	display: inline;
	margin: 0;
	font-size: .74rem;
	font-weight: 600;
	color: var(--sdopt-zielen);
}

.sdopt__naddatek {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: .74rem;
	color: #6b8378;
	cursor: pointer;
}

.sdopt__tabela td {
	padding: 0 8px 10px 0;
}

/* Pasek o odtworzeniu zapisanego zadania. */

.sdopt__przywrocenie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--sdopt-tlo);
	border: 1px solid var(--sdopt-linia);
	border-left: 3px solid var(--sdopt-zielen);
	border-radius: 6px;
	font-size: .84rem;
	color: #46685a;
}

/* ==========================================================================
   Warianty planu

   Trzy kryteria obok siebie. Klient widzi, ile kosztuje kazdy wybor,
   zanim go dokona - to jest ta roznica miedzy kalkulatorem
   a optymalizatorem.
   ========================================================================== */

.sdopt__warianty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.sdopt__wariant {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid #d3d7d0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
}

.sdopt__wariant:hover {
	border-color: #9fb3a6;
}

.sdopt__wariant:focus-visible {
	outline: 2px solid #265a44;
	outline-offset: 2px;
}

.sdopt__wariant--wybrany {
	border-color: #265a44;
	box-shadow: inset 0 0 0 1px #265a44;
	background: #f2f7f4;
}

.sdopt__wariant-nazwa {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	color: #1b4332;
	margin-bottom: 2px;
}

.sdopt__wariant-dane {
	display: block;
	font-size: 12.5px;
	color: #6b7280;
}

@media print {

	.sdopt__warianty {
		display: none;
	}
}

/* ==========================================================================
   Wiersz bez kompletu danych

   Pole z sama podpowiedzia wyglada na wypelnione. Wiersz zaczety, ale
   niekompletny, musi sie roznic od razu przy wpisywaniu, a nie dopiero
   po kliknieciu przycisku liczenia.
   ========================================================================== */

.sdopt__wiersz--niepelny td {
	background: #fdf3ef;
}

.sdopt__wiersz--niepelny td:first-child {
	box-shadow: inset 3px 0 0 #ee7d1f;
	border-radius: 4px 0 0 4px;
}

.sdopt__wiersz--niepelny td:last-child {
	border-radius: 0 4px 4px 0;
}

.sdopt__wiersz--niepelny .sdopt__przeliczone {
	color: #a8321e;
	font-weight: 600;
}

/* ==========================================================================
   Warunki ciecia przy pozycji

   Arkusz drukowany ukrywa pola formularza, wiec grubosc tarczy musi stac
   przy planie. Plan bez tej liczby jest wykonalny tylko na jednej pile
   i nikt nie wie, na ktorej.
   ========================================================================== */

.sdopt__warunki {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: #5a6a60;
}

@media print {

	.sdopt__warunki {
		color: #000;
		font-weight: 600;
	}
}

/* ==========================================================================
   Zaznaczone dlugosci nominalne

   Pole wyboru zostawione przegladarce mialo systemowy niebieski, obcy
   wobec calej reszty arkusza, a sam kafelek nie zmienial sie wcale -
   przy kilkunastu pozycjach trzeba bylo wodzic wzrokiem po malych
   kwadracikach, zeby policzyc, co jest wybrane.

   Teraz zaznaczenie widac po calym kafelku, a nie po znaczku w rogu.
   ========================================================================== */

.sdopt__dlugosc {
	position: relative;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.sdopt__dlugosc input[type="checkbox"] {
	/*
	 * Wlasny znacznik zamiast systemowego. appearance: none zdejmuje
	 * malowanie przegladarki razem z niebieskim, ktorego nie da sie
	 * przestawic inaczej w starszych silnikach.
	 */
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	border: 1px solid var(--sdopt-linia);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.sdopt__dlugosc input[type="checkbox"]:checked {
	border-color: var(--sdopt-zielen);
	background-color: var(--sdopt-zielen);

	/*
	 * Znak zaznaczenia jako tlo, nie jako znak w tresci - inaczej
	 * kafelek rozjezdza sie o szerokosc glifu przy przelaczaniu.
	 */
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

.sdopt__dlugosc input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sdopt-zielen);
	outline-offset: 2px;
}

.sdopt__dlugosc:has( input:checked ) {
	border-color: var(--sdopt-zielen);
	background: var(--sdopt-tlo);
	color: var(--sdopt-zielen-ciemna);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--sdopt-zielen);
}

/*
 * Przegladarka bez :has zostaje przy samym znaczniku. Dziala, tylko
 * bez wyroznienia calego kafelka - wiec i tak lepiej niz przedtem,
 * bo znacznik jest juz zielony, a nie systemowy.
 */
@supports not selector( :has( input ) ) {

	.sdopt__dlugosc {
		font-weight: inherit;
	}
}

.sdopt__dlugosc:has( input:checked ):hover {
	background: #eaf2ed;
}

@media print {

	.sdopt__dlugosc:has( input:checked ) {
		box-shadow: none;
		border-color: #000;
	}
}

/* Uwaga do planu. Nie blad - plan jest wykonalny - tylko wskazowka, ze
   da sie taniej. Stad ton piaskowy, a nie czerwony: czerwien w wyniku
   znaczy "cos nie dziala" i zuzyta na wskazowke przestaje cokolwiek
   znaczyc przy prawdziwym bledzie. */

.sdopt__uwaga {
	margin: 10px 0 0;
	padding: 10px 14px;
	background: #fdf6ea;
	border-left: 3px solid #d9a441;
	border-radius: 0 6px 6px 0;
	font-size: .88rem;
	line-height: 1.5;
	color: #6b5836;
}

.sdopt__uwaga strong {
	color: #4a3d24;
}