/* ============================================================================
   15d-zadania-os-czasu.css — strona „Zadania”: Timeline i Gantt (wspólna oś dni), Obciążenie (v15 b7, 03.10.2026)
   ----------------------------------------------------------------------------
   Oś: kolumna nazw przyklejona z lewej (osoba / projekt), nagłówek miesięcy i dni. Timeline: weekend przyciemniony, dziś
   podświetlone (bez kreski — jak wzór), paski z tytułem w środku, tory. Gantt: czerwona kreska „dziś” przez całą oś z nagłówkiem. Gantt: fazy projektu w jednej linii (kolor = etap, data-etap →
   --hg-ton z 27-harmonogram-gantt.css), pozycje pod spodem: pasek od–do albo romb terminu. Telefon: 9-telefon/7-…css.
   ============================================================================ */
.zo-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.zo-pasek-osi { display: none; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
/* „‹ Dziś ›” (oś, Kalendarz, Obciążenie) jak przełącznik wzoru (ui-seg): szare tło, ramka 3 px, przyciski bez kresek, 13 px / 600. */
:is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) { gap: 3px; padding: 3px; overflow: visible; border: 0; border-radius: var(--r); background: var(--surface-3); }
:is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) > button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-control); border: 0; border-radius: var(--r-sm); font-weight: var(--w-bold); }
:is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) > button:hover { background: var(--surface); }
:is(.zo-nav, .zt-kal-pasek > .segmented, .zb-pasek > .segmented) .icon { width: 16px; height: 16px; }
/* Lista zakresu jak we wzorze (.zh-sel select): natywna strzałka przeglądarki, odstęp 0 8 px, 13 px / 600, promień 8. */
.zo-zakres { height: var(--h-control); padding: 0 var(--s-2); border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); appearance: auto; color: var(--text); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.zo-przewijak { overflow-x: auto; overflow-y: hidden; border-radius: var(--r) var(--r) 0 0; }
.zo-plotno { position: relative; }
.zo-w { display: flex; min-height: 44px; border-bottom: 1px solid var(--line-soft); }
.zo-n { position: sticky; left: 0; z-index: 3; display: flex; flex: none; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-right: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); }
.zo-n small { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.zo-os { position: relative; z-index: 1; flex: none; }
.zo-glowa { min-height: 44px; border-bottom-color: var(--line); background: var(--surface); }
.zo-glowa .zo-n { justify-content: center; }
.zo-rog { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; padding: 0 var(--s-2); }
.zo-glowa .zo-rog { justify-content: flex-start; }
.zo-rog-napis { display: none; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); }   /* wzór: „Osoba” / „Projekt” szare, zwykłe */
.zo-rog-ster { display: flex; align-items: center; gap: var(--s-1); }
.zo-rog-ster .zo-nav > button { min-height: 32px; min-width: 32px; padding: 0 var(--s-2); }
.zo-rog-ster .zo-zakres { height: 32px; min-height: 0; font-size: var(--t-xs); }
/* „Rozwiń wszystkie” w Gantcie: strzałka w dół, po rozwinięciu w górę (było „>” — mylone ze strzałką „następny okres”). */
.zh-gantt-rozwin[aria-pressed="true"] .icon-chevron-down { transform: rotate(180deg); }
.zo-gora, .zo-dol { position: absolute; left: 0; right: 0; height: 22px; }
.zo-gora { top: 2px; }
.zo-dol { bottom: 2px; }
.zo-m { position: absolute; top: 2px; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.zo-d { position: absolute; bottom: 2px; color: var(--text-faint); font-size: var(--t-xs); white-space: nowrap; }
.zo-d.is-dzis { color: var(--accent); font-weight: var(--w-strong); }
.zo-gantt .zo-d.is-dzis { margin-left: var(--s-1); }   /* numer dzisiejszego dnia obok czerwonej kreski „dziś”, nie pod nią */
.zo-tlo { position: absolute; top: 44px; bottom: 0; z-index: 0; pointer-events: none; }
.zo-we { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--text) 5%, transparent); }
.zo-dzis-tlo { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.zo-k { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
/* Kreska „dziś” — tylko Gantt (Timeline ma podświetlony dzień); jak we wzorze idzie od góry płótna, także przez nagłówek osi. */
.zo-dzis { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; background: var(--danger); pointer-events: none; }
.zo-osoba { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.zo-osoba b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zo-notka { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); color: var(--text-muted); font-size: var(--t-sm); }
.zh-pusto { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-5) var(--s-4); color: var(--text-muted); text-align: center; }
.zh-pusto p { margin: 0; }
.zh-pusto-powod b { color: var(--text); }
/* Pusty Timeline / Gantt: sterowanie osią zostaje (na komputerze stoi w rogu osi, której wtedy nie ma). */
.zo-panel.is-pusto .zo-pasek-osi { display: flex; }

/* Timeline: wiersz osoby — nazwa u góry, paski w torach. */
/* Wzór: wiersz osoby 52 px przy jednym pasku (odstęp 8 px od góry, bez dolnego), nazwisko w kolorze akcentu; pod wierszem
   jasna kreska, a między osobami dodatkowo pełna (.zh-tl .zd-g-w.pr + .zd-g-w.pr). */
.zo-timeline .zo-w:not(.zo-glowa) + .zo-w:not(.zo-glowa) { border-top: 1px solid var(--line); }
.zo-timeline .zo-w:not(.zo-glowa) .zo-n { justify-content: flex-start; gap: 0; padding: var(--s-2) var(--s-3) 0; }
/* 27.10.2026 (audyt interfejsu): wiersz 52 px (wzór) liczono dla pisma 12 px; przy skali pisma 13,5 px druga linia („Dyrektor · 1 pozycja”) kurczyła się do 16 px i dolna część liter (y, j, ę) była ucięta kreską wiersza. Linia ciaśniejsza i bez kurczenia. */
.zo-timeline .zo-w:not(.zo-glowa) .zo-n small { flex: none; line-height: var(--lh-tight); }
.zo-timeline .zo-osoba b { color: var(--accent); font-weight: var(--w-strong); }
.zo-pasek { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-2); overflow: hidden; border: 1px solid color-mix(in srgb, var(--hg-ton) 55%, transparent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--hg-ton) 22%, var(--surface)); color: var(--text); font: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; cursor: pointer; }
.zo-pasek:hover { background: color-mix(in srgb, var(--hg-ton) 34%, var(--surface)); }
.zo-pasek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.zo-pasek .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zo-pasek .p { flex: none; color: var(--text-muted); font-weight: var(--w-strong); }
.zo-pasek.is-waski { justify-content: center; padding: 0; }
.zo-pasek.is-waski .t { display: none; }
.zo-pasek.is-po { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.zo-pasek.is-gotowy { opacity: .5; }
.zo-pasek.is-gotowy .t { text-decoration: line-through; }
[data-etap="bez"].zo-pasek, .zo-leg-kolor[data-etap="bez"], .zg-kropka[data-etap="bez"], .zg-pasek[data-etap="bez"], .zg-romb[data-etap="bez"], .zo-tel-poz > i[data-etap="bez"] { --hg-ton: var(--text); }

/* Legenda (Timeline, Gantt, Kalendarz). */
.zo-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-xs); }
.zo-legenda > span { display: inline-flex; align-items: center; gap: var(--s-1); }
.zo-legenda i { display: inline-block; flex: none; }
.zo-leg-kolor { width: 10px; height: 10px; border-radius: 3px; background: var(--hg-ton); }
.zo-leg-kreska { width: 1px; height: 14px; background: var(--line-strong); }
.zo-leg-pasek { width: 18px; height: 8px; border-radius: 3px; background: var(--text-faint); }
.zo-leg-romb { width: 9px; height: 9px; border-radius: 1px; background: var(--text-faint); transform: rotate(45deg); }
.zo-leg-po { box-sizing: border-box; width: 10px; height: 10px; border: 2px solid var(--danger); border-radius: 3px; }
.zo-leg-dzis { width: 2px; height: 12px; background: var(--danger); }

/* Gantt: wiersz projektu (cała komórka nazwy i pasek rozwijają), fazy w jednej linii, pozycje pod spodem. */
/* Wzór: wiersz projektu 40 px na szarym tle (pozycje pod nim białe, 46 px), strzałka 28 px, fazy 16 px. Tło wiersza półprzezroczyste —
   kreski tygodni i dzisiejszy dzień leżą pod wierszami i mają być widać. */
.zg-w-projekt { min-height: 40px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.zo-gantt :is(.zo-we, .zo-dzis-tlo) { display: none; }   /* wzór: w Gantcie tylko kreski tygodni i czerwona kreska „dziś” (weekendy i kolumnę dnia ma Timeline) */
.zg-projekt { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-2); padding: 0 var(--s-3); background: var(--surface-2); }
.zg-projekt.is-klik, .zo-os.is-klik { cursor: pointer; }
.zg-projekt.is-klik:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.zg-w-projekt:hover .zo-os.is-klik { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.zg-projekt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zg-strzalka { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--text-faint); }
.zg-projekt-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.zg-projekt-t b { overflow: hidden; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }
/* DS6 (v15 b23; wzór Zadania v12 „A3”): postęp planu produkcji „NN %” i planowany koniec projektu obok numeru — przycisk z kartą
   kroków planu (karta-podpowiedzi.js). Komputer: „NN % · data”; dotyk: sam „NN %” w polu 44 × 44 px, które nie podnosi wiersza. */
.zg-projekt-1 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.zg-projekt-1 > b { flex: 0 1 auto; min-width: 0; }
.zg-postep { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: baseline; gap: var(--s-1); margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-faint); font: inherit; font-size: var(--t-xs); line-height: var(--lh-base); white-space: nowrap; cursor: pointer; -webkit-touch-callout: none; user-select: none; }
.zg-postep-pc { color: var(--text-muted); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.zg-postep:hover .zg-postep-pc, .zg-postep[aria-describedby] .zg-postep-pc { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.zg-postep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zg-projekt[data-bez-projektu] .zg-projekt-t b { color: var(--text); }   /* wzór: „Bez projektu” czarne — to nie numer projektu */
.zl-licznik.is-po { background: var(--danger-soft); color: var(--danger); }
.zg-faza { position: absolute; top: 50%; z-index: 2; height: 16px; margin-top: -8px; padding: 0 var(--s-1); overflow: hidden; border-radius: 4px; background: var(--hg-ton); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
/* Jasne kolory faz (Design, Transport, Certyfikacja) — ciemny napis, jak na jasnym tle w obu motywach. */
.zg-faza[data-etap="transport"], .zg-faza[data-etap="certyfikacja"] { color: var(--napis-na-jasnym); }   /* Design ma po zmianie tokenu ciemniejszy niebieski — biały napis jak we wzorze */
.zg-faza.is-gotowy { opacity: .5; }
.zg-faza.is-ciagniety-mozna { cursor: grab; }
.zg-faza.is-ciagniety { cursor: grabbing; box-shadow: 0 0 0 2px var(--accent); }
.zg-kamien { position: absolute; top: 50%; z-index: 3; width: 11px; height: 11px; margin: -6px 0 0 -6px; border: 2px solid var(--text); border-radius: 2px; background: var(--surface); transform: rotate(45deg); }
.zg-kamien.is-osiagniety { background: var(--text); }
.zg-kamien.is-po { border-color: var(--danger); }
.zg-w-poz { min-height: 46px; }
.zg-poz { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-2); padding: 0 var(--s-3) 0 var(--s-5); }
.zg-kropka { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hg-ton); }
.zg-poz-t { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.zg-poz-t b, .zg-poz-t small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-poz-t b { font-size: var(--t-sm); font-weight: var(--w-bold); }
.zg-poz-t small { color: var(--text-faint); font-size: var(--t-xs); }
.zg-poz-t small.is-po { color: var(--danger); }
.zg-poz-t:hover b { color: var(--accent); }
.zg-pasek { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; height: 22px; margin-top: -11px; padding: 0 var(--s-2); overflow: hidden; border: 0; border-radius: var(--r-sm); background: var(--hg-ton); color: var(--on-accent); font: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.zg-pasek span { overflow: hidden; text-overflow: ellipsis; }
.zg-pasek.is-po { box-shadow: 0 0 0 2px var(--danger); }
.zg-pasek.is-gotowy, .zg-romb.is-gotowy::before { opacity: .45; }
.zg-romb { position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; }
.zg-romb::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px; border-radius: 2px; background: var(--hg-ton); box-shadow: 0 0 0 2px var(--surface); transform: rotate(45deg); }
.zg-romb.is-po::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }
.zg-romb:focus-visible, .zg-pasek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zg-poza { position: absolute; top: 50%; left: var(--s-2); color: var(--text-muted); font-size: var(--t-xs); transform: translateY(-50%); }
.zh-gantt-rozwin { width: auto; }
.zh-gantt-rozwin > b { color: inherit; font-weight: var(--w-regular); }   /* wzór: „Rozwiń” szare, zwykłe — to przycisk, nie wybrana wartość filtra */
.zo-pasek-osi .zh-gantt-rozwin { gap: var(--s-2); padding: 0 var(--s-3) 0 var(--s-4); color: var(--text); }   /* wzór do 1180 px: przycisk w panelu 100 × 44, napis ciemny i półgruby */
.zo-pasek-osi .zh-gantt-rozwin > b { font-weight: var(--w-bold); }
.zh-gantt-rozwin .icon { width: 14px; height: 14px; margin: 0; color: var(--text-muted); }

/* Konsultacje pod Timeline (karty i okno — widoki/harmonogram.js, 14-timeline.css). */
.zh-konsultacje { margin-top: var(--s-3); }
.zh-konsultacje-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.zh-konsultacje-glowa h3 { margin: 0; font-size: var(--t-md); }
.zh-konsultacje-glowa p { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }
.zh-konsultacje-lista { padding: var(--s-3) var(--s-4) var(--s-4); }

/* Węższa treść i dotyk: sterowanie osią nad osią (w rogu tylko napis), cele 44 px. */
@media (max-width: 1180px) {
  .zo-pasek-osi { display: flex; }
  .zo-rog-ster { display: none; }
  .zo-rog-napis { display: block; }
  .zh-opcje .zh-gantt-rozwin { display: none; }   /* wzór do 1180 px: „Rozwiń” stoi w panelu obok zakresu osi, nie w rzędzie filtrów */
}
:root[data-ui="tablet"] .zo-pasek-osi { display: flex; }
:root[data-ui="tablet"] .zo-rog-ster { display: none; }
:root[data-ui="tablet"] .zo-rog-napis { display: block; }
:root[data-ui="tablet"] :is(.zo-nav > button, .zo-zakres, .zh-gantt-rozwin) { min-height: 44px; }
/* Dotyk (wzór): głowa osi i wiersze 52 px, pozycja pod projektem 46 px, strzałka 20 px (rozwija cała komórka). */
:root[data-ui="tablet"] .zo-w { min-height: 52px; }
:root[data-ui="tablet"] .zo-w.zg-w-poz { min-height: 46px; }
:root[data-ui="tablet"] .zo-tlo { top: 52px; }
:root[data-ui="tablet"] .zo-rog { padding: 0 var(--s-3); }
:root[data-ui="tablet"] .zg-strzalka { width: 20px; height: 20px; }
/* DS6: dotyk — kolumna nazw ma 210 px: sam „NN %” (koniec w karcie i w opisie przycisku), pole stuknięcia 44 × 44 px z prawej strony linii numeru. */
:root[data-ui="tablet"] .zg-postep-kon { display: none; }
:root[data-ui="tablet"] .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="tablet"] .zo-pasek { height: 44px; font-size: var(--t-sm); }
:root[data-ui="tablet"] .zg-romb { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
:root[data-ui="tablet"] .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 (wąskim paskom boki dodaje zadania-gantt.js) */
:root[data-ui="tablet"] .zg-pasek.is-po { box-shadow: inset 0 0 0 2px var(--danger); }
:root[data-ui="tablet"] .zg-poz-t { min-height: 44px; justify-content: center; }

/* === OBCIĄŻENIE (ZH6) — osoby × tygodnie, kolumna „Zaległe”, kratka = liczba otwartych pozycji (klik = okno z listą). === */
.zb-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.zb-opis { margin: 0; color: var(--text-faint); font-size: var(--t-sm); }
.zb-legenda { margin-left: 0; padding: 0; border: 0; }   /* wzór: legenda zaraz za opisem */
.zb-tabela { overflow-x: auto; }
.zb-tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.zb-tabela th, .zb-tabela td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); text-align: center; }
.zb-tabela thead th { color: var(--text-muted); font-weight: var(--w-strong); white-space: nowrap; }
.zb-tabela thead th small { display: block; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
.zb-tabela thead th.is-dzis { color: var(--accent); }
.zb-tabela thead th.zb-zal { color: var(--danger); }
.zb-tabela tbody th { text-align: left; font-weight: var(--w-bold); white-space: nowrap; }
.zb-tabela tbody th small { display: block; margin-left: 34px; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
.zb-kratka { width: 100%; min-width: 44px; height: 36px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font: inherit; font-weight: var(--w-strong); cursor: pointer; }
.zb-kratka:disabled { background: transparent; cursor: default; }
.zb-kratka.p1, .zb-leg.p1 { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); }
.zb-kratka.p2, .zb-leg.p2 { background: color-mix(in srgb, var(--warn-strong) 35%, var(--surface)); }   /* wzór: --uw (ciemny bursztyn) */
.zb-kratka.p3, .zb-leg.p3 { background: color-mix(in srgb, var(--danger) 35%, var(--surface)); }
.zb-kratka.is-zal, .zb-leg.is-zal { background: transparent; box-shadow: inset 0 0 0 2px var(--danger); color: var(--danger); }
.zb-leg { width: 14px; height: 14px; border-radius: 3px; }
.zb-okno { display: flex; flex-direction: column; gap: var(--s-1); }
.zb-okno-wiersz { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.zb-okno-poz { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.zb-okno-poz:hover { background: var(--surface-2); }
.zb-okno-poz small { color: var(--text-muted); font-size: var(--t-xs); }
.zb-okno-poz .is-po { color: var(--danger); font-weight: var(--w-bold); }
:root[data-ui="tablet"] .zb-kratka { height: 44px; }