/* Spiżarnia Pupila – Kalkulatory karmy
   Komponenty .sp-* (przyciski, pola, wybory, segmenty, komunikaty, suwak, karty) daje motyw
   Spiżarnia Pupila. Przy innym motywie ich prosty odpowiednik wczytuje fallback.css.
   Tu jest wyłącznie układ kalkulatorów i elementy, których motyw nie ma. Kolory, promień i krój
   czytane z tokenów motywu --sp-* z zapasem, bez własnego fontu. */

.spkk {
	--spkk-ink: var(--sp-ink, #0e2a1f);
	--spkk-gold: var(--sp-gold, #9e895e);
	--spkk-gold-light: var(--sp-gold-light, #cbb98e);
	--spkk-action: var(--sp-action, #735f38);
	--spkk-paper: var(--sp-paper, #f7f4ed);
	--spkk-surface: var(--sp-surface, #fff);
	--spkk-soft: var(--sp-soft, #f0ece3);
	--spkk-muted: var(--sp-muted, #6f6a63);
	--spkk-line: var(--sp-line, #d8d1c4);
	--spkk-field-line: var(--sp-field-line, #938979);
	--spkk-pole: var(--sp-pole, #fbf8f1);
	--spkk-hair: var(--sp-hair, rgba(158, 137, 94, .55));
	--spkk-hair-ink: var(--sp-hair-ink, rgba(203, 185, 142, .34));
	--spkk-disabled-bg: var(--sp-disabled-bg, #e7e1d6);
	--spkk-disabled-text: var(--sp-disabled-text, #625e55);
	--spkk-disabled-line: var(--sp-disabled-line, #b7afa0);
	--spkk-radius: var(--sp-radius, 2px);
	--spkk-shadow-overlay: var(--sp-shadow-overlay, 0 12px 36px rgba(14, 42, 31, .14));
	--spkk-fast: var(--sp-fast, 180ms);
	container: spkk / inline-size;
	display: grid;
	gap: var(--sp-s5, 48px);
	width: 100%;
	color: var(--spkk-ink);
	font-family: var(--sp-serif, "SP Baskerville", Baskerville, Georgia, serif);
	font-size: 18px;
	font-synthesis: none;
	font-weight: 400;
	line-height: 1.5;
}

.spkk *,
.spkk *::before,
.spkk *::after {
	box-sizing: border-box;
}

.spkk [hidden] {
	display: none !important;
}

/* Treść strony (.art-tresc) ma własne rozmiary akapitów, list i nagłówków - w kalkulatorze obowiązują
   rozmiary komponentów. :where() nie podbija specyficzności, więc nagłówki poradnika zostają motywowe. */
.spkk :where(p, h1, h2, h3, h4, dl, dd, ul, ol, figure) {
	margin: 0;
}

.spkk sup {
	font-size: .62em;
	line-height: 0;
}

.spkk .spkk-strong {
	color: var(--spkk-ink);
}

.spkk .spkk-label {
	display: block;
	font-size: 13px;
	letter-spacing: 1.3px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--spkk-action);
}

.spkk .spkk-muted,
.spkk .spkk-help,
.spkk .spkk-help p {
	font-size: 16px;
	line-height: 1.45;
	color: var(--spkk-muted);
}

.spkk div.spkk-help {
	display: grid;
	gap: 4px;
}

.spkk .spkk-h2 {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 400;
	letter-spacing: -.3px;
	line-height: 1.15;
	margin: 0;
}

.spkk .spkk-h3 {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

.spkk .spkk-h4 {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
}

.spkk .spkk-h2 em,
.spkk .spkk-title em {
	font-style: italic;
}

/* ── Nagłówek kalkulatora ── */

.spkk-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr);
	gap: var(--sp-s4, 32px);
	align-items: start;
}

.spkk-intro:not(:has(> .spkk-intro-aside)) {
	grid-template-columns: minmax(0, 1fr);
}

.spkk .spkk-title {
	font-size: var(--sp-h2, clamp(30px, 3.2vw, 40px));
	font-weight: 400;
	letter-spacing: -.5px;
	line-height: 1.12;
	margin: 0;
}

.spkk .spkk-lead {
	max-width: 62ch;
	font-size: 19px;
	line-height: 1.55;
	color: var(--spkk-muted);
}

.spkk .spkk-title + .spkk-lead {
	margin-top: var(--sp-s2, 16px);
}

.spkk .spkk-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--sp-s3, 24px);
	padding: 0;
	list-style: none;
}

.spkk .spkk-badges li {
	margin: 0;
	font-size: 14px;
	line-height: 1.25;
}

.spkk-intro-aside {
	padding: var(--sp-s3, 24px);
	background: var(--spkk-soft);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk .spkk-benefits {
	display: grid;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.spkk .spkk-benefits li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--spkk-hair);
	font-size: inherit;
	line-height: inherit;
}

.spkk .spkk-benefits li:last-child {
	padding-bottom: 0;
}

.spkk-benefit-title {
	font-size: 19px;
	line-height: 1.3;
}

.spkk-benefit-text {
	font-size: 16px;
	line-height: 1.45;
	color: var(--spkk-muted);
}

/* ── Układ: konfiguracja i wynik ── */

.spkk-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
	gap: var(--sp-s3, 24px);
	align-items: start;
}

.spkk-panel {
	container: spkk-panel / inline-size;
	min-width: 0;
}

.spkk-results.is-sticky {
	position: sticky;
	top: 100px;
}

.admin-bar .spkk-results.is-sticky {
	top: 132px;
}

.spkk-panel-head {
	display: grid;
	gap: 8px;
	margin-bottom: var(--sp-s4, 32px);
	padding-bottom: var(--sp-s3, 24px);
	border-bottom: 1px solid var(--spkk-line);
}

.spkk .spkk-panel-head .sp-kicker {
	margin-bottom: 4px;
}

.spkk-stack {
	display: grid;
	gap: var(--sp-s4, 32px);
}

.spkk-stack > .spkk-block {
	padding-top: var(--sp-s4, 32px);
	border-top: 1px solid var(--spkk-line);
}

.spkk-block {
	display: grid;
	gap: var(--sp-s3, 24px);
	min-width: 0;
}

.spkk .spkk-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.spkk .spkk-legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	font-size: 17px;
	line-height: 1.35;
}

.spkk .spkk-legend-heading {
	margin-bottom: 14px;
}

.spkk-legend-note {
	font-size: 15px;
	color: var(--spkk-muted);
}

.spkk-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-s2, 16px);
	align-items: start;
}

/* ── Pola ── */

.spkk .sp-field {
	margin: 0;
}

.spkk .sp-field > .spkk-input-wrap {
	position: relative;
	display: block;
	margin: 0;
	font-size: inherit;
}

.spkk .spkk-input-wrap input {
	font-variant-numeric: tabular-nums;
}

.spkk .spkk-input-wrap.has-unit input {
	padding-right: calc(var(--spkk-unit-width, 1.4em) + 26px);
}

.spkk .spkk-unit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	color: var(--spkk-muted);
	pointer-events: none;
}

.spkk .sp-field input:disabled {
	background: var(--spkk-disabled-bg);
	border-color: var(--spkk-disabled-line);
	color: var(--spkk-disabled-text);
	cursor: not-allowed;
}

.spkk .sp-field input:disabled + .spkk-unit {
	color: var(--spkk-disabled-text);
}

.spkk .spkk-field--compact {
	max-width: 260px;
}

.spkk .spkk-field-label {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
}

/* ── Wybory ── */

.spkk .spkk-segment {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

.spkk .spkk-segment label {
	position: relative;
	text-align: center;
}

.spkk-options {
	display: grid;
	gap: 8px;
}

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

.spkk-options--bcs {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.spkk .spkk-choice {
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.spkk .spkk-choice input {
	flex: none;
	margin-top: 4px;
}

.spkk-choice-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.spkk-choice-title {
	font-size: 18px;
	line-height: 1.3;
}

.spkk-choice-hint {
	font-size: 15px;
	line-height: 1.35;
	color: var(--spkk-muted);
}

.spkk .sp-choice:has(input:focus-visible) {
	outline: 1px solid var(--spkk-action);
	outline-offset: 3px;
}

.spkk .sp-choice input:focus-visible {
	outline: 0;
}

/* Wspólny stan wyłączony ma pierwszeństwo przed hover i zaznaczeniem (DESIGN-SYSTEM §6). */
.spkk .sp-choice:has(input:disabled),
.spkk .sp-choice:has(input:disabled):hover {
	background: var(--spkk-disabled-bg);
	border-color: var(--spkk-disabled-line);
	color: var(--spkk-disabled-text);
	cursor: not-allowed;
}

.spkk .sp-choice input:disabled {
	cursor: not-allowed;
}

.spkk .sp-choices {
	gap: 8px;
}

.spkk-factor-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	margin-top: var(--sp-s2, 16px);
}

.spkk-factor-row > .sp-choice {
	flex: none;
}

.spkk-factor-row > .spkk-field--compact {
	flex: 1 1 200px;
}

.spkk-stepper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--sp-s2, 16px);
}

.spkk-stepper-label {
	margin-right: 8px;
	font-size: 17px;
}

.spkk-stepper-value {
	min-width: 4.5ch;
	font-size: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.spkk .spkk-stepper .sp-link {
	margin-left: 8px;
}

/* ── BCS ── */

.spkk-block-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.spkk-block-head > div {
	display: grid;
	flex: 1 1 280px;
	gap: 6px;
}

.spkk .spkk-current {
	display: grid;
	flex: 0 1 auto;
	gap: 2px;
	padding: 12px 16px;
	background: var(--spkk-pole);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk-current-value {
	font-size: 18px;
	line-height: 1.3;
}

.spkk-helper-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 16px 20px;
	background: var(--spkk-pole);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk-helper-bar > div {
	display: grid;
	flex: 1 1 240px;
	gap: 2px;
}

.spkk .spkk-helper-title {
	font-size: 19px;
	line-height: 1.3;
}

.spkk-helper {
	display: grid;
	gap: var(--sp-s3, 24px);
}

.spkk-suggestion {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 16px;
	align-items: start;
	padding: 20px;
	background: var(--spkk-surface);
	border: 1px solid var(--spkk-gold);
	border-radius: var(--spkk-radius);
}

.spkk-suggestion-main {
	display: grid;
	gap: 6px;
}

.spkk .spkk-suggestion-title {
	font-size: 22px;
	line-height: 1.25;
}

.spkk .spkk-suggestion-note {
	grid-column: 1 / -1;
}

.spkk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.spkk-bcs-detail {
	display: grid;
	gap: 6px;
	padding-left: 16px;
	border-left: 1px solid var(--spkk-gold);
}

.spkk .spkk-bcs-detail-title {
	font-size: 19px;
	line-height: 1.3;
}

/* ── Wyszukiwarka produktów ── */

.spkk-combobox-box {
	position: relative;
}

.spkk .spkk-combobox input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

.spkk-listbox-panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: min(420px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--spkk-paper);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
	box-shadow: var(--spkk-shadow-overlay);
}

.spkk .spkk-listbox-head {
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--spkk-muted);
	border-bottom: 1px solid var(--spkk-line);
}

.spkk .spkk-listbox-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--spkk-muted);
}

.spkk .spkk-listbox {
	display: block;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.spkk .spkk-listbox li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 10px 16px;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
}

.spkk .spkk-listbox li[aria-selected="true"] {
	background: var(--spkk-soft);
}

.spkk-option-name {
	font-size: 17px;
	line-height: 1.3;
}

.spkk-option-meta {
	font-size: 14px;
	line-height: 1.4;
	color: var(--spkk-muted);
	font-variant-numeric: tabular-nums;
}

.spkk-selected {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.spkk-selected-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--spkk-surface);
	border: 1px solid var(--spkk-gold);
	border-radius: var(--spkk-radius);
}

.spkk-selected-card > div {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.spkk .spkk-selected-name {
	font-size: 18px;
	line-height: 1.3;
}

.spkk .spkk-selected-card .sp-link {
	flex: none;
	min-height: 44px;
	padding-block: 10px;
}

/* ── Parametry karm ── */

.spkk-foods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-s2, 16px);
	align-items: start;
}

.spkk[data-spkk-mode="dry"] .spkk-foods,
.spkk[data-spkk-mode="wet"] .spkk-foods {
	grid-template-columns: minmax(0, 1fr);
}

.spkk-food {
	display: grid;
	gap: var(--sp-s2, 16px);
	align-content: start;
	min-width: 0;
	padding: var(--sp-s3, 24px);
	background: var(--spkk-pole);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk-food--wide {
	grid-column: 1 / -1;
}

.spkk-label-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.spkk-atwater {
	font-size: 17px;
	color: var(--spkk-action);
	font-variant-numeric: tabular-nums;
}

.spkk .spkk-label-grid {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
}

.spkk-split {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.spkk .spkk-split .sp-suwak {
	margin: 0;
}

.spkk .spkk-split-values {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}

/* ── Wynik ── */

.spkk-summary {
	display: grid;
	gap: 6px;
	padding: 30px 24px 32px;
	background: var(--spkk-ink);
	border-radius: var(--spkk-radius);
	color: var(--spkk-paper);
}

.spkk .spkk-summary .spkk-label {
	color: var(--spkk-gold-light);
}

.spkk .spkk-summary-kcal {
	margin-top: 4px;
	font-size: clamp(36px, 3.4vw, 46px);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.spkk-summary-unit {
	font-size: .46em;
}

.spkk .spkk-summary-line {
	font-size: 17px;
	line-height: 1.45;
}

.spkk .spkk-copy-button {
	justify-self: start;
	margin-top: 14px;
}

.spkk .spkk-summary-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
	margin-top: 8px;
}

.spkk-summary-meta > div {
	min-width: 0;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--spkk-hair-ink);
}

.spkk-summary-meta dt {
	font-size: 13px;
	letter-spacing: 1.3px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--spkk-gold-light);
}

.spkk .spkk-summary-meta dd {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.4;
}

.spkk-advisories {
	display: grid;
	gap: 12px;
	margin-top: var(--sp-s3, 24px);
}

.spkk-advisories:empty {
	display: none;
}

.spkk .spkk-figures {
	display: grid;
	margin-top: var(--sp-s3, 24px);
}

.spkk-figure {
	display: grid;
	gap: 4px;
	padding: 18px 0;
	border-top: 1px solid var(--spkk-line);
}

.spkk-figure dt {
	font-size: 16px;
	line-height: 1.4;
	color: var(--spkk-muted);
}

.spkk-figure--main dt {
	color: var(--spkk-action);
}

.spkk .spkk-figure dd {
	display: grid;
	gap: 4px;
}

.spkk-figure-value {
	font-size: 30px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.spkk-figure-value--big {
	font-size: clamp(34px, 3vw, 40px);
}

.spkk-figure-sub,
.spkk-figure-line {
	font-size: 17px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.spkk-formula {
	font-size: 15px;
	line-height: 1.5;
	color: var(--spkk-muted);
	font-variant-numeric: tabular-nums;
}

.spkk .spkk-energy-split {
	margin-top: var(--sp-s3, 24px);
	padding: 12px 16px;
	font-size: 17px;
	background: var(--spkk-pole);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk .spkk-portions .spkk-figures {
	margin-top: 0;
}

.spkk .spkk-energy-split + .spkk-figures {
	margin-top: 8px;
}

.spkk-results > .sp-notice {
	margin-top: var(--sp-s2, 16px);
}

.spkk .sp-notice-body p,
.spkk .sp-notice-body li {
	font-size: inherit;
	line-height: inherit;
}

.spkk .sp-notice-body ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding-left: 20px;
}

/* ── Objaśnienia ── */

.spkk-explain {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	gap: var(--sp-s5, 48px);
	align-items: start;
	padding-top: var(--sp-s5, 48px);
	border-top: 1px solid var(--spkk-hair);
}

.spkk-explain-intro {
	display: grid;
	gap: 12px;
}

.spkk .spkk-explain-text {
	font-size: 18px;
	line-height: 1.55;
	color: var(--spkk-muted);
}

.spkk .spkk-explain-quote {
	font-size: 21px;
	font-style: italic;
	line-height: 1.4;
}

.spkk .spkk-explain-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sp-s4, 32px);
	padding: 0;
	list-style: none;
}

.spkk .spkk-explain-list li {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--spkk-gold);
	font-size: 17px;
	line-height: 1.5;
	color: var(--spkk-muted);
}

/* ── Kalkulator suchej masy ── */

.spkk-dm-head {
	display: grid;
	gap: var(--sp-s2, 16px);
	max-width: 780px;
}

.spkk .spkk-dm-card {
	padding: 0;
}

.spkk-dm-form {
	display: grid;
	gap: var(--sp-s3, 24px);
	padding: var(--sp-s4, 32px);
}

.spkk-issues:empty {
	display: none;
}

.spkk-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: var(--sp-s3, 24px);
	border-top: 1px solid var(--spkk-line);
}

.spkk-rounding {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.spkk-rounding-label {
	font-size: 17px;
}

.spkk .spkk-digits label {
	position: relative;
	min-width: 52px;
	font-variant-numeric: tabular-nums;
}

.spkk-dm-results {
	display: grid;
	gap: var(--sp-s3, 24px);
	padding: var(--sp-s4, 32px);
	background: var(--spkk-pole);
	border-top: 1px solid var(--spkk-line);
}

.spkk .spkk-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--sp-s3, 24px);
}

.spkk-stat {
	display: grid;
	gap: 4px;
	align-content: start;
	min-width: 0;
	padding: 14px 0 16px;
	border-top: 1px solid var(--spkk-gold);
}

.spkk-stat dt {
	font-size: 13px;
	letter-spacing: 1.1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--spkk-muted);
}

.spkk .spkk-stat dd {
	font-size: 30px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.spkk-copy {
	display: grid;
	gap: 10px;
}

.spkk-copy-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
}

.spkk-copy-label {
	font-size: 17px;
}

.spkk .spkk-copy-status {
	font-size: 15px;
	color: var(--sp-success, #36533f);
}

.spkk .spkk-copy-status:empty {
	display: none;
}

.spkk .spkk-copy-status.is-error {
	color: var(--sp-error, #8a3b32);
}

.spkk .spkk-textarea {
	display: block;
	width: 100%;
	min-height: 178px;
	margin: 0;
	padding: 14px;
	resize: vertical;
	font: inherit;
	font-size: 17px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: var(--spkk-ink);
	background: var(--spkk-surface);
	border: 1px solid var(--spkk-field-line);
	border-radius: var(--spkk-radius);
	box-shadow: none;
}

.spkk .spkk-textarea:focus-visible {
	outline: 1px solid var(--spkk-action);
	outline-offset: -1px;
	border-color: var(--spkk-action);
}

.spkk .spkk-note {
	font-size: 15px;
	line-height: 1.45;
	color: var(--spkk-muted);
}

/* Poradnik: nagłówki i akapity z typografii artykułu motywu, tu tylko rytm odstępów. */
.spkk-guide {
	display: grid;
}

.spkk-guide > * + * {
	margin-top: var(--sp-s3, 24px);
}

.spkk-guide > :is(h2, h3) {
	margin-top: var(--sp-s5, 48px);
}

.spkk-guide > :first-child {
	margin-top: 0;
}

.spkk .spkk-formula-box {
	padding: 18px 20px;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
	background: var(--spkk-pole);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk-examples {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-s2, 16px);
}

.spkk-example {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: var(--sp-s3, 24px);
	background: var(--spkk-surface);
	border: 1px solid var(--spkk-line);
	border-radius: var(--spkk-radius);
}

.spkk .spkk-example :is(h2, h3, h4) {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.spkk .spkk-example-result {
	color: var(--spkk-action);
}

.spkk-faq {
	display: grid;
	gap: 8px;
}

.spkk .spkk-faq-q {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

.spkk-cta {
	padding: var(--sp-s4, 32px);
	background: var(--spkk-ink);
	border-radius: var(--spkk-radius);
	color: var(--spkk-paper);
}

.spkk .spkk-cta p {
	font-size: 19px;
	line-height: 1.55;
}

/* ── Szerokość kontenera: ten sam kalkulator działa w pełnej stronie i w wąskiej kolumnie ── */

@container spkk (max-width: 1040px) {
	.spkk-intro,
	.spkk-explain {
		grid-template-columns: minmax(0, 1fr);
	}

	.spkk-explain {
		gap: var(--sp-s3, 24px);
	}
}

@container spkk (max-width: 900px) {
	.spkk-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.spkk-results.is-sticky {
		position: static;
	}
}

@container spkk (max-width: 700px) {
	.spkk-examples,
	.spkk .spkk-explain-list {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.spkk-dm-form,
	.spkk-dm-results {
		padding: var(--sp-s3, 24px);
	}
}

@container spkk (max-width: 480px) {
	.spkk .spkk-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.spkk-dm-form,
	.spkk-dm-results {
		padding: 20px;
	}

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

	.spkk-toolbar .sp-button {
		width: 100%;
	}
}

@container spkk-panel (max-width: 600px) {
	.spkk-foods {
		grid-template-columns: minmax(0, 1fr);
	}

	.spkk-food--wide {
		grid-column: auto;
	}
}

@container spkk-panel (max-width: 520px) {
	.spkk-grid-2,
	.spkk-options--2 {
		grid-template-columns: minmax(0, 1fr);
	}

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

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

	.spkk .spkk-segment label {
		border-right: 0;
		border-bottom: 1px solid var(--spkk-field-line);
	}

	.spkk .spkk-segment label:last-child {
		border-bottom: 0;
	}

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

	.spkk-food {
		padding: var(--sp-s2, 16px);
	}

	.spkk .spkk-field--compact {
		max-width: none;
	}
}

@container spkk-panel (max-width: 400px) {
	.spkk .spkk-summary-meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.spkk-summary {
		padding: 26px 20px 28px;
	}

	/* Dziewięć poziomów BCS w dwóch kolumnach - w jednej zajmowały na telefonie kilka ekranów. */
	.spkk .spkk-options--bcs .spkk-choice {
		gap: 8px;
		padding: 10px 12px;
	}

	.spkk-options--bcs .spkk-choice-title {
		font-size: 17px;
	}
}

@media (max-width: 600px) {
	.spkk .sp-card.spkk-panel {
		padding: 20px;
	}
}