/* S5 Jak to działa dziś v3 (30.09): trzy karty w rzędzie jak „Co dostajesz w systemie” na daplo.agency (glowna.css .pk), barwy Crew.
   Karta = scena na papierowym kaflu (okno ucięte dołem, pływający chip) + tytuł + zdanie. Sceny animuje s05.js (Web Animations, pętla, po kolei).
   Style opisują klatkę KOŃCOWĄ: to widać bez JS i przy prefers-reduced-motion. Elementy stanu początkowego (data-a="znika", "blysk") są wtedy ukryte.
   Tylko var(--cr-*), ruch wyłącznie transform/opacity. Poprzednia forma (trzy kroki z formularzem): strona/archiwum-s05-v2/. */

.s05-karty { display: grid; gap: 32px var(--cr-karty-odstep); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .s05-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .s05-karty { gap: 40px 24px; } }
/* trzy kolumny dopiero od 1280 px: węższa karta nie mieści plakietek „Technologia +” i „Budujemy…” obok siebie */
@media (min-width: 1280px) { .s05-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s05-karta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s05-karta h3 { margin-top: 10px; }
.s05-karta > p { font-size: 1.0625rem; line-height: 1.5; color: var(--cr-tekst-2); }
.s05-podpis { margin-top: 20px; }

/* ---------- scena: papierowy kafel, okno wychodzi poza dolną krawędź ---------- */
.s05-ekran { position: relative; height: 330px; padding: 20px 20px 0; overflow: hidden; display: flex; align-items: flex-start; background: var(--cr-papier); border-radius: var(--cr-r-m); }
.s05-okno { width: 100%; min-height: 100%; background: var(--cr-tlo); border: 1px solid var(--cr-szkielet); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--cr-cien); font-size: 13px; line-height: 1.3; color: var(--cr-tekst); }
.s05-okno__bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--cr-linia-2); font-family: var(--cr-f-nagl); font-size: 14px; font-weight: 600; color: var(--cr-marka); }
.s05-okno__znak { width: 20px; height: 20px; padding: 3px; border-radius: 5px; background: var(--cr-marka); flex: none; }
.s05-okno__tresc { display: grid; gap: 12px; padding: 14px 16px; }

/* wspólne klocki scen */
.s05-zm { display: grid; align-items: center; min-width: 0; }
.s05-zm > * { grid-area: 1 / 1; min-width: 0; }
.s05-zm--p { justify-items: end; }
.s05-zn { font-style: normal; padding: 0 3px; background: var(--cr-pole-tint); box-shadow: inset 0 -2px 0 var(--cr-pole-krawedz); }
.s05-kto { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
.s05-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cr-marka); color: var(--cr-biel); font-family: var(--cr-f-nagl); font-size: 14px; font-weight: 600; }
.s05-kto__t { display: grid; }
.s05-kto__t b { font-family: var(--cr-f-nagl); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--cr-marka); white-space: nowrap; }
.s05-kto__t span { color: var(--cr-tekst-2); }
.s05-plyw {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 8px;
  background: var(--cr-tlo); border-radius: 999px; box-shadow: 0 0 0 1px var(--cr-linia-2), var(--cr-cien);
  font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; color: var(--cr-marka); white-space: nowrap;
}

/* ---------- 1. kartoteka ---------- */
.s05-pola { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; align-items: center; }
.s05-pola__e { color: var(--cr-tekst-2); }
.s05-pola b { font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; color: var(--cr-marka); white-space: nowrap; }
.s05-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.s05-chip { padding: 3px 9px; border: 1px solid var(--cr-linia); border-radius: 999px; font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-marka); }
.s05-plyw--1 { right: 14px; bottom: 16px; }

/* ---------- 2. cały komplet w jednym pliku ---------- */
.s05-k2-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s05-druk { flex: none; height: 32px; }
.s05-pliki { align-items: start; }
.s05-dok { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s05-dok li { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-s); }
.s05-dok .i { width: 16px; height: 16px; flex: none; color: var(--cr-marka-jasna); }
.s05-dok b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s05-dok span { flex: none; font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-tekst-2); }
.s05-pdf { align-self: start; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cr-marka-tint); border: 1.5px solid var(--cr-marka); border-radius: var(--cr-r-s); }
.s05-pdf__ik { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--cr-marka); color: var(--cr-biel); }
.s05-pdf__ik .i { width: 22px; height: 22px; }
.s05-pdf__t { display: grid; min-width: 0; line-height: 1.3; }
.s05-pdf__t b { font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 700; color: var(--cr-marka); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s05-pdf__t span { font-size: 13px; color: var(--cr-tekst-2); }
/* wydruk: trzy kartki wysuwają się od dołu w prawym dolnym rogu */
.s05-wyd { position: absolute; z-index: 2; right: 16px; bottom: -26px; width: 84px; height: 90px; }
.s05-wyd__k {
  position: absolute; left: var(--x); top: var(--y); width: 64px; height: 82px; display: grid; align-content: start; gap: 5px; padding: 9px 7px;
  background: var(--cr-tlo); border: 1px solid var(--cr-linia); border-radius: 3px; box-shadow: var(--cr-cien);
}
.s05-wyd__k u { display: block; height: 4px; border-radius: 2px; background: var(--cr-szkielet); opacity: .6; text-decoration: none; }
.s05-wyd__k u:first-child { width: 60%; height: 5px; background: var(--cr-marka); opacity: 1; }
.s05-wyd__k u:last-child { width: 72%; }
.s05-plyw--2 { left: 14px; bottom: 16px; }

/* ---------- 3. na Waszych wzorach: kartka wzoru zamiast okna ---------- */
.s05-wz {
  width: 100%; min-height: 100%; display: grid; align-content: start; gap: 9px; padding: 16px 18px;
  background: var(--cr-tlo); border: 1px solid var(--cr-linia); border-bottom: 0; border-radius: 3px 3px 0 0; box-shadow: var(--cr-cien);
  font-size: 13px; line-height: 1.3; color: var(--cr-tekst);
}
.s05-wz__et { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--cr-papier-2); font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-tekst-2); }
.s05-wz__et .i { width: 15px; height: 15px; }
.s05-wz__t { margin-top: 2px; font-family: var(--cr-f-nagl); font-size: 17px; font-weight: 700; color: var(--cr-tekst); }
.s05-wz__l { display: block; width: var(--w, 100%); height: 5px; border-radius: 3px; background: var(--cr-szkielet); opacity: .5; text-decoration: none; }
.s05-wz__w { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 26px; }
.s05-wz__e { color: var(--cr-tekst-2); }
.s05-wz__w .s05-zm { justify-items: start; }
.s05-wz__pole { font-style: normal; padding: 1px 6px; border: 1px dashed var(--cr-obrys-ui); border-radius: 4px; background: var(--cr-papier); font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-tekst-2); white-space: nowrap; }
.s05-wz__w b { font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; color: var(--cr-marka); white-space: nowrap; }
.s05-plyw--3 { right: 14px; bottom: 16px; }

/* ---------- 4. kilka firm, jedna kartoteka ---------- */
.s05-opcje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -6px; }
.s05-op { position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--cr-linia); border-radius: var(--cr-r-s); font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; color: var(--cr-marka); }
.s05-op__ring { position: absolute; inset: -1px; border: 2px solid var(--cr-marka); border-radius: inherit; background: color-mix(in srgb, var(--cr-marka) 6%, transparent); }
.s05-opcje--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s05-opcje--3 .s05-op { justify-content: center; padding: 0 6px; white-space: nowrap; }
.s05-mini { display: grid; gap: 7px; margin-top: 2px; padding: 12px 14px; background: var(--cr-tlo); border: 1px solid var(--cr-linia); border-radius: 3px; box-shadow: var(--cr-cien); }
.s05-mini__t { font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 700; color: var(--cr-tekst); }
.s05-mini__w { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 22px; }
.s05-mini__w > span:first-child { color: var(--cr-tekst-2); }
.s05-mini__w .s05-zm { justify-items: start; }
.s05-mini__w b { font-family: var(--cr-f-nagl); font-size: 14px; font-weight: 600; color: var(--cr-marka); white-space: nowrap; }

/* ---------- karty 5 i 6 (rejestr B): etykieta w prawym górnym rogu sceny ---------- */
.s05-rej { position: absolute; z-index: 4; top: 8px; right: 10px; min-height: 26px; padding: 2px 10px 2px 8px; font-size: 13px; background: var(--cr-papier); }
/* niebieski obrys na zewnątrz kafla (wewnętrzny zasłaniało okno wychodzące dołem, rogi wyglądały na ucięte); tło jak w pozostałych kartach */
.s05-karta--b .s05-ekran { padding-top: 44px; outline: 2px solid var(--cr-marka-jasna); outline-offset: 3px; }
/* „Technologia +”: funkcje wspierane przez model językowy (bez słowa „AI”, plan §3.3), granat jak reszta marki (04.10: bez drugiego niebieskiego) */
.s05-tech { position: absolute; z-index: 4; top: 8px; left: 10px; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px 2px 7px; border-radius: 999px; background: var(--cr-marka); color: var(--cr-biel); font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; white-space: nowrap; }
.s05-tech .i { width: 15px; height: 15px; }
/* 5. nowy wzór z opisu */
.s05-opis { min-height: 38px; padding: 7px 10px; border: 1.5px solid var(--cr-marka-jasna); border-radius: var(--cr-r-s); font-size: 13px; line-height: 1.4; color: var(--cr-tekst); }
.s05-opis span { display: inline-block; }
.s05-projekt { display: grid; gap: 7px; padding: 9px 11px; background: var(--cr-papier); border: 1px solid var(--cr-linia); border-radius: 3px; }
.s05-projekt__t { font-family: var(--cr-f-nagl); font-size: 14px; font-weight: 700; color: var(--cr-tekst); }
.s05-projekt__pola { display: flex; flex-wrap: wrap; gap: 5px; }
.s05-projekt__pola i { font-style: normal; padding: 1px 5px; background: var(--cr-pole-tint); box-shadow: inset 0 -2px 0 var(--cr-pole-krawedz); font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-tekst); white-space: nowrap; }
.s05-akcja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.s05-akcja .mk__btn { height: 30px; }
.s05-zatw { font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-marka); }
/* 6. pytacie po polsku */
.s05-pyt { justify-self: end; max-width: 88%; padding: 7px 11px; border-radius: 12px 12px 2px 12px; background: var(--cr-marka); color: var(--cr-biel); font-size: 13px; line-height: 1.35; }
.s05-odp { justify-self: start; width: min(100%, 290px); display: grid; gap: 8px; padding: 9px 11px; border: 1px solid var(--cr-linia); border-radius: 12px 12px 12px 2px; background: var(--cr-tlo); box-shadow: var(--cr-cien); }
.s05-karta--b .s05-okno__tresc { gap: 10px; }
.s05-odp p { font-size: 13px; font-weight: 600; color: var(--cr-tekst); }
.s05-wykres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; height: 52px; }
.s05-sl { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 3px; height: 100%; }
.s05-sl i { display: block; width: 100%; max-width: 28px; height: var(--h); border-radius: 4px 4px 0 0; background: var(--cr-marka-jasna); }
.s05-sl--akt i { background: var(--cr-marka); }
.s05-sl b { font-family: var(--cr-f-nagl); font-size: 13px; font-weight: 600; color: var(--cr-tekst-2); white-space: nowrap; }
.s05-uwaga { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--cr-tekst-2); }
.s05-uwaga .i { width: 15px; height: 15px; flex: none; }

/* szerokie okna (treść do 1680 px, karta ponad 460 px): scena rośnie razem z kartą */
@media (min-width: 1680px) {
  .s05-ekran { height: 396px; padding: 24px 24px 0; }
  .s05-okno, .s05-wz, .s05-wyd, .s05-plyw { zoom: 1.25; }
}

/* klatka końcowa (bez JS, ograniczony ruch): stan początkowy scen jest niewidoczny */
.s05 [data-a="znika"], .s05 [data-a="okno"], .s05 [data-a="zjazd"], .s05 [data-a="blysk"] { opacity: 0; }

/* (04.10) na papierze: scena w odcieniu ciemniejszym od kafla */
.s05 .s05-ekran { background: var(--cr-papier-2); }