/*
  ARKANIP — baza wiedzy, dział 02 „Pliki”: ekran z dwoma przykładami (wiedza-pliki.js, opis tam).
  Poprawki właściciela 16.10.2026: bez nagłówka, dwa równe przykłady (rysunek A „Kula czyta” + jedno
  zdanie), pod nimi ta sama siatka dwóch kolumn: pytanie | „Tak, dorzucę” / „Nie mamy —
  dalej”. Widok „Tak” w tym samym kontenerze (1180 px, wyśrodkowany): nagłówek i „← Przykłady” w jednej
  linii, strefa, pole linku i lista wpisów na pełną szerokość, wiersze listy na wspólnych kolumnach.
  Ładuje TYLKO wiedza.html. Klasy `pk-`, klatki `pk-*`; widżet „pliki” silnika (styles.css) dostaje tu
  poprawki tylko w obrębie `.pk-strefa` — konfigurator bez zmian. Bez backdrop-filter, kolory z theme.css.
*/
.pytanie--pliki {
  max-width: 1180px;
}
/* Wejście ekranu silnika (`.pytanie > *` = wejscie z transform) zostawiałoby po sobie macierz, a ona
   robi z `.pk` blok zawierający dla `position: fixed` — pasek odpowiedzi na telefonie zjechałby z ekranu.
   Korzeń modułu wchodzi więc samym opacity. */
.pytanie--pliki > .pk {
  animation-name: pk-pojaw;
}
@keyframes pk-pojaw { from { opacity: 0; } to { opacity: 1; } }
/* Pasek akcji silnika: na widoku przykładów zostaje sam „Wstecz” (odpowiedzi są na ekranie). Klasę
   `pk-tak` na .pytanie ustawia moduł. */
.pytanie--pliki:not(.pk-tak) .pytanie__akcje .cta,
.pytanie--pliki:not(.pk-tak) .pytanie__enter {
  display: none;
}

/* dwa widoki w jednym korzeniu: przykłady albo (po „Tak, dorzucę”) widżet silnika */
.pk { position: relative; }
.pk--tak .pk-przyklady { display: none; }
.pk:not(.pk--tak) .pk-otwarte { display: none; }

/* ================================================================== PRZYKŁADY ==
   Wspólna siatka: dwie równe kolumny z tym samym odstępem — karty przykładów i rząd z pytaniem
   mają te same krawędzie. */
.pk-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.pk-zdanie {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink);
}
.pk-dwa { margin-top: 18px; }
.pk-przyklady > .pk-dwa:first-child { margin-top: 0; } /* bez nagłówka (16.10.2026) karty zaczynają ekran */
.pk-przyklad {
  position: relative; margin: 0; padding: 22px; border-radius: var(--r-lg);
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-lg);
  container-type: inline-size;
}
.pk-przyklad::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-blik); pointer-events: none; }

/* ================================================================== RYSUNEK „Kula czyta” ==
   Wybór właściciela 16.10.2026 (A z `_podglad-wiedza-pliki-7.html`). Scena 30 × 13,5 em; em z szerokości
   karty (11–16,5 px), więc rysunek ma dokładnie dawną wysokość (532 × 223 px przy 1440). Pozycje w em sceny
   ustawia wiedza-pliki.js; elementy z własnym font-size mają pozycje calc(X / font-size). Bazowe style =
   stan końcowy; ruch tylko pod `.pk-gra` (zdjęta po powrocie z widoku „Tak” — obraz stoi). */
.pk-il {
  --kula: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  --e: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spr: cubic-bezier(0.34, 1.45, 0.64, 1);
  position: relative; display: block; height: 13.5em; border-radius: 18px; overflow: hidden;
  font-size: clamp(11px, 3.1cqw, 16.5px);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 60%),
    color-mix(in srgb, var(--blue-tint) 48%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 6%, transparent);
}
.pk-sc { position: absolute; left: 50%; top: 50%; width: 30em; height: 13.5em; margin: -6.75em 0 0 -15em; }
.pk-sc > * { position: absolute; display: block; }

/* --- kadr filmu 6,2 × 11 em --- */
.pk-film {
  position: relative; display: block; width: 6.2em; height: 11em; border-radius: 0.85em; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-deep) 18%, transparent), 0 0.15em 0.35em color-mix(in srgb, var(--ink) 8%, transparent),
    0 1.3em 2.2em -1em color-mix(in srgb, var(--blue) 55%, transparent);
}
.pk-film::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* clip-path zamiast samego overflow — złożona warstwa w Chromium gubiła zaokrąglenie rogu */
.pk-film__kadr { position: absolute; inset: 0; display: block; width: 100%; height: 100%; clip-path: inset(0 round 0.85em); }
.pk-film .s-jasny { stop-color: color-mix(in srgb, var(--blue-sky) 50%, var(--surface)); }
.pk-film .s-sredni { stop-color: color-mix(in srgb, var(--blue-sky) 46%, var(--blue)); }
.pk-film .s-gleboki { stop-color: var(--blue); }
.pk-film .s-biel { stop-color: var(--surface); }
.pk-film .f-biel { fill: var(--surface); }
.pk-film .k-biel { stroke: var(--surface); }
.pk-film__czas {
  position: absolute; left: calc(0.24em / 0.44); top: calc(0.24em / 0.44); padding: 0.16em 0.42em; border-radius: 1em;
  font-size: 0.44em; font-weight: 700; letter-spacing: 0.02em; color: var(--surface);
  background: color-mix(in srgb, var(--blue-deep) 42%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.pk-film__play {
  position: absolute; left: 50%; top: 41%; width: 2.3em; height: 2.3em; margin: -1.15em 0 0 -1.15em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.5em 1.1em -0.35em color-mix(in srgb, var(--blue-deep) 70%, transparent), inset 0 -0.1em 0.2em color-mix(in srgb, var(--blue) 12%, transparent);
}
.pk-film__ik { position: absolute; inset: 0; display: grid; place-items: center; }
.pk-film__ik svg { width: 0.9em; height: 0.9em; fill: var(--blue); }
.pk-film__ik--play svg { margin-left: 0.12em; }
.pk-film__ik--pauza { opacity: 0; }
.pk-film__napisy i {
  position: absolute; height: 0.24em; border-radius: 1em;
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.35);
}
.pk-film__dol { position: absolute; left: 0.6em; right: 0.6em; bottom: 0.6em; display: flex; align-items: center; gap: 0.4em; }
.pk-film__glos { display: grid; place-items: center; width: 0.95em; height: 0.95em; color: var(--surface); opacity: 0.92; }
.pk-film__glos svg { width: 100%; height: 100%; }
.pk-film__pasek { position: relative; flex: 1; height: 0.17em; border-radius: 1em; background: rgba(255, 255, 255, 0.32); }
.pk-film__pasek i { position: absolute; left: 0; top: 0; bottom: 0; width: 26%; border-radius: inherit; background: var(--surface); }
.pk-film__pasek i::after {
  content: ""; position: absolute; right: -0.2em; top: 50%; width: 0.4em; height: 0.4em; margin-top: -0.2em; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.3);
}

/* --- arkusz opisu 7,8 × 10,9 em (zagięty róg = clip-path + trójkąt) --- */
.pk-mat--ark {
  filter: drop-shadow(0 0.12em 0.2em color-mix(in srgb, var(--ink) 7%, transparent)) drop-shadow(0 1.1em 1.3em color-mix(in srgb, var(--blue) 22%, transparent));
}
.pk-ark {
  position: relative; display: block; width: 7.8em; height: 10.9em; border-radius: 0.4em; background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 1.15em) 0, 100% 1.15em, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--blue-line);
}
.pk-ark > * { position: absolute; }
.pk-ark::after {
  content: ""; position: absolute; right: 0; top: 0; width: 1.15em; height: 1.15em; border-bottom-left-radius: 0.25em;
  background: linear-gradient(225deg, transparent 50%, var(--blue-tint-2) 50%, color-mix(in srgb, var(--blue-tint) 60%, var(--surface)) 100%);
  box-shadow: -0.06em 0.08em 0.14em color-mix(in srgb, var(--blue) 18%, transparent);
}
.pk-ark__nad { left: calc(0.8em / 0.36); top: calc(0.8em / 0.36); font-size: 0.36em; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.pk-ark__typ {
  right: calc(1.45em / 0.32); top: calc(0.74em / 0.32); padding: 0.14em 0.38em; border-radius: 0.3em;
  font-size: 0.32em; font-weight: 800; letter-spacing: 0.06em; color: var(--surface); background: var(--blue);
}
.pk-ark__tyt { left: calc(0.78em / 0.6); top: calc(1.36em / 0.6); font-size: 0.6em; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; }
.pk-ark__meta { left: calc(0.8em / 0.36); top: calc(2.9em / 0.36); font-size: 0.36em; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.pk-ark__kreska { left: 0.8em; right: 0.8em; top: 3.58em; height: 1px; background: var(--blue-line); }
.pk-ark__et { left: 0.8em; right: 0.7em; height: 1.4em; }
.pk-ark__et b {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.95em; height: 1.95em; border-radius: 50%;
  font-size: 0.4em; font-weight: 800; line-height: 1; color: var(--blue); background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}
.pk-ark__naz { position: absolute; left: calc(1.05em / 0.44); top: calc(0.12em / 0.44); font-size: 0.44em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.pk-ark__et i { position: absolute; left: 1.05em; height: 0.15em; border-radius: 1em; background: var(--blue-tint-2); }
.pk-ark__stopka {
  left: calc(0.8em / 0.32); right: calc(0.8em / 0.32); bottom: calc(0.6em / 0.32);
  display: flex; align-items: center; justify-content: space-between; font-size: 0.32em; font-weight: 600; color: var(--ink-muted);
}
.pk-ark__stopka i { display: block; width: 40%; height: 0.4em; border-radius: 1em; background: var(--blue-tint); }

/* --- tor, lecące linie, kula, kreska --- */
.pk-tor { height: 1px; margin-top: -0.5px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 38%, transparent) 0 0.22em, transparent 0.22em 0.5em); }
.pk-lot { height: 0.2em; opacity: 0; pointer-events: none; }
.pk-lot i {
  position: absolute; inset: 0; border-radius: 1em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue-sky) 10%, transparent), var(--blue-sky) 45%, var(--blue));
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--blue-sky) 55%, transparent);
}
.pk-kula > i { position: absolute; display: block; border-radius: 50%; }
.pk-kula__halo {
  inset: -75%; opacity: 0.7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-sky) 30%, transparent), color-mix(in srgb, var(--blue) 7%, transparent) 55%, transparent);
}
.pk-kula__cien { left: 12%; right: 12%; top: 118%; height: 22%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 26%, transparent), transparent); }
.pk-kula__b {
  inset: 0; background: var(--kula);
  box-shadow: inset -0.2em -0.28em 0.55em color-mix(in srgb, var(--blue-deep) 45%, transparent), 0 0.45em 0.9em -0.3em color-mix(in srgb, var(--blue) 80%, transparent),
    0 0 0.7em color-mix(in srgb, var(--blue-sky) 38%, transparent);
}
.pk-kula__rdzen {
  inset: 0; opacity: 0.14;
  background: radial-gradient(circle at 46% 46%, rgba(255, 255, 255, 0.95) 0%, color-mix(in srgb, var(--blue-sky) 55%, var(--surface)) 24%, transparent 64%);
}
.pk-kula__blik { left: 22%; top: 13%; width: 34%; height: 24%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0)); }
.pk-kula__fala { inset: 0; border: 1.5px solid var(--blue-sky); opacity: 0; }
.pk-kreska { height: 1px; margin-top: -0.5px; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 40%, transparent)); }
.pk-kreska::before {
  content: ""; position: absolute; left: -0.12em; top: -0.16em; width: 0.33em; height: 0.33em; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 0.14em var(--surface);
}

/* --- karta wypowiedzi (jak nad makietą) --- */
.pk-wyp { transform: translateY(-50%); }
.pk-kw {
  position: relative; display: block; padding: 0.78em 0.95em 0.72em; border-radius: 0.95em;
  background: rgba(255, 255, 255, 0.97); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg), 0 0.8em 1.6em -1.2em color-mix(in srgb, var(--blue) 40%, transparent);
}
.pk-kw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-blik); pointer-events: none; }
.pk-kw__kto {
  position: relative; display: flex; align-items: center; gap: 0.45em;
  font-size: max(10px, 0.6em); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.pk-kw__kto i { width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--kula); box-shadow: 0 0 0 0.22em var(--blue-tint); }
.pk-kw__tekst {
  position: relative; display: block; margin-top: 0.5em;
  font-size: max(11.5px, 0.84em); font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty;
}
.pk-kw__zr {
  position: relative; display: flex; align-items: center; gap: 0.45em; margin-top: 0.62em; padding-top: 0.55em; border-top: 1px solid var(--blue-line);
  font-size: max(10px, 0.66em); font-weight: 700; color: var(--blue);
}
.pk-kw__zr svg { flex: none; width: 1.2em; height: 1.2em; }
.pk-sl { display: inline-block; white-space: nowrap; }
.pk-zn { position: relative; }
.pk-zn::after {
  content: ""; position: absolute; right: -0.06em; top: 0.12em; bottom: 0.06em; width: 1.5px; border-radius: 1px;
  background: var(--blue); opacity: 0;
}

.pk-podpis {
  max-width: 25em; margin: 18px auto 0; text-align: center; text-wrap: balance;
  font-size: 15px; line-height: 1.45; color: var(--ink-soft);
}
.pk-podpis b { font-weight: 700; color: var(--ink); }

/* RUCH (tylko `.pk-gra`, gra raz) ------------------------------------------------------------------
   materiał odsłania się od dołu (clip-path) i dosiada → napisy / wiersze etapów rozjaśniają się → kopie
   linii odrywają się i łukiem (X na elemencie, Y na dziecku — różne krzywe) wpływają w kulę → kula
   rozjaśnia się od środka, pierścień → kreska → karta → pisanie z kursorem → źródło → dwa oddechy kuli.
   Elementy, które w stanie końcowym znikają, mają w pierwszej klatce opacity 0 (`backwards` trzyma ją
   w czasie opóźnienia). */
.pk-gra .pk-mat { animation: pk-odsl 0.9s var(--e) var(--t) backwards; }
@keyframes pk-odsl {
  from { clip-path: inset(calc(100% + 2.5em) -2em -2em -2em round 0.9em); transform: translateY(0.9em); }
  to { clip-path: inset(-2em -2em -2em -2em round 0.9em); transform: none; }
}
.pk-gra .pk-film__pasek i { animation: pk-pasek 1.6s cubic-bezier(0.4, 0, 0.6, 1) calc(var(--t) + 0.45s) backwards; }
@keyframes pk-pasek { from { width: 4%; } }
.pk-gra .pk-film__ik--play { animation: pk-ik-play 1.7s calc(var(--t) + 0.4s) backwards; }
.pk-gra .pk-film__ik--pauza { animation: pk-ik-pauza 1.7s calc(var(--t) + 0.4s) backwards; }
@keyframes pk-ik-play { 0%, 8% { opacity: 1; transform: none; } 14%, 86% { opacity: 0; transform: scale(0.6); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes pk-ik-pauza { 0%, 8% { opacity: 0; transform: scale(0.6); } 14%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(0.6); } }
.pk-gra .pk-film__napisy i { animation: pk-napis 0.5s var(--e) calc(var(--t) + 0.45s) backwards; }
.pk-gra .pk-film__napisy i:nth-child(2) { animation-delay: calc(var(--t) + 0.52s); }
@keyframes pk-napis { from { clip-path: inset(0 100% 0 0 round 1em); } to { clip-path: inset(0 0 0 0 round 1em); } }
.pk-gra .pk-ark__et i { animation: pk-wiersz 1.1s ease-out calc(var(--t) + 0.5s) backwards; }
@keyframes pk-wiersz { 0% { background: var(--blue-tint-2); } 30% { background: color-mix(in srgb, var(--blue-sky) 55%, var(--blue-tint-2)); } 100% { background: var(--blue-tint-2); } }
.pk-gra .pk-tor { animation: pk-tor 0.6s var(--e) calc(var(--t) + 0.35s) backwards; }
@keyframes pk-tor { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.pk-gra .pk-lot { animation: pk-lot-x 0.68s cubic-bezier(0.55, 0.05, 0.45, 1) var(--d) backwards; }
.pk-gra .pk-lot i { animation: pk-lot-y 0.68s cubic-bezier(0.2, 0.75, 0.35, 1) var(--d) backwards; }
@keyframes pk-lot-x { 0% { opacity: 0; transform: none; } 8% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--dx)); } }
@keyframes pk-lot-y { 0% { transform: none; } 100% { transform: translateY(var(--dy)) scaleX(0.06) scaleY(0.7); } }
.pk-gra .pk-kula { animation: pk-kula-wj 0.7s var(--e) var(--t) backwards; }
@keyframes pk-kula-wj { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.pk-gra .pk-kula__rdzen { animation: pk-rdzen 1.5s cubic-bezier(0.3, 0, 0.3, 1) calc(var(--tk) - 0.55s) backwards; }
@keyframes pk-rdzen { 0% { opacity: 0.14; transform: scale(0.4); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: 0.14; transform: scale(1); } }
.pk-gra .pk-kula__halo { animation: pk-halo 1.6s ease-out calc(var(--tk) - 0.5s) backwards, pk-oddech-h 2s ease-in-out calc(var(--tk) + 2s) 2; }
@keyframes pk-halo { 0% { opacity: 0.35; transform: scale(0.7); } 40% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0.7; transform: none; } }
@keyframes pk-oddech-h { 0%, 100% { opacity: 0.7; transform: none; } 50% { opacity: 0.95; transform: scale(1.07); } }
.pk-gra .pk-kula__b { animation: pk-lyk 0.5s var(--spr) calc(var(--tk) - 0.25s) backwards, pk-oddech 2s ease-in-out calc(var(--tk) + 2s) 2; }
@keyframes pk-lyk { 0% { transform: scale(1); } 40% { transform: scale(0.93); } 100% { transform: scale(1); } }
@keyframes pk-oddech { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
.pk-gra .pk-kula__fala { animation: pk-fala 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) calc(var(--tk) - 0.05s) backwards; }
@keyframes pk-fala { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 0.85; } 100% { opacity: 0; transform: scale(2.1); } }
.pk-gra .pk-kreska { transform-origin: 0 50%; animation: pk-kreska 0.42s cubic-bezier(0.3, 0, 0.2, 1) var(--d) backwards; }
@keyframes pk-kreska { from { transform: scaleX(0); } to { transform: none; } }
.pk-gra .pk-kw { transform-origin: 0 50%; animation: pk-kw 0.6s var(--e) var(--d) backwards; }
@keyframes pk-kw {
  from { opacity: 0; transform: translateX(-0.45em) scale(0.96); clip-path: inset(0 70% 0 0 round 0.95em); }
  to { opacity: 1; transform: none; clip-path: inset(-1em -1em -1em -1em round 0.95em); }
}
.pk-gra .pk-kw__zr { animation: pk-zr 0.5s var(--e) var(--d) backwards; }
@keyframes pk-zr { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }
/* pisanie: znak po znaku (krok --kr), kursor przy bieżącym znaku, przy ostatnim mruga dwa razy i gaśnie */
.pk-gra .pk-zn { animation: pk-zn 1ms step-end calc(var(--t0) + var(--i) * var(--kr)) backwards; }
.pk-gra .pk-zn::after { animation: pk-kur var(--kr) step-end calc(var(--t0) + var(--i) * var(--kr)); }
.pk-gra .pk-sl:last-child .pk-zn:last-child::after { animation: pk-kur-ost 1.4s step-end calc(var(--t0) + var(--i) * var(--kr)); }
@keyframes pk-zn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-kur { from { opacity: 1; } to { opacity: 1; } }
@keyframes pk-kur-ost { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }

/* pytanie pod przykładami: nagłówek w lewej kolumnie, dwie odpowiedzi w prawej */
.pk-dol { align-items: center; row-gap: 18px; margin-top: 36px; }
.pk-pyt { margin: 0; font-size: clamp(30px, 3.3vw, 46px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; color: var(--ink); text-wrap: balance; }
.pk-lead { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-muted); text-wrap: balance; }
.pk-odp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pk-odp__b {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--blue-line); box-shadow: var(--glass-shadow);
  transition: border-color 0.2s;
}
.pk-odp__b:hover { border-color: var(--blue); }
.pk-odp__ik { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.pk-odp__b--tak .pk-odp__ik { background: var(--blue); color: var(--surface); }
.pk-odp__ik svg { width: 20px; height: 20px; }
.pk-odp__b b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pk-odp__b small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-muted); }

/* ================================================================== WIDOK „TAK” ==
   Ten sam kontener co przykłady; wszystko na pełną szerokość, jedna lewa i jedna prawa krawędź. */
.pk-otwarte__glowa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pk-wroc {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid var(--blue-line); background: var(--surface); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.pk-wroc:hover { border-color: var(--blue); color: var(--blue); }
.pk-wroc svg { width: 15px; height: 15px; }
.pk-strefa { margin-top: 26px; }
.pytanie--pliki.pk-tak { padding-bottom: 96px; } /* ostatni wiersz listy da się wysunąć spod paska akcji */

/* widżet „pliki” silnika — tylko w tym ekranie */
.pk-strefa .pliki { gap: 12px; }
.pk-strefa .pliki__strefa {
  flex-direction: column; justify-content: center; gap: 12px; min-height: 260px; padding: 28px 24px;
  text-align: center; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--blue-tint) 35%, var(--surface));
}
/* z wpisami strefa niższa — lista ma się zmieścić nad paskiem akcji */
.pk-strefa .pliki:has(.pliki__plik) .pliki__strefa { min-height: 168px; padding: 20px 24px; }
.pk-strefa .pliki__strefa .pliki__ikona { width: 56px; height: 56px; border-radius: 50%; }
.pk-strefa .pliki__tekst { font-size: 16.5px; }
.pk-strefa .pliki__tekst small { margin-top: 4px; font-size: 13px; }
.pk-strefa .pliki__link { padding: 7px 7px 7px 12px; }
.pk-strefa .pliki__link-etykieta { margin-top: -2px; padding-left: 0; text-align: center; line-height: 1.45; text-wrap: balance; }
/* lista: wiersz na wpis, wspólne kolumny (znaczek · nazwa · rozmiar · dopisek · ×) */
.pk-strefa .pliki__lista--dopiski { display: grid; gap: 8px; margin-top: 6px; }
.pk-strefa .pliki__lista--dopiski .pliki__plik {
  display: grid; grid-template-columns: 52px minmax(0, 1.25fr) 150px minmax(0, 1fr) 30px; align-items: center; column-gap: 12px;
  padding: 7px 7px 7px 12px; border-radius: 14px;
}
.pk-strefa .pliki__lista--dopiski .pliki__typ { justify-self: start; }
.pk-strefa .pliki__lista--dopiski .pliki__plik small { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pliki__dopisek {
  min-width: 0; height: 34px; padding: 0 10px;
  border: 0; border-radius: 9px; outline: 0; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
}
.pliki__dopisek:hover { background: color-mix(in srgb, var(--blue-tint) 60%, var(--surface)); }
.pliki__dopisek:focus { background: var(--blue-tint); }
.pliki__dopisek::placeholder { color: var(--ink-muted); }

/* ================================================================== WĘŻEJ ==== */
@media (max-width: 1100px) {
  .pk-dol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .pk-dwa { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}
@media (max-width: 640px) {
  .pytanie--pliki { padding-bottom: 90px; }
  .pytanie--pliki:not(.pk-tak) .pytanie__akcje { display: none; }
  .pk-zdanie { font-size: 19px; }
  .pk-dwa { margin-top: 14px; row-gap: 12px; }
  .pk-przyklad { padding: 12px; }
  .pk-il { border-radius: 14px; }
  .pk-podpis { margin-top: 12px; font-size: 14px; }
  .pk-pyt { font-size: 29px; }
  .pk-lead { font-size: 15.5px; }
  .pk-dol { margin-top: 24px; }
  /* telefon: odpowiedzi = pasek na dole obok znacznika silnika (lewy dolny róg, sam numer) */
  .pk-odp {
    position: fixed; left: 92px; right: 14px; bottom: 14px; z-index: 31;
    gap: 5px; padding: 5px; border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 96%, transparent); border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ink) 25%, transparent);
  }
  .pk-odp__b { justify-content: center; gap: 0; padding: 12px 6px; border-radius: 14px; box-shadow: none; text-align: center; }
  .pk-odp__ik, .pk-odp__b small { display: none; }
  .pk-odp__b b { font-size: 14px; white-space: nowrap; }
  .pk-odp__b--nie { order: 2; background: var(--blue); border-color: var(--blue); color: var(--surface); }
  /* widok „Tak” */
  .pk-pyt--otw { font-size: 27px; }
  .pk-wroc { padding: 7px 11px 7px 9px; font-size: 13px; }
  .pk-strefa { margin-top: 18px; }
  .pk-strefa .pliki__strefa,
  .pk-strefa .pliki:has(.pliki__plik) .pliki__strefa { min-height: 0; padding: 20px 14px; }
  .pk-strefa .pliki__tekst { font-size: 15px; }
  .pk-strefa .pliki__tekst small { font-size: 12px; }
  .pk-strefa .pliki__lista--dopiski .pliki__plik { grid-template-columns: auto minmax(0, 1fr) auto 28px; column-gap: 8px; row-gap: 2px; padding: 6px 6px 6px 8px; }
  .pk-strefa .pliki__lista--dopiski .pliki__dopisek { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-gra *, .pk-gra *::before, .pk-gra *::after, .pk-strefa .pliki__plik { animation: none !important; }
}