/* Spiżarnia — Spiżarnia bez ilości (sesja 2c, docs/architektura.md §13.4; system v2). Klasy .sp-*, .sp-item__*, .kreator__*
   są kontraktem z js/ui/screens/spizarnia.js. Wpięte po przepisy.css. Tylko zmienne z tokens.css, bez cieni i bez czerwieni;
   każda reguła z liczbami ma tabular-nums jawnie (skrót font: ją zeruje). */

/* ---------- widok pod chipem „Spiżarnia” w Zapasach: grupy z nagłówkami jak w Zapasach, w środku zawijane chipy ---------- */
.sp-list { padding-bottom: 8px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 6px; }
/* chip rzeczy: 36 wizualnie w celu 44 (::before łapie 4 px nad i pod), card + hairline, r8, 13/500 ink; jak .chip, ale własna klasa,
   bo w środku może stać koszyk 14 przed nazwą */
.sp-chip { position: relative; height: 36px; max-width: 100%; padding: 0 12px; border-radius: var(--r8); background: var(--card); border: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-chip) var(--font-sans); color: var(--ink); white-space: nowrap; transition: background var(--ease), border-color var(--ease); font-variant-numeric: tabular-nums; }
.sp-chip::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.sp-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-chip__name b { font-weight: 600; }
/* w zakupach: tint-yellow (jak podpowiedź do sprawdzenia) i koszyk 14 w graficie przed nazwą; nazwa zostaje w ink */
.sp-chip--cart { background: var(--tint-yellow); border-color: var(--tint-yellow); }
.sp-chip__icon { display: flex; flex: none; color: var(--graphite); }
.sp-chip__icon svg { display: block; }
@media (hover: hover) { .sp-chip:hover { background: var(--beige); } }
/* cichy „Dodaj” po prawej nagłówka grupy (cel 44 w nagłówku 44) */

/* ---------- arkusz rzeczy (krótki): linia stanu 13 text-2, duży przycisk 56, rząd cichych akcji ---------- */
.sp-item__state { padding: 2px 0 0; font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sp-item__main { padding: 16px 0 0; }
/* w zakupach: zdanie 15 zamiast przycisku, pod nim cichy „Zdejmij z zakupów” do lewej krawędzi tekstu */
.sp-item__note { padding: 14px 0 0; font: 500 var(--fs-body)/1.35 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.sp-item__unshop { display: flex; margin: 2px -8px 0; }
/* „Zmień nazwę lub grupę” po lewej, „Usuń ze spiżarni” po prawej (cele 48); przy wąskim ekranie zawijają się */
.sp-item__acts { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; margin: 6px -8px 0; }
/* tryb edycji: pole „Nazwa” 52, chipy grup zawinięte (skróty nazw), „Wstecz” w nagłówku jak w Nowym przepisie */
.sp-item__field { margin-top: 14px; }
.sp-item__groups { padding-top: 4px; padding-bottom: 4px; gap: 8px; }
.sp-item__back { margin: -12px auto -12px 0; min-height: 48px; }

/* ---------- kreator „Uzupełnijmy spiżarnię” (arkusz pełnoekranowy) ---------- */
.kreator__back { margin: -12px auto -12px 0; min-height: 48px; }
/* linia „3 z 10” 12 text-2, tytuł kroku 15/500, pytanie 15 w text-2 */
.kreator__step { padding: 4px 0 0; font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.kreator__title { padding: 2px 0 0; font: 500 var(--fs-body)/1.3 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.kreator__q { padding: 2px 0 0; font: 500 var(--fs-body)/1.3 var(--font-name); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* siatka chipów (katalog i podpowiedzi): zawijana, bez marginesów bocznych; cel 48 chipa przez ::before z components.css */
.kreator__grid { padding-top: 4px; padding-bottom: 4px; gap: 8px; }
/* podpis w chipie podpowiedzi „· w 3 przepisach” 12 text-2 */
.kreator__count { padding-left: 2px; font: 500 var(--fs-3) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip--on .kreator__count { font-weight: 500; }
.kreator__none { padding: 6px 0 0; font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* pole „Dodaj własną” z „Dodaj” w środku (jak w Zakupach); cichy „Wklej listę” pod nim do prawej */
.kreator__own { margin-top: 14px; }
.kreator__paste-row { display: flex; justify-content: flex-end; margin: 2px -8px 0; }
/* tryb wklejania: pole na ok. 5 linii, pod nim cichy „Nie wklejaj” po lewej i „Dodaj N” wypełniające resztę (slot do renderPart) */
.kreator__paste { margin-top: 10px; }
.kreator__paste-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kreator__paste-foot > .btn--quiet { margin-left: -8px; }
.kreator__paste-slot { flex: 1; display: flex; min-width: 0; }
.kreator__paste-slot > .btn { flex: 1; }
/* stopka: „Dalej” / „Gotowe” 56 wypełnia, cichy „Pomiń” obok */
.kreator__foot { display: flex; align-items: center; gap: 8px; }
.kreator__foot > .btn--primary { flex: 1; min-width: 0; }
.kreator__foot > .btn--quiet { flex: none; margin-right: -8px; }