/* Spiżarnia — komponenty. Nazwy klas są kontraktem z js/ui/components.js (docs/architektura.md, sekcja 5).
   Wartości: system projektowy v2 (makieta/design_handoff_spizarnia/components/*.jsx, tokens/*.css):
   Figtree na wszystko, serif tylko w nagłówku ekranu; tekst 15, przyciski i liczby 14/600, chipy i podpisy 13,
   cicha linia 12, etykiety wersalikami 12/600 (karta 11). Cieni nie ma; fokus i wybrany chip w beige-deep. */

/* ---------- nagłówek ekranu ---------- */
/* 10 px od góry: pod paskiem Safari tytuł nie siedzi na krawędzi (jej uwaga z 22 września) */
.screen-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 0 20px; flex: none; }
.screen-head--back { padding-left: 8px; gap: 4px; justify-content: flex-start; }
.screen-head__title { font: 500 var(--fs-screen)/1.15 var(--font-serif); min-width: 0; overflow-wrap: anywhere; } /* jedyny serif i jedyny duży tekst */
.screen-head__actions { display: flex; flex: none; }
.icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--graphite); flex: none; }
.icon-btn svg { display: block; }
.icon-btn:focus-visible { outline-offset: -4px; border-radius: var(--r8); }

/* ---------- chipy ---------- */
.chips { display: flex; gap: 8px; padding: 10px 16px 8px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; white-space: normal; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.chips--flush { padding-left: 0; padding-right: 0; }
.chips--end { justify-content: flex-end; }
.chip { position: relative; height: 36px; 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; flex: none; transition: background var(--ease), border-color var(--ease); font-variant-numeric: tabular-nums; }
/* cel dotyku 48 przy 36 wizualnie: pseudoelement przycisku łapie kliknięcia 6 px nad i pod chipem */
button.chip::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
/* wybrany: beige z obrysem beige-deep (nie atrament), 600; chip lokalizacji wybrany = tint-blue */
.chip--on { background: var(--beige); border-color: var(--beige-deep); font-weight: 600; }
.chip--hint { background: var(--tint-yellow); border-color: var(--tint-yellow); }
.chip--on.chip--tint-blue { background: var(--tint-blue); }
.chip--on.chip--tint-sage { background: var(--tint-sage); }
.chip--on.chip--tint-clay { background: var(--tint-clay); }
.chip--on.chip--tint-yellow { background: var(--tint-yellow); }
.chip--on.chip--tint-beige { background: var(--beige); }
.chip__check svg { display: block; }
.chip--tag { height: 30px; padding: 0 10px; border-radius: var(--r6); background: var(--tint-yellow); border-color: var(--tint-yellow); }
/* chip z „×”: znak tekstowy (nie ikona), cały chip jest przyciskiem usuwania */
.chip--x { padding-right: 8px; gap: 4px; }
.chip__x { color: var(--text-2); font-size: 16px; line-height: 1; padding-left: 2px; }
.chip--outline { background: var(--card); border-color: var(--border-ui); }
.mini-tag { display: inline-block; padding: 0 7px; border-radius: var(--r4); background: var(--paper); font: 500 var(--fs-mini)/22px var(--font-sans); color: var(--graphite); font-variant-numeric: tabular-nums; }

/* ---------- przyciski ---------- */
/* padding symetryczny, line-height 1 (system v2); rozmiar nie zmienia się przy hover ani wciśnięciu */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 16px; border-radius: var(--r8); font: 600 var(--fs-btn)/1 var(--font-sans); color: var(--ink); text-align: center; white-space: nowrap; transition: background var(--ease), filter var(--ease); font-variant-numeric: tabular-nums; }
.btn--primary { background: var(--ochre); }
.btn--secondary { background: var(--card); border: 1px solid var(--border-ui); }
.btn--fill { background: var(--beige); min-height: 48px; }
.btn--muted { background: var(--card); border: 1px solid var(--hairline); color: var(--text-2); }
.btn--card { display: inline-flex; width: auto; min-height: 48px; padding: 8px 18px; background: var(--ochre); flex: none; }
.btn--quiet { display: inline-flex; width: auto; min-height: 48px; padding: 0 8px; background: none; color: var(--olive); flex: none; }
.btn--quiet-s { min-height: 44px; }
.btn--s { min-height: 48px; }
.btn:active { filter: brightness(.95); }
.btn--done { background: var(--beige); border-color: transparent; }
.hint--msg { color: var(--ink); }
.btn__sub { font-weight: 500; color: var(--text-2); }
.btn:disabled { opacity: .45; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 16px 0 0; }
.btn-grid--1 { grid-template-columns: 1fr; }
.btn-col { display: flex; flex-direction: column; gap: 6px; }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }
.link { color: var(--olive); font: 600 var(--fs-chip) var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.link--inline { display: inline; }

/* „−”: koło 44 na celu 56; podwiersz: koło 36 na celu 48 × 44. Znak „−” to tekst 20 px. */
.minus { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; }
.minus__circle { width: 44px; height: 44px; border-radius: 50%; background: var(--beige); display: flex; align-items: center; justify-content: center; font: 600 20px/1 var(--font-sans); color: var(--ink); transition: filter var(--ease); }
.minus:active .minus__circle { filter: brightness(.95); }
.minus--small { width: 48px; height: 44px; }
.minus--small .minus__circle { width: 36px; height: 36px; font-size: 18px; }
.undo-pill { position: relative; height: 36px; padding: 0 12px; border-radius: var(--r8); background: var(--beige); display: inline-flex; align-items: center; font: 600 var(--fs-chip) var(--font-sans); color: var(--ink); flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- wiersz partii (56) ---------- */
.row { display: flex; align-items: center; min-height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--hairline); gap: 8px; width: 100%; }
.row--nb { border-bottom: 0; }
.row--card { padding-right: 8px; gap: 4px; }
.row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; color: var(--ink); }
.row__text { min-width: 0; display: flex; flex-direction: column; }
.row__name { font: 500 var(--fs-body)/1.25 var(--font-name); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.row__name b { font-weight: 600; }
.row__sub { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.row__sub .link { font-size: var(--fs-3); }
.row__chev { flex: none; color: var(--text-3); display: flex; }
.row__count { font: 600 var(--fs-btn) var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.row__note { font: 500 var(--fs-3) var(--font-sans); color: var(--text-2); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.row--undo, .row--zero { padding: 0 16px; background: var(--card); }
.row--zero .row__main, .row--zero .ready-row__main { opacity: .45; }
.row--open { background: var(--card); }
.row--quiet { color: var(--text-2); }
.row--quiet .row__main { color: inherit; }
.row--quiet .row__sub { color: inherit; }

/* podwiersz wagi (44) */
.subrow { display: flex; align-items: center; height: 44px; padding: 0 14px 0 32px; gap: 8px; font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); width: 100%; font-variant-numeric: tabular-nums; }
.subrow--open { background: var(--card); }
.subrow--last { border-bottom: 1px solid var(--hairline); }
.subrow--sheet { padding-left: 12px; padding-right: 0; }
.subrow__text { flex: 1; min-width: 0; text-align: left; font-variant-numeric: tabular-nums; color: inherit; font-weight: 500; }
.subrow__tag { color: var(--text-3); }

/* wiersz gotowego dania (64–72) */
.ready-row { display: flex; align-items: center; min-height: 64px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--hairline); gap: 10px; width: 100%; }
.ready-row--note { min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.ready-row__main { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; color: var(--ink); }
.ready-row__name { font: 500 var(--fs-lead)/1.25 var(--font-name); font-variant-numeric: tabular-nums; }
.ready-row__count { font: 600 var(--fs-btn) var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ready-row__sub { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.ready-row__note { font: 500 var(--fs-3)/1.3 var(--font-sans); font-style: italic; color: var(--text-2); margin-top: 1px; }
.ready-row__btn { min-height: 48px; padding: 8px 16px; border-radius: var(--r8); background: var(--beige); display: flex; align-items: center; font: 600 var(--fs-btn)/1 var(--font-sans); color: var(--ink); flex: none; }
.ready-row--undo { padding-right: 16px; background: var(--card); }

/* ---------- nagłówek grupy ---------- */
/* etykieta wersalikami 12/600 graphite, „· liczba” 13 text-2, chevron 20 tuż za liczbą (system v2) */
.group-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; height: 44px; padding: 0 16px; background: var(--beige); width: 100%; margin-top: 12px; }
.group-head--first { margin-top: 4px; }
.group-head__name { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-caps) var(--font-sans); text-transform: uppercase; letter-spacing: var(--caps-tracking); color: var(--graphite); }
.group-head__count { text-transform: none; letter-spacing: 0; font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.group-head__chev { display: flex; color: var(--graphite); }
.group-head--flat { background: none; height: 40px; margin-top: 8px; }
.group-head--paper { background: var(--paper); margin-top: 12px; }
.group-head--paper:first-child, .group-head--flat:first-child { margin-top: 0; }
.group-head--tall { height: 48px; }
.group-head--split { justify-content: space-between; padding-right: 8px; }
.group-head__btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; height: 100%; text-align: left; }
.group-head__right { display: flex; align-items: center; flex: none; }
.group-head__right .btn--quiet { min-height: 44px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 8px; font: 600 var(--fs-chip) var(--font-sans); color: var(--olive); font-variant-numeric: tabular-nums; }

/* ---------- karta ---------- */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r8); }
.card--pad { padding: 14px 12px 14px 16px; }
.card--list { padding: 12px 0 6px; }
/* etykieta karty: wersaliki 11/600 text-2, 8 px odstępu do treści */
.card__label { font: 600 var(--fs-caps-card)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--caps-tracking); color: var(--text-2); padding: 0 16px 8px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 8px; }
.card__note { font: 500 var(--fs-3) var(--font-sans); color: var(--text-3); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.card__foot { padding: 2px 16px 6px; }
.card__text { font: 500 var(--fs-body)/1.3 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.card__sub { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.card--line { display: flex; align-items: center; gap: 12px; }
.card--line .card__body { flex: 1; min-width: 0; }
.card--sentence { padding: 12px 16px; font: 500 var(--fs-body)/1.35 var(--font-name); color: var(--ink); text-wrap: pretty; }
.card--tint { background: var(--tint-yellow); }
.card--cream { background: var(--cream); }

/* ---------- pola ---------- */
.field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--border-ui); border-radius: var(--r8); background: var(--card); font: 500 var(--fs-body) var(--font-name); color: var(--ink); width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.field--big { height: 56px; }
.field--soft { border-color: var(--hairline); }
.field--search { gap: 10px; }
.field--search svg { flex: none; color: var(--text-3); }
/* fokus: tło cream i obrys beige-deep z odsunięciem 1 px (ramka w atramencie zniesiona) */
.field:focus-within { background: var(--cream); outline: 1px solid var(--beige-deep); outline-offset: 1px; }
/* pole z etykietą w środku (52): etykieta 12 text-3 nad wartością, jednostka po prawej */
.field--labeled { height: auto; min-height: 52px; padding: 6px 14px 8px; }
.field__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.field__label { font: 500 var(--fs-3)/1.2 var(--font-sans); color: var(--text-3); flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.field__label--2 { white-space: normal; }
.field__input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; outline: none; }
.field--labeled .field__input { height: auto; width: 100%; line-height: 1.25; }
.field__input--serif { font: inherit; } /* nazwy rzeczy idą tym samym krojem co reszta (alias z 1a) */
.field__unit { font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); flex: none; font-variant-numeric: tabular-nums; }
.field__hint { font: 500 var(--fs-3) var(--font-sans); color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.field--area { height: auto; min-height: 96px; align-items: flex-start; padding: 10px 14px; }
.field--area .field__input { height: auto; min-height: 76px; resize: vertical; line-height: 1.35; }
.field--btn { padding-right: 4px; }
.field__btnslot { display: flex; align-items: center; flex: none; align-self: stretch; }
.field__btn { height: 100%; min-width: 48px; padding: 0 10px; font: 600 var(--fs-btn) var(--font-sans); color: var(--olive); }
a.btn { color: var(--ink); text-decoration: none; }
.field-row { display: flex; gap: 10px; align-items: stretch; }
.field-row > .field { flex: 1; height: auto; min-height: 48px; }
.field-row > .stepper { flex: none; }
.suggest { border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 var(--r8) var(--r8); background: var(--card); margin: 0 6px; }
.suggest__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 12px; font: 500 var(--fs-body) var(--font-name); width: 100%; border-top: 1px solid var(--hairline); transition: background var(--ease); }
.suggest__item:first-child { border-top: 0; }
.suggest__item b { font-weight: 600; }
.suggest__meta { font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }

/* stepper 48: − liczba + (ikony 20, bez obrysu — system v2) */
.stepper { display: flex; align-items: center; gap: 4px; height: 48px; flex: none; }
.stepper__btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--graphite); }
.stepper__btn:disabled { opacity: .35; }
.stepper__val { min-width: 28px; text-align: center; font: 600 var(--fs-btn) var(--font-sans); font-variant-numeric: tabular-nums; }

/* przełącznik 44 × 26 */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.toggle-row > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; font: 500 var(--fs-body)/1.25 var(--font-name); }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--hairline); position: relative; flex: none; transition: background var(--ease); }
.toggle::before { content: ''; position: absolute; inset: -11px -2px; } /* cel 48 × 44 przy 44 × 26 wizualnie */
.toggle__knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: transform var(--ease); }
.toggle--on { background: var(--ochre); }
.toggle--on .toggle__knob { transform: translateX(18px); }

/* checkbox koło 24: obrys border-ui 1,25 / ink z kremowym ptaszkiem */
.checkbox { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--border-ui); display: flex; align-items: center; justify-content: center; flex: none; color: var(--cream); }
.checkbox--on { box-shadow: none; background: var(--ink); }

/* kafelek „Co dodajesz?” */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { min-height: 76px; border-radius: var(--r8); background: var(--card); border: 1px solid var(--hairline); padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 100%; color: var(--ink); }
.tile__title { font: 500 var(--fs-body)/1.25 var(--font-name); }
.tile__hint { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* kółko zdjęcia / glif: pierścień hairline, pod spodem cream, zdjęcie z filtrem */
.photo { border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); flex: none; overflow: hidden; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); display: block; }
.photo--40 { width: 40px; height: 40px; }
.photo--76 { width: 76px; height: 76px; }
.photo--96 { width: 96px; height: 96px; }
.photo--128 { width: 128px; height: 128px; }
.photo--144 { width: 144px; height: 144px; } /* strona przepisu (od 24 września) */
@media (min-width: 600px) { .przepis__hero .photo--144 { width: 176px; height: 176px; } .przepis__hero .photo--144 svg { width: 174px; height: 174px; } }
.glyph { display: block; }

/* ---------- arkusz ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 30; }
/* kontener najwyższego poziomu ustawia atrament i krój u siebie (nie liczy na rodzica) */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: calc(72px + var(--safe-t)); z-index: 31; max-width: var(--col-max); margin: 0 auto; background: var(--card); color: var(--ink); font-family: var(--font-sans); border-radius: var(--r14) var(--r14) 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; overflow: hidden; }
.sheet--short { top: auto; max-height: calc(100dvh - 72px - var(--safe-t)); }
/* arkusz pełnoekranowy (Dodaj): od górnej krawędzi, bez zaokrąglenia i obrysu; ekran pod spodem niewidoczny */
.sheet--full { top: 0; padding-top: var(--safe-t); border-radius: 0; border-top: 0; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; flex: none; }
/* tytuł obiektu: 14 w title-ink (system v2), nie serif */
.sheet__title { font: 500 var(--fs-obj)/1.15 var(--font-name); color: var(--title-ink); min-width: 0; overflow-wrap: anywhere; }
.sheet__close { font: 600 var(--fs-btn) var(--font-sans); color: var(--olive); min-height: 48px; display: inline-flex; align-items: center; padding: 0 4px; flex: none; margin: -12px -4px -12px 0; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; -webkit-overflow-scrolling: touch; }
.sheet__body--20 { padding: 0 20px; }
.sheet__foot { flex: none; padding: 8px 16px calc(10px + max(var(--safe-b), 24px)); }
.sheet__body::after { content: ''; display: block; height: 24px; }

/* popup ⓘ (bez cienia: wyniesienie robi jaśniejsza płaszczyzna i przyciemnienie pod spodem) */
.popup-overlay { position: absolute; inset: 0; background: var(--popup-overlay); z-index: 2; }
.popup { position: absolute; left: 24px; right: 24px; top: 150px; z-index: 3; background: var(--card); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r8); padding: 18px 20px 14px; }
.popup__text { font: 500 var(--fs-body)/1.35 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.popup__note { padding-top: 8px; font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); }
.popup__foot { display: flex; justify-content: flex-end; padding-top: 10px; }
.popup__ok { font: 600 var(--fs-btn) var(--font-sans); color: var(--olive); min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }

/* ---------- dolna krawędź ---------- */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: var(--col-max); margin: 0 auto; background: var(--cream); color: var(--ink); font-family: var(--font-sans); }
.bottom__btn { padding: 8px 16px 10px; }
/* pływający plus (25 września 2026): kółko 56 nad paskiem zakładek po prawej; kolory z btn--primary; bez cienia, tylko kremowa obwódka od treści */
.fab { position: fixed; z-index: 21; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--cream); }
.fab svg { display: block; }
@media (min-width: 600px) { .fab { right: max(16px, calc(50% - var(--col-max) / 2 + 16px)); } }
.status-slot { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--paper); border-top: 1px solid var(--hairline); font: 500 var(--fs-chip) var(--font-sans); width: 100%; font-variant-numeric: tabular-nums; }
.status-slot--timer { background: var(--tint-terracotta); font-weight: 600; }
.status-slot--update { justify-content: space-between; padding-right: 6px; }
.status-slot__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-slot__btn { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; font: 600 var(--fs-chip) var(--font-sans); color: var(--olive); flex: none; font-variant-numeric: tabular-nums; }
.status-slot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); display: block; flex: none; }
.status-slot__dot--hollow { background: none; border: 1.25px solid var(--text-3); }
.tabbar { background: var(--paper); border-top: 1px solid var(--hairline); padding-bottom: var(--safe-b); display: flex; }
.tabbar__item { flex: 1; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); font: 500 var(--fs-mini)/1 var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.tabbar__item svg { display: block; }
.tabbar__item--on { color: var(--ink); font-weight: 600; }
.tabbar__item:focus-visible { outline-offset: -4px; border-radius: var(--r8); }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 32; max-width: var(--col-max); margin: 0 auto; padding: 0 16px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--ink); color: var(--cream); border-radius: var(--r8); min-height: 52px; padding: 0 6px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 var(--fs-body)/1.3 var(--font-name); animation: toast-in var(--ease); font-variant-numeric: tabular-nums; }
.toast__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__undo { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; font: 600 var(--fs-btn) var(--font-sans); color: var(--ochre); flex: none; }
.undo-pill::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } /* cel 48 przy 36 wizualnie */
@keyframes toast-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- pusty stan: zdanie, krótka podwójna linia, opcjonalna cicha akcja ---------- */
.empty { padding: 32px 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font: 500 var(--fs-body)/1.35 var(--font-name); color: var(--text-2); font-variant-numeric: tabular-nums; }
.empty--tight { padding-top: 16px; }
.empty__text { max-width: 260px; text-wrap: pretty; }
.empty .dbl-rule--short { margin: 0; }
.empty__action { margin: 0 auto; }

/* ---------- drobne ---------- */
.info-line { display: flex; align-items: center; gap: 6px; font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.info-line__btn { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin: -14px -14px -14px -12px; color: var(--text-2); }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font: 500 var(--fs-chip) var(--font-sans); border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.hist-row--last { border-bottom: 0; }
.hist-row--quiet { color: var(--text-2); }
.hist-row .btn--quiet { min-height: 44px; margin-right: -8px; }
.added-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 4px 4px 12px; background: var(--tint-yellow); border-radius: var(--r8); font: 500 var(--fs-chip) var(--font-sans); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.added-line__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-label { font: 600 var(--fs-caps)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: var(--caps-tracking); color: var(--graphite); }
.hint { font: 500 var(--fs-chip)/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.hint--3 { color: var(--text-3); font-size: var(--fs-3); }
.sentence { font: 500 var(--fs-body)/1.35 var(--font-name); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.sentence--tight { font-size: var(--fs-body); line-height: 1.35; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.kv__val { color: var(--ink); }
.mono { font-family: ui-monospace, Menlo, monospace; }
.key-words { font: 600 var(--fs-lead)/1.35 var(--font-sans); letter-spacing: .01em; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; font-variant-numeric: tabular-nums; } /* jedno kliknięcie zaznacza wszystkie słowa */

/* natywny przycisk czyszczenia w polu szukania: bez niebieskiego × */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ---------- Przepisy (sesja 2a, §11.4): wiersz przepisu 52, wiersz składnika, krok — dopisane na końcu ---------- */
/* wiersz przepisu: cały wiersz to jeden przycisk (kolor i krój jawnie — pułapka „czerń bocznymi drzwiami”) */
.rrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--hairline); text-align: left; color: var(--ink); font-family: var(--font-sans); transition: background var(--ease); }
.rrow--last { border-bottom: 0; }
.rrow__photo { flex: none; display: flex; }
.rrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rrow__name { font: 500 var(--fs-body)/1.25 var(--font-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rrow__name b { font-weight: 600; }
/* cicha linia 12: „masz x z y” w sage-text (span.sage), „brak: …” w text-2 */
.rrow__sub { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rrow__sub .sage { color: var(--sage-text); }
.rrow__chev { flex: none; color: var(--text-3); display: flex; }
/* prawa kolumna: czas 13/600 nad „ostatnio: …” 12 text-2 (układ z makiety 11a, bez chevrona) */
.rrow__right { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-right: 6px; }
.rrow__time { font: 600 var(--fs-chip)/1.2 var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rrow__when { font: 500 var(--fs-3)/1.2 var(--font-sans); color: var(--text-2); white-space: nowrap; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* wiersz składnika (IngredientRow v2): do góry, padding 14 symetryczny, hairline między wierszami; w oknie cofania tło card */
.ing { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hairline); } /* 7 px: bez przycisków wiersze są niższe, lista ściśnięta (24 września) */
.ing--last { border-bottom: 0; }
.ing--undo { background: var(--card); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.ing__amount { width: 88px; flex: none; text-align: right; font: 600 var(--fs-btn)/1.25 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; } /* 88: „0,5 łyżeczki” w jednej linii (24 września; było 64) */
@media (min-width: 600px) { .ing__amount { width: 96px; } } /* komputer: kolumna ilości 96 (decyzja 19) */
.ing__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ing__name { font: 500 var(--fs-body)/1.25 var(--font-name); overflow-wrap: anywhere; text-wrap: pretty; font-variant-numeric: tabular-nums; } /* bez przycisku kolumna nazwy jest szeroka: bez łączników */
.ing__note { font: 500 var(--fs-chip) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ing__sub { display: block; font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); margin-top: 1px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ing__sub--sage { color: var(--sage-text); }
.ing__sub--undo { color: var(--text-2); }
/* „Nie to”: napis 12/600 olive w linii podpisu; cel 44 przez pseudoelement */
.ing__wrong { position: relative; display: inline; font: 600 var(--fs-3)/1.3 var(--font-sans); color: var(--olive); padding: 0 2px; font-variant-numeric: tabular-nums; }
.ing__wrong::before { content: ''; position: absolute; left: -6px; right: -6px; top: -15px; bottom: -15px; }
.ing__slot { flex: none; display: flex; align-items: center; height: 32px; margin: -6px 0 -7px; }
.ing__btn { position: relative; height: 32px; padding: 0 10px; border-radius: var(--r8); background: var(--beige); display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-btn)/1 var(--font-sans); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background var(--ease); }
.ing__btn::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } /* cel 48 przy 32 wizualnie */
.ing__btn--on { background: var(--tint-sage); color: var(--sage-text); }
.ing__check { display: flex; }
/* ikona stanu składnika (przycisk 28×22 na celu 44): ptaszek sage = masz, koszyk z czymś text-2 = w zakupach, koszyk z plusem olive = dodaj */
.ing__mark { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 22px; color: var(--sage-text); flex: none; }
.ing__mark::before { content: ''; position: absolute; inset: -11px -8px; }
.ing__mark svg { display: block; }
.ing__mark--cart { color: var(--text-2); }
.ing__mark--add { color: var(--text-3); } /* szary plus */
.ing__check svg { display: block; }
.ing__slot .undo-pill { height: 32px; }

/* krok: numer olive 600 w kolumnie 28, tekst 15, „· 4 min” 12 text-2 */
.step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.step__n { flex: none; width: 28px; font: 600 var(--fs-btn)/1.45 var(--font-sans); color: var(--olive); font-variant-numeric: tabular-nums; }
.step__text { flex: 1; min-width: 0; font: 500 var(--fs-body)/1.35 var(--font-name); text-wrap: pretty; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.step__min { font: 500 var(--fs-3)/1.3 var(--font-sans); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }