/* ============================================================================
   10c-projekty-karta.css — karta projektu (v15, 02.10.2026; wygląd z zatwierdzonego projektu „Projekty”)
   ----------------------------------------------------------------------------
   P4: oś etapów (.pk-os) — pionowa linia, kropka w kolorze etapu (`--stage` z tileStageList), etap bieżący większy
   z obwódką, zrobione pełne, przyszłe puste z szarym tytułem. Bazowy wygląd listy etapów (wiersze z włosową kreską,
   kropka `.tile-stage-accent`) zostaje z 9-telefon/4-projekty-zadania-czat.css (`.mprojekt-etapy`, wszystkie tryby);
   tu tylko oś. Klasy faz: widoki/projekty-elementy.js (klasaFazyEtapu).
   ============================================================================ */
/* PK2 (b18, 04.10.2026) — wymiary osi 1:1 ze wzorem (.kt-os): oś 24 px, linia 9 px od lewej, kropka 12 px (bieżąca 16 px) na wysokości
   nazwy; nazwa 36 px od lewej; wiersz nazwy = wysokość kontrolki (36, dotyk 44); pod nim stan 26 px i licznik 12 px; dół 12 px.
   Etap zwinięty: 78 px ze stanem, 70 px bez (było 90). */
:root[data-ui] .mprojekt-etapy.pk-os { --pk-os-srodek: calc(var(--s-1) + var(--h-control) / 2); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-list { position: relative; border-radius: 0; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-list::before { content: ""; position: absolute; top: var(--pk-os-srodek); bottom: var(--pk-os-srodek); left: 9px; width: 2px; border-radius: 2px; background: var(--line); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-accent { z-index: 1; top: calc(var(--pk-os-srodek) - 6px); left: 4px; width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--surface); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-main { padding: var(--s-1) var(--s-1) var(--s-3) calc(var(--s-5) + var(--s-3)); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-item + .tile-stage-item::before { left: var(--s-5); background: var(--line-soft); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-row { min-height: var(--h-control); gap: var(--s-1); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-name { flex: 0 1 auto; font-size: var(--t-base); font-weight: var(--w-strong); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-chevron { width: 16px; height: 16px; color: var(--text-faint); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-chevron > .icon { width: 16px; height: 16px; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-sub { min-height: 0; margin-top: 0; gap: var(--s-2); color: var(--text-faint); font-size: var(--t-xs); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-count { color: var(--text-faint); font-size: var(--t-xs); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-menu-btn { width: var(--h-control); height: var(--h-control); border-color: transparent; border-radius: var(--r-sm); }
/* Stan etapu, planu, kroku: pigułka 26 px z kropką (wzór: .ui-st) — tło 14 % koloru stanu, bez ramki. */
:root[data-ui] .mprojekt-etapy.pk-os .status-pill { gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border-color: transparent; border-radius: var(--r); background: color-mix(in srgb, var(--ton, var(--text-muted)) 14%, var(--surface)); color: var(--ton-tekst, var(--text-muted)); font-size: var(--t-xs); font-weight: var(--w-bold); }
:root[data-ui] .mprojekt-etapy.pk-os .status-pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Wnętrze etapu (wzór: .kt-tr, .kt-kon, .kt-gh): wiersz = wysokość kontrolki + 8 px, nazwa 13 px / 600, opis 12 px. */
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-item.open > .tile-stage-main { padding-bottom: var(--s-2); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-stage-item.open .tile-constr-wrap { margin: var(--s-3) calc(var(--s-1) * -1) 0; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-constr-open { min-height: var(--h-control); padding: var(--s-1); border-radius: var(--r-sm); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-constr-body { gap: 0; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-constr-name { font-size: var(--t-sm); font-weight: var(--w-bold); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-constr-metrics { color: var(--text-faint); font-size: var(--t-xs); }
:root[data-ui] .mprojekt-etapy.pk-os :is(.tile-constr-cost, .tile-design-cost) { font-size: var(--t-sm); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-head { grid-template-columns: auto minmax(0, 1fr) auto 16px var(--h-control); grid-template-rows: auto; column-gap: var(--s-2); min-height: var(--h-control); padding: 0 0 0 var(--s-1); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-label { grid-row: 1; align-self: center; font-size: var(--t-sm); font-weight: var(--w-strong); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-count { grid-row: 1; grid-column: 2; align-self: center; color: var(--text-faint); font-size: var(--t-xs); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-cost { grid-row: 1; grid-column: 3; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-chevron { grid-row: 1; grid-column: 4; width: 16px; height: 16px; color: var(--text-faint); }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-chevron > .icon { width: 14px; height: 14px; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-head > .tile-menu { grid-row: 1; grid-column: 5; }
:root[data-ui] .mprojekt-etapy.pk-os .tile-constr-sublist { padding: 0 0 var(--s-1) var(--s-3); }
:root[data-ui] .mprojekt-etapy.pk-os .faza-przed .tile-stage-accent { background: var(--surface); box-shadow: inset 0 0 0 2px var(--stage), 0 0 0 3px var(--surface); }
:root[data-ui] .mprojekt-etapy.pk-os .faza-biezacy .tile-stage-accent { top: calc(var(--pk-os-srodek) - 8px); left: 2px; width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--stage) 30%, transparent); }
:root[data-ui] .mprojekt-etapy.pk-os .faza-biezacy .tile-stage-name { font-size: var(--t-md); font-weight: var(--w-heavy); }
:root[data-ui] .mprojekt-etapy.pk-os .faza-przed .tile-stage-name { color: var(--text-muted); }
/* P5: plakietki sprzedaży — „Sprzedany” / „Sprzedane X z Y” przy Designie, „Sprzedana” przy konstrukcji (zielone jak „Gotowe”). */
.pk-sprzedane { display: inline-flex; flex: none; align-items: center; padding: 1px var(--s-2); border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-strong); font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: normal; text-transform: none; white-space: nowrap; }
.tile-constr-metrics > .pk-sprzedane { margin-right: var(--s-1); }
/* Przy Designie plakietka stoi za liczbą konstrukcji; w wąskiej kolumnie schodzi do drugiej linii (nie ucina się). */
:root[data-ui] .mprojekt-etapy.pk-os .tile-design-count:has(> .pk-sprzedane) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); overflow: visible; white-space: normal; }
/* ============================================================================
   P6 + b12 (04.10.2026, wzór „okno Projekt”): KARTA PROJEKTU — pasek (numer · etap · stan, ✕) → nazwa, klient · norma →
   Zespół → działania w jednym rzędzie → blok ceny (10d-projekty-karta-cena.css) → Etapy (renderKartaProjektu,
   widoki/projekty-karta.js). Rodzaje: .pk-bok (komputer, obok listy — P7), .pk-wysuwana (tablet / węższe okno — P8),
   .pk-strona (telefon, osobny ekran: „‹ Projekty” i dwie karty — nagłówek z ceną, Etapy).
   UKŁAD ZALEŻY OD SZEROKOŚCI KARTY (kontener „karta-projektu” = .pk-glowny), progi jak we wzorze: do 640 px układ wąski
   (działania-ikony na całą szerokość), ponad 700 px działania w rzędzie z nazwą projektu, ponad 1100 px („na cały ekran”)
   działania z napisami. Progi liczone od szerokości karty (wzór liczył od ramki z marginesami — stąd 1100 zamiast 1180).
   ============================================================================ */
.pk-karta { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pk-uchwyt { display: none; }
.pk-cialo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Kontener na bloku z nagłówkiem i ceną (nie na całej treści: menu „Dodaj etap” w Etapach jest position: fixed względem okna). */
.pk-glowny { container: karta-projektu / inline-size; }
.pk-blok + .pk-blok { border-top: 1px solid var(--line); }
/* Pasek: numer · etap · stan; ✕ z prawej. Nad przewijaną treścią (bok, wysuwana) albo pierwszy wiersz karty (strona). */
.pk-glowa-1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-height: var(--h-control); }
.pk-nr { color: var(--accent-strong); font-size: var(--t-sm); font-weight: var(--w-strong); white-space: nowrap; }
/* Sterowanie oknem przy krzyżyku (PK0a): [rozmiar] [✕] w prawym górnym rogu, przyciski-ikony wysokości kontrolki (36, dotyk 44). */
.pk-okno { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); margin-left: auto; }
/* Przyciski sterowania jak .ui-ik wzoru: bez tła i ramki, szara ikona, tło dopiero po najechaniu. */
.pk-okno > .icon-button { border-color: transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); }
.pk-okno > .icon-button:hover { background: var(--surface-3); color: var(--text); }
/* Na cały ekran: pasek (numer · etap · stan … rozmiar, ✕) jest pierwszym wierszem panelu, na całą szerokość. */
.pk-pelna .pk-glowa > .pk-glowa-1 { flex: 1 1 100%; }
.pk-glowa { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-1) var(--s-4) var(--s-3); }
.pk-pelna .pk-glowa { padding-top: var(--s-3); }
/* Osobny ekran: odstęp w pasku numeru jak we wzorze (.sp-nr); na telefonie pasek nie niesie przycisków — ma wysokość pigułki. */
.pk-pelna .pk-glowa-1 { gap: var(--s-2); }
/* Na cały ekran: nagłówek 16 / 16 / 12 px (.sp-g); pasek ze sterowaniem oknem tuż nad nazwą (nazwa 10 px pod numerem, jak wzór). */
.pk-pelna .pk-glowa { padding: var(--s-4) var(--s-4) var(--s-3); }
.pk-pelna .pk-glowa > .pk-glowa-1 { margin: calc(var(--s-1) * -1) 0 calc(var(--s-2) * -1); }
.pk-pelna .pk-tytul { margin-top: 0; }
.pk-glowa-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-tytul { margin: var(--s-2) 0 0; font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.pk-klient { margin: var(--s-1) 0 0; color: var(--text-faint); font-size: var(--t-sm); }
/* Zespół: etykieta z ołówkiem i osoby (kółko, nazwisko, rola). */
.pk-zespol-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.pk-zespol-e { display: inline-flex; align-items: center; gap: 2px; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.pk-zespol-zmien { width: 32px; height: 32px; padding: 0; border-color: transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); }
.pk-zespol-zmien .icon { width: 14px; height: 14px; }
.pk-zespol { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.pk-zespol li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
/* Kółko 24 px z obwódką 2 px w kolorze tła (pole 28 px) — jak awatar wzoru. */
.pk-zespol .avatar { --avatar-d: 24px; margin: 2px; font-weight: var(--w-strong); }
.pk-zespol .pk-osoba { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pk-zespol b { font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; }
.pk-zespol small { color: var(--text-faint); font-size: var(--t-xs); }
.pk-pusto { margin: 0; color: var(--text-muted); font-size: var(--t-xs); }
/* Działania — WSZYSTKIE widoczne w jednym rzędzie. Wąska karta: przyciski-ikony równej szerokości (nazwa w dymku i aria-label,
   liczniki jako znaczki na rogu); szeroka karta („na cały ekran”, ponad 1100 px): ikona z napisem, dwie grupy z kreską. */
.pk-akcje { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.pk-akcje-1, .pk-akcje-2 { display: contents; }
.pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button { position: relative; display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--s-2); min-width: 0; height: var(--h-control); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; cursor: pointer; }
.pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button:hover { background: var(--surface-2); }
.pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button .icon { width: 18px; height: 18px; }
/* Nazwa przycisku-ikony: niewidoczna, ale czytana (z licznikiem — „Zadania 5”). */
.pk-akcja-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-licz { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 1; }
.pk-akcje .pk-licz { position: absolute; top: -6px; right: -4px; box-shadow: 0 0 0 2px var(--surface); }
/* ⋮ tej samej szerokości co pozostałe przyciski rzędu (ogólne .tile-menu ma flex: none — było 18 px). */
.pk-akcje > .pk-wiecej { flex: 1 1 0; min-width: 0; }
.pk-wiecej > .tile-menu-btn { width: 100%; height: var(--h-control); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); }
/* ============================================================================
   PK0c (b18, 04.10.2026): KARTA WĄSKA — obok listy, wysuwana, ekran telefonu — 1:1 karta ze strony Projekty wzoru (.kp-*).
   Nagłówek nad przewijaną treścią: numer + sterowanie oknem, nazwa, klient · norma, pod nimi pigułka etapu i stan.
   Treść: kafle działań (ikona 20 px w akcencie nad podpisem 12 px / 600, 6 w rzędzie; kontener „karta-kafle” do 460 px: 3 × 2),
   sekcje Cena (10d), Etapy, Zespół, na dole „Usuń projekt”. Kontener tylko na kaflach — menu „Dodaj etap” jest position: fixed.
   ============================================================================ */
/* Karta obok listy: między nagłówkiem a przewijaną treścią 16 px (wzór: .panp.bok). */
.pk-waska.pk-bok { gap: var(--s-4); }
.pk-naglowek { flex: none; padding: var(--s-2) var(--s-2) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.pk-naglowek > .pk-glowa-1 { gap: var(--s-2); }
.pk-waska .pk-tytul { margin: 0 var(--s-2) 0 0; line-height: 1.25; }
.pk-stany { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.pk-kafle-pole { container: karta-kafle / inline-size; border-bottom: 1px solid var(--line); }
.pk-kafle { display: grid; grid-template-columns: repeat(var(--pk-kafle, 6), minmax(0, 1fr)); gap: var(--s-1); padding: var(--s-2); }
:root[data-ui] .pk-kafle > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-width: 0; min-height: 60px; padding: var(--s-1) 2px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); cursor: pointer; }
.pk-kafle > button:hover { background: var(--surface-2); color: var(--text); }
.pk-kafle > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pk-kafle > button > .icon { width: 20px; height: 20px; color: var(--accent); }
.pk-kafle > button > span:not(.icon) { white-space: nowrap; }
.pk-kafle .pk-licz { position: absolute; top: var(--s-1); right: calc(50% - 22px); }
/* Tablet: `height`, nie `min-height` — ogólna reguła dotyku (03-kontrolki.css) ma wyższą wagę i jej 44 px wygrywało. */
:root[data-ui="tablet"] .pk-kafle > button { height: 60px; }
.pk-waska .pk-sekcja { padding: var(--s-3) var(--s-4); }
.pk-waska .pk-blok + .pk-blok { border-top-color: var(--line-soft); }
/* Zespół na dole karty: kółko 28 px z obwódką (pole 32 px), nazwisko 13 / 600, rola 12 px. */
.pk-zespol-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pk-zespol-lista li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.pk-zespol-lista .avatar { --avatar-d: 28px; margin: 2px; font-weight: var(--w-strong); }
.pk-zespol-lista .pk-osoba { display: flex; flex-direction: column; min-width: 0; }
.pk-zespol-lista b { overflow: hidden; font-size: var(--t-sm); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.pk-zespol-lista small { color: var(--text-faint); font-size: var(--t-xs); }
/* „Usuń projekt” — spokojny przycisk-link na samym dole karty. */
.pk-usun { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--danger); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.pk-usun:hover { background: var(--danger-soft); }
.pk-usun:disabled { opacity: .5; cursor: not-allowed; }
.pk-usun .icon { width: 16px; height: 16px; }
/* Etapy. */
.pk-sekcja { padding: var(--s-3) var(--s-4) var(--s-4); }
.pk-sekcja > h4 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--h-control); margin: 0 0 var(--s-2); color: var(--text); font-size: var(--t-base); font-weight: var(--w-heavy); }
:root[data-ui] .pk-sekcja > h4 .project-stage-trigger { gap: var(--s-1); height: var(--h-control); padding: 0 var(--s-3); font-size: var(--t-sm); font-weight: var(--w-strong); }
.pk-sekcja > h4 .project-stage-trigger:not(:disabled) { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); }
/* Szersza karta (wzór: tablet i komputer). */
@container karta-projektu (width <= 400px) {
  /* Telefon pionowo: do 7 przycisków po 44 px — mniejsze odstępy i rząd o 4 px szerszy z każdej strony. */
  .pk-akcje { gap: 3px; margin-inline: -4px; }
  .pk-akcje .pk-licz { right: -3px; }   /* „99+” nie wchodzi na sąsiedni przycisk */
}
@container karta-projektu (width > 640px) {
  .pk-tytul { font-size: var(--t-xl); }
  .pk-akcje { flex-wrap: wrap; }
  .pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button { flex: none; width: max(40px, var(--h-control)); }
  .pk-akcje > .pk-wiecej { flex: none; width: max(40px, var(--h-control)); }
}
@container karta-projektu (width > 700px) {
  .pk-glowa { flex-flow: row wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
  .pk-glowa-l { flex: 1 1 320px; }
  .pk-akcje { flex: 0 1 auto; justify-content: flex-end; }
}
@container karta-projektu (width > 1100px) {
  .pk-akcje-1 { display: flex; gap: var(--s-2); padding-right: var(--s-2); border-right: 1px solid var(--line); }
  .pk-akcje-2 { display: flex; gap: var(--s-2); }
  .pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button { width: auto; padding: 0 var(--s-4); }
  .pk-akcje :is(.pk-akcje-1, .pk-akcje-2) > button .icon { width: 16px; height: 16px; }
  .pk-akcja-n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  /* PK3 (b18): rząd działań w jednej linii z nazwą, z prawej (wzór: .sp-g > .sp-akc); gdy się nie mieści (węższe okno, długie
     napisy), schodzi w całości pod zespół. */
  .pk-akcje { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .pk-akcje > .pk-wiecej { width: var(--h-control); }
  .pk-akcje .pk-licz { position: static; box-shadow: none; }
  /* Lewa część nagłówka min. 340 px: przy 1440 px rząd działań schodzi pod zespół (jak wzór), a „Zespół” zostaje w jednej linii z osobami. */
  .pk-glowa-l { flex-basis: 340px; }
}
/* PK6: na cały ekran w węższym oknie i na tablecie (wzór do 1180 px): Koszty · Zadania · Czat z ikoną i napisem, pozostałe działania
   (Edytuj, Dla klienta, Prezentacja) w menu ⋮ nad „Usuń projekt”. */
.tile-menu-panel > .pk-menu-akcja { display: none; }
@container karta-projektu (width <= 1100px) {
  .pk-pelna .pk-akcje-2 { display: none; }
  .pk-pelna .pk-akcje-1 { display: flex; gap: var(--s-2); }
  .pk-pelna .pk-akcje .pk-akcje-1 > button { flex: none; width: auto; padding: 0 var(--s-4); }
  .pk-pelna .pk-akcje-1 > button > .icon { width: 16px; height: 16px; }
  .pk-pelna .pk-akcje-1 > button > .pk-akcja-n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .pk-pelna .pk-akcje .pk-licz { position: static; box-shadow: none; }
  .pk-pelna .tile-menu-panel > .pk-menu-akcja { display: block; }
}
/* Karta jako osobny ekran (telefon) i „na cały ekran” (komputer, tablet): „‹ Projekty” nad kartami, dwie karty na tle strony,
   przewija się cała treść. Na cały ekran: do 1240 px, na środku; oś etapów do 980 px (status przy nazwie etapu, jak we wzorze). */
.pk-pelna { overflow: visible; border: 0; background: transparent; }
.pk-pelna .pk-cialo { display: flex; flex-direction: column; gap: var(--s-3); overflow: visible; }
.pk-pelna { width: 100%; max-width: var(--strona-max, 1240px); margin: 0 auto; }
/* Szeroki ekran: boczny odstęp strony 32 px jak we wzorze (obszar treści ma 24 px). */
@media (min-width: 1181px) {
  .pk-pelna { width: calc(100% - var(--s-4)); }
}
.pk-pelna .pk-etapy .mprojekt-etapy { max-width: 980px; }
.pk-pelna .pk-blok { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pk-wstecz { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--s-1); height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--accent-strong); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.pk-wstecz .icon { width: 14px; height: 14px; }
/* ============================================================================
   P7: KARTA OBOK LISTY (komputer > 1180 px) — lista się zwęża (5 kolumn, 10b), karta 500 px; lista i karta przewijają
   się osobno, każda w swojej kolumnie (wysokość = obszar treści). Otwarty projekt podświetla wiersz (aria-selected).
   ============================================================================ */
.pl-uklad { min-width: 0; }
.pl-uklad.z-karta { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: var(--s-5); height: 100%; min-height: 0; }
.pl-uklad.z-karta > .project-main-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pl-uklad.z-karta .pl-naglowek { top: 0; }
.pk-bok { min-height: 0; border-radius: var(--r); box-shadow: var(--cien-1); }
/* ============================================================================
   P8: KARTA WYSUWANA (tablet, okno komputera ≤ 1180 px) — z prawej nad listą, przyciemnienie pod spodem (klik zamyka),
   przesunięcie palcem w prawo zamyka (zdarzenia/projekty-karta.js). Pod oknami programu (--z-okno), nad paskiem górnym.
   ============================================================================ */
.pk-zaslona { position: fixed; inset: 0; z-index: calc(var(--z-szuflada) - 2); background: color-mix(in srgb, var(--zaslona-kolor) 35%, transparent); }
.pk-wysuwana { position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-szuflada) - 1); width: min(560px, 88vw / var(--skala-ui)); border-width: 0 0 0 1px; border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--cien-2); outline: 0; transition: transform var(--szybko); }
.pk-wysuwana.pk-wjazd { animation: pk-wjazd .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes pk-wjazd { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .pk-wysuwana.pk-wjazd { animation: none; } }
.pk-wysuwana .pk-uchwyt { display: block; position: absolute; top: 50%; left: 6px; width: 5px; height: 56px; margin-top: -28px; border-radius: 3px; background: var(--line-strong); }
.content:has(> .pk-wysuwana) { overflow: hidden; }
/* Dotyk: cele 44 px w karcie. */
:root[data-ui="tablet"] .pk-karta :is(.pk-okno-rozmiar, .pk-zamknij, .tile-menu-btn) { width: var(--h-control); height: var(--h-control); }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pk-wiecej .tile-menu-panel > button { height: var(--h-control); }
/* Dotyk (tablet, telefon): „Dodaj etap”, pozycje jego menu, ⋮ etapu i ołówek zespołu — 44 px (height: ogólna reguła tabletu
   daje min-height 40 px, a telefon przyciskom-ikonom 40 px). */
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pk-karta .pk-cialo :is(.tile-menu-btn, .project-stage-trigger, .project-stage-menu-action, .pk-zespol-zmien) { height: 44px; }
:root:is([data-ui="tablet"], [data-ui="mobile"]) .pk-karta .pk-cialo :is(.tile-menu-btn, .pk-zespol-zmien) { width: 44px; }