/* Wersja robocza (new2.proop.pl): pas Transformacji IT na stronie głównej, wariant 31 z labu new2-pas-jeden (Adrian 2026-10-12: „ok bierzemy ten 31”).
   Plik generuje trash/lab-new2/build_pas_jeden.py (export_site) z pj-lab.css (karta), pk-lab.css i pkn-lab.css – nie edytować ręcznie. */
:root {
  --pj-card-dot: color-mix(in srgb, var(--on-dark) 7%, transparent);
}
.pj-card { position: relative; padding: clamp(12px, 2vw, 26px); border-radius: clamp(18px, 2vw, 26px); color: var(--on-dark);
  background: radial-gradient(var(--pj-card-dot) 1px, transparent 1px) 0 0 / 24px 24px, var(--navy-900); }
@media (prefers-reduced-motion: no-preference) { @keyframes pj-out { to { opacity: 0; } } }

/* Lab „Pas Transformacji IT: jeden element z prawej” (trash/lab-new2/build_pas_jeden.py), warianty 22–25: kierunek
   01 + 15 (Adrian 29.09, ok. 16:00). Nie trafia na stronę. Rama sekcji (tytuł nad całością, ciemna karta, lista opisów
   bez skryptu) z pj-lab.css, prawa strona jak 15 z pn-lab.css (oś z kropką, pierścieniem i kwadratem z ikoną).
   Z lewej schemat 01 bez zmian wyglądu: te same reguły co w pd-lab.css (kolory 06, podpisy JetBrains Mono, stopnie
   podpisów), tylko wybór pojedynczego elementu: wybrany świeci błękitem jak Backup w 01, reszta przygasa jak w 01.
   Kolory wyłącznie tokenami; nowe odcienie jako tokeny w :root, z tokenów strony. */

:root {
  /* schemat: jak 01 (pd-lab.css) */
  --pk-wire: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pk-idle: color-mix(in srgb, var(--on-dark) 40%, transparent);
  --pk-node-fill: color-mix(in srgb, var(--cyan) 6%, var(--navy-900));
  --pk-lit-fill: color-mix(in srgb, var(--cyan) 17%, var(--navy-900));
  --pk-glow: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pk-hover-fill: color-mix(in srgb, var(--cyan) 9%, transparent);
  --pk-c-c: var(--cyan);
  --pk-c-b: var(--mx-cyan-70-blue);
  --pk-c-o: var(--orange);
  /* pigułki usług (25): barwy usług jak w 01 */
  --pk-s-poczta: var(--orange-2);
  --pk-s-vpn: var(--on-dark);
  --pk-s-backup: var(--cyan);
  --pk-s-mfa: var(--orange);
  --pk-s-biuro: var(--mx-blue-50-white);
  --pk-sd-ring: var(--mx-navy-26-t);
  /* oś w kolorze świecenia (23–25) */
  --pk-axis-lit: var(--mx-cyan-70-blue);
  --pk-dot-halo: color-mix(in srgb, var(--cyan) 24%, transparent);
  --pk-plate-line: color-mix(in srgb, var(--cyan) 55%, var(--navy-900));
  --pk-plate-glow: color-mix(in srgb, var(--cyan) 42%, transparent);
}

/* ---------- Schemat 01 (netmap.json, viewBox 720 × 548) ---------- */
.pk-card { padding: clamp(14px, 2vw, 26px); }
.pk-art { position: relative; }
.pk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-w { fill: none; stroke: var(--pk-wire); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk[data-sel] .pk-w { stroke: var(--pk-idle); }
.pk[data-sel] .pk-w.is-lit { stroke: var(--cyan); stroke-width: 3.5; }
.pk-node { --pk-acc: var(--pk-c-c); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pk-node--b { --pk-acc: var(--pk-c-b); }
.pk-node--o { --pk-acc: var(--pk-c-o); }
.pk-body :is(rect, circle, path) { fill: var(--pk-node-fill); stroke: var(--pk-acc); stroke-opacity: .7; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pk-body path[fill="none"] { fill: none; }
.pk-body circle[r="2"] { fill: var(--pk-acc); stroke: none; }
.pk-body text { fill: var(--on-dark); stroke: none; font: 500 17px/1 var(--mono); letter-spacing: .02em; }
/* stopnie jak w 01: w jednostkach viewBox dobrane do szerokości schematu, co najmniej ok. 11,5 px na ekranie */
@media (min-width: 900px) and (max-width: 1279px) { .pk-body text { font-size: 21px; } }
@media (min-width: 900px) and (max-width: 1099px) { .pk-body text { font-size: 23px; } }
@media (max-width: 899px) { .pk-body text { font-size: 19px; } }
@media (max-width: 639px) { .pk-body text { font-size: calc(38px - 2.8vw); } }
/* 24, 25: podpisy o stopień większe (Adrian wcześniej: napisy na schemacie „troszeczkę bardziej czytelne”) */
@media (min-width: 1280px) { .pk--tuned .pk-body text { font-size: 18.5px; } }
@media (min-width: 900px) and (max-width: 1279px) { .pk--tuned .pk-body text { font-size: 22px; } }
@media (min-width: 900px) and (max-width: 1099px) { .pk--tuned .pk-body text { font-size: 24px; } }
@media (min-width: 640px) and (max-width: 899px) { .pk--tuned .pk-body text { font-size: 20px; } }

/* najechanie i fokus: błękitna obwódka jak w 01 (prostokąt dopasowany w pk-lab.js) */
.pk-foc { fill: none; stroke: none; pointer-events: all; }
.pk-node:is(:hover, :focus-visible) .pk-foc { fill: var(--pk-hover-fill); stroke: var(--cyan); stroke-width: 2; }
.pk-node.is-sel:is(:hover, :focus-visible) .pk-foc { fill: none; }
.pk-node.is-peek .pk-foc { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 5; }
/* wybrany świeci błękitem (jak Backup w 01), pozostałe przygasają jak w 01: obrys biel 40 %, podpis --on-dark-2 */
.pk-node.is-sel { --pk-acc: var(--cyan); }
.pk-node.is-sel .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pk-node.is-sel .pk-body :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pk-node.is-sel .pk-body { filter: drop-shadow(0 0 7px var(--pk-glow)); }
.pk[data-sel] .pk-node:not(.is-sel) { --pk-acc: var(--pk-idle); }
.pk[data-sel] .pk-node:not(.is-sel) .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pk[data-sel] .pk-node:not(.is-sel) text { fill: var(--on-dark-2); }

/* impuls: kropka nad schematem, tylko transform i opacity (Web Animations w pk-lab.js) */
.pk-dots { position: absolute; inset: 0; pointer-events: none; }
.pk-dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--pk-glow); opacity: 0; }

/* ---------- 25: pigułki grup usług pod schematem, jak w 01 (bez wyboru; wypełniona grupa wybranego elementu) ---------- */
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-dark-2);
  border-radius: 999px; box-sizing: border-box; color: var(--on-dark-2); font: 600 13.5px/1.2 var(--text); cursor: default; }
.pk-chip:hover { border-color: var(--on-dark-2); color: var(--on-dark); }
.pk-chip.is-with { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy-900); }
.pk-sd { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pk-sc); box-shadow: 0 0 0 1px var(--pk-sd-ring); }
.pk-sd--poczta { --pk-sc: var(--pk-s-poczta); }
.pk-sd--vpn { --pk-sc: var(--pk-s-vpn); }
.pk-sd--backup { --pk-sc: var(--pk-s-backup); }
.pk-sd--mfa { --pk-sc: var(--pk-s-mfa); }
.pk-sd--biuro { --pk-sc: var(--pk-s-biuro); }

/* ---------- 23–25: oś w kolorze świecenia wybranego węzła ---------- */
.pk--link .pj-dot0 { background: var(--cyan); box-shadow: 0 0 0 1.5px var(--pk-axis-lit), 0 0 0 6px var(--pk-dot-halo); }
.pk--link .pj-ring0 { border-color: var(--pk-axis-lit); }
.pk--link.pn--s-axis .pn-panel::before { background: linear-gradient(var(--pk-axis-lit), var(--pn-line)); }
.pk--link .pj-plate { color: var(--cyan); box-shadow: 0 0 0 1px var(--pk-plate-line), 0 0 14px var(--pk-plate-glow); }
.pk--link .pj-plate .pj-pi :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }

/* ---------- 24, 25: proporcje, rytm, opis od góry schematu, telefon ---------- */
.pk--tuned .pn-side { --pn-why-fs: clamp(26px, 1.1rem + 1.7vw, 44px); --pn-gw: 36px; }
.pk--tuned .pn-why { line-height: 1.08; letter-spacing: -.026em; }
.pk--tuned .pn-r--why > .pn-sym { height: max(36px, var(--pn-why-fs) * 1.08); }
.pk--tuned.pn--s-axis .pn-panel::before { top: calc(max(36px, var(--pn-why-fs) * 1.08) / 2); }
.pk--tuned .pj-r + .pj-r { margin-top: 12px; }
.pk--tuned .pj-r.pn-r--co { margin-top: 30px; }
@media (min-width: 900px) {
  .pk--tuned .pj-side { align-self: start; padding-top: clamp(14px, 2vw, 26px); }
}
@media (max-width: 899px) {
  .pk--tuned .pj-grid { row-gap: 18px; }
  .pk--tuned .pk-card { padding: 12px 10px; }
  .pk--tuned .pn-side { --pn-why-fs: clamp(24px, 4px + 5.6vw, 30px); --pn-gw: 28px; }
  .pk--tuned .pn-r { column-gap: 12px; }
  .pk--tuned .pj-r.pn-r--co { margin-top: 22px; }
}

/* ---------- Ruch: tylko bez prośby o ograniczenie ruchu. Zmiana opisu 0,15 s (przenikanie z lekkim uniesieniem),
   podświetlenie od razu, bez przejść kolorów; impuls raz po wyborze (pk-lab.js). ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pk[data-swap="lift"] .pj-panel.is-in { animation: pk-lift .15s var(--ease); }
  .pk[data-swap="lift"] .pj-panel.is-out { animation: pj-out .09s linear forwards; }
  @keyframes pk-lift { from { opacity: 0; transform: translateY(6px); } }
}

/* Lab „Pas Transformacji IT”, wariant 26: schemat 01 z grupami (jak 25) i opis w układzie sekcji Kanały z new2
   (sandbox-kanaly.css: kn-head, kn-side, kn-stack, kn-links, kn-bridge). Tu tylko nagłówek, ikona w plakietce i łuk.
   Barwy przez var() z tokenów strony (site.css) i Kanałów. */
.pkn { position: relative; }
.pkn-grid { position: relative; }
.pkn .kn-media { max-width: 680px; }
.pkn-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); }
.pkn-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--orange); }
.pkn-claim { margin: 0; font: 700 clamp(28px, 1rem + 2.2vw, 44px)/1.1 var(--display); letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.pkn-lead { margin: 14px 0 0; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--muted); }
.pkn .kn-head { margin-bottom: 26px; }
.pkn-i { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.4; }
.pkn-i * { vector-effect: non-scaling-stroke; }
.pkn .kn-plate--ico { width: 34px; height: 34px; }
/* łuk od karty do kropki: tylko na komputerze (obok siebie); na telefonie opis stoi pod kartą */
.pkn-bridge { display: none; }
@media (min-width: 900px) { .pkn-bridge { display: block; } }
.pkn-bridge .kn-br { transition: d .2s ease; }
@media (prefers-reduced-motion: reduce) { .pkn-bridge .kn-br { transition: none; } }

/* ---------- 27–34: kolory grup z 01 (Adrian 12.10: „boksy kolorowe… color-coded… z prawej delikatnie zaadresowane”) ----------
   --gc barwa grupy na granacie (jak w 01), --gl ten sam kolor na jasnym tle (ciemniejszy; Router i VPN: granat zamiast
   bieli), --gb i --gb2 wypełnienie ramki, --gg poświata. Grupa: data-grp sekcji (schemat, łuk), data-g elementów karty
   (32–34), klasa pkn-g--… opisu (z prawej). */
:root {
  --pkn-poczta-l: color-mix(in srgb, var(--orange-2) 62%, var(--orange));
  --pkn-backup-l: var(--mx-cyan-70-blue);
  --pkn-biuro-l: var(--blue);
  --pkn-poczta-b: color-mix(in srgb, var(--orange-2) 9%, transparent);
  --pkn-vpn-b: color-mix(in srgb, var(--on-dark) 7%, transparent);
  --pkn-backup-b: color-mix(in srgb, var(--cyan) 9%, transparent);
  --pkn-mfa-b: color-mix(in srgb, var(--orange) 10%, transparent);
  --pkn-biuro-b: color-mix(in srgb, var(--mx-blue-50-white) 10%, transparent);
  --pkn-poczta-b2: color-mix(in srgb, var(--orange-2) 18%, transparent);
  --pkn-vpn-b2: color-mix(in srgb, var(--on-dark) 15%, transparent);
  --pkn-backup-b2: color-mix(in srgb, var(--cyan) 18%, transparent);
  --pkn-mfa-b2: color-mix(in srgb, var(--orange) 20%, transparent);
  --pkn-biuro-b2: color-mix(in srgb, var(--mx-blue-50-white) 18%, transparent);
  --pkn-poczta-g: color-mix(in srgb, var(--orange-2) 50%, transparent);
  --pkn-vpn-g: color-mix(in srgb, var(--on-dark) 38%, transparent);
  --pkn-backup-g: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pkn-mfa-g: color-mix(in srgb, var(--orange) 50%, transparent);
  --pkn-biuro-g: color-mix(in srgb, var(--mx-blue-50-white) 45%, transparent);
  --pkn-poczta-h: color-mix(in srgb, var(--orange-2) 22%, transparent);
  --pkn-vpn-h: color-mix(in srgb, var(--navy) 14%, transparent);
  --pkn-backup-h: color-mix(in srgb, var(--cyan) 22%, transparent);
  --pkn-mfa-h: color-mix(in srgb, var(--orange) 18%, transparent);
  --pkn-biuro-h: color-mix(in srgb, var(--blue) 18%, transparent);
}
:is([data-grp="poczta"], [data-g="poczta"], .pkn-g--poczta) { --gc: var(--pk-s-poczta); --gl: var(--pkn-poczta-l); --gb: var(--pkn-poczta-b); --gb2: var(--pkn-poczta-b2); --gg: var(--pkn-poczta-g); --gh: var(--pkn-poczta-h); }
:is([data-grp="vpn"], [data-g="vpn"], .pkn-g--vpn) { --gc: var(--pk-s-vpn); --gl: var(--navy); --gb: var(--pkn-vpn-b); --gb2: var(--pkn-vpn-b2); --gg: var(--pkn-vpn-g); --gh: var(--pkn-vpn-h); }
:is([data-grp="backup"], [data-g="backup"], .pkn-g--backup) { --gc: var(--pk-s-backup); --gl: var(--pkn-backup-l); --gb: var(--pkn-backup-b); --gb2: var(--pkn-backup-b2); --gg: var(--pkn-backup-g); --gh: var(--pkn-backup-h); }
:is([data-grp="mfa"], [data-g="mfa"], .pkn-g--mfa) { --gc: var(--pk-s-mfa); --gl: var(--orange); --gb: var(--pkn-mfa-b); --gb2: var(--pkn-mfa-b2); --gg: var(--pkn-mfa-g); --gh: var(--pkn-mfa-h); }
:is([data-grp="biuro"], [data-g="biuro"], .pkn-g--biuro) { --gc: var(--pk-s-biuro); --gl: var(--pkn-biuro-l); --gb: var(--pkn-biuro-b); --gb2: var(--pkn-biuro-b2); --gg: var(--pkn-biuro-g); --gh: var(--pkn-biuro-h); }

/* schemat dokładnie jak w 01 (pd-lab.css, widok usług): elementy grupy świecą jak w 01 – obrys w kolorze grupy,
   wypełnienie i poświata błękitne (--pk-lit-fill, --pk-glow = --pd-lit-fill, --pd-glow), podpis biały; przewody grupy
   w jej kolorze (3,5), pozostałe węzły i przewody w spoczynku jak w 01. Wybrany element dodatkowo cienka ramka
   w kolorze grupy (zamiast pomarańczowej z 01). */
.pkn--grp[data-grp] .pk-w.is-lit { stroke: var(--pk-idle); stroke-width: 2; }
.pkn--grp[data-grp] .pk-w.is-grp { stroke: var(--gc); stroke-width: 3.5; }
.pkn--grp[data-grp] .pk-node.is-grp { --pk-acc: var(--gc); }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body { filter: drop-shadow(0 0 7px var(--pk-glow)); }
.pkn--grp[data-grp] .pk-node.is-grp text { fill: var(--on-dark); }
.pkn--grp[data-grp] .pk-node.is-sel .pk-foc { fill: none; stroke: var(--gc); stroke-width: 2; }
.pkn--box-dash[data-grp] .pk-node.is-sel .pk-foc { stroke-dasharray: 6 5; }
.pkn--grp .pk-dot { background: var(--gc); }

/* pigułki: wypełniona tylko grupa wybranego elementu; kliknięcie wybiera jej pierwszy element */
.pkn--grp .pk-chip { cursor: pointer; }
.pkn--grp .pk-chip.is-with:not(.is-grp) { background: none; border-color: var(--line-dark-2); color: var(--on-dark-2); }
.pkn--grp .pk-chip.is-grp { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy-900); }

/* z prawej: plakietka elementu (co) granatowa jak karta, ikona jak świecący węzeł z 01 (obrys w kolorze grupy) */
.pkn--e-plate .pkn-plate { width: 38px; height: 38px; background: var(--navy-900); }
.pkn--e-plate .pkn-i { filter: drop-shadow(0 0 4px var(--pk-glow)); }
.pkn--e-plate .kn-r--what > .kn-sym { height: 38px; }
.pkn--e-plate .pkn-i { width: 22px; height: 22px; stroke: var(--gc); stroke-width: 2.2; }
.pkn--e-plate .pkn-i :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pkn--e-plate .pkn-i circle[r="2"] { fill: var(--gc); stroke: none; }
/* pigułka grupy przy nazwie elementu */
.pkn-gchip { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  background: var(--navy-900); color: var(--on-dark); font: 600 12.5px/1.2 var(--text); white-space: nowrap; }
.pkn-gchip .pk-sd { width: 8px; height: 8px; }
.pkn .kn-what { flex-wrap: wrap; row-gap: 6px; }
/* oś i łuk w kolorze grupy (jasny odcień) */
.pkn--e-axis .kn-dot { background: var(--gl); box-shadow: 0 0 0 5px var(--gh); }
.pkn--e-axis .kn-ring { border-color: var(--gl); }
.pkn--e-axis .kn-stack::before { background: linear-gradient(var(--gl), var(--line-light)); }
.pkn--e-bridge .kn-br { stroke: var(--gl); }
/* przyciski jak na stronie: pomarańczowy przycisk akcji (site.css), etap linkiem; albo same linki */
.pkn .kn-links .pkn-btn { min-height: 46px; padding: 0 20px; font-size: 15.5px; }
.pkn .pkn-l1 { font-weight: 700; color: var(--navy); }
.pkn .kn-links:has(.pkn-l1) { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 639px) { .pkn .kn-links .pkn-btn { width: 100%; justify-content: space-between; } }