/* Kopia web/projekt/lista.css (Claude Design v3.2, A25). Zmiany projektu: tam, potem tu. */
/* Lista kontrolna (adres /lista) - projekt v3.2 (Claude Design, 30.10.2026, A25). Dodatki do styl.css i tor.css: kroki
   z przepisem, liczenie wstecz od terminu, pakiet pod listą, zapis na przypomnienia i jego stany. Bez nowych kolorów,
   krojów i zasobów z zewnątrz; tylko klasy (CSP style-src 'self'). Telefon najpierw, od 1024 px układ toru. */

/* termin przy tytule: mała kartka z kalendarza i dwa fakty, jak na pierwszym ekranie strony produktu i na ulotce */
.lista-termin{display:flex; align-items:center; gap:16px; margin-top:4px}
.lista-kartka{--k-szer:52px; --k-dziurka:var(--papier); flex:none; margin:0 6px 6px 0}
.lista-kartka .kartka-tydzien, .lista-kartka .kartka-podpis{display:none}
.lista-fakty{display:grid; gap:2px; font:600 16px/1.35 var(--f-bez)}
.lista-fakty li + li{font-weight:500; color:var(--atrament-2)}
@media (min-width:1024px){
  .lista-kartka{--k-szer:64px}
  .lista-fakty{font-size:18px}
}

/* kroki: numer w kółku jak w planie dat; uzgodnienie (30 dni) zielone, wejście w życie (2 tygodnie) żółte, jak
   w legendzie strony produktu. Przepis pod krokiem zwinięty, nazwa artykułu zawsze widoczna (jak w sekcji przepisów
   strony produktu: pismo tekstu, nie mono) */
.lista-kroki{display:grid; border-top:2px solid var(--atrament); counter-reset:lk}
.lista-krok{display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; align-content:start; padding:16px 0 6px; border-bottom:1px solid var(--linia); scroll-margin-top:16px}
.lista-krok::before{counter-increment:lk; content:counter(lk); grid-column:1; grid-row:1 / span 2; align-self:start; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--karta); box-shadow:inset 0 0 0 2px var(--atrament); color:var(--atrament); font:600 16px/1 var(--f-mono)}
.lista-krok > *{grid-column:2; min-width:0}
.lista-krok.krok-30::before{background:var(--zielen); color:var(--papier); box-shadow:none}
.lista-krok.krok-14::before{background:var(--zakreslacz)}
.krok-tytul{padding-top:4px; font:600 20px/1.3 var(--f-szeryf); font-variation-settings:"opsz" 24; text-wrap:balance}
.krok-tresc{margin-top:4px; line-height:1.5}
.krok-przepis > summary{display:block; width:fit-content; max-width:100%; min-height:44px; padding:12px 0; cursor:pointer; list-style:none; font:600 var(--t-maly)/1.35 var(--f-bez); color:var(--atrament-2)}
.krok-przepis > summary > span{text-decoration:underline; text-decoration-color:var(--linia-mocna); text-decoration-thickness:1px; text-underline-offset:4px}
.krok-przepis > summary::-webkit-details-marker{display:none}
.krok-przepis > summary::after{content:""; display:inline-block; width:7px; height:7px; margin:0 2px 3px 12px; vertical-align:middle; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}
.krok-przepis[open] > summary::after{margin-bottom:-3px; transform:rotate(-135deg)}
.krok-przepis > summary:hover{color:var(--atrament)}
.krok-cytaty{display:grid; gap:8px; padding:2px 0 14px}
.krok-cytaty blockquote{padding-left:14px; border-left:3px solid var(--zakreslacz); font:400 17px/1.55 var(--f-szeryf); text-wrap:pretty}
.krok-cytaty blockquote + .cytat-zrodlo{margin-top:6px}
.cytat-zrodlo{font:600 14px/1.4 var(--f-bez); color:var(--atrament-2)}
.cytat-zrodlo a{color:var(--atrament)}
.cytat-zrodlo .link-dotyk{display:inline-block; margin-block:-13px}

/* liczenie wstecz od dnia wejścia w życie: ten sam pas okresów co w planie zamówienia (żółte 2 tygodnie,
   zielone 30 dni), od celu w dół; wybór przedstawicieli przerywany, bo bywa niepotrzebny */
.wstecz{display:grid; margin:12px 0 4px; padding:6px 16px 10px 14px; border-radius:var(--r-2); background:var(--karta); box-shadow:inset 0 0 0 1px var(--linia)}
.wstecz-tytul{padding:6px 0 4px; font:600 var(--t-maly)/1.35 var(--f-bez); color:var(--zielen-2)}
.wstecz ol{display:grid}
.wstecz li{position:relative; display:grid; gap:1px; padding:8px 0 8px 26px; line-height:1.35}
.wstecz li::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px}
.wstecz .w-cel::before{top:12px; bottom:auto; left:-3px; width:14px; height:14px; border-radius:50%; background:var(--atrament)}
.wstecz .w-14::before{border-radius:4px 4px 0 0; background:var(--zakreslacz); box-shadow:inset 1.5px 0 0 var(--atrament), inset -1.5px 0 0 var(--atrament), inset 0 1.5px 0 var(--atrament)}
.wstecz .w-30::before{background:var(--zielen)}
.wstecz .w-wybor::before{border-radius:0 0 4px 4px; background:repeating-linear-gradient(180deg, var(--linia-mocna) 0 4px, transparent 4px 8px)}
.wstecz-kiedy{justify-self:start; font-weight:600}
.w-cel .wstecz-kiedy{padding:0 4px; margin-left:-4px; border-radius:3px; background:var(--zakreslacz-2)}
.wstecz-co{font-size:var(--t-maly); color:var(--atrament-2)}

/* pakiet pod listą: karta oferty jak w raporcie luk, jeden żółty przycisk na ekranie (w boku ciemny) */
.lista-oferta{gap:12px}
.lista-oferta .btn{margin-top:4px}
.bok-karta .link-dalej{font-size:var(--t-maly)}
/* bok z zamówieniem idzie z czytaniem kroków: tor.css daje mu sticky, ale w siatce toru rozciąga się na całą
   wysokość wiersza i stoi w miejscu; tu zaczyna się u góry, więc się przykleja */
.lista-bok{align-self:start}

/* zapis na przypomnienia: osobny i dobrowolny; pole zgody domyślnie puste, z pełną treścią zgody; informacja RODO
   przy formularzu; błąd przy polu, w bursztynie, jak w torze */
.zapis{gap:16px; scroll-margin-top:16px}
.zapis-glowa{display:grid; gap:4px}
.zapis-forma{display:grid; gap:16px}
.zapis .zgoda{padding-block:4px}
.zapis .zgoda > span{font-size:var(--t-maly); line-height:1.5}
.zapis .btn{width:100%}
@media (min-width:640px){ .zapis .btn{justify-self:start; width:auto; min-width:200px} }
.zgoda input[aria-invalid="true"]{box-shadow:inset 0 0 0 3px var(--bursztyn)}
.zapis-rodo{padding-top:12px; border-top:1px dashed var(--linia-mocna); font-size:14px; line-height:1.5; color:var(--atrament-2)}
.zapis-rodo a{color:var(--atrament)}

/* stany zapisu: znak nad tytułem; zielony tylko przy potwierdzeniu, bursztyn przy linku, który nie działa.
   Znak zaznaczenia rysowany, nie z kroju: U+2713 z pisma zastępczego wyglądał jak litera V */
.stan{display:grid; gap:var(--o-5); align-content:start}
.stan > .h2{margin-top:-8px}
.stan-znak{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font:700 24px/1 var(--f-bez)}
.stan-poczta{background:var(--zakreslacz); color:var(--atrament)}
.stan-ok{background:var(--zielen-jasna); color:var(--zielen)}
.stan-cichy{background:var(--papier-2); color:var(--atrament-2)}
.stan-ok::before, .stan-cichy::before{content:""; width:10px; height:20px; margin-top:-5px; border-right:3.5px solid currentColor; border-bottom:3.5px solid currentColor; transform:rotate(45deg)}
.stan-uwaga{background:var(--bursztyn-jasny); color:var(--bursztyn); font:700 26px/1 var(--f-szeryf)}
.stan-adres{font-weight:600; overflow-wrap:anywhere}
.stan-akcje{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
@media (max-width:639px){ .stan-akcje .btn{width:100%} }