/* ============================================================================
   9-telefon/37-zadania-projektu-okno.css — OKNO „ZADANIA PROJEKTU”: JEDNO PRZEWIJANIE W PIONIE, DWIE KOLUMNY NA TABLECIE I POZIOMO
   ----------------------------------------------------------------------------
   Po co (29.10.2026): w oknie „Zadania projektu” lista zadań (ok. 170 px) i szczegóły (ok. 330 px) miały OSOBNE paski przewijania — dwa suwaki w jednym
   oknie, a lista pokazywała ~2 wiersze. Teraz:
   · TELEFON PIONOWO: jedno wspólne przewijanie okna. Widać albo listę zadań (zwarte wiersze, wszystkie naraz), albo szczegóły / formularz wybranego zadania
     z przyklejonym „‹ Zadania” (powrót do listy w to samo miejsce) — jak na ekranie Zadania. Który ekran: data-ekran na .todo-panel
     (js/zadania/zadania-projektu-ekrany.js). Pasek „Zadania projektu · Nowe zadanie · Szukaj” zostaje przyklejony do góry listy.
   · TABLET (pion i poziom) I TELEFON POZIOMO: dwie kolumny — lista 40 % + szczegóły; każda kolumna przewija się sama, jak dotąd na komputerze
     (poniżej 980 px baza układała je jedna nad drugą, z listą ściśniętą do 320 px). „‹ Zadania” jest tam niepotrzebne i ukryte.
   Wymiary z tokenów; bez !important. Komputer nie widzi z tego pliku nic.
   ============================================================================ */

.todo-wstecz { display: none; }

/* ============================ 1. TELEFON PIONOWO: JEDNO PRZEWIJANIE ======== */
/* Ciało okna przewija się samo (baza: overflow hidden + przewijanie kolumn w środku) — kolumny tracą własne przewijanie. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .task-modal-body { display: block; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-panel { display: block; height: auto; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal :is(.todo-tree, .todo-tree-body, .todo-detail-col) { max-height: none; overflow: visible; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-tree { border-bottom: 0; }
/* Jeden ekran naraz. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-panel[data-ekran="lista"] .todo-detail-col,
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-panel[data-ekran="szczegol"] .todo-tree { display: none; }
/* Pasek listy (tytuł, „Nowe zadanie”, szukajka) klei się do góry okna, gdy lista się przewija. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-tree-head { top: 0; z-index: 2; }
/* Szczegóły: „‹ Zadania” — pasek na całą szerokość przyklejony do góry okna (treść nie wyziera spod niego), zawsze pod kciukiem, także po przewinięciu długiego opisu. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .task-modal .todo-panel[data-ekran="szczegol"] .todo-wstecz {
  position: sticky; top: 0; z-index: 2; display: flex; align-self: stretch; align-items: center; justify-content: flex-start; gap: var(--s-1);
  min-height: var(--h-control); margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3); padding: 0 var(--s-4);
  border: 0; border-bottom: 1px solid var(--kreska-wlos); border-radius: 0; background: var(--okno-tlo); color: var(--accent); font-size: var(--t-md); font-weight: var(--w-medium);
}

/* ============================ 2. TABLET I TELEFON POZIOMO: LISTA 40 % + SZCZEGÓŁY ===== */
:root:is([data-ui="tablet"], [data-ui="mobile"][data-telefon-poziomo]) #modal-root .task-modal .todo-panel { grid-template-columns: minmax(200px, 40%) minmax(0, 1fr); height: 100%; }
:root:is([data-ui="tablet"], [data-ui="mobile"][data-telefon-poziomo]) #modal-root .task-modal .todo-tree { max-height: none; border-right: 1px solid var(--line); border-bottom: 0; }