/* ===================== Panel klienta =====================
   Osobny arkusz, bo licencje dotyczą wszystkich programów Mini, a nie samego MLT: kafelek musi
   dać się dołożyć do dowolnej podstrony bez wciągania stylów jednego programu.
   ========================================================================= */

/* Para z „Otwórz czat": ten sam kształt i ta sama waga, tylko przy górnej krawędzi zamiast dolnej.
   Wyjęty z paska nagłówka, bo tam przy szerokościach około 1000 px rozpychał nawigację do dwóch
   wierszy i łamał cały pasek.

   Poniżej nagłówka, nie na nim: pasek jest przyklejony do góry i po prawej ma już przełącznik
   języka, więc kafelek położony dokładnie w rogu zachodziłby na PL/EN przy każdym przewinięciu. */
.client-launch {
  /* Odstęp od krawędzi oraz miejsce na dodatkowy przyklejony pasek, jeśli podstrona taki ma.
     W zmiennych, żeby wyjątki niżej zmieniały jedną liczbę, a nie całe wyliczenie. */
  --odstep: 22px;
  --pod-paskiem: 0px;

  position: fixed;
  /* Odsunięty o szerokość paska bocznego: bez tego chowa się za nim, bo position:fixed nie
     zna odstępu, którym treść jest odsunięta od krawędzi. */
  right: calc(var(--pasek-szer) + var(--odstep));
  top: calc(var(--header-h) + var(--pod-paskiem) + var(--odstep));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--accent);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.client-launch:hover {
  background: var(--accent);
  color: #10151A;
}

/* Opisy, zrzuty ekranu i zmiany mają pod nagłówkiem własny przyklejony pasek z zakładkami
   programów, a tuż pod nim zaczyna się już nazwa programu. W prawym górnym rogu nie ma tam więc
   wolnego miejsca: kafelek zakrywałby albo zakładkę, albo nagłówek — i to na stałe, bo pasek
   zakładek jest przyklejony i nie schodzi przy przewijaniu.

   Na tych trzech schodzi do dolnego rogu, który jest pusty. To ten sam kafelek, tylko postawiony
   tam, gdzie niczego nie zasłania. Dolny róg jest wolny, bo czat mają wyłącznie podstrony MLT. */
body[data-page="descriptions"] .client-launch,
body[data-page="screenshots"] .client-launch,
body[data-page="changelogs"] .client-launch {
  top: auto;
  bottom: var(--odstep);
}

/* Na wąskim ekranie mniejszy, ale nadal podpisany: ikony w nim nie ma, więc sam napis jest
   jedyną rzeczą, po której da się poznać, dokąd prowadzi. */
@media (max-width: 720px) {
  .client-launch {
    --odstep: 12px;
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* Wyróżniony akapit na samej stronie panelu. Ten sam wygląd co .docs-note w instrukcjach MLT,
   powtórzony tutaj, bo strona panelu nie wciąga arkusza jednego programu. */
.panel-note {
  background: var(--bg-panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin: 16px 0;
}

.panel-note p { margin: 0; }

/* ================= Pasek przy prawej krawędzi =============================================
   Jest na każdej stronie i niczego nie zasłania: treść jest odsunięta o jego szerokość, więc
   pasek stoi we własnej szpalcie, a nie na tekście.

   Układ jest trzyczęściowy i to jest jego treść: panel klienta zawsze na samej górze, licencje
   zawsze na samym dole, a między nimi lista projektów, która może rosnąć. Dzięki temu dwie stałe
   pozycje są zawsze w tym samym miejscu, niezależnie od tego, ilu programów dorobimy się później.

   Napisy poziome, więc pasek musi być szerszy niż przy obróconych — i to jest świadomy koszt.
   Obrócony napis czyta się wolniej, a pasek ma być drogą na skróty, nie łamigłówką.
   ========================================================================================= */

:root { --pasek-szer: 104px; }

body { padding-right: var(--pasek-szer); }

.pasek-boczny {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  width: var(--pasek-szer);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}

/* Środek rośnie, góra i dół zostają na swoim miejscu. */
.pasek-projekty {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 8px;

  /* Pasek przewijania pojawia się dopiero wtedy, gdy jest co przewijać — przy jednym projekcie
     nie ma go wcale. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.pasek-projekty::-webkit-scrollbar { width: 6px; }
.pasek-projekty::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.pasek-projekty::-webkit-scrollbar-track { background: transparent; }

.pasek-staly {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s, background .15s;
}

.pasek-staly:hover { color: var(--accent); background: var(--bg-control); }
.pasek-staly.tutaj { color: var(--accent); }

/* Poziomo i z możliwością złamania na dwa wiersze: „Panel klienta" to dwa słowa i przy węższym
   pasku musi mieć gdzie się zmieścić. */
.pasek-etykieta {
  font-size: .78rem;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
}

.pasek-kreska {
  flex: none;
  height: 1px;
  margin: 0 8px;
  background: var(--border);
}

/* Znak rodziny nad listą projektów. Sam znak, bez podpisu: nazwa „Mini Software Developer" nie
   mieści się w pasku poziomo, a to i tak jest droga powrotna, nie cel sam w sobie.

   Stoi tutaj, bo na podstronach MLT nagłówek należy już do programu i logo rodziny nie ma tam
   miejsca. Na pozostałych stronach powtarza to, co jest w nagłówku — cena za pasek, który wygląda
   tak samo wszędzie. */
.pasek-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.pasek-logo:hover { border-color: var(--accent); background: var(--bg-control); }

/* Logo jest napisem, nie znaczkiem: proporcja 190:56, więc dostaje całą szerokość kafelka,
   a wysokość dobiera się sama. Przy wąskim pasku napis robi się drobny — zostaje niebieska
   sztabka i kształt, po których i tak się je poznaje. */
.pasek-logo img { display: block; width: 100%; height: auto; }

/* Kafelek projektu: ikona, skrót, pełna nazwa — jeden przycisk, trzy wiersze.
   Wzorzec na przyszłe programy: każdy dostaje tu taki sam kafelek, więc pasek rośnie w dół
   bez zmiany czegokolwiek w układzie. */
.pasek-projekt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}

.pasek-projekt:hover { color: var(--accent); border-color: var(--accent); }
.pasek-projekt.tutaj { color: var(--accent); border-color: var(--accent); background: var(--bg-control); }

.pasek-projekt-ikona {
  display: block;
  width: 30px;
  height: 25px;
}

.pasek-projekt-skrot {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Pełna nazwa bywa długa i nie ma jej gdzie łamać — MiniLocalTalk to jedno słowo. Mniejszy
   stopień pisma jest tu jedynym wyjściem, jeśli pasek nie ma być jeszcze szerszy. */
.pasek-projekt-nazwa {
  font-size: .58rem;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

/* Na wąskim ekranie pasek zwęża się, ale zostaje. Ukrycie go zabrałoby telefonowi jedyne dojście
   do panelu klienta i licencji — trzy podstrony z zakładkami nie mają nawet stopki, w której
   można by je powtórzyć.

   Schodzi pełna nazwa projektu, zostaje ikona i skrót: to wystarczy, żeby poznać, dokąd się
   idzie, a pasek zajmuje wtedy tyle, ile poprzednio zajmował z obróconym napisem. */
@media (max-width: 900px) {
  /* 48 px, nie więcej: przy 375 px szerokości ekranu każdy piksel zabrany treści wypycha
     kafelki poza szpaltę. Zmierzone — przy 62 px karta trasy wystawała o 11 px. */
  :root { --pasek-szer: 48px; }
  .pasek-etykieta { font-size: .62rem; }
  .pasek-staly { padding: 12px 4px; }
  .pasek-projekty { padding: 8px 5px; }
  .pasek-projekt { padding: 8px 2px; }
  .pasek-projekt-ikona { width: 22px; height: 18px; }
  .pasek-projekt-skrot { font-size: .64rem; }
  .pasek-projekt-nazwa { display: none; }
}

/* ================= Telefon: pasek chowany za krawędź ======================================
   Na telefonie stała szpalta na pasek to zbyt duża część ekranu — 48 px z 375 to jedna ósma
   szerokości, oddana rzeczy, z której korzysta się rzadko. Dlatego pasek schodzi za krawędź
   i wraca tym samym przyciskiem, który rozwija menu (patrz main.js).

   Skoro pojawia się na żądanie, może być szeroki i może nachodzić na tekst: przez chwilę, gdy
   jest otwarty, to on jest treścią. Dzięki temu mieszczą się pełne podpisy, których w wersji
   przyklejonej nie dało się przeczytać.
   ========================================================================================= */
@media (max-width: 720px) {
  /* Treść odzyskuje całą szerokość — nie ma już szpalty do zarezerwowania. */
  body { padding-right: 0; }

  :root { --pasek-szer: 200px; }

  .pasek-boczny {
    transform: translateX(100%);
    transition: transform .18s ease-out;
    box-shadow: -12px 0 28px rgba(0, 0, 0, .5);
    z-index: 110;   /* nad nagłówkiem, bo przykrywa treść świadomie */
  }

  body.menu-otwarte .pasek-boczny { transform: none; }

  /* Przy otwartym pasku wracają pełne podpisy — jest na nie miejsce. */
  .pasek-etykieta { font-size: .95rem; }
  .pasek-staly { padding: 18px 12px; }
  .pasek-projekty { padding: 12px; gap: 10px; }
  /* Kafelek zostaje kolumną, mimo że miejsca starczyłoby na wiersz: przy 200 px szerokości
     nazwa mieści się wtedy w jednej linii, a ułożona w wiersz łamała się w środku wyrazu. */
  .pasek-projekt { padding: 12px; gap: 6px; }
  .pasek-projekt-ikona { width: 40px; height: 33px; }
  .pasek-projekt-skrot { font-size: 1rem; }
  .pasek-projekt-nazwa { display: block; font-size: .8rem; white-space: nowrap; word-break: normal; }
  .pasek-logo { padding: 12px; }

  /* Przycisk czatu wraca do krawędzi: pasek nie zajmuje już własnej szpalty. */
  .client-launch { right: var(--odstep); }
}