/* Spiżarnia — tokeny przeniesione z makiety.
   Neutralne z ciepło-zielonym odchyleniem; kolory statusu oddzielone
   od akcentu i niesione też kształtem (kropka, pasek, etykieta),
   żeby były czytelne przy daltonizmie. */

:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F2F3EE;
  --ink:#1A1D16; --ink-2:#5A6152; --ink-3:#8A907F;
  --line:#E2E4DA;
  --accent:#4F7D35; --accent-ink:#FFFFFF; --accent-soft:#EAF0E2;
  --warn:#B4571F; --warn-soft:#F8EBE0;
  --crit:#93321F; --crit-soft:#F8E4E0;
  --info:#5B6B7C; --info-soft:#E9EDF1;
  --radius:10px;
  --shadow:0 1px 2px rgba(26,29,22,.06),0 4px 14px rgba(26,29,22,.05);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --nav-h:60px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12140F; --surface:#1B1E17; --surface-2:#232720;
    --ink:#EDEFE6; --ink-2:#A8AF9C; --ink-3:#767C6C;
    --line:#2C3128;
    --accent:#8FBF63; --accent-ink:#12140F; --accent-soft:#22301A;
    --warn:#E08A4C; --warn-soft:#32241A;
    --crit:#E0705A; --crit-soft:#331C18;
    --info:#93A6B8; --info-soft:#1D242A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* iOS Safari przybliża stronę przy wejściu w pole formularza, jeśli jego
   czcionka jest mniejsza niż 16 px — i po edycji NIE cofa zoomu, trzeba
   szczypać ekran, żeby wrócić do normalnego widoku.
   Dlatego KAŻDE pole edytowalne ma dokładnie 16 px. Reguła poniżej jest
   siatką bezpieczeństwa; wszystkie klasy pól mają 16 px u źródła, więc nie
   trzeba tu !important. Etykiety, chipy i przyciski mogą być mniejsze —
   w nie kursor nie wchodzi, więc zoomu nie wywołują. */
input,select,textarea{font-size:16px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
h1,h2{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance}
/* `font:inherit` to skrót, który resetuje TAKŻE font-size — dlatego pola
   edytowalne dziedziczą tu tylko krój i kolor, a rozmiar dostają z reguły
   16 px powyżej (inaczej iOS znów zacząłby przybliżać przy edycji). */
button{font:inherit;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.app{max-width:560px;margin:0 auto}

/* ---------------------------------------------------------------- appbar */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20}
.appbar h1{font-size:20px;letter-spacing:-.01em}
.appbar .sub{margin:2px 0 0;font-size:11.5px;color:var(--ink-3)}
.icon-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);text-decoration:none;flex:none}

.body{padding:14px 16px}

/* ---------------------------------------------------------------- wspólne */
.cap{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:8px}
.sec-title{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:16px 0 8px}
.sec-title .n{opacity:.7;font-weight:600}
.tiny{font-size:11.5px;color:var(--ink-3);line-height:1.45}

.pane{padding:14px 16px;border-bottom:1px solid var(--line)}
.list{display:flex;flex-direction:column;gap:7px}

.row{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.row .grow{flex:1;min-width:0}
.row .name{font-size:14px;font-weight:550;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.row.stripe{border-left:3px solid var(--line)}
.row.stripe.plenty,.row.stripe.ok{border-left-color:var(--accent)}
.row.stripe.low{border-left-color:var(--warn)}
.row.stripe.out{border-left-color:var(--crit)}
.qty{font-variant-numeric:tabular-nums;font-size:13px;font-weight:650;white-space:nowrap}

.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.ok,.dot.plenty{background:var(--accent)}
.dot.low{background:var(--warn)}
.dot.out{background:var(--crit)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap}
.chip.ok,.chip.plenty{background:var(--accent-soft);color:var(--accent)}
.chip.low{background:var(--warn-soft);color:var(--warn)}
.chip.out{background:var(--crit-soft);color:var(--crit)}
.chip.info{background:var(--info-soft);color:var(--info)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--surface-2);border-radius:var(--radius);padding:10px 11px}
.tile .k{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.tile .l{font-size:10.5px;color:var(--ink-3);margin-top:1px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase}
.tile.ok .k{color:var(--accent)}
.tile.warn .k{color:var(--warn)}
.tile.crit .k{color:var(--crit)}

.banner{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;
  border-radius:var(--radius);background:var(--info-soft);font-size:12.5px;
  color:var(--ink-2);line-height:1.45;margin-top:10px}
.banner.warn{background:var(--warn-soft)}
.banner b{color:var(--ink)}
.banner code{font-size:11px;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px}

.flash{margin:10px 16px 0;padding:10px 12px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:11px;border-radius:var(--radius);font-size:14px;font-weight:650}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--surface-2);color:var(--ink-2)}
.btn.small{width:auto;padding:9px 14px;font-size:13px}

/* ---------------------------------------------------------------- miejsca */
.loc-scroll{overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.loc-scroll::-webkit-scrollbar{display:none}
.locs{display:flex;gap:6px;width:max-content;padding-bottom:2px}
.locs button{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.locs button .c{font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--ink-3);font-weight:650}
.locs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.locs button[aria-pressed="true"] .c{color:var(--accent-ink);opacity:.75}

/* ---------------------------------------------------------------- skaner */
.scanner-idle{display:flex;flex-direction:column;gap:8px}
#scanner-view{position:relative;border-radius:var(--radius);overflow:hidden;
  background:#0C0E0A;aspect-ratio:4/3}
#scanner-view video{width:100%;height:100%;object-fit:cover;display:block}
.reticle{position:absolute;inset:18% 12%;border:2px solid var(--accent);
  border-radius:8px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35);pointer-events:none}
.scan-stop{position:absolute;right:10px;bottom:10px;padding:7px 12px;
  border-radius:999px;background:rgba(12,14,10,.8);color:#EDEFE6;
  font-size:12px;font-weight:650}

.inline-form{display:flex;gap:7px;margin-top:9px}
.inline-form input[type=text]{flex:1;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font-size:16px}

/* ---------------------------------------------------------------- zdjęcie */
.file-drop{display:flex;align-items:center;gap:11px;padding:13px;
  border:1.5px dashed var(--line);border-radius:var(--radius);
  background:var(--surface);cursor:pointer}
.file-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.fd-icon{width:42px;height:42px;border-radius:9px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--ink-2);flex:none}
.fd-text{font-size:13.5px;line-height:1.35}

.spin-row{display:none;align-items:center;gap:9px;margin-top:10px;
  font-size:13px;color:var(--ink-2)}
.htmx-request#photo-spin,.htmx-request .spin-row{display:flex}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

.rec-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.rec-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rec-row.low{background:var(--warn-soft);border-color:var(--warn)}
.rec-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:none}
.rec-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rec-label{width:100%;padding:5px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);font-size:16px;font-weight:550}
.rec-meta{display:flex;gap:5px;flex-wrap:wrap}
.rec-qty{width:56px;padding:7px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);text-align:center;font-variant-numeric:tabular-nums;
  font-weight:650;flex:none}

/* ------------------------------------------------------------ szybka lista */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}
.q-item{border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;
  background:var(--surface);display:flex;flex-direction:column;gap:7px}
.q-item.has{border-color:var(--accent);background:var(--accent-soft)}
.q-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.q-actions{display:flex;align-items:center;gap:6px}
.q-btn{padding:6px 12px;border-radius:7px;background:var(--surface-2);
  font-size:13px;font-weight:700;color:var(--ink-2)}
.q-item.has .q-btn{background:var(--surface)}
.q-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--accent)}
.seg-mini{background:var(--surface-2);border-radius:7px;padding:2px;gap:2px}
.q-item.has .seg-mini{background:var(--surface)}
.q-lvl{flex:1;padding:5px 4px;border-radius:5px;font-size:11px;font-weight:650;
  color:var(--ink-3)}
.q-lvl.on.out{background:var(--crit-soft);color:var(--crit)}
.q-lvl.on.low{background:var(--warn-soft);color:var(--warn)}
.q-lvl.on.plenty{background:var(--accent-soft);color:var(--accent)}

/* ---------------------------------------------------------------- ręcznie */
.manual-form{display:flex;flex-direction:column;gap:7px}
.manual-form input[type=text]{padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font-size:16px}
.mf-row{display:flex;gap:7px}
.mf-cat{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:16px;flex:1;min-width:130px}
.mf-row select{flex:1;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font-size:16px}
.mf-row input[type=number]{width:70px;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);text-align:center;
  font-variant-numeric:tabular-nums}

.foot-actions{padding:14px 16px}

/* ------------------------------------------------------- korekta stanu */
.hint-edit{font-size:11.5px;color:var(--ink-3);margin:12px 0 0;text-align:center}

.row.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.row.clickable .chev{color:var(--ink-3);flex:none;transition:transform .15s}
.row.clickable.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.row.clickable.open .chev{transform:rotate(90deg)}

.edit-panel{border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);background:var(--surface-2);
  padding:12px;margin-top:-7px;display:flex;flex-direction:column;gap:10px}
/* `display:flex` powyżej bije domyślne [hidden]{display:none} z przeglądarki,
   więc bez tej reguły WSZYSTKIE panele były widoczne mimo atrybutu hidden. */
.edit-panel[hidden]{display:none}
.ep-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ep-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;min-width:64px}
.ep-num{width:72px;padding:8px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);text-align:center;font-variant-numeric:tabular-nums;
  font-weight:650}
.ep-moves{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.ep-move{padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:12px;font-weight:600;color:var(--ink-2);
  white-space:nowrap}
.ep-move:hover{border-color:var(--accent);color:var(--accent)}

.ep-name{flex:1;min-width:110px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);font-size:16px;font-weight:550}
.ep-cat{flex:1;min-width:130px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);font-size:16px}
/* Brak kategorii wołamy po imieniu — inaczej pozycja po cichu wypada
   z układu alejek na liście zakupów. */
.no-cat{color:var(--warn);font-weight:600}

/* Ikona glutenowa przy ilości. Kłos przekreślony = bezglutenowy, kłos =
   z glutenem, brak ikony = nieznane. Rozróżnienie niesie kształt (kreska),
   nie sam kolor — przy tej diecie pomyłka jest kosztowna. */
.gfi{flex:none}
.gfi-yes{color:var(--accent)}
.gfi-no{color:var(--crit)}

.mf-gf{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font-size:16px;flex:1;min-width:120px}
.mf-level{flex:1}
.mf-level button{flex:1}

.ep-del{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:8px;background:var(--crit-soft);color:var(--crit);
  font-size:13px;font-weight:650;width:100%}

/* seg wewnątrz panelu korekty — ten sam wygląd co w szybkiej liście */
.edit-panel .seg{display:inline-flex;background:var(--surface);border-radius:8px;
  padding:2px;gap:2px;border:1px solid var(--line)}
.edit-panel .seg button{padding:6px 12px;border-radius:6px;font-size:12px;
  font-weight:650;color:var(--ink-3)}
.edit-panel .seg button[aria-pressed="true"].s-out{background:var(--crit-soft);color:var(--crit)}
.edit-panel .seg button[aria-pressed="true"].s-low{background:var(--warn-soft);color:var(--warn)}
.edit-panel .seg button[aria-pressed="true"].s-plenty{background:var(--accent-soft);color:var(--accent)}

/* ---------------------------------------------------------------- pusty */
.empty{text-align:center;padding:44px 24px}
.empty-icon{width:62px;height:62px;border-radius:16px;background:var(--surface-2);
  display:grid;place-items:center;margin:0 auto 14px;color:var(--ink-3)}
.empty h2{font-size:18px;margin-bottom:6px}
.empty p{color:var(--ink-2);font-size:13.5px;max-width:34ch;margin:0 auto 16px}
.empty .btn{max-width:280px;margin:0 auto}

/* ---------------------------------------------------------------- nawigacja */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);
  border-top:1px solid var(--line);padding:7px 6px calc(9px + env(safe-area-inset-bottom));
  z-index:30}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;color:var(--ink-3);text-decoration:none;font-weight:600}
.nav a.on{color:var(--accent)}
.nav svg{width:20px;height:20px}

/* Licznik przy „Zakupy" — ile pozycji czeka na liście. */
.nav-ico{position:relative;display:inline-flex}
.nav-badge.is-zero{display:none}
.nav-badge{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:var(--crit);color:#fff;
  font-size:9.5px;font-weight:800;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- zakupy */
.shop-row{cursor:pointer}
.shop-row .grow{display:flex;flex-direction:column}
.shop-cbx{width:22px;height:22px;accent-color:var(--accent);flex:none}
.shop-row.done .name{text-decoration:line-through;color:var(--ink-3)}
.shop-row.done .qty{color:var(--ink-3)}