/*
  Ekran startowy: logo i wskaźnik obrotu, widoczne zanim Vue podmieni zawartość
  #app. Osobny arkusz wczytywany <link>-iem w index.html — musi być na ekranie,
  zanim ruszy bundle aplikacji, więc nie może iść przez Vite. Kolory podaje
  index.html w --initial-loader-bg i --initial-loader-color.
*/

body {
  margin: 0;
}

/* Pasek przewijania zawsze widoczny — inaczej strona przeskakuje w bok o jego
   szerokość w chwili, gdy pierwsza tabela urośnie poza wysokość ekranu. */
html {
  overflow-y: scroll;
}

#loading-bg {
  position: fixed;
  display: grid;
  gap: 1.5rem;
  background: var(--initial-loader-bg, #fff);
  inset: 0;
  justify-items: center;
  place-content: center;
}

/*
  Pierścień z jedną krawędzią w kolorze marki. Obrót zastępuje pasek postępu,
  bo postępu nie ma czym zmierzyć — to czas do pierwszego renderu Vue, rzędu
  kilkuset milisekund.
*/
.loading {
  border: 3px solid rgb(255 255 255 / 18%);
  border-block-start-color: var(--initial-loader-color, #888);
  border-radius: 50%;
  animation: obrot-wskaznika 0.9s linear infinite;
  block-size: 3rem;
  box-sizing: border-box;
  inline-size: 3rem;
}

@keyframes obrot-wskaznika {
  to {
    transform: rotate(1turn);
  }
}

/* Wyłączone animacje w systemie: zostaje sam pierścień, bez wirowania. */
@media (prefers-reduced-motion: reduce) {
  .loading {
    animation: none;
  }
}