/* ZADANIA → KARTA PODPOWIEDZI (v15 b9, 03.10.2026; wzór zh2_v10) — miniatura pozycji po najechaniu (komputer), fokusie (Tab)
   albo przytrzymaniu (dotyk) w Timeline, Kalendarzu i Gancie. Logika: js/zadania/karta-podpowiedzi.js.
   Kolor = etap pozycji: atrybut data-etap → --hg-ton (27-harmonogram-gantt.css), jak paski osi czasu.
   Karta leży w <body> (position: fixed), więc nie przewija się z osią i nie ucina jej żaden kontener z overflow. */

.zk {
  --zk-k: var(--hg-ton, var(--text-faint));
  position: fixed;
  z-index: var(--z-dymek);
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw / var(--skala-ui) - var(--s-4));
  padding: var(--s-3) 14px 10px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--zk-k);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--cien-2);
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.zk.is-widoczna { opacity: 1; transform: none; }
.zk[data-etap="bez"] { --zk-k: var(--text); }   /* „Bez etapu” — pasek i etykieta jak kropka i legenda (kolor tekstu) */
.zk[hidden] { display: none; }
.zk.is-klik { cursor: pointer; }
.zk .zk-ik { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.zk-g { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.zk-typ { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 10px 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--zk-k) 16%, var(--surface)); color: var(--text); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.zk-typ .zk-ik { width: 14px; height: 14px; color: var(--zk-k); }
.zk-prio { display: inline-flex; align-items: center; height: 22px; margin-left: auto; padding: 0 var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-strong); }
.zk-prio.is-pilne { background: var(--danger-soft); color: var(--danger); }
.zk-prio.is-wysoki { background: var(--warn-soft); color: var(--warn-strong); }

.zk-t { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); line-height: 1.3; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.zk-p { display: -webkit-box; margin: var(--s-1) 0 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zk-p b { color: var(--text); font-weight: var(--w-strong); }

.zk-r { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.zk-w { display: flex; align-items: center; gap: var(--s-2); min-width: 0; min-height: 22px; color: var(--text-muted); }
.zk-w > .zk-ik { color: var(--text-faint); }
.zk-kr { flex: none; width: 10px; height: 10px; margin: 0 3px; border-radius: var(--r-pill); background: var(--hg-ton); }
.zk-kr[data-etap="bez"] { background: var(--text); }   /* „Bez etapu” jak na osi czasu (15d) — wyraźnie inny niż szare Konsultacje */
.zk-po { margin-left: auto; padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.zk-avs { display: inline-flex; flex: none; }
.zk-av { --avatar-d: 26px; --avatar-ramka: 2px; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--avatar-d); height: var(--avatar-d); border: var(--avatar-ramka) solid var(--surface); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ava, var(--accent)) 24%, var(--surface)); color: color-mix(in srgb, var(--ava, var(--accent)) 70%, var(--text)); font-size: min(var(--t-xs), calc((var(--avatar-d) - 2 * var(--avatar-ramka)) * .44)); font-weight: var(--w-strong); line-height: 1; white-space: nowrap; }   /* jak .todo-ava (15-zadania.css): jasny odcień koloru osoby, czytelny także w ciemnym motywie */
.zk-av + .zk-av { margin-left: -5px; }
.zk-os { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-sz { color: var(--text-faint); }
.zk-s { margin: 10px 0 0; padding-top: var(--s-2); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--t-xs); }

/* Dotyk: przytrzymanie pozycji pokazuje kartę — bez zaznaczania napisu i menu przeglądarki pod palcem. */
:root:not([data-ui="desktop"]) :is(.zo-pasek, .zo-tel-poz, .zg-pasek, .zg-romb, .zg-faza, .zg-kamien, .zt-chip, .zt-dzien) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* DS6 (v15 b23; wzór Zadania v12 „A3”): karta postępu projektu — kroki planu produkcji w kolumnach (kolor · krok · daty · stan). */
.zk.is-postep { width: 324px; }
.zk-kroki { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--s-2); row-gap: var(--s-2); align-items: center; }
.zk-kroki .zk-w { display: contents; }
.zk-krok-n { color: var(--text); font-weight: var(--w-medium); }
.zk-krok-d, .zk-krok-s { color: var(--text-muted); white-space: nowrap; }
.zk-krok-s { font-weight: var(--w-medium); }
.zk-krok-s.is-gotowy { color: var(--ok-strong); }
.zk-krok-s.is-po { color: var(--danger); }
.zk-krok-s.is-trwa { color: var(--text); }
.zk-krok-s.is-plan { color: var(--text-faint); }
.zk-krok-b { grid-column: 3 / 5; color: var(--text-faint); }
.zk-s.zk-koniec { color: var(--text-muted); font-size: var(--t-sm); }
.zk-s.zk-koniec b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .zk { transform: none; transition: none; } }