/* Spiżarnia — Przepisy (sesja 2a: makiety 06, 11a, 11c, 12, 13, 17a–d, 31; system v2). Klasy .przepisy__*, .przepis__*,
   .braki*, .nowy__*, .linki*, .lq-row*, .talerz*, .seg* są kontraktem z js/ui/screens/{przepisy,przepis,nowy}.js. Wpięte po components.css
   i screens.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).
   Część 2 (§12.5): przełącznik „Lista | Talerze”, siatka Talerzy, kroki link / linki arkusza, zdjęcia. */

/* ---------- zakładka Przepisy ---------- */
.przepisy { padding: 8px 0 0; flex: 1; }
/* pole, chipy i linia sortowania przyklejone u góry przy przewijaniu listy (ta sama zasada, co w Zapasach) */
.przepisy__sticky { position: sticky; top: var(--safe-t); z-index: 10; background: var(--cream); padding-bottom: 2px; }
.przepisy__search { margin: 0 16px; }
/* wiersz sortowania: ciche linki po lewej (z zanikiem przy nadmiarze), przełącznik widoku po prawej (makieta 06 / 11a) */
.przepisy__sortrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 16px; }
.przepisy__sortrow .przepisy__sort { flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* segmentowany przełącznik „Lista | Talerze”: obrys hairline r6, segment 12/600 padding 4 8, wybrany beige + ink; cel 44 przez ::before */
.seg { display: inline-flex; flex: none; border: 1px solid var(--hairline); border-radius: var(--r6); overflow: hidden; background: var(--card); }
.seg__btn { position: relative; padding: 4px 8px; font: 600 var(--fs-3)/1.2 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.seg__btn::before { content: ''; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
.seg__btn--on { background: var(--beige); color: var(--ink); }
/* linia sortowania 12 px: wybrane ink 600 z podkreśleniem 1,25 px, reszta text-2; cele 44 mimo małego napisu (system-readme) */
.przepisy__sort { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-variant-numeric: tabular-nums; }
.przepisy__sort::-webkit-scrollbar { display: none; }
.przepisy__sort-btn { min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); flex: none; font-variant-numeric: tabular-nums; }
.przepisy__sort-btn--on { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.25px; text-underline-offset: 3px; }
.przepisy__sort-dot { color: var(--text-3); }
/* karta „Kolej na” nad grupami (makieta 31): wiersze przepisów w karcie, ostatni bez hairline */
.przepisy__kolej { margin: 4px 16px 0; }
.przepisy__kolej .rrow { padding-left: 16px; padding-right: 10px; }
.przepisy__kolej .card__head { padding-bottom: 4px; }
/* grupy płaskie 40 px; pierwszy nagłówek pod przyklejonym blokiem bez odstępu */
.przepisy__list .group-head--flat.group-head--first { margin-top: 2px; }
.przepisy__list .group-head--collapsed + .group-head--flat { margin-top: 0; }
.przepisy__foot { height: 8px; }
/* Talerze (makieta 06): jedyna siatka w aplikacji — cztery kółka 76 w rzędzie, odstęp 14/10; na szerokim ekranie tyle, ile wejdzie po 82 */
.talerze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; padding: 2px 16px 12px; }
@media (min-width: 480px) { .talerze { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); } }
/* komórka = jeden przycisk (kółko + nazwa + mini tag), cel ≥ 82 × 97 */
.talerz { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; color: var(--ink); font-family: var(--font-sans); }
.talerz .photo { max-width: 100%; }
.talerz__name { font: 500 var(--fs-chip)/1.15 var(--font-name); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; text-wrap: pretty; max-width: 100%; font-variant-numeric: tabular-nums; }
.talerz__name b { font-weight: 600; }

/* ---------- strona Przepis (makieta 12, kit Przepis.jsx, IngredientRow v2): margines treści 20 ---------- */
.przepis { padding: 4px 20px 0; flex: 1; }
/* nagłówek strony: strzałka wstecz (48) · kółko 128 · nazwa w kroju nagłówka ekranu (jedyny serif) z meta pod spodem */
/* rząd ze strzałką wstecz w lewym górnym rogu (jak .screen-head--back: 8 px od lewej, 10 od góry) */
/* nagłówek stoi poza .przepis (bez jego paddingu 20 px), więc odstępy boczne ma własne: strzałka 8 px od krawędzi, kółko 20 px */
.przepis__top { display: flex; align-items: center; padding: 4px 8px 0; margin-bottom: -6px; }
.przepis__back { flex: none; }
/* nagłówek: kółko i kolumna tytułu (wyśrodkowana względem kółka) na całej szerokości */
.przepis__hero { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.przepis__hero .photo { flex: none; }
.przepis__hero-text { min-width: 0; flex: 1; }
/* tytuł: łamanie tylko na spacjach; za długie słowo → mniejszy stopień (klasy z przepis.js po długości najdłuższego słowa) */
.przepis__name { font: 500 34px/1.05 var(--font-serif); color: var(--ink); margin: 0; overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
.przepis__name--m { font-size: 30px; }
.przepis__name--s { font-size: 27px; }
.przepis__name--xs { font-size: 24px; overflow-wrap: anywhere; }
@media (min-width: 600px) { .przepis__name { font-size: 40px; } .przepis__name--m { font-size: 36px; } .przepis__name--s { font-size: 32px; } .przepis__name--xs { font-size: 28px; } }
.przepis__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* kółko 96 z podpisem „zdjęcie ze strony” 12 text-3 pod spodem (spec 31) */
.przepis__photo { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; position: relative; }
/* ołówek w prawym górnym rogu kółka: 32 wizualnie na celu 44, tło karty, pierścień hairline */
.przepis__pencil { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--graphite); cursor: pointer; }
.przepis__pencil::before { content: ''; position: absolute; inset: -6px; }
.przepis__pencil svg { display: block; }
.przepis__pencil:focus-within { outline: 1px solid var(--beige-deep); outline-offset: 1px; }
.przepis__photo-cap { font: 500 var(--fs-3)/1.2 var(--font-sans); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* pod nagłówkiem: „Dodaj zdjęcie” / „Zmień zdjęcie” (label z ukrytym input) i „Usuń zdjęcie” — ciche, cele 48 */
/* tytuł obiektu 14/500 title-ink (system v2), nie serif */
.przepis__meta { font: 500 var(--fs-chip)/1.3 var(--font-sans); color: var(--text-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mini-tag--time { display: inline-flex; align-items: center; gap: 4px; } /* tag czasu: zegarek + „45 min” */
.mini-tag--time svg { display: block; }
/* chipy typu, Bazy i tagów: nieklikalne (span), zawijane */
/* porcje: stepper − N + z podpisem „porcje” i „przepis na 2”, gdy skalowane */
.przepis__servings { display: flex; align-items: center; gap: 10px; margin-top: 6px; margin-left: -12px; }
.przepis__grams { margin-left: auto; margin-right: -8px; } /* „Pokaż w gramach” po prawej stronie wiersza porcji */
.przepis__servings--only { justify-content: flex-end; margin-left: 0; }
.przepis__servings-label { font: 500 var(--fs-chip)/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.przepis__rule { margin-top: 14px; }
.przepis__ings { display: flex; flex-direction: column; }
/* pod składnikami: cichy „Pokaż w gramach” po lewej, cichy „Brakujące do zakupów · 3” po prawej (cele 48) */
.przepis__under { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 0; margin: 0 -8px; }
.przepis__under .btn--quiet { padding: 0 8px; }
.przepis__added { padding: 10px 0 0; }
.przepis__added .added-line { margin-bottom: 0; }
.przepis__steps { display: flex; flex-direction: column; }
/* cicha linia (bez kroków, źródło, notatki) */
.przepis__quiet { font: 500 var(--fs-3)/1.4 var(--font-sans); color: var(--text-2); padding: 6px 0 0; text-wrap: pretty; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.przepis__source { padding-top: 14px; }
.przepis__source a { color: var(--olive); font-weight: 600; }
.przepis__notes { font: 500 var(--fs-chip)/1.4 var(--font-sans); color: var(--text-2); padding: 8px 0 0; white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* siatka cichych akcji 2 × 48 (makieta 12): olive 14/600, hairline pod komórką; „Usuń” w text-2 bez hairline */
.przepis__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 10px 0 0; }
.przepis__act { min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 var(--fs-btn)/1.2 var(--font-sans); color: var(--olive); border-bottom: 1px solid var(--hairline); width: 100%; font-variant-numeric: tabular-nums; }
.przepis__act--muted { color: var(--text-2); border-bottom: 0; }
/* „Zapisane: gotowałam dziś · Cofnij” w miejscu „Gotowałam dziś” (8 s), na całą szerokość */
.przepis__saved { grid-column: 1 / -1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 2px; font: 500 var(--fs-chip)/1.3 var(--font-sans); color: var(--text-2); border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.przepis__saved .btn--quiet { min-height: 44px; padding: 0 6px; }
.przepis__end { height: 16px; }

/* ---------- arkusz „Brakujące do zakupów” (makieta 13) ---------- */
.braki__hint { padding: 0 0 8px; font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.braki__list { display: flex; flex-direction: column; }
/* wiersz 56: cały wiersz to jeden cel przełączania (kółko bierne); „masz” i „już w zakupach” bez celu (div) */
.braki-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--hairline); text-align: left; color: var(--ink); font-family: var(--font-sans); }
.braki-row--last { border-bottom: 0; }
.braki-row .checkbox { transition: background var(--ease), box-shadow var(--ease); }
.braki-row__text { flex: 1; min-width: 0; font: 500 var(--fs-body)/1.25 var(--font-name); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.braki-row__note { font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* podpis stanu po prawej: zwykły 12 text-2 („masz” w sage-text), nie wersaliki (system-readme) */
.braki-row__state { flex: none; font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.braki-row__state--sage { color: var(--sage-text); }
.braki-row--off .braki-row__text { color: var(--text-2); }

/* ---------- arkusz „Nowy przepis” (17a–b jako arkusz pełnoekranowy, jak Dodaj) ---------- */
/* „Wstecz” cichy w nagłówku arkusza (headExtra), przy tytule */
.nowy__back { margin: -12px auto -12px 0; min-height: 48px; }
/* krok wyboru: kafelki pełnej szerokości 72 px z podpisem po prawej (17a) */
.nowy__tiles { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.tile--wide { min-height: 72px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.tile--wide .tile__title { flex: none; }
.tile--wide .tile__hint { text-align: right; max-width: 62%; text-wrap: pretty; }
.nowy__hint { padding: 12px 2px 0; font: 500 var(--fs-chip)/1.4 var(--font-sans); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
/* bez klucza domu: zdanie zamiast pola (§12.6) */
.nowy__nokey { padding: 8px 2px 0; font: 500 var(--fs-body)/1.35 var(--font-name); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
/* krok link (17a): linia stanu 13 text-2 pod polem („Czytam stronę.”), bez paska i bez animacji */
/* linia stanu importu z łyżką mieszającą w misce: ruch tylko w trakcie czekania po kliknięciu */
.nowy__status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 2px 0; font: 500 var(--fs-chip)/1.4 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.nowy__status-hint { flex-basis: 100%; padding-left: 38px; font-size: var(--fs-3); color: var(--text-3); }
.stir { flex: none; fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; }
.stir__bowl { stroke: var(--beige-deep); }
.stir__spoon { transform-origin: 16px 16px; animation: stir 1.6s ease-in-out infinite; }
@keyframes stir { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* karta błędu (17c): obrys hairline, r8, card, zdanie 15 + rząd „Wklej tekst” 48 ochre i cichy „Spróbuj znowu”; bez czerwieni */
.nowy__err { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r8); background: var(--card); }
.nowy__err-text { font: 500 var(--fs-body)/1.4 var(--font-name); color: var(--ink); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.nowy__err-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.nowy__err-row .btn--primary { width: auto; padding: 0 18px; }
/* §14.2: karta błędu zdjęcia nad kafelkami (bez własnych przycisków — drogą wyjścia są kafelki) */
.nowy__err--top { margin: 6px 0 4px; }
/* kafelek „Ze zdjęcia lub zrzutu ekranu” i „Dodaj zrzut ekranu” to etykiety z ukrytym polem pliku (.file-btn): wygląd jak przycisk */
.nowy__tiles .file-btn, .nowy__err-row .file-btn { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* krok sprawdz: kółko 96 z podpisem po prawej („Zdjęcie ze strony · na użytek własny”), cichy „Przetłumacz na polski” */
.nowy__photo { display: flex; align-items: center; gap: 16px; padding: 6px 0 4px; }
.nowy__photo-cap { flex: 1; min-width: 0; font: 500 var(--fs-3)/1.45 var(--font-sans); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.nowy__translate { display: flex; margin: 0 -8px; }
.nowy__source { margin-top: 12px; font: 500 var(--fs-3)/1.4 var(--font-sans); color: var(--text-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* krok linki (17d): zdanie 15/500, linia 13 text-2, „Zapisz N” 56 w treści nad listą nieudanych, etykieta „Nie udało się · 6” */
.linki__sum { padding: 6px 0 0; font: 500 var(--fs-body)/1.3 var(--font-name); color: var(--ink); font-variant-numeric: tabular-nums; }
.linki__note { padding: 6px 0 0; font: 500 var(--fs-chip)/1.45 var(--font-sans); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.linki__save { padding: 14px 0 0; }
.linki__more { display: flex; margin: 2px -8px 0; }
.linki__label { display: flex; align-items: baseline; gap: 6px; padding: 20px 0 2px; }
.linki__label .sec-label { padding: 0; }
.linki__count { font: 500 var(--fs-chip)/1.2 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.linki__list, .linki__failed { display: flex; flex-direction: column; }
/* w trakcie: wiersz 56 z nazwą albo hostem 13 i podpisem stanu 12 text-2; bieżący w ink 600 */
.lq-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.lq-row--last { border-bottom: 0; }
.lq-row__name { font: 500 var(--fs-chip)/1.25 var(--font-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lq-row__sub { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.lq-row--now .lq-row__sub { color: var(--ink); font-weight: 600; }
/* nieudane: wiersz 64 z hostem 13 (wielokropek), powodem 13 text-2 i przyciskiem drugim 44 po prawej */
.linki-row { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.linki-row--last { border-bottom: 0; }
.linki-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linki-row__host { font: 500 var(--fs-chip)/1.25 var(--font-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.linki-row__why { font: 500 var(--fs-chip)/1.3 var(--font-sans); color: var(--text-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.linki-row__btn { width: auto; min-height: 44px; padding: 0 12px; flex: none; font-size: var(--fs-chip); }
.linki__foot { display: flex; margin: 4px -8px 0; }
.linki__foot--end { justify-content: flex-end; padding-top: 8px; }
/* krok tekstu: duże pole (ok. 12 linii) */
.nowy__area .field__input { min-height: 240px; }
.nowy__area--s .field__input { min-height: 120px; }
/* krok „Sprawdź i zapisz” */
.nowy__check { padding: 6px 0 2px; font: 500 var(--fs-body)/1.35 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.nowy__warn { padding: 2px 0 0; font: 500 var(--fs-3)/1.4 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.nowy__gap { margin-top: 10px; }
.nowy__gap12 { margin-top: 12px; }
/* etykieta „Typ” wersalikami z dopiskiem „· grupa na liście” 12 text-3 bez wersalików */
.nowy__typ { display: flex; align-items: baseline; gap: 6px; padding: 14px 0 6px; }
.nowy__typ .sec-label { padding: 0; }
.nowy__typ-note { font: 500 var(--fs-3)/1.2 var(--font-sans); color: var(--text-3); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.nowy__types { padding-top: 6px; padding-bottom: 6px; }
/* wiersz „Baza” 56 z linią nad i pod */
.nowy__baza { margin-top: 12px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.nowy__baza .toggle-row { min-height: 56px; }
/* tagi: chipy z „×” zawinięte + pole „Nowy tag” z cichym „Dodaj” */
.nowy__tags { padding-top: 4px; padding-bottom: 4px; gap: 8px; }
.nowy__tagrow { display: flex; align-items: center; gap: 8px; }
.nowy__tagrow .field { flex: 1; }
.nowy__tagrow .btn--quiet { flex: none; margin-right: -8px; }
.nowy__copy { padding: 10px 2px 0; font: 500 var(--fs-3)/1.4 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.nowy__foot { display: flex; }
.nowy__foot > .btn { flex: 1; }
.przepis__under--end { justify-content: flex-end; }
/* „Wklej ze schowka” pod polem linku (cichy przycisk, cel 44) */
.nowy__paste { display: flex; justify-content: flex-end; padding: 2px 0 0; }
.nowy__paste .btn--quiet { margin-right: -8px; }
/* składniki: etykieta z podsumowaniem po prawej, duży przycisk zakupów, zdanie „Masz wszystko.” */
.przepis__sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.przepis__cover { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.przepis__buy { padding: 14px 0 2px; }
.przepis__all { padding-top: 10px; }
/* wybór przy składniku: przyciemnienie i karta jak popup, ale nad całą stroną (position: fixed) */
.przepis__menu-overlay { position: fixed; inset: 0; background: var(--popup-overlay); z-index: 30; }
.przepis__menu { position: fixed; left: 24px; right: 24px; top: 28%; z-index: 31; max-width: calc(var(--col-max) - 48px); margin: 0 auto; }
.przepis__menu-col { padding-top: 12px; }
.przepis__menu .btn--s { min-height: 48px; }