/* ============================================================================
   26-zadania-tablica-kalendarz.css — widoki zadań „Tablica” i „Kalendarz” (B2, 27.09.2026)
   ----------------------------------------------------------------------------
   Menu „Zadania” ma przełącznik Lista · Tablica · Kalendarz (zadania/widoki-zadan.js, widok-kalendarz.js).
   Lista to dotychczasowe drzewo (15-zadania.css). Tu: przełącznik, kolumny tablicy z kartami, kalendarz
   miesiąc/tydzień. Kolor paska karty/chipu = skąd jest zadanie (te same tony co etapy w Harmonogramie).
   Telefon: 9-telefon/7-zadania-tablica-kalendarz.css.
   ============================================================================ */

/* Przełącznik widoku po prawej stronie paska filtrów (.zn-sub, 15-zadania.css); „Nowe zadanie” (Tablica, Kalendarz) obok. */
.zt-widoki { margin-left: auto; }
.zt-nowe { flex: none; }
.zt-widok { flex: 1; min-height: 0; margin-top: var(--s-2); overflow: auto; }

/* Ton pochodzenia (pasek z lewej na karcie, kropka i chip w kalendarzu). */
[data-pochodzenie] { --zt-ton: var(--accent); }
[data-pochodzenie="przypomnienie"] { --zt-ton: var(--reminder); }
[data-pochodzenie="etap"] { --zt-ton: var(--text-muted); }
[data-pochodzenie="design"] { --zt-ton: var(--etap-design); }
[data-pochodzenie="gwarancja"] { --zt-ton: var(--etap-gwarancja); }
[data-pochodzenie="plany"] { --zt-ton: var(--etap-plany); }

/* === 1. TABLICA ============================================================ */
.zt-tablica { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); height: 100%; min-height: 0; }
/* v15 b19 (ZN2, wzór .zd-kol / .zd-karta): nagłówek kolumny 44 px bez kreski, licznik 22 px, karta = dwa pola (góra do kliknięcia,
   dół ze znaczkami) bez własnego odstępu, promień 8. */
.zt-kolumna { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.zt-kolumna-glowa { display: flex; align-items: center; gap: var(--s-2); min-height: calc(var(--h-control) + var(--s-2)); padding: 0 var(--s-3); }
.zt-kolumna-glowa h3 { margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); }
.zt-kolumna-glowa > .todo-dot { width: 10px; height: 10px; }
.zt-kolumna-glowa > .todo-dot.done { --ton: var(--ok); }   /* wzór: kropka „Gotowe” w kolorze --ok */
.zt-licznik { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-strong); text-align: center; font-variant-numeric: tabular-nums; }
.zt-kolumna-glowa .zt-licznik { background: var(--surface-3); color: var(--text-muted); }
.zt-karty { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-height: 64px; overflow: auto; padding: 0 var(--s-2) var(--s-2); border-radius: 0 0 var(--r) var(--r); transition: background var(--szybko); }
.zt-karty.is-nad { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; }
.zt-pusto { margin: var(--s-3) auto; color: var(--text-muted); font-size: var(--t-sm); }

/* POPR-n28: bez kolorowego paska z lewej — przy „Pilne” i „Po terminie” dawał trzeci czerwony sygnał; spóźnienie mówi tylko napis „Po terminie · data”. */
.zt-karta { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--cien-1); }
.zt-karta[draggable="true"] { cursor: grab; }
.zt-karta.is-ciagnieta { opacity: 0.5; }
.zt-karta.is-gotowa .zt-karta-tytul { color: var(--text-muted); text-decoration: line-through; }
.zt-karta-otworz { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.zt-karta-otworz:hover .zt-karta-tytul { color: var(--accent-strong); }
.zt-karta-tytul { display: flex; align-items: flex-start; gap: var(--s-1); font-size: var(--t-base); font-weight: var(--w-bold); line-height: 1.35; overflow-wrap: anywhere; }   /* wzór .zd-k-t: druga linia tytułu pod pierwszą, nie pod plakietką */
:is(.zt-karta-tytul, .zl-t > b) > .zt-prio { margin-top: 1px; margin-right: 0; }
.zt-karta-rodzic, .zt-karta-projekt { max-width: 100%; overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zt-karta-projekt b { color: var(--accent); font-weight: var(--w-strong); }
.zt-karta-dol { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); min-width: 0; min-height: var(--h-control); padding: 0 var(--s-1) var(--s-1) var(--s-3); }
/* v15 b7 (wzór zh2, przegląd UX): etap nigdy nie jest ucinany (mała plakietka), skraca się tylko szary rodzaj; osoby
   i „Przenieś do…” trzymają się razem po prawej — gdy brak miejsca, schodzą razem do drugiej linii (nie sama strzałka). */
.zt-karta-dol > .zl-etap { display: inline-block; flex: 0 100 auto; min-width: var(--s-5); overflow: hidden; text-overflow: ellipsis; background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); line-height: 20px; white-space: nowrap; }
.zt-karta-dol > .zt-karta-rodzaj { flex: 0 100 auto; min-width: 0; overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zt-karta-prawa { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); margin-left: auto; }
.zt-termin { flex: none; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }   /* wzór: cyfry zwykłe (nie równej szerokości); data nigdy się nie ucina — ustępuje znaczek etapu */
.zt-termin.is-late { display: inline-flex; flex: 0 1 auto; gap: var(--s-1); min-width: 0; color: var(--danger); font-weight: var(--w-bold); }   /* data (b) nigdy się nie ucina; w bardzo wąskiej karcie skracają się słowa „Po terminie ·” */
.zt-termin.is-late > .zt-termin-opis { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zt-termin.is-late > b { flex: none; font-weight: inherit; }
.zt-karta .zt-karta-przenies { width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-faint); }
.zt-karta .zt-karta-przenies:hover { background: var(--surface-3); color: var(--accent); }
/* Na stronie „Zadania” kolumny mają wysokość swoich kart (wzór: przewija się strona, nie kolumna). */
.zh-cialo > .zt-widok { margin-top: 0; overflow: visible; }
.zh-cialo .zt-tablica { height: auto; align-items: start; }
.zh-cialo .zt-karty { overflow: visible; }
.zt-karta-osoby { display: inline-flex; margin-left: auto; }
.zt-karta-blokada { display: inline-grid; place-items: center; width: var(--s-5); height: var(--s-5); color: var(--text-faint); }

/* Okno „Przenieś do…” — trzy duże przyciski jeden pod drugim. */
.zt-przenies-cel { justify-content: flex-start; gap: var(--s-2); min-height: 44px; }
.zt-przenies-cel[aria-current="true"] { opacity: 0.6; }

/* === 2. KALENDARZ ========================================================== */
.zt-kalendarz { display: flex; flex-direction: column; gap: var(--s-3); }
.zt-kal-pasek { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* v15 b19 (ZN2, wzór .zd-kal-pan / .zd-ks): miesiąc tytułowym krojem; siatka z kresek (bez zaokrągleń i przerw), nagłówek dni 34 px
   do lewej, numer dnia w kółku 24 px, pozycja 24 px (12 px / 600); spóźniona na czerwonym tle. */
.zt-kal-tytul { flex: 1; margin: 0; text-align: center; font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-base); }
.zt-kal-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.zt-kal-dt { padding: var(--s-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.zt-dzien { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 112px; padding: var(--s-1); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.zt-kalendarz.is-tydzien .zt-dzien { min-height: 280px; }
.zt-dzien.is-inny { background: var(--surface-2); }
.zt-dzien.is-inny .zt-dzien-nr { color: var(--text-faint); }
.zt-dzien.is-nad { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -3px; }
.zt-dzien-nr { display: inline-grid; align-self: flex-start; place-items: center; min-width: var(--s-5); height: var(--s-5); padding: 0 var(--s-1); border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); }
.zt-dzien.is-dzis .zt-dzien-nr { background: var(--accent); color: var(--on-accent); }
.zt-dzien-lista { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zt-chip { display: block; width: 100%; min-width: 0; height: 24px; padding: 0 var(--s-2); overflow: hidden; border: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--zt-ton) 14%, var(--surface)); color: var(--text); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.zt-chip[draggable="true"] { cursor: grab; }
.zt-chip:hover { background: var(--surface-3); }
.zt-chip.is-late { background: var(--danger-soft); color: var(--danger); }
.zt-chip.is-gotowa { opacity: .55; text-decoration: line-through; }
.zt-chip.is-pelny { height: auto; min-height: 32px; padding: var(--s-1) var(--s-2); white-space: normal; }
.zt-wiecej { padding: 0 var(--s-2); border: 0; background: none; color: var(--accent-strong); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; cursor: pointer; }
.zt-kal-bez h4, .zt-kal-wybrany h4 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--t-base); font-weight: var(--w-strong); }
.zt-kal-bez-lista { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.zt-kal-bez-lista .zt-chip { width: auto; max-width: 280px; }
/* Strona „Zadania”: kalendarz w jednej karcie (pasek, siatka, legenda, „Bez terminu”) — jak panel wzoru; legenda stoi w .zt-widok za
   kalendarzem, więc karta = .zt-widok, a .zt-kalendarz oddaje mu swoje dzieci (kolejność: pasek, siatka, legenda, wybrany dzień, bez terminu). */
.zh-cialo > .zt-widok:has(> .zt-kalendarz) { display: flex; flex-direction: column; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.zh-cialo .zt-kalendarz { display: contents; }
.zh-cialo .zt-kal-pasek { margin-bottom: var(--s-3); }
.zh-cialo > .zt-widok > .zo-legenda { order: 2; }
.zh-cialo :is(.zt-kal-wybrany, .zt-kal-bez) { order: 3; margin-top: var(--s-4); }
/* Telefon (miesiąc): kropki zamiast chipów — reguły w 9-telefon/7-…; na komputerze kropek nie ma. */
.zt-kropki { display: none; }
/* v15 b7: Zadania na tablecie — miesiąc z kropkami i listą stukniętego dnia pod siatką (wzór zh2: kropki na dotyku; telefon: 9-telefon/7). */
/* Miesiąc z kropkami (dotyk; wzór .zd-dzb): dzień = kafel z cienką ramką; numer 13 px / 700 w kolorze --text-muted stoi z LEWEJ
   (pole 24 px, 7 px od krawędzi kafla — wzór: .nr z align-self: flex-start), kropki pod nim na środku; dziś — numer w akcencie, wybrany dzień — pełny akcent.
   Te same reguły dla telefonu (.is-miesiac) w 9-telefon/7-zadania-tablica-kalendarz.css. */
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien { align-items: center; justify-content: center; gap: 2px; min-height: var(--h-control); padding: 0 6px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-kal-siatka { gap: 2px; border: 0; }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-kal-dt { border: 0; background: transparent; text-align: center; }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien-nr { background: transparent; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien.is-inny { background: var(--surface-2); color: var(--text-faint); }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien.is-dzis .zt-dzien-nr { background: transparent; color: var(--accent); }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien.is-wybrany .zt-dzien-nr { color: var(--on-accent); }
:root[data-ui="tablet"] .zh-cialo > .zt-widok:has(.is-kropki) > .zo-legenda { order: 4; margin-top: var(--s-3); }
:root[data-ui="tablet"] .zt-chip { height: var(--h-control); }
:root[data-ui="tablet"] .zt-chip.is-pelny { height: auto; min-height: var(--h-control); }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-dzien.is-wybrany { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-kropki { display: flex; gap: 2px; height: 6px; }
:root[data-ui="tablet"] .zt-kalendarz.is-kropki .zt-kropka { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--zt-ton); }
:root[data-ui="tablet"] .zt-kal-wybrany { display: flex; flex-direction: column; gap: var(--s-2); }

/* === 3. PRIORYTET (B3) ===================================================== */
/* Znacznik przy tytule zadania (lista, szczegóły, karta, Pulpit) — tylko „Pilne” i „Wysoki”; normalny bez znacznika. */
.zt-prio { display: inline-flex; flex: none; align-items: center; height: 20px; margin-right: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 1; vertical-align: 1px; white-space: nowrap; }
.zt-prio.is-pilne { background: var(--danger-soft); color: var(--danger); }
.zt-prio.is-wysoki { background: var(--warn-soft); color: var(--warn-strong); }
/* v15 b7 (wzór zh2_popr 3): czerwony = tylko „po terminie” — pilne w kalendarzu ma plakietkę „Pilne”, nie czerwoną ramkę. */
.zt-chip[data-prio="pilne"]::before { content: "Pilne"; display: inline-block; margin-right: var(--s-1); padding: 0 4px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 16px; vertical-align: 1px; }
.zt-chip small { font-size: inherit; font-weight: var(--w-medium); opacity: .8; }
.zt-chip[data-etap] { --zt-ton: var(--hg-ton); }
.zt-chip[data-etap="bez"] { --zt-ton: var(--text-muted); }

/* === 4. KOMENTARZE POD ZADANIEM (B4) ======================================= */
.kom-sekcja, .czas-sekcja { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.kom-sekcja .todo-block-lbl, .czas-sekcja .todo-block-lbl { display: flex; align-items: center; gap: var(--s-2); }
.kom-lista { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.kom-wiersz { display: flex; align-items: flex-start; gap: var(--s-2); }
.kom-wiersz > .todo-ava { flex: none; margin-left: 0; }
.kom-tresc { flex: 1; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r); background: var(--surface-2); }
.kom-glowa { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); }
.kom-usun { margin-left: auto; }
.kom-tekst { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kom-pusto { margin: 0; font-size: var(--t-sm); }
.kom-nowy { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.kom-pole { width: 100%; min-height: 64px; resize: vertical; }

/* === 5. ZADANIA CYKLICZNE (B6) — napis „↻ co miesiąc” w szczegółach zadania ============ */
.zt-powtarzanie { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); }

/* === 6. CZAS PRACY PRZY ZADANIU (B7) — stoper, dopisanie ręczne, suma osób; pasek na pulpicie; okno projektu ===== */
.czas-razem { color: var(--text-muted); font-weight: var(--w-regular); }
.czas-akcje, .czas-reczny, .czas-osoby { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.czas-reczny[hidden] { display: none; }
.czas-reczny label { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: var(--text-muted); }
.czas-reczny input[type="number"] { width: 72px; }
.czas-zegar { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--w-bold); color: var(--danger); }
.czas-osoba { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-sm); }
.czas-pusto { margin: 0; font-size: var(--t-sm); }
.czas-wpisy summary { cursor: pointer; font-size: var(--t-sm); color: var(--text-muted); }
.czas-wpisy ul { display: flex; flex-direction: column; gap: 2px; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.czas-wpis { display: grid; grid-template-columns: 6em minmax(4em, 10em) 5.5em 5.5em 28px; justify-content: start; align-items: center; gap: var(--s-2); min-height: 28px; font-size: var(--t-sm); }
.czas-wpis-ile { text-align: right; }
.czas-pasek { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r); background: var(--danger-soft); }
.czas-pasek-co { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.czas-projekt { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.czas-p-razem { margin: 0; font-size: var(--t-lg); }
.czas-p-tytul { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.czas-p-lista { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.czas-p-wiersz { display: grid; grid-template-columns: minmax(0, 20em) minmax(60px, 1fr) 6.5em; align-items: center; gap: var(--s-3); }
.czas-p-nazwa { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.czas-p-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czas-p-kropka { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kropka); }
.czas-p-pasek { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.czas-p-pasek > span { display: block; height: 100%; background: var(--kropka, var(--accent)); }   /* dział — kolor działu */
.czas-p-wiersz > b { text-align: right; font-variant-numeric: tabular-nums; }

/* === 7. ZAPISANE FILTRY ZADAŃ (B9) — pasek pod zakładkami listy „Zadania”, okno „Filtr zadań” ===================== */
.fz-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.fz-etykieta { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--t-sm); }
.fz-chip { display: inline-flex; align-items: center; min-height: var(--h-control-sm); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--t-sm); }
.fz-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--w-medium); }
.fz-chip-nazwa { min-height: inherit; padding: 0 var(--s-3); border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: pointer; }
.fz-chip-usun { display: inline-grid; place-items: center; width: 26px; min-height: inherit; margin-left: calc(-1 * var(--s-2)); border: 0; border-radius: inherit; background: none; color: var(--text-muted); cursor: pointer; }
.fz-chip-usun:hover { color: var(--danger); }
.fz-nowy { gap: var(--s-1); padding: 0 var(--s-3); border-style: dashed; color: var(--text-muted); cursor: pointer; }

/* === 8. SZABLONY PROJEKTÓW (B5) — okno „Szablon zadań”, sekcja w Ustawieniach, edycja szablonu ======================= */
.sz-okno { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
.sz-blok { display: flex; flex-direction: column; gap: var(--s-2); }
.sz-blok h3 { margin: 0; font-size: var(--t-md); }
.sz-blok p { margin: 0; font-size: var(--t-sm); }
.sz-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sz-wiersz > select, .sz-wiersz > input { flex: 1 1 240px; min-width: 0; }
.sz-lista { display: flex; flex-direction: column; gap: var(--s-2); }
.sz-karta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.sz-karta-tresc { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.sz-karta-etapy, .sz-karta-akcje { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sz-etap { padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-xs); }
.sz-podpowiedz { margin: var(--s-2) 0; font-size: var(--t-sm); }
.sz-form > .button { width: auto; }
.sz-zadania { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.sz-zadanie { display: grid; grid-template-columns: minmax(0, 1fr) 150px 96px 120px 32px; align-items: center; gap: var(--s-2); }
.sz-zadanie.is-pod { padding-left: var(--s-5); border-left: 2px solid var(--line); }
.sz-dni { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--t-sm); }
.sz-dni input { width: 64px; }

.zt-karta .todo-node-rodzaj::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-1); border-radius: var(--r-pill); background: var(--zt-ton); vertical-align: middle; }   /* POPR-n28: rodzaj zadania kropką zamiast paska z lewej */