/* ============================================================================
   DANACO CONSOLE — BIBLIOTEKA KOMPONENTÓW · v2.0
   ----------------------------------------------------------------------------
   Wyłącznie żetony semantyczne z 03-zetony/zetony.css. Zero wartości zaszytych.
   Każdy komponent interaktywny ma stany: spoczynek · najechanie · naciśnięcie ·
   fokus · wybrany · ładowanie · błąd. ADL-017: żaden wariant nie odbiera
   klikalności — niegotowość komunikuje się opisem albo komunikatem.
   Stan nigdy samym kolorem — komponent stanu niesie ikonę albo etykietę.
   ============================================================================ */

/* ==========================================================================
   PRZYCISK
   ========================================================================== */
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dn-od-2);
  min-height: var(--dn-wym-kontrolka);
  padding: 0 var(--dn-od-4);
  border: 1px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-sm);
  background: var(--dn-powierzchnia);
  color: var(--dn-tekst);
  font-family: var(--dn-ff-bazowa);
  font-size: var(--dn-fs-base);
  font-weight: var(--dn-fw-srednia);
  line-height: var(--dn-lh-ciasny);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dn-czas-2) var(--dn-ease),
    border-color var(--dn-czas-2) var(--dn-ease),
    color var(--dn-czas-2) var(--dn-ease),
    box-shadow var(--dn-czas-2) var(--dn-ease),
    transform var(--dn-czas-1) var(--dn-ease);
}
.dn-btn:hover { background: var(--dn-hover); }
.dn-btn:active { transform: translateY(1px); }
.dn-btn:focus-visible {
  outline: var(--dn-wym-fokus) solid var(--dn-fokus);
  outline-offset: var(--dn-wym-fokus-odsuniecie);
}

/* Wybrany trwale — sygnał wskazuje (obrys + tło, zmiana kształtu przez obrys) */
.dn-btn[aria-pressed='true'],
.dn-btn.dn-btn--wybrany {
  background: var(--dn-sygnal-tlo);
  border-color: var(--dn-sygnal-obrys);
  color: var(--dn-sygnal);
}

/* Ładowanie — wskaźnik obok treści; przycisk pozostaje klikalny (zero blokad) */
.dn-btn[aria-busy='true'] { cursor: progress; }
.dn-btn[aria-busy='true']::after {
  content: '';
  width: var(--dn-wym-spinner);
  height: var(--dn-wym-spinner);
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--dn-r-pill);
  opacity: 0.7;
  animation: dn-obrot 0.8s linear infinite;
}

/* Błąd — obrys + barwa; treść przycisku niesie ikonę albo etykietę błędu */
.dn-btn[aria-invalid='true'] {
  border-color: var(--dn-blad-obrys);
  color: var(--dn-blad-tekst);
}

/* GŁÓWNY — inwersja atramentu: czerń na jasnym, biel na ciemnym */
.dn-btn--atrament {
  background: var(--dn-atrament);
  border-color: var(--dn-atrament);
  color: var(--dn-atrament-tekst);
}
.dn-btn--atrament:hover {
  background: var(--dn-atrament-hover);
  border-color: var(--dn-atrament-hover);
}

/* SYGNAŁOWY — wyłącznie działanie systemowe „uruchom / zatwierdź plan";
   jeden na widok. Nie zastępuje atramentu jako domyślnego głównego. */
.dn-btn--sygnal {
  background: var(--dn-sygnal-wypelnienie);
  border-color: var(--dn-sygnal-wypelnienie);
  color: var(--dn-szary-0);
}
.dn-btn--sygnal:hover {
  background: var(--dn-sygnal-wypelnienie-hover);
  border-color: var(--dn-sygnal-wypelnienie-hover);
}

/* ZARYS — akcje drugorzędne równorzędne */
.dn-btn--zarys { background: transparent; }

/* DUCH — akcje trzeciorzędne, paski narzędzi */
.dn-btn--duch {
  background: transparent;
  border-color: transparent;
  color: var(--dn-tekst-2);
}
.dn-btn--duch:hover { background: var(--dn-hover); color: var(--dn-tekst); }

/* NIEBEZPIECZNY — czynności nieodwracalne; sygnalizuje wagę, nie blokuje */
.dn-btn--niebezpieczny {
  background: transparent;
  border-color: var(--dn-blad-obrys);
  color: var(--dn-blad-tekst);
}
.dn-btn--niebezpieczny:hover { background: var(--dn-blad-tlo); }

/* Rozmiary — pochodne kontrolki, bez wartości spoza skali */
.dn-btn--sm {
  min-height: calc(var(--dn-wym-kontrolka) - var(--dn-od-1));
  padding: 0 var(--dn-od-3);
  font-size: var(--dn-fs-sm);
}
.dn-btn--lg {
  min-height: calc(var(--dn-wym-kontrolka) + var(--dn-od-2));
  padding: 0 var(--dn-od-5);
  font-size: var(--dn-fs-md);
}

/* Przycisk ikonowy */
.dn-btn-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dn-wym-ikonowy);
  height: var(--dn-wym-ikonowy);
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--dn-r-sm);
  background: transparent;
  color: var(--dn-tekst-2);
  cursor: pointer;
  transition:
    background-color var(--dn-czas-2) var(--dn-ease),
    color var(--dn-czas-2) var(--dn-ease),
    transform var(--dn-czas-1) var(--dn-ease);
}
.dn-btn-ikona:hover { background: var(--dn-hover); color: var(--dn-tekst); }
.dn-btn-ikona:active { transform: translateY(1px); }
.dn-btn-ikona[aria-pressed='true'] {
  background: var(--dn-sygnal-tlo);
  color: var(--dn-sygnal);
}
.dn-btn-ikona:focus-visible {
  outline: var(--dn-wym-fokus) solid var(--dn-fokus);
  outline-offset: var(--dn-wym-fokus-odsuniecie);
}

/* Wariant na ramie (pasek górny — zawsze atramentowy) */
.dn-btn-ikona--na-ramie { color: var(--dn-rama-tekst-2); }
.dn-btn-ikona--na-ramie:hover { background: var(--dn-rama-hover); color: var(--dn-rama-tekst); }
.dn-btn-ikona--na-ramie[aria-pressed='true'] {
  background: var(--dn-rama-hover);
  color: var(--dn-sygnal-300, #8FB2F5);
}

/* ==========================================================================
   POLE FORMULARZA
   ========================================================================== */
.dn-pole { display: flex; flex-direction: column; gap: var(--dn-od-1); }

.dn-pole-etykieta {
  font-size: var(--dn-fs-sm);
  font-weight: var(--dn-fw-srednia);
  color: var(--dn-tekst-2);
}

.dn-pole-kontrolka {
  min-height: var(--dn-wym-kontrolka);
  padding: 0 var(--dn-od-3);
  border: 1px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-sm);
  background: var(--dn-powierzchnia);
  color: var(--dn-tekst);
  font-size: var(--dn-fs-base);
  transition:
    border-color var(--dn-czas-2) var(--dn-ease),
    box-shadow var(--dn-czas-2) var(--dn-ease),
    background-color var(--dn-czas-2) var(--dn-ease);
}
textarea.dn-pole-kontrolka {
  min-height: calc(var(--dn-wym-kontrolka) * 2);
  padding: var(--dn-od-2) var(--dn-od-3);
  resize: vertical;
}
.dn-pole-kontrolka::placeholder { color: var(--dn-tekst-3); }
.dn-pole-kontrolka:hover { border-color: var(--dn-tekst-3); }
.dn-pole-kontrolka:focus {
  outline: none;
  border-color: var(--dn-fokus);
  box-shadow: var(--dn-cien-sygnal);
}
.dn-pole-kontrolka[aria-invalid='true'] { border-color: var(--dn-blad-tekst); }
.dn-pole-kontrolka[readonly] {
  background: var(--dn-powierzchnia-2);
  color: var(--dn-tekst-2);
}

.dn-pole-opis {
  font-size: var(--dn-fs-sm);
  color: var(--dn-tekst-3);
}
.dn-pole-blad {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-1);
  font-size: var(--dn-fs-sm);
  color: var(--dn-blad-tekst);
}

/* Pole wyszukiwania z ikoną */
.dn-szukaj { position: relative; display: flex; align-items: center; }
.dn-szukaj > svg {
  position: absolute;
  left: var(--dn-od-3);
  width: var(--dn-wym-ikona);
  height: var(--dn-wym-ikona);
  color: var(--dn-tekst-3);
  pointer-events: none;
}
.dn-szukaj > .dn-pole-kontrolka { width: 100%; padding-left: var(--dn-od-8); }

/* Wybór rozwijany */
select.dn-pole-kontrolka { padding-right: var(--dn-od-6); cursor: pointer; }

/* ==========================================================================
   WYBÓR: POLE WYBORU · PRZEŁĄCZNIK · RADIO
   ========================================================================== */
.dn-wybor {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  min-height: var(--dn-wym-kontrolka);
  cursor: pointer;
  font-size: var(--dn-fs-base);
}

.dn-check {
  appearance: none;
  width: var(--dn-wym-check);
  height: var(--dn-wym-check);
  flex: none;
  margin: 0;
  border: 1px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-xs);
  background: var(--dn-powierzchnia);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--dn-czas-1) var(--dn-ease), border-color var(--dn-czas-1) var(--dn-ease);
}
.dn-check::before {
  content: '';
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform var(--dn-czas-1) var(--dn-ease);
  clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
  background: var(--dn-atrament-tekst);
}
.dn-check:checked { background: var(--dn-atrament); border-color: var(--dn-atrament); }
.dn-check:checked::before { transform: scale(1); }

.dn-radio { border-radius: var(--dn-r-pill); }
.dn-radio::before { clip-path: none; border-radius: var(--dn-r-pill); width: 8px; height: 8px; }

/* Przełącznik — tor + suwak; wybrany = sygnał (wskazanie stanu, nie akcja) */
.dn-przelacznik {
  appearance: none;
  width: var(--dn-wym-przelacznik-szer);
  height: var(--dn-wym-przelacznik-wys);
  flex: none;
  margin: 0;
  border: 1px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-pill);
  background: var(--dn-powierzchnia-2);
  position: relative;
  cursor: pointer;
  transition: background-color var(--dn-czas-2) var(--dn-ease), border-color var(--dn-czas-2) var(--dn-ease);
}
.dn-przelacznik::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  translate: 0 -50%;
  width: calc(var(--dn-wym-przelacznik-wys) - 6px);
  height: calc(var(--dn-wym-przelacznik-wys) - 6px);
  border-radius: var(--dn-r-pill);
  background: var(--dn-tekst-2);
  transition: left var(--dn-czas-2) var(--dn-ease), background-color var(--dn-czas-2) var(--dn-ease);
}
.dn-przelacznik:checked {
  background: var(--dn-sygnal-wypelnienie);
  border-color: var(--dn-sygnal-wypelnienie);
}
.dn-przelacznik:checked::before {
  left: calc(100% - var(--dn-wym-przelacznik-wys) + 4px);
  background: var(--dn-szary-0);
}

/* Suwak — nakład rozumowania (szybciej ↔ mądrzej) */
.dn-suwak {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--dn-r-pill);
  background: linear-gradient(to right, var(--dn-sygnal-wypelnienie) var(--dn-suwak-pozycja, 50%), var(--dn-powierzchnia-2) var(--dn-suwak-pozycja, 50%));
  outline-offset: var(--dn-od-1);
  cursor: pointer;
}
.dn-suwak::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border: 2px solid var(--dn-sygnal-wypelnienie);
  border-radius: var(--dn-r-pill);
  background: var(--dn-powierzchnia);
  box-shadow: var(--dn-cien-1);
}
.dn-suwak::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 2px solid var(--dn-sygnal-wypelnienie);
  border-radius: var(--dn-r-pill);
  background: var(--dn-powierzchnia);
}

/* ==========================================================================
   KROPKA SYGNAŁU — element sygnaturowy (praca w tle; L-P-16)
   ========================================================================== */
.dn-kropka {
  display: inline-block;
  width: var(--dn-wym-kropka);
  height: var(--dn-wym-kropka);
  flex: none;
  border-radius: var(--dn-r-pill);
  background: var(--dn-kropka);
}
/* Tętno — jedyny ruch ciągły interfejsu (2,4 s) */
.dn-kropka--tetno { animation: dn-tetno var(--dn-czas-tetno) var(--dn-ease) infinite; }
@keyframes dn-tetno {
  0%, 100% { box-shadow: 0 0 0 0 var(--dn-fokus-cien); }
  40% { box-shadow: 0 0 0 5px transparent; }
}
/* Przy ograniczonym ruchu tętno zamiera — kropkę wzmacnia pierścień statyczny */
@media (prefers-reduced-motion: reduce) {
  .dn-kropka--tetno { box-shadow: 0 0 0 2px var(--dn-fokus-cien); }
}
/* Warianty stanu (zawsze obok etykiety albo ikony — nigdy same) */
.dn-kropka--sukces { background: var(--dn-sukces-tekst); }
.dn-kropka--ostrzezenie { background: var(--dn-ostrzezenie-tekst); }
.dn-kropka--blad { background: var(--dn-blad-tekst); }
.dn-kropka--neutralna { background: var(--dn-tekst-3); }

/* ==========================================================================
   PLAKIETKA — stany i role
   ========================================================================== */
.dn-plakietka {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-1);
  padding: 1px var(--dn-od-2) 2px;
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-pill);
  background: var(--dn-powierzchnia-2);
  color: var(--dn-tekst-2);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-srednia);
  line-height: var(--dn-lh-bazowy);
  white-space: nowrap;
}
.dn-plakietka > svg { width: 12px; height: 12px; }
.dn-plakietka--sukces { background: var(--dn-sukces-tlo); border-color: var(--dn-sukces-obrys); color: var(--dn-sukces-tekst); }
.dn-plakietka--ostrzezenie { background: var(--dn-ostrzezenie-tlo); border-color: var(--dn-ostrzezenie-obrys); color: var(--dn-ostrzezenie-tekst); }
.dn-plakietka--blad { background: var(--dn-blad-tlo); border-color: var(--dn-blad-obrys); color: var(--dn-blad-tekst); }
.dn-plakietka--informacja { background: var(--dn-informacja-tlo); border-color: var(--dn-informacja-obrys); color: var(--dn-informacja-tekst); }
.dn-plakietka--sygnal { background: var(--dn-sygnal-tlo); border-color: var(--dn-sygnal-obrys); color: var(--dn-sygnal); }

/* Plakietka roli okna — mono wersaliki (koordynator / wykonawca / walidator) */
.dn-plakietka--rola {
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  border-radius: var(--dn-r-xs);
}

/* ==========================================================================
   KARTA
   ========================================================================== */
.dn-karta {
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-powierzchnia);
  box-shadow: var(--dn-cien-1);
}
.dn-karta-cialo { padding: var(--dn-odstep-panel) var(--dn-od-4); }
.dn-karta-naglowek {
  display: flex;
  align-items: center;
  gap: var(--dn-od-2);
  padding: var(--dn-od-3) var(--dn-od-4);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
}
.dn-karta-tytul {
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-lg);
  font-weight: var(--dn-fw-polgruba);
  letter-spacing: var(--dn-ls-naglowek);
}

/* Karta interaktywna */
.dn-karta--klikalna {
  cursor: pointer;
  transition:
    border-color var(--dn-czas-2) var(--dn-ease),
    box-shadow var(--dn-czas-2) var(--dn-ease),
    transform var(--dn-czas-2) var(--dn-ease),
    background-color var(--dn-czas-2) var(--dn-ease);
}
.dn-karta--klikalna:hover {
  border-color: var(--dn-obrys-mocny);
  box-shadow: var(--dn-cien-2);
  transform: translateY(-1px);
}
.dn-karta--klikalna:active { transform: translateY(0); }
.dn-karta--wybrana { border-color: var(--dn-sygnal-obrys); background: var(--dn-sygnal-tlo); }

/* KARTA ŚRODOWISKA (E1, strefa 1) — wejście do środowiska.
   Spoczynek bez sygnału; najechanie/aktywność: wstęga górna 2 px. */
.dn-karta-srodowiska {
  position: relative;
  overflow: hidden;
  padding: var(--dn-od-6);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-xl);
  background: var(--dn-powierzchnia);
  cursor: pointer;
  transition:
    border-color var(--dn-czas-2) var(--dn-ease),
    box-shadow var(--dn-czas-2) var(--dn-ease),
    transform var(--dn-czas-2) var(--dn-ease);
}
.dn-karta-srodowiska::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--dn-wym-wstega);
  background: var(--dn-kropka);
  opacity: 0;
  transition: opacity var(--dn-czas-2) var(--dn-ease);
}
.dn-karta-srodowiska:hover,
.dn-karta-srodowiska[aria-current='true'] {
  border-color: var(--dn-obrys-mocny);
  box-shadow: var(--dn-cien-2);
  transform: translateY(-2px);
}
.dn-karta-srodowiska:hover::before,
.dn-karta-srodowiska[aria-current='true']::before { opacity: 1; }
.dn-karta-srodowiska-godlo {
  width: 40px; height: 40px;
  margin-bottom: var(--dn-od-4);
  color: var(--dn-tekst);
}
.dn-karta-srodowiska-tytul {
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-3xl);
  font-weight: var(--dn-fw-polgruba);
  letter-spacing: var(--dn-ls-naglowek);
  line-height: var(--dn-lh-ciasny);
}
.dn-karta-srodowiska-motto {
  margin-top: var(--dn-od-1);
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-sm);
  color: var(--dn-tekst-3);
}
.dn-karta-srodowiska-opis {
  margin-top: var(--dn-od-3);
  font-size: var(--dn-fs-base);
  color: var(--dn-tekst-2);
  max-width: 44ch;
}

/* KAFEL KOMPONENTU WŁASNEGO (E1, strefa 2) — budowanie, krój bazowy */
.dn-kafel {
  display: flex;
  align-items: center;
  gap: var(--dn-od-3);
  padding: var(--dn-od-4);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-panel);
  color: var(--dn-tekst);
  font-family: var(--dn-ff-bazowa);
  font-size: var(--dn-fs-base);
  line-height: var(--dn-lh-bazowy);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dn-czas-2) var(--dn-ease), background-color var(--dn-czas-2) var(--dn-ease);
}
.dn-kafel:hover { border-color: var(--dn-obrys-mocny); background: var(--dn-powierzchnia); }
.dn-kafel-ikona {
  display: grid;
  place-content: center;
  width: var(--dn-wym-awatar-lg);
  height: var(--dn-wym-awatar-lg);
  flex: none;
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-md);
  background: var(--dn-powierzchnia);
  color: var(--dn-tekst-2);
}
.dn-kafel-etykieta { font-weight: var(--dn-fw-polgruba); font-size: var(--dn-fs-base); }
.dn-kafel-opis { font-size: var(--dn-fs-sm); color: var(--dn-tekst-3); }

/* ==========================================================================
   TABELA — zwarta, robocza
   ========================================================================== */
.dn-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dn-fs-base);
}
.dn-tabela th {
  position: sticky;
  top: 0;
  z-index: var(--dn-z-przybornik);
  padding: 0 var(--dn-od-3);
  height: calc(var(--dn-wym-wiersz) - var(--dn-od-1));
  border-bottom: 1px solid var(--dn-obrys);
  background: var(--dn-panel);
  text-align: left;
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-srednia);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst-3);
  white-space: nowrap;
}
.dn-tabela td {
  height: var(--dn-wym-wiersz);
  padding: 0 var(--dn-od-3);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
  vertical-align: middle;
}
.dn-tabela tbody tr { transition: background-color var(--dn-czas-1) var(--dn-ease); }
.dn-tabela tbody tr:hover { background: var(--dn-hover); }
.dn-tabela tbody tr[aria-selected='true'] { background: var(--dn-sygnal-tlo); }
.dn-tabela td.dn-dane { font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); }

/* ==========================================================================
   ZAKŁADKI · KARTY SESJI
   ========================================================================== */
.dn-zakladki {
  display: flex;
  gap: var(--dn-od-1);
  border-bottom: 1px solid var(--dn-obrys);
}
.dn-zakladka {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  min-height: var(--dn-wym-kontrolka);
  padding: 0 var(--dn-od-3);
  border: none;
  background: transparent;
  color: var(--dn-tekst-2);
  font-size: var(--dn-fs-base);
  font-weight: var(--dn-fw-srednia);
  cursor: pointer;
  transition: color var(--dn-czas-2) var(--dn-ease), background-color var(--dn-czas-2) var(--dn-ease);
}
.dn-zakladka:hover { color: var(--dn-tekst); background: var(--dn-hover); }
.dn-zakladka[aria-selected='true'] { color: var(--dn-tekst); }
.dn-zakladka[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--dn-kropka);
}

/* Pas kart sesji (E2) — mechanika zakładek + wskaźnik pracy w tle */
.dn-karty-sesji {
  display: flex;
  align-items: stretch;
  gap: var(--dn-od-1);
  height: var(--dn-wym-pas-kart);
  padding: 0 var(--dn-od-2);
  background: var(--dn-powierzchnia-2);
  border-bottom: 1px solid var(--dn-obrys);
  overflow-x: auto;
  scrollbar-width: none;
}
.dn-karta-sesji {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  margin-top: var(--dn-od-1);
  padding: 0 var(--dn-od-2) 0 var(--dn-od-3);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--dn-r-sm) var(--dn-r-sm) 0 0;
  background: transparent;
  color: var(--dn-tekst-2);
  font-size: var(--dn-fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dn-czas-2) var(--dn-ease), color var(--dn-czas-2) var(--dn-ease);
}
.dn-karta-sesji:hover { background: var(--dn-hover); color: var(--dn-tekst); }
.dn-karta-sesji[aria-selected='true'] {
  background: var(--dn-powierzchnia);
  border-color: var(--dn-obrys);
  color: var(--dn-tekst);
}
/* wstęga aktywnej karty — sygnał */
.dn-karta-sesji[aria-selected='true']::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: var(--dn-wym-wstega);
  border-radius: var(--dn-r-sm) var(--dn-r-sm) 0 0;
  background: var(--dn-kropka);
}

/* ==========================================================================
   RAMA KOKPITU — pasek górny (zawsze atramentowy) + listwa ustawień
   ========================================================================== */
.dn-pasek {
  display: flex;
  align-items: center;
  gap: var(--dn-od-2);
  height: var(--dn-wym-pasek);
  padding: 0 var(--dn-od-3);
  background: var(--dn-rama);
  color: var(--dn-rama-tekst);
  border-bottom: 1px solid var(--dn-rama-obrys);
}
.dn-pasek-godlo {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  color: var(--dn-rama-tekst);
  text-decoration: none;
}
.dn-pasek-godlo:hover { color: var(--dn-rama-tekst); text-decoration: none; }
.dn-pasek-logotyp {
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-md);
  font-weight: var(--dn-fw-gruba);
  letter-spacing: 0.02em;
}
.dn-pasek-logotyp small {
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  font-weight: var(--dn-fw-srednia);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  color: var(--dn-rama-tekst-2);
  text-transform: uppercase;
  margin-left: var(--dn-od-1);
}
.dn-pasek-szukaj {
  flex: 1;
  max-width: 420px;
  min-height: 30px;
  padding: 0 var(--dn-od-3);
  border: 1px solid var(--dn-rama-obrys);
  border-radius: var(--dn-r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--dn-rama-tekst);
  font-size: var(--dn-fs-sm);
}
.dn-pasek-szukaj::placeholder { color: var(--dn-rama-tekst-2); }
.dn-pasek-szukaj:focus {
  outline: none;
  border-color: var(--dn-fokus);
  box-shadow: var(--dn-cien-sygnal);
}
.dn-pasek-prawa { margin-left: auto; display: flex; align-items: center; gap: var(--dn-od-1); }

/* Listwa ustawień (E1, strefa 3) — najniższa masa */
.dn-listwa {
  display: flex;
  align-items: center;
  gap: var(--dn-od-2);
  padding: var(--dn-od-2) var(--dn-od-3);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-powierzchnia-2);
}
.dn-listwa-pozycja {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  min-height: calc(var(--dn-wym-kontrolka) - var(--dn-od-1));
  padding: 0 var(--dn-od-3);
  border: none;
  border-radius: var(--dn-r-sm);
  background: transparent;
  color: var(--dn-tekst-2);
  font-size: var(--dn-fs-sm);
  cursor: pointer;
  transition: background-color var(--dn-czas-2) var(--dn-ease), color var(--dn-czas-2) var(--dn-ease);
}
.dn-listwa-pozycja:hover { background: var(--dn-hover); color: var(--dn-tekst); }

/* ==========================================================================
   BOCZNA NAWIGACJA MODUŁÓW (E2)
   ========================================================================== */
.dn-boczna {
  width: var(--dn-wym-boczna);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--dn-od-1);
  padding: var(--dn-od-3) var(--dn-od-2);
  background: var(--dn-panel);
  border-right: 1px solid var(--dn-obrys);
  overflow-y: auto;
}
.dn-boczna-naglowek {
  padding: var(--dn-od-2) var(--dn-od-3);
}
.dn-boczna-pozycja {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dn-od-3);
  min-height: var(--dn-wym-kontrolka);
  padding: 0 var(--dn-od-3);
  border: none;
  border-radius: var(--dn-r-sm);
  background: transparent;
  color: var(--dn-tekst-2);
  font-size: var(--dn-fs-base);
  font-weight: var(--dn-fw-srednia);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dn-czas-2) var(--dn-ease), color var(--dn-czas-2) var(--dn-ease);
}
.dn-boczna-pozycja:hover { background: var(--dn-hover); color: var(--dn-tekst); }
.dn-boczna-pozycja[aria-current='page'] {
  background: var(--dn-sygnal-tlo);
  color: var(--dn-tekst);
}
/* znacznik aktywności — krótka kreska sygnału zamiast pełnej wstęgi */
.dn-boczna-pozycja[aria-current='page']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: var(--dn-wym-wstega);
  height: 16px;
  border-radius: var(--dn-r-pill);
  background: var(--dn-kropka);
}
.dn-boczna-pozycja > svg { width: var(--dn-wym-ikona); height: var(--dn-wym-ikona); flex: none; }

/* ==========================================================================
   WPIS OKNA KOMUNIKACJI — dziewięciu nadawców (rozstrzygnięcie L-P-28)
   --------------------------------------------------------------------------
   Zasada: wspólne tło powierzchni; rozróżnienie niesie ZAWSZE komplet:
   ikona w medalionie + etykieta nadawcy + klasa semantyczna krawędzi.
   Trzy klasy semantyczne (nie dziewięć barw):
     --czlowiek      atrament   (użytkownik)
     --inteligencja  sygnał     (model · agent · Coordinator · Executor · Validator)
     --system        neutralna  (Automation · Always On Display · wynik narzędzia)
   Rola w obrębie klasy różnicuje się ikoną i plakietką roli, nie kolorem.
   ========================================================================== */
.dn-wpis {
  position: relative;
  display: grid;
  grid-template-columns: var(--dn-wym-awatar-sm) 1fr;
  gap: var(--dn-od-2) var(--dn-od-3);
  max-width: 860px;
  padding: var(--dn-od-3) var(--dn-od-4);
  border: 1px solid var(--dn-obrys-subtelny);
  border-left: 2px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-md);
  background: var(--dn-powierzchnia);
}
.dn-wpis-medalion {
  display: grid;
  place-content: center;
  width: var(--dn-wym-awatar-sm);
  height: var(--dn-wym-awatar-sm);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-sm);
  background: var(--dn-powierzchnia-2);
  color: var(--dn-tekst-2);
}
.dn-wpis-medalion > svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); }
.dn-wpis-tozsamosc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dn-od-2);
}
.dn-wpis-nadawca {
  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);
}
.dn-wpis-godzina {
  margin-left: auto;
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  color: var(--dn-tekst-3);
}
.dn-wpis-tresc {
  grid-column: 2;
  font-size: var(--dn-fs-md);
  line-height: var(--dn-lh-luzny);
  white-space: pre-wrap;
  word-break: break-word;
}

/* klasa: człowiek — atrament */
.dn-wpis--czlowiek { border-left-color: var(--dn-atrament); }
.dn-wpis--czlowiek .dn-wpis-medalion {
  background: var(--dn-atrament);
  border-color: var(--dn-atrament);
  color: var(--dn-atrament-tekst);
}
/* klasa: inteligencja — sygnał */
.dn-wpis--inteligencja { border-left-color: var(--dn-sygnal-wypelnienie); }
.dn-wpis--inteligencja .dn-wpis-medalion {
  background: var(--dn-sygnal-tlo);
  border-color: var(--dn-sygnal-obrys);
  color: var(--dn-sygnal);
}
/* klasa: system — neutralna, tło wycofane */
.dn-wpis--system { background: transparent; border-left-color: var(--dn-obrys-mocny); }

/* wpis pracujący — kropka tętna przy nadawcy */
.dn-wpis--pracuje .dn-wpis-nadawca::after {
  content: '';
  display: inline-block;
  width: var(--dn-wym-kropka);
  height: var(--dn-wym-kropka);
  margin-left: var(--dn-od-1);
  border-radius: var(--dn-r-pill);
  background: var(--dn-kropka);
  animation: dn-tetno var(--dn-czas-tetno) var(--dn-ease) infinite;
  vertical-align: 1px;
}

/* ==========================================================================
   MONITOR WYKONANIA · KOLEJKA KROKÓW (E3, E5)
   ========================================================================== */
.dn-postep {
  display: flex;
  align-items: center;
  gap: var(--dn-od-3);
}
.dn-postep-tor {
  flex: 1;
  height: 4px;
  border-radius: var(--dn-r-pill);
  background: var(--dn-powierzchnia-2);
  overflow: hidden;
}
.dn-postep-wartosc {
  height: 100%;
  border-radius: var(--dn-r-pill);
  background: var(--dn-sygnal-wypelnienie);
  transition: width var(--dn-czas-3) var(--dn-ease);
}
.dn-postep-etykieta {
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  color: var(--dn-tekst-2);
  white-space: nowrap;
}

/* Kolejka kroków — trzy wyjścia weryfikacji (rozstrzygnięcie L-P-33):
   poprawny → zieleń · błędy + licznik obiegów → bursztyn · zdarzenie
   nieoczekiwane → czerwień + wstrzymanie kolejki. Zawsze ikona + etykieta. */
.dn-kolejka { display: flex; flex-direction: column; }
.dn-krok {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--dn-od-3);
  min-height: var(--dn-wym-wiersz);
  padding: 0 var(--dn-od-3);
  border-left: 2px solid var(--dn-obrys);
  font-size: var(--dn-fs-base);
}
.dn-krok-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-3);
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
}
.dn-krok-znak > svg { width: 12px; height: 12px; }
.dn-krok-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-od-2);
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  color: var(--dn-tekst-3);
}
.dn-krok--pracuje { border-left-color: var(--dn-sygnal-wypelnienie); }
.dn-krok--pracuje .dn-krok-znak { border-color: var(--dn-sygnal-obrys); color: var(--dn-sygnal); }
.dn-krok--poprawny { border-left-color: var(--dn-sukces-obrys); }
.dn-krok--poprawny .dn-krok-znak {
  background: var(--dn-sukces-tlo);
  border-color: var(--dn-sukces-obrys);
  color: var(--dn-sukces-tekst);
}
.dn-krok--bledy { border-left-color: var(--dn-ostrzezenie-obrys); }
.dn-krok--bledy .dn-krok-znak {
  background: var(--dn-ostrzezenie-tlo);
  border-color: var(--dn-ostrzezenie-obrys);
  color: var(--dn-ostrzezenie-tekst);
}
.dn-krok--wstrzymany { border-left-color: var(--dn-blad-obrys); }
.dn-krok--wstrzymany .dn-krok-znak {
  background: var(--dn-blad-tlo);
  border-color: var(--dn-blad-obrys);
  color: var(--dn-blad-tekst);
}

/* ==========================================================================
   MODAL (dialog) · NAKŁADKA
   ========================================================================== */
.dn-modal {
  width: min(var(--dn-wym-modal), calc(100vw - var(--dn-od-8)));
  max-height: min(80dvh, 720px);
  padding: 0;
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-panel);
  color: var(--dn-tekst);
  box-shadow: var(--dn-cien-lg);
}
.dn-modal::backdrop { background: var(--dn-nakladka); backdrop-filter: blur(2px); }
.dn-modal[open] { animation: dn-wejscie var(--dn-czas-3) var(--dn-ease); }
@keyframes dn-wejscie {
  from { opacity: 0; transform: translateY(var(--dn-od-2)) scale(0.98); }
}
.dn-modal-naglowek {
  display: flex;
  align-items: center;
  gap: var(--dn-od-2);
  padding: var(--dn-od-4) var(--dn-od-5);
  border-bottom: 1px solid var(--dn-obrys-subtelny);
}
.dn-modal-tytul {
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-xl);
  font-weight: var(--dn-fw-polgruba);
  letter-spacing: var(--dn-ls-naglowek);
}
.dn-modal-cialo { padding: var(--dn-od-5); overflow-y: auto; }
.dn-modal-stopka {
  display: flex;
  justify-content: flex-end;
  gap: var(--dn-od-2);
  padding: var(--dn-od-4) var(--dn-od-5);
  border-top: 1px solid var(--dn-obrys-subtelny);
  background: var(--dn-powierzchnia-2);
  border-radius: 0 0 var(--dn-r-lg) var(--dn-r-lg);
}

/* ==========================================================================
   POWIADOMIENIE (toast)
   ========================================================================== */
.dn-toasty {
  position: fixed;
  inset: auto var(--dn-od-4) var(--dn-od-4) auto;
  z-index: var(--dn-z-powiadomienie);
  display: flex;
  flex-direction: column;
  gap: var(--dn-od-2);
}
.dn-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--dn-od-3);
  min-width: var(--dn-wym-toast-min);
  max-width: var(--dn-wym-toast-max);
  padding: var(--dn-od-3) var(--dn-od-4);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-md);
  background: var(--dn-panel);
  box-shadow: var(--dn-cien-3);
  animation: dn-wejscie var(--dn-czas-3) var(--dn-ease);
}
.dn-toast > svg { width: var(--dn-wym-ikona); height: var(--dn-wym-ikona); margin-top: 1px; }
.dn-toast-tytul { font-weight: var(--dn-fw-polgruba); font-size: var(--dn-fs-base); }
.dn-toast-tresc { font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); }
.dn-toast--sukces { border-left: 2px solid var(--dn-sukces-tekst); }
.dn-toast--sukces > svg { color: var(--dn-sukces-tekst); }
.dn-toast--ostrzezenie { border-left: 2px solid var(--dn-ostrzezenie-tekst); }
.dn-toast--ostrzezenie > svg { color: var(--dn-ostrzezenie-tekst); }
.dn-toast--blad { border-left: 2px solid var(--dn-blad-tekst); }
.dn-toast--blad > svg { color: var(--dn-blad-tekst); }
.dn-toast--informacja { border-left: 2px solid var(--dn-informacja-tekst); }
.dn-toast--informacja > svg { color: var(--dn-informacja-tekst); }

/* ==========================================================================
   DYMEK OBJAŚNIENIA (tooltip)
   ========================================================================== */
.dn-tooltip { position: relative; display: inline-flex; }
.dn-tooltip-tresc {
  position: absolute;
  bottom: calc(100% + var(--dn-od-2));
  left: 50%;
  z-index: var(--dn-z-tooltip);
  max-width: 260px;
  padding: var(--dn-od-2) var(--dn-od-3);
  border-radius: var(--dn-r-sm);
  background: var(--dn-rama);
  color: var(--dn-rama-tekst);
  box-shadow: var(--dn-cien-3);
  font-size: var(--dn-fs-sm);
  line-height: var(--dn-lh-bazowy);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--dn-od-1));
  transition:
    opacity var(--dn-czas-2) var(--dn-ease),
    transform var(--dn-czas-2) var(--dn-ease),
    visibility var(--dn-czas-2) var(--dn-ease);
  pointer-events: none;
}
.dn-tooltip:hover .dn-tooltip-tresc,
.dn-tooltip:focus-within .dn-tooltip-tresc {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   AWATAR · SPINNER · PUSTY STAN
   ========================================================================== */
.dn-awatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dn-wym-awatar);
  height: var(--dn-wym-awatar);
  flex: none;
  border-radius: var(--dn-r-pill);
  background: var(--dn-grad-atrament);
  color: var(--dn-szary-100);
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-sm);
  font-weight: var(--dn-fw-polgruba);
  overflow: hidden;
}
.dn-awatar--sm { width: var(--dn-wym-awatar-sm); height: var(--dn-wym-awatar-sm); font-size: var(--dn-fs-xs); }
.dn-awatar--lg { width: var(--dn-wym-awatar-lg); height: var(--dn-wym-awatar-lg); font-size: var(--dn-fs-md); }
.dn-awatar--kwadrat { border-radius: var(--dn-r-sm); }
/* jednostka inteligencji (agent/model) — rdzeń sygnałowy */
.dn-awatar--inteligencja { background: var(--dn-grad-sygnal); color: var(--dn-szary-0); }
.dn-awatar-stan {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 8px; height: 8px;
  border-radius: var(--dn-r-pill);
  background: var(--dn-sukces-tekst);
  box-shadow: 0 0 0 2px var(--dn-powierzchnia);
}

.dn-spinner {
  display: inline-block;
  width: var(--dn-wym-spinner);
  height: var(--dn-wym-spinner);
  flex: none;
  border: 2px solid var(--dn-obrys-mocny);
  border-top-color: var(--dn-sygnal-wypelnienie);
  border-radius: var(--dn-r-pill);
  animation: dn-obrot 0.8s linear infinite;
}
@keyframes dn-obrot { to { transform: rotate(360deg); } }

.dn-pusty-stan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dn-od-2);
  padding: var(--dn-od-10) var(--dn-od-5);
  text-align: center;
  color: var(--dn-tekst-3);
}
.dn-pusty-stan > svg { width: 28px; height: 28px; }
.dn-pusty-stan-tytul {
  font-family: var(--dn-ff-naglowek);
  font-size: var(--dn-fs-lg);
  font-weight: var(--dn-fw-polgruba);
  color: var(--dn-tekst-2);
}
.dn-pusty-stan-opis { max-width: 40ch; font-size: var(--dn-fs-sm); }

/* ==========================================================================
   POLE WPISYWANIA PROMPTU (E3) — grot ❯ jako sygnatura wejścia
   ========================================================================== */
.dn-prompt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--dn-od-2);
  padding: var(--dn-od-2);
  border: 1px solid var(--dn-obrys-mocny);
  border-radius: var(--dn-r-md);
  background: var(--dn-powierzchnia);
  transition: border-color var(--dn-czas-2) var(--dn-ease), box-shadow var(--dn-czas-2) var(--dn-ease);
}
.dn-prompt:focus-within {
  border-color: var(--dn-fokus);
  box-shadow: var(--dn-cien-sygnal);
}
.dn-prompt-grot {
  align-self: start;
  padding: var(--dn-od-2) 0 0 var(--dn-od-2);
  font-family: var(--dn-ff-mono);
  font-weight: var(--dn-fw-polgruba);
  color: var(--dn-kropka);
  user-select: none;
}
.dn-prompt-obszar {
  min-height: 40px;
  max-height: 160px;
  padding: var(--dn-od-2) 0;
  border: none;
  background: transparent;
  color: var(--dn-tekst);
  font-size: var(--dn-fs-md);
  line-height: var(--dn-lh-bazowy);
  resize: none;
}
.dn-prompt-obszar:focus { outline: none; }
.dn-prompt-obszar::placeholder { color: var(--dn-tekst-3); }

/* Przybornik promptu — załączniki, biblioteka, agent, model… */
.dn-przybornik {
  display: flex;
  align-items: center;
  gap: var(--dn-od-1);
  flex-wrap: wrap;
}

/* ==========================================================================
   ALWAYS ON DISPLAY — pływający awatar (E12)
   ========================================================================== */
.dn-aod {
  position: fixed;
  right: var(--dn-od-5);
  bottom: var(--dn-od-5);
  z-index: var(--dn-z-aod);
  display: flex;
  align-items: center;
  gap: var(--dn-od-3);
  padding: var(--dn-od-2) var(--dn-od-4) var(--dn-od-2) var(--dn-od-2);
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-pill);
  background: var(--dn-panel);
  box-shadow: var(--dn-cien-3);
}
.dn-aod-rdzen {
  position: relative;
  display: grid;
  place-content: center;
  width: var(--dn-wym-awatar-lg);
  height: var(--dn-wym-awatar-lg);
  border-radius: var(--dn-r-pill);
  background: var(--dn-grad-sygnal);
  color: var(--dn-szary-0);
}
.dn-aod-rdzen::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--dn-sygnal-obrys);
  animation: dn-tetno var(--dn-czas-tetno) var(--dn-ease) infinite;
}
.dn-aod-tresc { font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); max-width: 36ch; }
.dn-aod-tresc strong { color: var(--dn-tekst); font-weight: var(--dn-fw-polgruba); }