/* ============================================================================
   9-telefon/7-zadania-tablica-kalendarz.css — Tablica i Kalendarz zadań na telefonie (B2, 27.09.2026)
   Komputer: 4-widoki/26-zadania-tablica-kalendarz.css. Wszystko pod :root[data-ui="mobile"].
   Tablica: kolumny jedna pod drugą, „Przenieś do…” (44 px) zamiast przeciągania. Kalendarz: miesiąc z kropkami,
   stuknięty dzień rozwija listę pod siatką; tydzień = lista dni. „Nowe zadanie” = pływające „+”.
   ============================================================================ */
:root[data-ui="mobile"] .zt-widoki { width: 100%; margin-left: 0; }
:root[data-ui="mobile"] .zt-widoki > .view { flex: 1; min-height: 44px; }
:root[data-ui="mobile"] .zt-nowe { display: none; }
:root[data-ui="mobile"] .zt-widok { overflow: visible; }

:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zt-tablica { grid-template-columns: minmax(0, 1fr); height: auto; }
:root[data-ui="mobile"][data-telefon-poziomo] .zt-tablica { height: auto; align-items: start; }   /* ZK3: poziomo trzy kolumny jak na tablecie we wzorze */
:root[data-ui="mobile"] .zt-karty { min-height: 0; overflow: visible; }
:root[data-ui="mobile"] .zt-karta-otworz { min-height: 44px; }
:root[data-ui="mobile"] .zt-karta-przenies { width: 44px; height: 44px; }

:root[data-ui="mobile"] .zt-kal-pasek { gap: var(--s-3); }
:root[data-ui="mobile"] .zt-kal-pasek :is(.segmented > button, .views > .view) { min-height: 44px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zt-kal-tytul { order: -1; flex-basis: 100%; text-align: left; }   /* poziomo (wzór): jeden rząd — strzałki · miesiąc · Tydzień | Miesiąc */
/* Numer dnia jak we wzorze: pole 24 px z lewej strony kafla (7 px od krawędzi), 13 px / 700 w kolorze --text-muted, kropki pod nim na środku. */
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien-nr { background: transparent; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-kal-siatka { gap: 2px; border: 0; }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-kal-dt { border: 0; background: transparent; text-align: center; }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien { align-items: center; justify-content: center; 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); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien.is-inny { background: var(--surface-2); color: var(--text-faint); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien.is-dzis .zt-dzien-nr { background: transparent; color: var(--accent); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zh-cialo > .zt-widok:has(> .zt-kalendarz) { padding: var(--s-3); }   /* poziomo jak tablet we wzorze: 16 px */
:root[data-ui="mobile"] .zh-cialo > .zt-widok:has(.is-miesiac) > .zo-legenda { order: 4; margin-top: var(--s-3); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien.is-wybrany { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-dzien.is-wybrany .zt-dzien-nr { color: var(--on-accent); }
:root[data-ui="mobile"] .zt-kalendarz.is-miesiac .zt-kropki { display: flex; gap: 2px; height: 6px; }
:root[data-ui="mobile"] :is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) { gap: 3px; background: var(--surface-3); }
:root[data-ui="mobile"] .zt-kropka { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--zt-ton); }
:root[data-ui="mobile"] .zt-kal-wybrany { display: flex; flex-direction: column; gap: var(--s-2); }
/* Tydzień na telefonie: dni jeden pod drugim, pełne chipy. */
:root[data-ui="mobile"] .zt-kalendarz.is-tydzien .zt-kal-siatka { grid-template-columns: minmax(0, 1fr); border: 0; }
:root[data-ui="mobile"] .zt-kalendarz.is-tydzien .zt-kal-dt { display: none; }
:root[data-ui="mobile"] .zt-kalendarz.is-tydzien .zt-dzien { min-height: 0; padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--line-soft); }
:root[data-ui="mobile"] .zt-chip { height: auto; min-height: 44px; }   /* wzór: 12 px / 600 jak na komputerze, wysokość 44 px */
/* Oś na telefonie jak na dotyku wzoru: głowa i wiersze 52 px, pozycja pod projektem 46 px, strzałka 20 px. */
:root[data-ui="mobile"] .zo-w { min-height: 52px; }
:root[data-ui="mobile"] .zo-w.zg-w-poz { min-height: 46px; }
:root[data-ui="mobile"] .zo-tlo { top: 52px; }
:root[data-ui="mobile"] .zo-rog { padding: 0 var(--s-3); }
:root[data-ui="mobile"] .zg-strzalka { width: 20px; height: 20px; }

/* Czas pracy (B7): przyciski 44 px, wpis w dwóch liniach, okno projektu — nazwa nad paskiem. */
:root[data-ui="mobile"] .czas-akcje .button, :root[data-ui="mobile"] .czas-reczny .button { min-height: 44px; }
:root[data-ui="mobile"] .czas-reczny input { min-height: 44px; }
:root[data-ui="mobile"] .czas-wpis { grid-template-columns: 5.5em minmax(0, 1fr) auto 44px; justify-content: stretch; min-height: 44px; }
:root[data-ui="mobile"] .czas-wpis-zrodlo { display: none; }
:root[data-ui="mobile"] .czas-wpis .icon-button { width: 44px; height: 44px; }
:root[data-ui="mobile"] .czas-pasek { flex-wrap: wrap; }
:root[data-ui="mobile"] .czas-pasek-co { flex-basis: calc(100% - 32px); }
:root[data-ui="mobile"] .czas-pasek .button { min-height: 44px; }
:root[data-ui="mobile"] .czas-p-wiersz { grid-template-columns: minmax(0, 1fr) auto; }
:root[data-ui="mobile"] .czas-p-pasek { grid-column: 1 / -1; grid-row: 2; }

/* Zapisane filtry (B9): jeden wiersz przewijany w bok, przyciski 44 px. */
/* POPR-zadania-chipy (28.09.2026): zapisane filtry w RZĘDACH — wszystkie widoczne, bez przewijania w bok (jak zakładki lejka,
   POPR-n16). Dotąd rząd przewijał się bez sygnału: „Moje na 7 dni” ucięte krawędzią, dwa filtry poza ekranem. */
:root[data-ui="mobile"] .fz-pasek { flex-wrap: wrap; gap: 4px 6px; margin: 0 0 var(--s-1); }
:root[data-ui="mobile"] .fz-pasek > * { flex: 0 1 auto; max-width: 100%; }
:root[data-ui="mobile"] .fz-chip-nazwa { padding: 0 8px; font-size: var(--t-base); white-space: normal; text-align: left; }
:root[data-ui="mobile"] .fz-nowy { padding: 0 8px; font-size: var(--t-base); }
/* Na telefonie przy filtrach sama ikona lejka (napis „Filtry” zabierał pół rzędu) — rzędów mniej, lista wyżej. */
:root[data-ui="mobile"] .fz-etykieta-napis { display: none; }
:root[data-ui="mobile"] .fz-chip { min-height: 44px; }
:root[data-ui="mobile"] .fz-chip-usun { width: 44px; }

/* Szablony projektów (B5): wiersz zadania szablonu jako karta — tytuł na całą szerokość, pola pod nim; przyciski 44 px. */
:root[data-ui="mobile"] .sz-zadanie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); }
:root[data-ui="mobile"] .sz-zadanie .sz-tytul { grid-column: 1 / -1; }
:root[data-ui="mobile"] .sz-zadanie .sz-etap-pole { grid-area: 2 / 1; }
:root[data-ui="mobile"] .sz-zadanie .sz-prio { grid-area: 2 / 2; }
:root[data-ui="mobile"] .sz-zadanie .icon-button { grid-area: 2 / 3; }
:root[data-ui="mobile"] .sz-zadanie .sz-dni { grid-area: 3 / 1 / 4 / 3; }
:root[data-ui="mobile"] .sz-zadanie .icon-button { width: 44px; height: 44px; }
:root[data-ui="mobile"] .sz-zadanie :is(input, select) { min-height: 44px; }
:root[data-ui="mobile"] .sz-wiersz .button, :root[data-ui="mobile"] .sz-karta-akcje .button { min-height: 44px; }

/* POPR-n28: Tablica na telefonie — zakładki kolumn z licznikami zamiast kolumn jedna pod drugą; widać jedną kolumnę naraz
   (nagłówek kolumny powtarzałby zakładkę, więc go chowamy). */
:root[data-ui="mobile"] .zt-kolumny-zakladki { display: flex; width: 100%; height: auto; margin-bottom: var(--s-5); }   /* wzór: 24 px między zakładkami kolumn a pierwszą kartą */
:root[data-ui="mobile"] .zt-kolumny-zakladki.segmented { gap: 3px; background: var(--surface-3); }
:root[data-ui="mobile"] .zt-kolumny-zakladki.segmented > button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--s-1); min-height: 44px; padding: 0 var(--s-1); font-size: var(--t-sm); }   /* .segmented w selektorze: waga ponad kanon przełączników telefonu (14 px); wzór 13 px / 600 */
:root[data-ui="mobile"] .zt-kolumny-zakladki .zt-licznik { font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zt-kolumna-glowa { display: none; }

/* v15 b7 — strona „Zadania” na telefonie: JEDEN rząd nagłówka Widok ▾ · lupa · Filtry · + (wzór zh2_v8). Lupa rozwija
   szukajkę na cały rząd (✕ albo Esc zamyka). Rząd filtrów komputera znika — wszystko jest w arkuszu „Filtry”. */
:root[data-ui="mobile"] .zh-r2, :root[data-ui="mobile"] .zh-r1 .zh-widoki, :root[data-ui="mobile"] .zh-r1 .zh-odstep { display: none; }
:root[data-ui="mobile"] .zh-widok-menu { display: block; flex: 1 1 auto; min-width: 0; }
:root[data-ui="mobile"] .zh-widok-menu .pl-filtr-przycisk { width: 100%; min-height: 44px; gap: var(--s-2); padding: 0 var(--s-3); color: var(--text-muted); font-size: var(--t-base); }
:root[data-ui="mobile"] .zh-widok-menu .pl-filtr-przycisk > .icon:last-child { width: 16px; height: 16px; margin-left: auto; }
:root[data-ui="mobile"] :is(.zh-szukaj-otworz, .zh-filtry-telefon) { position: relative; display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--pole-ramka); border-radius: var(--r); background: var(--pole-tlo); }
:root[data-ui="mobile"] .zh-filtry-telefon .zh-filtry-ile { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; }
:root[data-ui="mobile"] .zh-nowe { width: 44px; height: 44px; padding: 0; justify-content: center; }
:root[data-ui="mobile"] .zh-nowe > span:not(.icon) { display: none; }
:root[data-ui="mobile"] .zh-gora.is-szuka .zh-szukaj-telefon { display: flex; flex: 1 1 auto; min-height: 44px; }
:root[data-ui="mobile"] .zh-gora.is-szuka :is(.zh-widok-menu, .zh-szukaj-otworz, .zh-filtry-telefon, .zh-nowe) { display: none; }
/* Lista na telefonie: szczegół na cały ekran z „‹ Zadania” (ui/aplikacja-mobilna.js) — bez ✕, bez przyklejenia i limitu wysokości. */
:root[data-ui="mobile"] .zl-szczegol { position: static; max-height: none; }
:root[data-ui="mobile"] .zl-zamknij { display: none; }
:root[data-ui="mobile"] .zl-szczegol-gora:not(:has(.zl-wroc)) { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .content:has(.zh-strona) { padding-top: var(--s-3); }   /* poziomo jak tablet we wzorze: 16 px */
/* Panel listy jak we wzorze: biała karta z ramką i promieniem 12 px (kanon telefonu zdejmuje ramkę z .zn-tree). */
:root[data-ui="mobile"] .zl-lista .zn-tree-body { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); }
:root[data-ui="mobile"] .zl-w { --zl-c: 0px; grid-template-columns: var(--zl-c) var(--h-control) minmax(0, 1fr) auto; row-gap: 0; min-height: 56px; padding: var(--s-1) var(--s-2); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-w { padding: var(--s-2) var(--s-1) var(--s-1); }
:root[data-ui="mobile"] .zl-w:has(> .zl-car > .zl-car-przycisk) { --zl-c: var(--h-control); padding-left: 0; }
:root[data-ui="mobile"] .zl-car { width: var(--zl-c); overflow: hidden; }
:root[data-ui="mobile"] .zl-car-przycisk { width: var(--h-control); }
:root[data-ui="mobile"] .zl-w > :is(.zl-car, .todo-odhacz, .todo-dot, .zl-ikona) { grid-row: 1 / 3; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-t { display: contents; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-t > b { grid-area: 1 / 3 / 2 / 5; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-m { grid-area: 2 / 3; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-p { grid-area: 2 / 4; }
/* Cele dla palca 44 px: „×” szukania, „×” arkusza Filtry, strzałki kalendarza, przyciski w szczególe i oknie zadania. */
:root[data-ui="mobile"] .zh-szukaj-x, :root[data-ui="mobile"] .zh-arkusz .pl-arkusz-glowa .icon-button { width: 44px; height: 44px; }
:root[data-ui="mobile"] .zt-kal-pasek .segmented > button { min-width: 44px; }
:root[data-ui="mobile"] :is(.zl-szczegol, .modal.zh-okno-zadania-modal) .button.mini { min-height: 44px; }
:root[data-ui="mobile"] .todo-odp-form { flex-direction: column; align-items: stretch; }
/* Tytuł zadania 44 px pod palec — selektor jak w 4-projekty-zadania-czat.css (tam min-height: 0), zawężony do Zadań. */
:root[data-ui="mobile"] :is(.zh-strona, .zh-nowe-okno) .zn-form input.zn-h-title:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { min-height: 44px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zl-tytul { display: -webkit-box; overflow: hidden; line-height: 1.45; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ZK3 (v15 b19): jak wzór — plakietka „Pilne/Wysoki” stoi obok tytułu, a druga linia tytułu zaczyna się pod pierwszą (nie pod plakietką). */
/* Szczegół i okno zadania: plakietki (priorytet, stan) w pierwszej linii, tytuł na całą szerokość pod nimi. */
:root[data-ui="mobile"] :is(.zl-szczegol, .zh-okno-zadania) .todo-d-head { flex-wrap: wrap; }
:root[data-ui="mobile"] :is(.zl-szczegol, .zh-okno-zadania) .todo-d-head > .todo-d-title { flex: 1 1 100%; order: 3; }
:root[data-ui="mobile"] :is(.zl-szczegol, .zh-okno-zadania) .todo-d-head > .todo-pill { margin-left: auto; }
:root[data-ui="mobile"] .zl-plus { opacity: 1; }
:root[data-ui="mobile"] .zl-dzieci { margin-left: var(--s-3); }
:root[data-ui="mobile"] .zl-grupa { min-height: 44px; }
/* Timeline i Gantt na telefonie: sterowanie osią nad osią; Timeline pionowo = lista „kto · co · kiedy”. */
:root[data-ui="mobile"] .zo-pasek-osi { display: flex; flex-wrap: nowrap; }
:root[data-ui="mobile"] .zo-rog-ster { display: none; }
:root[data-ui="mobile"] .zo-rog-napis { display: block; }
:root[data-ui="mobile"] :is(.zo-nav > button, .zo-zakres) { min-height: 44px; }
/* Lista zakresu osi w wymiarach wzoru (105 × 44 px, 13 px / 600, promień 8, odstęp 0 8 px) — kanon pól telefonu (46 px, 16 px,
   promień 12) zostaje dla reszty programu. Drugi :is() podnosi wagę ponad kanon (jak przy listach paska edytora w 1-podstawa.css).
   iPhone powiększa stronę przy polu z pismem poniżej 16 px — dlatego 16 px wraca tylko na czas otwarcia listy (:focus). */
:root[data-ui="mobile"] .zo-pasek-osi :is(select, input.combo-input):is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input).zo-zakres { flex: none; width: auto; min-height: 44px; height: 44px; padding: 0 var(--s-2); border-radius: var(--r-sm); background-image: none; font-size: var(--t-sm); }
:root[data-ui="mobile"] .zo-pasek-osi :is(select, input.combo-input):is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .combo-input).zo-zakres:focus { font-size: var(--pole-dotyk); }
:root[data-ui="mobile"] :is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) > button { font-size: var(--t-sm); }   /* wzór: 13 px / 600 */
:root[data-ui="mobile"] .zo-pasek-osi .zh-gantt-rozwin { display: inline-flex; flex: none; width: 44px; min-height: 44px; justify-content: center; padding: 0; }
:root[data-ui="mobile"] .zo-pasek-osi .zh-gantt-rozwin b { display: none; }
:root[data-ui="mobile"] .zo-pasek { height: 44px; font-size: var(--t-sm); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-projekt-t small { display: none; }
/* DS6: postęp projektu „NN %” na telefonie — sam procent (koniec w karcie). Poziomo (kolumna 210 px) jak tablet: z prawej strony
   linii numeru. Pionowo (150 px) numer zajmuje całą linię, więc procent stoi pod nim (w miejscu schowanej nazwy); pole
   stuknięcia 44 × 44 px mieści się w wierszu 52 px i go nie podnosi. */
:root[data-ui="mobile"] .zg-postep-kon { display: none; }
:root[data-ui="mobile"] .zg-postep { box-sizing: border-box; align-items: flex-start; justify-content: flex-end; min-width: 44px; height: 44px; margin: -8px 0 -19px auto; padding: 8px 0 0 var(--s-1); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-projekt-1 { flex-direction: column; align-items: flex-start; gap: 0; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-postep { align-items: flex-end; justify-content: flex-start; margin: -24px 0 -3px; padding: 0 0 3px; }
/* Pionowo kolumna ma 150 px: z odstępami wzoru (12 px, 8 px) na numer zostaje 68 px, a „P003-2026” ma ponad 70 px i gubił ostatnią cyfrę —
   ciaśniejsze odstępy (8 px, 4 px) mieszczą pełny numer. Poziomo (210 px) odstępy jak we wzorze. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-projekt { gap: var(--s-2); padding: 0 var(--s-3); }   /* wzór: 0 / 12 px, przerwa 8 px */
/* Numer projektu z zerami („P001-2026”) jest o kilka px szerszy niż we wzorze („P128-2026”) — nie ucinamy go wielokropkiem, wchodzi w przerwę przed licznikiem. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-projekt:not([data-bez-projektu]) :is(.zg-projekt-t, .zg-projekt-t b) { overflow: visible; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-projekt[data-bez-projektu] .zg-projekt-t b { text-overflow: clip; }   /* wzór: „Bez projektu” przycięte bez wielokropka */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .zg-poz { padding-left: var(--s-3); }   /* poziomo (wzór): wcięcie 24 px jak na tablecie */
:root[data-ui="mobile"] .zg-poz-t { min-height: 44px; justify-content: center; }
:root[data-ui="mobile"] .zg-romb { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
:root[data-ui="mobile"] .zg-pasek { box-sizing: border-box; height: 44px; margin-top: -22px; --zg-dotyk: 11px; border: solid transparent; border-width: var(--zg-dotyk) 0; border-radius: calc(var(--r-sm) + var(--zg-bok, 0px)) / calc(var(--r-sm) + var(--zg-dotyk)); background-clip: padding-box; }   /* pasek 22 px, pole dotyku 44 px; boki bez ramki — pasek ma pełną szerokość od–do */
:root[data-ui="mobile"] .zg-pasek.is-po { box-shadow: inset 0 0 0 2px var(--danger); }
:root[data-ui="mobile"] .zb-kratka { height: 44px; }   /* Obciążenie na telefonie poziomo: kratka 44 px jak na tablecie */
.zo-tel-okres { margin: 0; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-xs); }
.zo-tel-osoba + .zo-tel-osoba { border-top: 1px solid var(--line); }
.zo-tel-glowa { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface-2); }
.zo-tel-glowa .zo-osoba b { font-size: var(--t-base); }
.zo-tel-glowa small { flex: 1; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zo-tel-poz { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.zo-tel-poz > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hg-ton); }
.zo-tel-poz .t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.zo-tel-poz .t b { overflow: hidden; font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.zo-tel-poz .t small { color: var(--text-muted); font-size: var(--t-xs); }
.zo-tel-poz .d { flex: none; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.zo-tel-poz.is-po .d { color: var(--danger); }
.zo-tel-poz.is-gotowy { opacity: .55; }
/* „Odhacz swoją część”: kółko 24 × 24 px (wygląd bez zmian) — pole dotyku do 44 px dokłada ::after (przegląd telefonu 23.10.2026). */
:root[data-ui="mobile"] :is(.mp-odhacz, .todo-odhacz) { position: relative; }
:root[data-ui="mobile"] :is(.mp-odhacz, .todo-odhacz)::after { content: ""; position: absolute; inset: -10px; }