/* Telefon pierwszy: jedna kolumna, duże cele dotyku (min. 44 px), menu jako pasek na dole. */
:root { --tlo: #f7f7f4; --tekst: #1d1d1b; --akcent: #1f5f4a; --ramka: #d8d8d0; }
@media (prefers-color-scheme: dark) { :root { --tlo: #161614; --tekst: #ecece6; --akcent: #6fc3a2; --ramka: #3a3a35; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 17px/1.5 system-ui, sans-serif; }
.tresc { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 6rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
a { color: var(--akcent); }
.przycisk { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  padding: .75rem 1rem; border: 0; border-radius: 10px; background: var(--akcent); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.przycisk.drugi { background: transparent; color: var(--akcent); border: 2px solid var(--akcent); }
.karta { background: color-mix(in srgb, var(--tlo) 92%, var(--tekst)); border: 1px solid var(--ramka);
  border-radius: 12px; padding: 1rem; margin: 0 0 1rem; }
.komunikaty { list-style: none; padding: 0; }
.komunikaty li { padding: .75rem 1rem; border-radius: 10px; background: var(--ramka); margin-bottom: .5rem; }
.pasek { position: fixed; inset: auto 0 0 0; display: flex; background: var(--tlo); border-top: 1px solid var(--ramka);
  padding-bottom: env(safe-area-inset-bottom); }
.pasek a { flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--tekst); font-weight: 600; }
.pasek a[aria-current="page"] { color: var(--akcent); box-shadow: inset 0 3px 0 var(--akcent); }
h2 { font-size: 1.15rem; margin: .25rem 0 .75rem; }
.komunikaty li.error { background: #f6d5d0; color: #6b1a10; }
label { display: block; margin: 0 0 .75rem; font-weight: 600; }
input[type="search"], input[type="text"], input[type="number"], select { display: block; width: 100%;
  min-height: 44px; margin-top: .25rem; padding: .5rem .75rem; border: 1px solid var(--ramka); border-radius: 8px;
  background: var(--tlo); color: var(--tekst); font: inherit; font-weight: 400; }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--akcent); }
label.wybor { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 400; }
.akcje .przycisk { margin-bottom: .75rem; }
.akcje hr { border: 0; border-top: 1px solid var(--ramka); margin: .5rem 0 1rem; }
.rzeczy, .historia { list-style: none; padding: 0; margin: 0 0 1rem; }
.rzecz { display: flex; align-items: stretch; border: 1px solid var(--ramka); border-radius: 12px; margin-bottom: .5rem; }
.rzecz .zaznacz { display: flex; align-items: center; justify-content: center; min-width: 52px; margin: 0;
  border-right: 1px solid var(--ramka); }
.rzecz a { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-height: 56px; padding: .6rem .9rem;
  color: var(--tekst); text-decoration: none; }
.plakietka { display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px;
  background: var(--ramka); font-size: .85rem; }
.plakietka.pilne { background: #f3c969; color: #3b2a00; }
.cechy { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .75rem; margin: 0; }
.cechy dt { font-weight: 600; }
.cechy dd { margin: 0; }
.wstecz { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }
.historia li { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--ramka); }
.historia small { opacity: .7; }
.zwijane summary, .filtry summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.zwijane[open] summary, .filtry[open] summary { margin-bottom: .75rem; }
.filtry .przycisk.drugi { margin-top: .5rem; }
/* Akcje na zaznaczonych: ukryte, dopóki nic nie jest zaznaczone; wtedy przyklejone nad menu. */
.zaznaczanie .akcje { display: none; }
.zaznaczanie:has(input[name="rzeczy"]:checked) .akcje { display: block; position: sticky;
  bottom: calc(56px + env(safe-area-inset-bottom)); max-height: 70vh; overflow-y: auto;
  box-shadow: 0 -4px 16px rgb(0 0 0 / .15); background: var(--tlo); }
.zaznaczanie:has(input[name="rzeczy"]:checked) .rzeczy { margin-bottom: 1rem; }
.podpowiedz { margin: 0 0 .75rem; opacity: .75; }
.akcje details > summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.akcje details + details { border-top: 1px solid var(--ramka); }
.akcje details[open] > summary { margin-bottom: .5rem; }
.uwaga { background: #f3c969; color: #3b2a00; }
.historia li a { display: inline-flex; align-items: center; min-height: 44px; }
/* Zdjęcia: miniatury na liście i karcie, zaślepka bez zdjęcia. */
.rzecz a.z-foto { flex-direction: row; align-items: center; gap: .75rem; }
.opis-rzeczy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.foto { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--ramka); }
.zdjecia { display: flex; gap: .5rem; overflow-x: auto; margin: 0 0 1rem; }
.zdjecia img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; background: var(--ramka); }
textarea, input[type="file"] { display: block; width: 100%; min-height: 44px; margin-top: .25rem; padding: .5rem .75rem;
  border: 1px solid var(--ramka); border-radius: 8px; background: var(--tlo); color: var(--tekst); font: inherit;
  font-weight: 400; }
fieldset.karta legend { font-weight: 600; padding: 0 .25rem; }
.wiersz-podzialu { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
p.plakietka { display: block; border-radius: 8px; padding: .4rem .6rem; }
.karta + form .przycisk.drugi, form > .przycisk.drugi { margin-bottom: 1rem; }
input[type="date"] { display: block; width: 100%; min-height: 44px; margin-top: .25rem; padding: .5rem .75rem;
  border: 1px solid var(--ramka); border-radius: 8px; background: var(--tlo); color: var(--tekst); font: inherit; }
.linki { padding-left: 1.25rem; }
.linki a { display: inline-flex; align-items: center; min-height: 44px; }
.przycisk.zatwierdz { margin-bottom: 1.5rem; }
/* Zakupy: przycisk nad listą i między sekcjami karty zakupu. */
.przycisk + .lista-zakupow, .rzeczy + .przycisk, .przycisk + .odstep { margin-top: 1rem; }
.czesc-ceny { margin-top: .5rem; }
.link-dotyk { display: inline-flex; align-items: center; min-height: 44px; }
/* Sprzedaż: pięć pozycji w pasku menu mieści się na wąskim telefonie. */
.pasek a { font-size: .9rem; padding: 0 .2rem; text-align: center; }
.historia details summary { min-height: 44px; }
.przycisk:disabled { opacity: .5; cursor: not-allowed; }
.szczegoly { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }
/* Pomoc „?”: znaczek w prawym górnym rogu treści (nie przyklejony, więc nie zasłania menu ani treści);
   po stuknięciu objaśnienie strony na całą szerokość. Bez JavaScriptu (<details>). */
.pomoc { float: right; margin: 0 0 .25rem .75rem; }
.pomoc > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px;
  height: 44px; border: 2px solid var(--akcent); border-radius: 50%; color: var(--akcent); font-weight: 700;
  font-size: 1.2rem; cursor: pointer; }
.pomoc > summary::-webkit-details-marker { display: none; }
.pomoc[open] { float: none; margin: 0 0 1rem; }
.pomoc[open] > summary { margin-left: auto; background: var(--akcent); color: var(--tlo); }
.pomoc-tresc { margin-top: .5rem; padding: 1rem; border: 1px solid var(--ramka); border-radius: 12px;
  background: color-mix(in srgb, var(--tlo) 92%, var(--tekst)); }
.pomoc-tresc p { margin: 0 0 .5rem; }
.pomoc-tresc dl { margin: 0; }
.pomoc-tresc dt { font-weight: 600; margin-top: .6rem; }
.pomoc-tresc dd { margin: 0; }