/* ==========================================================================
   SZKIELET: WIDOKI
   Krok obiegu, historia elementu, sekcja zwijana, drzewo.

   stan-nieobecny: readonly, error | powod: widoki pokazuja stan elementu
   i nie przyjmuja wprowadzania, wiec nie maja stanu odczytu ani bledu
   walidacji. Ton wpisu historii jest znaczeniem, nie stanem.
   ========================================================================== */

/* --- krok obiegu. 722 kroki w korpusie. --------------------------------- */
.k-krok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.k-krok-pozycja {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-krok-pozycja + .k-krok-pozycja::before {
  content: "";
  inline-size: calc(var(--u) * 6);
  block-size: 1px;
  background: var(--kreska-2);
  margin-inline-end: var(--odstep-2);
}

.k-krok-znak {
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 6);
  block-size: calc(var(--u) * 6);
  font: var(--tekst-pomoc);
  font-variant-numeric: tabular-nums;
  border-radius: var(--promien-pelny);
  border: 1px solid var(--kreska-2);
  background: var(--plyta);
  color: var(--atrament-2);
}

.k-krok-pozycja[data-stan="zrobiony"] .k-krok-znak {
  background: var(--marka-mgla);
  border-color: var(--marka);
  color: var(--marka-ciemna);
}

.k-krok-pozycja[data-stan="biezacy"] {
  color: var(--atrament);
  font-weight: 600;
}

.k-krok-pozycja[data-stan="biezacy"] .k-krok-znak {
  background: var(--marka);
  border-color: var(--marka);
  color: var(--plyta);
}

/* pominiety to osobny stan, nie brak. Audyt pyta, gdzie znikl krok. */
.k-krok-pozycja[data-stan="pominiety"] {
  color: var(--atrament-3);
}

.k-krok-pozycja[data-stan="pominiety"] .k-krok-znak {
  border-style: dashed;
  color: var(--atrament-3);
}

.k-krok-pozycja[data-stan="pominiety"] .k-krok-etykieta {
  text-decoration: line-through;
  text-decoration-color: var(--kreska-2);
}

/* --- historia elementu --------------------------------------------------- */
.k-historia {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-historia-wpis {
  display: grid;
  grid-template-columns: calc(var(--u) * 28) 1fr;
  gap: var(--odstep-3);
  position: relative;
  padding-block: var(--odstep-2);
  padding-inline-start: var(--odstep-4);
  border-inline-start: 2px solid var(--kreska);
}

.k-historia-wpis::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--u) * -1 - 1px);
  inset-block-start: calc(var(--odstep-2) + var(--u));
  inline-size: calc(var(--u) * 2);
  block-size: calc(var(--u) * 2);
  border-radius: var(--promien-pelny);
  background: var(--kreska-2);
}

.k-historia-wpis.k-ton-powodzenie::before { background: var(--powodzenie); }
.k-historia-wpis.k-ton-ostrzezenie::before { background: var(--ostrzezenie); }
.k-historia-wpis.k-ton-alarm::before { background: var(--alarm); }

.k-historia-kiedy {
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  color: var(--atrament-2);
}

.k-historia-tresc {
  font: var(--tekst-wartosc);
  color: var(--atrament);
}

.k-historia-kto {
  font-weight: 600;
}

.k-historia-szczegol {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
  margin-block-start: var(--odstep-1);
  max-inline-size: 68ch;
  text-wrap: pretty;
}

.k-historia-pusto {
  font: var(--tekst-pomoc);
  color: var(--atrament-3);
  font-style: italic;
  padding: var(--odstep-3);
}

/* --- sekcja zwijana. Natywne details i summary. -------------------------- */
.k-sekcja {
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  background: var(--plyta);
}

.k-sekcja-naglowek {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  padding: var(--odstep-3) var(--odstep-4);
  font: var(--tekst-wartosc);
  font-weight: 600;
  color: var(--atrament);
  cursor: pointer;
  list-style: none;
  border-radius: var(--promien-2);
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-sekcja-naglowek::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  border-block-start: 4px solid transparent;
  border-block-end: 4px solid transparent;
  border-inline-start: 5px solid var(--atrament-2);
  transition: transform var(--czas-2) var(--wyjscie);
}

.k-sekcja[open] > .k-sekcja-naglowek::before {
  transform: rotate(90deg);
}

.k-sekcja-naglowek:hover {
  background: var(--plyta-2);
}

.k-sekcja-naglowek:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

.k-sekcja-naglowek:active {
  transform: var(--wcisniecie);
}

.k-sekcja-licznik {
  margin-inline-start: auto;
  font: var(--tekst-pomoc);
  font-variant-numeric: tabular-nums;
  color: var(--atrament-2);
  background: var(--plyta-2);
  border-radius: var(--promien-pelny);
  padding-inline: var(--odstep-2);
}

.k-sekcja-cialo {
  padding: var(--odstep-2) var(--odstep-4) var(--odstep-4);
}

/* --- drzewo --------------------------------------------------------------- */
.k-drzewo,
.k-drzewo-grupa {
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-drzewo-grupa {
  padding-inline-start: var(--odstep-6);
}

.k-drzewo-wiersz {
  display: flex;
  align-items: center;
  gap: var(--odstep-1);
}

.k-drzewo-przelacznik {
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 5);
  block-size: calc(var(--u) * 5);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  cursor: pointer;
}

.k-drzewo-przelacznik .k-ikona {
  transition: transform var(--czas-2) var(--wyjscie);
}

.k-drzewo-wezel[aria-expanded="true"] > .k-drzewo-wiersz .k-drzewo-przelacznik .k-ikona {
  transform: rotate(90deg);
}

.k-drzewo-przelacznik:hover {
  background: var(--plyta-2);
}

.k-drzewo-przelacznik:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

.k-drzewo-wciecie {
  inline-size: calc(var(--u) * 5);
  flex: none;
}

.k-drzewo-etykieta {
  display: flex;
  align-items: baseline;
  gap: var(--odstep-2);
  flex: 1;
  min-inline-size: 0;
  text-align: start;
  font: var(--tekst-wartosc);
  color: var(--atrament);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  padding: var(--odstep-1) var(--odstep-2);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-drzewo-etykieta:hover:not(:disabled) {
  background: var(--marka-mgla);
}

.k-drzewo-etykieta:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

.k-drzewo-etykieta:active:not(:disabled) {
  transform: var(--wcisniecie);
}

.k-drzewo-etykieta:disabled {
  color: var(--atrament-3);
  cursor: not-allowed;
}

.k-drzewo-wezel[aria-selected="true"] > .k-drzewo-wiersz .k-drzewo-etykieta {
  background: var(--marka-mgla);
  color: var(--marka-ciemna);
  font-weight: 600;
}

.k-drzewo-wezel[aria-busy="true"] > .k-drzewo-wiersz {
  opacity: .6;
}

.k-drzewo-opis {
  margin-inline-start: auto;
  font: var(--tekst-pomoc);
  font-variant-numeric: tabular-nums;
  color: var(--atrament-2);
}

@media (prefers-reduced-motion: reduce) {
  .k-sekcja-naglowek,
  .k-sekcja-naglowek::before,
  .k-drzewo-przelacznik .k-ikona,
  .k-drzewo-etykieta {
    transition: none;
  }
  .k-sekcja-naglowek:active,
  .k-drzewo-etykieta:active:not(:disabled) {
    transform: none;
  }
}