/* ==========================================================================
   SZKIELET: OKNA I KOMUNIKATY
   Okno modalne, powiadomienia, postep, ladowanie.

   stan-nieobecny: readonly, error | powod: okna i komunikaty nie sa polami,
   wiec nie maja stanu odczytu ani bledu walidacji. Blad jest TONEM
   powiadomienia, czyli znaczeniem komunikatu, nie stanem kontrolki.
   ========================================================================== */

/* --- okno. Natywny dialog, przyslona z ::backdrop. ---------------------- */
.k-okno {
  inline-size: min(92vw, calc(var(--u) * 130));
  max-block-size: 85vh;
  padding: 0;
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  background: var(--plyta);
  color: var(--atrament);
  box-shadow: var(--cien-okno);
}

.k-okno::backdrop {
  background: var(--przyslona);
}

.k-okno[open] {
  animation: k-okno-wejscie var(--czas-3) var(--wyjscie);
}

@keyframes k-okno-wejscie {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

.k-okno-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-3);
  padding: var(--odstep-4) var(--odstep-6);
  border-block-end: 1px solid var(--kreska);
}

.k-okno-tytul {
  margin: 0;
  font: var(--tekst-naglowek);
  color: var(--atrament);
  text-wrap: balance;
}

.k-okno-zamknij {
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 8);
  block-size: calc(var(--u) * 8);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-okno-zamknij:hover:not(:disabled) {
  background: var(--plyta-2);
  color: var(--atrament);
}

.k-okno-zamknij:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-okno-zamknij:active:not(:disabled) {
  transform: var(--wcisniecie);
}

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

.k-okno-cialo {
  padding: var(--odstep-6);
  overflow-y: auto;
  font: var(--tekst-wartosc);
  max-inline-size: 100%;
}

.k-okno-cialo[aria-busy="true"] {
  opacity: .6;
}

.k-okno-stopka {
  display: flex;
  justify-content: flex-end;
  gap: var(--odstep-2);
  padding: var(--odstep-4) var(--odstep-6);
  border-block-start: 1px solid var(--kreska);
  background: var(--papier);
  border-end-start-radius: var(--promien-2);
  border-end-end-radius: var(--promien-2);
}

/* --- powiadomienia. Rejon w prawym dolnym rogu, nad wszystkim
       procz dymka. ------------------------------------------------------- */
.k-powiadomienia {
  position: fixed;
  inset-inline-end: var(--odstep-4);
  inset-block-end: var(--odstep-4);
  z-index: var(--warstwa-powiadomienie);
  display: grid;
  gap: var(--odstep-2);
  inline-size: min(92vw, calc(var(--u) * 100));
}

.k-powiadomienie {
  display: flex;
  align-items: center;
  gap: var(--odstep-3);
  padding: var(--odstep-3) var(--odstep-4);
  background: var(--plyta);
  border: 1px solid var(--kreska);
  border-inline-start: 3px solid var(--kreska-2);
  border-radius: var(--promien-2);
  box-shadow: var(--cien-lista);
  animation: k-powiadomienie-wejscie var(--czas-3) var(--wyjscie);
}

@keyframes k-powiadomienie-wejscie {
  from { opacity: 0; transform: translateY(calc(var(--u) * 2)); }
  to   { opacity: 1; transform: translateY(0); }
}

.k-powiadomienie.k-ton-powodzenie { border-inline-start-color: var(--powodzenie); }
.k-powiadomienie.k-ton-ostrzezenie { border-inline-start-color: var(--ostrzezenie); }
.k-powiadomienie.k-ton-alarm { border-inline-start-color: var(--alarm); }

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

.k-powiadomienie-dzialanie {
  font: var(--tekst-wartosc);
  font-weight: 600;
  color: var(--marka-ciemna);
  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-powiadomienie-dzialanie:hover {
  background: var(--marka-mgla);
}

.k-powiadomienie-dzialanie:focus-visible,
.k-powiadomienie-zamknij:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-powiadomienie-dzialanie:active,
.k-powiadomienie-zamknij:active {
  transform: var(--wcisniecie);
}

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

.k-powiadomienie-zamknij:hover {
  background: var(--plyta-2);
}

/* --- postep. Liczba jest tekstem obok toru, nie tylko szerokoscia. ------ */
.k-postep {
  display: flex;
  align-items: center;
  gap: var(--odstep-3);
}

.k-postep-etykieta {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-postep-tor {
  flex: 1;
  block-size: calc(var(--u) * 2);
  background: var(--plyta-2);
  border-radius: var(--promien-pelny);
  overflow: hidden;
}

.k-postep-wypelnienie {
  block-size: 100%;
  background: var(--marka);
  border-radius: var(--promien-pelny);
}

/* brak miary: wedrujacy odcinek na transformacji, nie na szerokosci */
.k-postep-tor[data-bez-miary="tak"] .k-postep-wypelnienie {
  inline-size: 30%;
  animation: k-postep-wedrowka 1.4s var(--wyjscie) infinite;
}

@keyframes k-postep-wedrowka {
  from { transform: translateX(-110%); }
  to   { transform: translateX(430%); }
}

.k-postep-liczba {
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  color: var(--atrament);
  min-inline-size: calc(var(--u) * 12);
  text-align: end;
}

/* --- ladowanie. Krag plus tekst, bo sam krag nie mowi, co sie wczytuje. - */
.k-ladowanie {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-2);
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-ladowanie-krag {
  inline-size: calc(var(--u) * 4);
  block-size: calc(var(--u) * 4);
  border: 2px solid var(--kreska-2);
  border-block-start-color: var(--marka);
  border-radius: var(--promien-pelny);
  animation: k-ladowanie-obrot .9s linear infinite;
}

@keyframes k-ladowanie-obrot {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .k-okno[open],
  .k-powiadomienie {
    animation: none;
  }
  .k-okno-zamknij,
  .k-powiadomienie-dzialanie {
    transition: none;
  }
  .k-okno-zamknij:active:not(:disabled),
  .k-powiadomienie-dzialanie:active,
  .k-powiadomienie-zamknij:active {
    transform: none;
  }
  .k-postep-tor[data-bez-miary="tak"] .k-postep-wypelnienie {
    animation: none;
    inline-size: 100%;
    opacity: .4;
  }
  .k-ladowanie-krag {
    animation: none;
    border-block-start-color: var(--kreska-2);
  }
}