/* Warstwa prototypu tworzy wspólny szkielet klikalnych prototypów okien, dokładając wyłącznie układ powłoki, kontener okna operacyjnego i drobne wzorce.
   Nie zastępuje pliku `komponenty.css`. Wzorce swoiste dla prototypów
   obejmują pasek prototypu i panel „O tym opracowaniu". Zasada: wyłącznie
   żetony `var(--dn-*)`, zero wartości zapisanych wprost. */

/* ── 1 · POWŁOKA OKNA APLIKACJI ─────────────────────────────────────────── */

html, body { height: 100%; }
body.pt-pelny-ekran { overflow: hidden; }

.pt-powloka {
  display: grid;
  grid-template-rows: var(--dn-wym-pasek) var(--dn-wym-pas-kart) minmax(0, 1fr);
  height: 100dvh;
  background: var(--dn-tlo);
}
.pt-powloka--bez-kart { grid-template-rows: var(--dn-wym-pasek) minmax(0, 1fr); }
.pt-powloka--jednolita { grid-template-rows: minmax(0, 1fr); }

.pt-cialo {
  display: grid;
  grid-template-columns: var(--dn-wym-boczna) minmax(0, 1fr);
  min-height: 0;
}
.pt-cialo--zwinieta { grid-template-columns: var(--dn-wym-kontrolka) minmax(0, 1fr); }
.pt-cialo--bez-bocznej { grid-template-columns: minmax(0, 1fr); }

.pt-obszar {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0; min-height: 0;
  overflow: hidden;
}
/* Obszar roboczy z pasem komunikacji dzieli przestrzeń na dwa wiersze siatki: wyższy wiersz treści oraz niższy pas przeznaczony na okno komunikacji. */
.pt-obszar--z-komunikacja {
  grid-template-rows: minmax(0, 1fr) minmax(var(--dn-wym-pas-komunikacji), 46%);
}
.pt-obszar--komunikacja-zwinieta {
  grid-template-rows: minmax(0, 1fr) auto;
}

/* ── 2 · OKNO OPERACYJNE (kontener) ─────────────────────────────────────── */

/* Okno prototypu ma nagłówek, dowolną liczbę pasów pomocniczych i treść.
   Układ kolumnowy przyjmuje każdą liczbę pasów; treść bierze resztę wysokości. */
.pt-okno {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: var(--dn-od-3) var(--dn-od-3) 0;
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-powierzchnia);
  overflow: hidden;
}
.pt-okno--dol { margin-bottom: var(--dn-od-3); }
.pt-okno--plaskie { margin: 0; border: 0; border-radius: 0; }

.pt-okno-naglowek {
  display: flex; align-items: center; gap: var(--dn-od-2);
  min-height: var(--dn-wym-kontrolka);
  padding: var(--dn-od-2) var(--dn-od-3);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
  background: var(--dn-panel);
}
.pt-okno-tytul {
  display: inline-flex; align-items: center; gap: var(--dn-od-2);
  font-weight: var(--dn-fw-polgruba);
  font-size: var(--dn-fs-base);
  color: var(--dn-tekst);
}
.pt-okno-tytul svg { width: var(--dn-wym-ikona); height: var(--dn-wym-ikona); color: var(--dn-tekst-2); }
.pt-okno-podtytul { font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); }
.pt-okno-narzedzia { margin-left: auto; display: inline-flex; align-items: center; gap: var(--dn-od-1); }
.pt-okno-tresc { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pt-okno > :not(.pt-okno-tresc) { flex: none; }
.pt-okno-tresc--gniazdo { padding: var(--dn-od-3); }

/* ── 3 · PODZIAŁ NA PANELE ──────────────────────────────────────────────── */

.pt-panele { display: grid; min-height: 0; gap: 1px; background: var(--dn-obrys-subtelny); }
.pt-panele--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pt-panele--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-panele--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-panele--boczny-lewy { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
.pt-panele--boczny-prawy { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); }
.pt-panele--trojpodzial { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(200px, 300px); }
.pt-panele--pion { grid-template-columns: none; grid-auto-rows: minmax(0, 1fr); }

.pt-panel {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; min-height: 0;
  background: var(--dn-powierzchnia);
}
.pt-panel-naglowek {
  display: flex; align-items: center; gap: var(--dn-od-2);
  padding: var(--dn-od-2) var(--dn-od-3);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
  background: var(--dn-panel);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-polgruba);
  letter-spacing: var(--dn-ls-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst-2);
}
.pt-panel-naglowek .pt-panel-akcje { margin-left: auto; display: inline-flex; gap: var(--dn-od-1); text-transform: none; letter-spacing: normal; }
.pt-panel-tresc { min-height: 0; overflow: auto; padding: var(--dn-od-3); }
.pt-panel-tresc--bez-marginesu { padding: 0; }

/* ── 4 · PASEK PROTOTYPU (metadane opracowania) ─────────────────────────── */

.pt-pasek-prototypu {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--dn-z-powiadomienie);
  display: flex; align-items: center; gap: var(--dn-od-3);
  padding: var(--dn-od-1) var(--dn-od-3);
  background: var(--dn-rama);
  border-top: 1px solid var(--dn-rama-obrys);
  color: var(--dn-rama-tekst-2);
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--dn-czas-3) var(--dn-ease);
}
.pt-pasek-prototypu[data-widoczny='tak'] { transform: translateY(0); }
.pt-pasek-prototypu b { color: var(--dn-rama-tekst); font-weight: var(--dn-fw-polgruba); }
.pt-pasek-prototypu .pt-pasek-prawa { margin-left: auto; display: inline-flex; gap: var(--dn-od-2); align-items: center; }

.pt-uchwyt-prototypu {
  /* Nad paskiem stanu — nie zasłania jego prawej strony. */
  position: fixed; right: var(--dn-od-3); bottom: calc(var(--dn-wym-stan) + var(--dn-od-2));
  z-index: calc(var(--dn-z-powiadomienie) + 1);
  display: inline-flex; align-items: center; gap: var(--dn-od-2);
  height: var(--dn-wym-kontrolka); padding-inline: var(--dn-od-3);
  border: 1px solid var(--dn-rama-obrys); border-radius: var(--dn-r-pill);
  background: var(--dn-rama); color: var(--dn-rama-tekst);
  font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki); text-transform: uppercase;
  cursor: pointer; box-shadow: var(--dn-cien-3);
  transition: background var(--dn-czas-1) var(--dn-ease);
}
.pt-uchwyt-prototypu:hover { background: var(--dn-szary-800); }
.pt-uchwyt-prototypu svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); }

/* ── 5 · PANEL „O TYM OPRACOWANIU" ─────────────────────────────────────── */

.pt-o-opracowaniu {
  margin: var(--dn-od-4) auto;
  max-width: var(--dn-tresc-max);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-powierzchnia);
  font-size: var(--dn-fs-sm);
  color: var(--dn-tekst-2);
}
.pt-o-opracowaniu > summary {
  display: flex; align-items: center; gap: var(--dn-od-2);
  padding: var(--dn-od-3) var(--dn-od-4);
  cursor: pointer;
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst);
  list-style: none;
}
.pt-o-opracowaniu > summary::-webkit-details-marker { display: none; }
.pt-o-opracowaniu > summary::before {
  content: ''; width: var(--dn-wym-kropka); height: var(--dn-wym-kropka);
  border-radius: var(--dn-r-pill); background: var(--dn-kropka); flex: none;
}
.pt-o-opracowaniu-tresc { padding: 0 var(--dn-od-4) var(--dn-od-4); line-height: var(--dn-lh-luzny); }
.pt-o-opracowaniu-tresc h4 {
  margin: var(--dn-od-4) 0 var(--dn-od-2);
  font-size: var(--dn-fs-xs); text-transform: uppercase;
  letter-spacing: var(--dn-ls-wersaliki); color: var(--dn-tekst);
}
.pt-o-opracowaniu-tresc ul { margin: 0; padding-left: var(--dn-od-5); }
.pt-o-opracowaniu-tresc li { margin-bottom: var(--dn-od-1); }
.pt-o-opracowaniu-tresc code {
  font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs);
  padding: 1px var(--dn-od-1); border-radius: var(--dn-r-xs);
  background: var(--dn-powierzchnia-2); color: var(--dn-tekst);
}

/* ── 6 · WZORCE POMOCNICZE ──────────────────────────────────────────────── */

/* Etykieta wersalikowa sekcji nazywa grupę treści krojem wersalikowym o zwiększonych odstępach liter, w drugorzędnej barwie tekstu. */
.pt-etykieta {
  font-family: var(--dn-ff-bazowa);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-polgruba);
  letter-spacing: var(--dn-ls-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst-2);
}
/* Dane techniczne krojem mono pokazują wartości liczbowe i identyfikatory pismem o stałej szerokości znaku, w drugorzędnej barwie tekstu. */
.pt-mono {
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dn-tekst-2);
}
/* Listy pozycji układają wiersze w kolumnę, każdy ze znakiem, tytułem obcinanym wielokropkiem oraz metadaną wyrównaną do prawej krawędzi wiersza. */
.pt-lista { display: flex; flex-direction: column; }
.pt-pozycja {
  display: flex; align-items: center; gap: var(--dn-od-2);
  min-height: var(--dn-wym-wiersz);
  padding: var(--dn-od-1) var(--dn-od-3);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
  cursor: pointer;
  font-size: var(--dn-fs-base);
  color: var(--dn-tekst);
  background: none; border-inline: 0; border-top: 0; width: 100%;
  text-align: left;
  transition: background var(--dn-czas-1) var(--dn-ease);
}
.pt-pozycja:hover { background: var(--dn-hover); }
/* Pozycja bieżąca niesie `aria-current`, nie `aria-selected`: przycisk bez roli
   `tab`/`option` nie dopuszcza `aria-selected`, a wykaz sesji nie jest ani paskiem
   zakładek, ani listą wyboru. Ta sama konwencja co w `.dn-boczna-pozycja`. */
.pt-pozycja[aria-current] {
  background: var(--dn-sygnal-tlo);
  box-shadow: inset var(--dn-wym-wstega) 0 0 var(--dn-kropka);
}
.pt-pozycja svg { width: var(--dn-wym-ikona); height: var(--dn-wym-ikona); flex: none; color: var(--dn-tekst-2); }
.pt-pozycja-tytul { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-pozycja-meta { font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs); color: var(--dn-tekst-3); flex: none; }

/* Siatka kart rozkłada karty w automatycznie wypełnianych kolumnach, z trzema wariantami minimalnej szerokości karty dla różnej gęstości treści. */
.pt-siatka { display: grid; gap: var(--dn-od-3); }
.pt-siatka--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pt-siatka--3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pt-siatka--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Pole treści dokumentowej ogranicza szerokość wiersza czytelnego tekstu i nadaje własną skalę nagłówkom, akapitom oraz wyróżnieniom tekstu. */
.pt-dokument { padding: var(--dn-od-6) var(--dn-od-8); max-width: 76ch; }
.pt-dokument h2 { font-family: var(--dn-ff-naglowek); font-size: var(--dn-fs-xl); margin-bottom: var(--dn-od-3); color: var(--dn-tekst); }
.pt-dokument h3 { font-size: var(--dn-fs-lg); margin: var(--dn-od-5) 0 var(--dn-od-2); color: var(--dn-tekst); }
.pt-dokument p { margin-bottom: var(--dn-od-3); color: var(--dn-tekst-2); line-height: var(--dn-lh-luzny); font-size: var(--dn-fs-md); }
.pt-dokument mark { background: var(--dn-sygnal-tlo); color: var(--dn-tekst); border-bottom: 1px solid var(--dn-sygnal-obrys); }

/* Konsola i terminal pokazują dane pismem o stałej szerokości znaku na ciemnym tle, z osobną barwą znaku zachęty, wyniku, uwagi i komentarza. */
.pt-konsola {
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-sm);
  line-height: var(--dn-lh-bazowy);
  background: var(--dn-szary-1000);
  color: var(--dn-szary-150);
  padding: var(--dn-od-3);
  min-height: 0; overflow: auto;
  white-space: pre-wrap;
}
.pt-konsola .pt-znak-zachety { color: var(--dn-sygnal-300); }
.pt-konsola .pt-wynik-ok { color: var(--dn-zielen-400); }
.pt-konsola .pt-wynik-blad { color: var(--dn-czerwien-400); }
.pt-konsola .pt-wynik-uwaga { color: var(--dn-bursztyn-400); }
.pt-konsola .pt-komentarz { color: var(--dn-szary-500); }

/* Edytor kodu układa numery wierszy i treść kodu w dwóch kolumnach siatki, z osobną barwą składni słów kluczowych, tekstu, liczb i funkcji. */
.pt-edytor { display: grid; grid-template-columns: auto minmax(0, 1fr); font-family: var(--dn-ff-mono); font-size: var(--dn-fs-sm); min-height: 0; overflow: auto; }
.pt-edytor-numery { padding: var(--dn-od-2) var(--dn-od-2) var(--dn-od-2) var(--dn-od-3); text-align: right; color: var(--dn-tekst-3); background: var(--dn-powierzchnia-2); user-select: none; font-variant-numeric: tabular-nums; }
.pt-edytor-kod { padding: var(--dn-od-2) var(--dn-od-3); white-space: pre; color: var(--dn-tekst); }
.pt-skl-slowo { color: var(--dn-sygnal); }
/* Barwy składni idą żetonami semantycznymi, nie prymitywami: prymityw -400 jest
   wartością motywu ciemnego, a płótno edytora idzie za motywem — w jasnym dawał
   1,8–2,5:1. Zestaw własnych żetonów składni nie istnieje (dług). */
.pt-skl-tekst { color: var(--dn-sukces-tekst); }
.pt-skl-komentarz { color: var(--dn-tekst-3); font-style: italic; }
.pt-skl-liczba { color: var(--dn-ostrzezenie-tekst); }
.pt-skl-funkcja { color: var(--dn-tekst); font-weight: var(--dn-fw-polgruba); }
.pt-wiersz-dodany { background: var(--dn-sukces-tlo); }
.pt-wiersz-usuniety { background: var(--dn-blad-tlo); }

/* Pasek narzędzi wewnątrz panelu zbiera kontrolki lokalne panelu w jednym wierszu, z rozdzielaczem oddzielającym grupy kontrolek od siebie. */
.pt-przybornik-lokalny {
  display: flex; align-items: center; gap: var(--dn-od-1);
  padding: var(--dn-od-2) var(--dn-od-3);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
  background: var(--dn-powierzchnia);
  flex-wrap: wrap;
}
.pt-rozdzielacz { width: 1px; height: var(--dn-od-5); background: var(--dn-obrys); margin-inline: var(--dn-od-1); flex: none; }

/* Okruszki nawigacji pokazują ścieżkę położenia w hierarchii widoków, wyróżniając barwą i grubością pisma pozycję odpowiadającą stronie bieżącej. */
.pt-okruszki { display: flex; align-items: center; gap: var(--dn-od-1); font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); flex-wrap: wrap; }
.pt-okruszki svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); color: var(--dn-tekst-3); }
.pt-okruszki [aria-current='page'] { color: var(--dn-tekst); font-weight: var(--dn-fw-srednia); }
/* Okruszki na pasku atramentowym czerpią barwy z rodziny ramy, nie z treści, ponieważ stoją na ciemnym tle wspólnym dla całej powłoki aplikacji. */
.dn-pasek .pt-okruszki { color: var(--dn-rama-tekst-2); }
.dn-pasek .pt-okruszki svg { color: var(--dn-rama-tekst-2); }
.dn-pasek .pt-okruszki [aria-current='page'] { color: var(--dn-rama-tekst); }

/* Wskaźnik pracy w tle pulsuje jednym ciągłym tętnem, sygnalizując użytkownikowi trwającą czynność bez przerywania pracy w innej części okna. */
.pt-tetno {
  display: inline-block; flex: none;
  width: var(--dn-wym-kropka); height: var(--dn-wym-kropka);
  border-radius: var(--dn-r-pill);
  background: var(--dn-kropka);
  animation: pt-tetno var(--dn-czas-tetno) var(--dn-ease) infinite;
}
@keyframes pt-tetno {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--dn-fokus-cien); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-tetno { animation: none; box-shadow: 0 0 0 2px var(--dn-fokus-cien); }
}

/* Wejście widoku animuje pojawienie się treści przesunięciem i przenikaniem, uruchamiane raz przy pierwszym pokazaniu widoku w oknie. */
.pt-wejscie { animation: pt-wejscie var(--dn-czas-3) var(--dn-ease) both; }
@keyframes pt-wejscie {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Ukrycie widoków przełączanych chowa każdy widok, który nie jest aktualnie aktywnym widokiem wskazanym atrybutem danych na znaczniku. */
[data-widok]:not([data-widok-aktywny='tak']) { display: none; }

/* ── 7 · RESPONSYWNOŚĆ POWŁOKI ──────────────────────────────────────────── */

@media (max-width: 960px) {
  .pt-cialo { grid-template-columns: var(--dn-wym-kontrolka) minmax(0, 1fr); }
  .pt-cialo .dn-boczna-pozycja span,
  .pt-cialo .dn-boczna-naglowek { display: none; }
  .pt-panele--trojpodzial { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); }
  .pt-panele--trojpodzial > .pt-panel:first-child { display: none; }
}
@media (max-width: 640px) {
  .pt-cialo { grid-template-columns: minmax(0, 1fr); }
  .pt-cialo > .dn-boczna { display: none; }
  .pt-panele--2, .pt-panele--3, .pt-panele--4,
  .pt-panele--boczny-lewy, .pt-panele--boczny-prawy { grid-template-columns: minmax(0, 1fr); }
  .pt-panele > .pt-panel:not(:first-child) { display: none; }
  .pt-dokument { padding: var(--dn-od-4); }
}

/* ── 8 · DRUK ───────────────────────────────────────────────────────────── */

@media print {
  .pt-pasek-prototypu, .pt-uchwyt-prototypu, .dn-pasek { display: none !important; }
  .pt-powloka { height: auto; display: block; }
  .pt-okno { break-inside: avoid; }
}

/* ── OPRAWA PODGLĄDU PRZEPŁYWU WEJŚCIA ───────────────────────────────────────
   Scena etapów, przybornik, dziennik komunikatów, pasek postępu i fazy.
   Nic z tego nie należy do produktu — to rusztowanie, na którym ogląda się
   okna przepływu. Stało wcześniej w pliku podglądu; okno nie niesie wyglądu.
   ────────────────────────────────────────────────────────────────────────── */

  /* ══════════════════════════════════════════════════════════════════════════
     RUSZTOWANIE PROTOTYPU — wyłącznie przestrzeń nazw .pt-*

     Budowa okien wejściowych stoi w `zasoby/wejscie.css` (.we-*, .au-*, .pg-*).
     Tutaj mieści się tylko to, czego w produkcie nie ma: scena trzech etapów,
     przełączniki stanu i panel demonstracyjny uzgodnienia protokołu.

     Etapy przed uwierzytelnieniem NIE wpinają `rama.css` ani `rama.js` —
     rama aplikacji dołącza się skryptem dopiero po wydaniu tokenu, na etapie
     przygotowania środowiska.
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── scena trzech etapów ────────────────────────────────────────────────── */
  .pt-scena { display: flex; flex-direction: column; height: 100dvh; background: var(--dn-tlo); }
  .pt-scena > .pt-naglowek-sceny { flex: none; }
  .pt-etapy { flex: 1 1 auto; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
  .pt-etap[data-widok-aktywny='tak'] { display: flex; flex-direction: column; min-height: 0; }
  .pt-etap > .pt-przybornik-lokalny { flex: none; }
  .pt-etap-tresc { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .pt-etap-tresc:focus-visible { outline: var(--dn-wym-fokus) solid var(--dn-fokus); outline-offset: calc(-1 * var(--dn-wym-fokus)); }

  /* Ikony w przełącznikach stanu trzymają rozmiar żetonu. */
  .pt-przybornik-lokalny .dn-zakladka svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); flex: none; }
  .pt-przybornik-lokalny .pt-przybornik-prawa { margin-left: auto; display: inline-flex; gap: var(--dn-od-1); }

  /* Gniazdo ramy aplikacji — rama wchodzi tu dopiero na etapie 3.
     `.pt-powloka` mierzy w prototypach całą wysokość okna przeglądarki;
     tutaj stoi wewnątrz sceny etapów, więc bierze wysokość gniazda. */
  /* `rama.css` nadaje powłoce wysokość całego okna przeglądarki regułą
     `.pt-powloka:has(> .dn-rama-korpus)` o tej samej sile co zapis dwuklasowy;
     stąd trzecia klasa — rama ma wypełnić gniazdo, nie ekran. */
  .pt-etap .pt-etap-tresc .pt-powloka,
  .pt-etap .pt-powloka:has(> .dn-rama-korpus) { height: 100%; }
  .pt-oprawa-ramy { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; height: 100%; }
  /* Poniżej 960 px `prototyp.css` zwęża pierwszą kolumnę korpusu do szerokości
     zwiniętej nawigacji bocznej. Korpus etapu 3 bocznej nawigacji nie ma —
     jedyna kolumna musi wziąć całą szerokość, inaczej okno ściska się do 32 px. */
  @media (max-width: 960px) {
    .pt-etap .pt-cialo--bez-bocznej { grid-template-columns: minmax(0, 1fr); }
  }

  /* ── panel demonstracyjny: uzgodnienie protokołu (etap 1) ───────────────── */

  /* Okno startowe, okno rejestracji i logowania oraz okno przygotowania
     środowiska mają tę samą szerokość i wysokość. Panel uzgodnienia protokołu
     leży więc pod oknem, a nie obok niego — kolumna obok zwężałaby okno
     i psuła zgodność trzech okien wejściowych. */
  .pt-panele--startowe { grid-template-columns: minmax(0, 1fr); }
  .pt-panele--startowe .pt-log { max-height: 240px; }

  .pt-log { min-height: 0; max-height: 100%; overflow: auto; }
  .pt-log-wiersz { display: block; padding: 1px 0; opacity: 1; transition: opacity var(--dn-czas-2) var(--dn-ease); }
  .pt-log-wiersz[data-ukryty='tak'] { opacity: 0; }
  .pt-log-klucz { display: inline-block; min-width: 21ch; color: var(--dn-szary-400); }
  .pt-log-czas { color: var(--dn-szary-400); margin-right: var(--dn-od-2); }

  .pt-pas-postepu {
    display: flex; flex-direction: column; gap: var(--dn-od-2);
    padding: var(--dn-od-3);
    border-top: 1px solid var(--dn-obrys-subtelny);
    background: var(--dn-powierzchnia);
  }
  .pt-pas-postepu-glowa {
    display: flex; align-items: center; gap: var(--dn-od-2);
    font-family: var(--dn-ff-mono);
    font-size: var(--dn-fs-xs);
    letter-spacing: var(--dn-ls-mono-wersaliki);
    text-transform: uppercase;
    color: var(--dn-tekst-2);
  }
  .pt-pas-postepu-glowa [data-postep-licznik] { margin-left: auto; font-variant-numeric: tabular-nums; }

  /* zestawienie faz cyklu połączenia */

  /* Kolumna przebiegu: fazy u góry, dziennik w środku na całej wolnej wysokości,
   pas postępu u dołu. */
.pt-przebieg { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.pt-pas-postepu .pt-nota { margin: 0; }

.pt-fazy { display: flex; flex-direction: column; }
  .pt-faza {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dn-od-3);
    min-height: var(--dn-wym-wiersz);
    padding: 0 var(--dn-od-3);
    border-bottom: 1px solid var(--dn-obrys-subtelny);
    font-size: var(--dn-fs-base);
    color: var(--dn-tekst-2);
  }
  .pt-faza-znak {
    display: grid; place-content: center;
    width: 20px; height: 20px;
    border: 1px solid var(--dn-obrys-mocny);
    border-radius: var(--dn-r-pill);
    background: var(--dn-powierzchnia);
    color: var(--dn-tekst-2);
    font-family: var(--dn-ff-mono);
    font-size: var(--dn-fs-xs);
  }
  .pt-faza-znak > svg { width: 12px; height: 12px; }
  .pt-faza[data-stan-fazy='pracuje'] { color: var(--dn-tekst); }
  .pt-faza[data-stan-fazy='pracuje'] .pt-faza-znak { border-color: var(--dn-sygnal-obrys); color: var(--dn-sygnal); background: var(--dn-sygnal-tlo); }
  .pt-faza[data-stan-fazy='gotowa'] .pt-faza-znak { border-color: var(--dn-sukces-obrys); color: var(--dn-sukces-tekst); background: var(--dn-sukces-tlo); }
  .pt-faza[data-stan-fazy='blad'] .pt-faza-znak { border-color: var(--dn-blad-obrys); color: var(--dn-blad-tekst); background: var(--dn-blad-tlo); }
  .pt-faza-meta { font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs); color: var(--dn-tekst-2); }

  .pt-nota { max-width: 60ch; font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); line-height: var(--dn-lh-bazowy); }

  /* Nagłówki panelu „O tym opracowaniu”. Panel stoi obok treści głównej,
     więc jego śródtytuły są drugim stopniem — po nagłówku strony i bez
     przeskoku w dół. Krój przejmują z zapisu `.pt-o-opracowaniu-tresc h4`. */
  .pt-o-opracowaniu-tresc h2 {
    margin: var(--dn-od-4) 0 var(--dn-od-2);
    font-size: var(--dn-fs-base);
    font-weight: var(--dn-fw-polgruba);
    color: var(--dn-tekst);
  }
  .pt-o-opracowaniu-tresc h2:first-child { margin-top: 0; }