/* --------------------------------------------------------------------------
   2. KARTA — JEDNA DLA WSZYSTKICH WIDOKÓW
   -------------------------------------------------------------------------- */

.forum-karta{
  background: var(--tlo-papier);
  /* CIEMNIEJSZA RAMKA (poprawki 7, 23.10.2026): na stronie głównej duże panele
     mają `--linia-mocna` (modyfikator `.karta--mocna`), a forum używało
     jaśniejszej `--linia` — przez to forum wyglądało na „inną stronę".
     Kafelki (wiersze) wewnątrz zostają na jasnej `--linia`. */
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-2);
  padding: 1.25rem 1.5rem;
}
/* --------------------------------------------------------------------------
   3. ŚCIEŻKA I OPIS STRONY
   -------------------------------------------------------------------------- */

.forum-sciezka{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-2);
  margin-bottom: var(--odst-4);
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
}
.forum-sciezka a{
  color: var(--akcent);
}
.forum-sciezka a:hover,
.forum-sciezka a:focus-visible{
  color: var(--akcent-czerwony);
}
.forum-sciezka-sep{
  opacity: 0.6;
}
.forum-sciezka-tu{
  font-weight: 700;
  color: var(--tekst);
}

/* --------------------------------------------------------------------------
   4. WIDOK OGÓLNY — LISTA TEMATÓW
   -------------------------------------------------------------------------- */

.forum-tematy{
  display: grid;
  gap: var(--odst-3);
}
/* TEMAT = karta z BEŻOWYM NAGŁÓWKIEM (poprawki 6, 23.10.2026).
   Wcześniej temat był kartą z paddingiem, a nazwa miała własną kreskę pod
   sobą — po dodaniu listy wątków wyglądało to jak nagłówek dokumentu, a nie
   jak sekcja. Teraz padding nosi nagłówek, a karta nie ma własnego wcięcia,
   więc lista wątków dochodzi do krawędzi. */
.forum-temat{
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.forum-temat-naglowek{
  padding: 1rem 1.5rem 0.9rem;
  background: var(--tlo-papier-ciemny);
  border-bottom: 2px solid var(--linia-mocna);
}
.forum-temat-nazwa{
  margin: 0 0 0.3rem;
  font-family: var(--font-naglowek);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tekst);
  line-height: 1.25;
}
/* OPIS TEMATU = MOCNIEJSZE INTRO (poprawki 7). Właściciel: „Kolor ma być pełny
   var(--tekst), nie --tekst-mutowany, bo szary tekst wygląda na drugorzędny”.
   Licznik pod nim zostaje drobny — dzięki temu hierarchia jest czytelna:
   tytuł → opis → licznik. */
.forum-temat-opis{
  margin: 0.15rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tekst);
  max-width: 75ch;
}
.forum-temat-licznik{
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
}
.forum-temat-akcje{
  margin-top: 0.6rem;
}

.forum-autor{
  font-weight: 600;
  color: var(--tekst);
}

/* Zdanie zachęty pod nagłówkiem „Brak odpowiedzi" (23.10.2026).
   Właściciel: „»Bądź pierwszy — napisz odpowiedź« nie jest sformatowane
   odpowiednio i brak odstępów”. Brakowało MU boków: nagłówek ma
   `margin: … 1.5rem`, a ten akapit startował od krawędzi karty, więc
   wyglądał jak przyklejony. Teraz te same boki, większy tekst i odstęp
   od przycisku pod spodem. */
.forum-brak-odpowiedzi{
  margin: 0.5rem 1.5rem 1rem;
  color: var(--tekst-mutowany);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* --------------------------------------------------------------------------
   6. WIDOK WĄTKU — WPISY
   -------------------------------------------------------------------------- */

/* Podtytuł „Odpowiedzi (N)” — JEDNA reguła (poprawki 7: wcześniej były dwie
   i druga nadpisywała margines pierwszej). */
.forum-podtytul{
  margin: 0.5rem 1.5rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linia);
  font-family: var(--font-naglowek);
  font-size: 1.05rem;
}
.forum-skok{
  margin: 0.4rem 1.5rem 0.2rem;
}
.forum-oznacz{
  margin: 0 0 var(--odst-3);
}
/* --------------------------------------------------------------------------
   7. FORMULARZE I PASEK FORMATOWANIA
   -------------------------------------------------------------------------- */

.forum-formularz{
  display: grid;
  gap: var(--odst-3);
  margin: 0 0 var(--odst-5);
  padding: var(--odst-4);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  background: var(--tlo-papier);
}
.forum-formularz--w-karcie{
  margin: 0 1.5rem 1.5rem;
  background: var(--tlo-papier-ciemny);
}
/* Formularz edycji stoi W MIEJSCU treści wpisu, więc nie potrzebuje własnej
   ramki ani tła — wpis już je ma. */
.forum-formularz--edycja{
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  background: none;
}
.forum-pole{
  display: grid;
  gap: var(--odst-2);
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
}
.forum-pole .pole{
  width: 100%;
}
.forum-tekst{
  resize: vertical;
  min-height: 6rem;
  font-family: var(--font-tresc);
  line-height: var(--wysokosc-linii);
}
.forum-pasek-format{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.forum-pomoc{
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}
.forum-format-podpowiedz{
  flex: 1 1 100%;
  margin: 0.2rem 0 0;
  color: var(--tekst-mutowany);
  font-size: 0.8rem;
}
/* EMOTKI I PRZYCISK B — 40 px, żeby ikonka była widoczna, a pole trafiane
   palcem (właściciel: „teraz ikonka ma ~12 px w przycisku 36 px”). */
.forum-emotikon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  cursor: pointer;
  transition: transform 0.1s;
}
.forum-emotikon--pogrubienie{
  font-weight: 700;
  font-size: 1.1rem;
}
.forum-emotikon:hover,
.forum-emotikon:focus-visible{
  transform: scale(1.15);
  border-color: var(--linia-mocna);
}
.forum-emotikon img{
  width: 1.6rem;
  height: 1.6rem;
}

.forum-podglad-na-zywo{
  margin-top: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--linia);
  border-radius: var(--promien-m);
  background: var(--tlo-papier-ciemny);
  font-size: 0.9rem;
}
.forum-podglad-na-zywo:empty{
  display: none;
}
.forum-akcje{
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-2);
}
.forum-akcje:empty{
  display: none;
}
.forum-akcje--dol{
  margin-top: var(--odst-4);
  justify-content: flex-end;
}
/* --------------------------------------------------------------------------
   8. ZNACZNIK „NOWE”
   --------------------------------------------------------------------------
   Widzą go TYLKO ludzie: nie ma go w `title`, opisie ani JSON-LD. Strona ma
   `no-cache`, więc nic tu nie zostaje w przeglądarce.
   -------------------------------------------------------------------------- */

.forum-nowe{
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-family: var(--font-tresc);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--akcent, #8b3a1e);
  border-radius: 999px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   9. PUSTO, GOŚĆ, STRONICOWANIE
   -------------------------------------------------------------------------- */

.forum-pusto,
.forum-gosc{
  margin: 0 0 var(--odst-4);
  padding: var(--odst-3) var(--odst-4);
  border: 1px dashed var(--linia);
  border-radius: var(--promien-m);
  color: var(--tekst-mutowany);
}
.forum-gosc a{
  margin-left: var(--odst-1);
  color: var(--akcent);
}
.forum-strony{
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-2);
  margin: var(--odst-3) 0 var(--odst-4);
}
.forum-strona{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--odst-2);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  color: var(--akcent);
  text-decoration: none;
}
.forum-strona--tu{
  background: var(--tlo-papier-ciemny);
  border-color: var(--linia-mocna);
  color: var(--tekst);
  font-weight: 700;
}
/* --------------------------------------------------------------------------
   10. WĄSKI EKRAN
   -------------------------------------------------------------------------- */

/* ============================================================================
   POPRAWKI 6 (23.10.2026): JEDEN KOMPONENT WIERSZA DLA WĄTKÓW I ODPOWIEDZI
   ============================================================================
   Decyzja właściciela: kasujemy widok tematu, zostają dwa poziomy (forum
   i wątek), a wiersz wątku na liście i odpowiedź w wątku mają wyglądać TAK
   SAMO. Wcześniej były to dwa różne komponenty (pasy w beżu vs białe
   karteczki), więc to samo forum wyglądało jak dwie aplikacje.
   -------------------------------------------------------------------------- */

.forum-lista{
  list-style: none;
  margin: 0;
  padding: 1rem 1.5rem;
  display: grid;
  gap: 0.6rem;
}

/* BEŻ ZAMIAST BIAŁEGO (23.10.2026). Właściciel: „białe tło źle wygląda.
   wolałbym kolory jak w arkuszu gry, czyli najjaśniejszy to beż a nie biały.
   przy okazji mógłbyś poprawić na forum, by też białego nie było tylko ten
   jasny beż”. `--tlo-wypowiedzi` to czysta biel (#fff), więc podmieniamy
   TYLKO tę regułę na `--tlo-papier` (#fbf6e9). Globalny token zostaje, bo
   gdzie indziej biel jest celowa (np. tło pól formularza). */
.forum-wiersz{
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  padding: 0.6rem 1rem 0.7rem;
}

.forum-wiersz-naglowek{
  display: flex;
  /* ZAWIJANIE ZAMIAST UCINANIA (27.10.2026).
     Właściciel: „forum na telefonie — ucinane z prawej strony”.
     Zmierzone na 320 px: nagłówek wpisu miał `flex-wrap: nowrap`, a przyciski
     „edytuj/kasuj” 252 px — wiersz wychodził 16 px za ekran, a karta go
     obcinała (`.forum-temat { overflow: hidden }`), więc tekst i przyciski
     znikały. Teraz nagłówek ZAWIJA się do drugiej linii, zamiast wypychać. */
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  min-width: 0;
}

/* DZIECI FLEXA MUSZĄ MÓC SIĘ KURCZYĆ.
   Domyślnie `min-width: auto` blokuje zwężenie poniżej treści — dlatego długi
   nick albo data nie zawijały się, tylko rozpychały wiersz. */
.forum-wiersz-naglowek > *{
  min-width: 0;
  overflow-wrap: anywhere;
}

.forum-wiersz-naglowek time{
  opacity: 0.7;
}

/* Akcje (edytuj/kasuj) po prawej w nagłówku wiersza — margin-left: auto
   wypycha je do krawędzi, bez pozycjonowania absolutnego. */
.forum-wiersz-akcje{
  margin-left: auto;
  display: flex;
  /* Przyciski mogą zawinąć się do dwóch linii, ale nie wychodzą z karty
     (na 320 px „edytuj” + „kasuj” obok siebie to 252 px — więcej niż karta). */
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.forum-wiersz-akcje[hidden]{
  display: none;
}

.forum-wiersz-tytul{
  display: block;
  font-family: var(--font-naglowek);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--akcent, #8b3a1e);
  text-decoration: none;
  margin-bottom: 0.2rem;
}

.forum-wiersz-tytul:hover,
.forum-wiersz-tytul:focus-visible{
  text-decoration: underline;
}

.forum-wiersz-tresc{
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 75ch;
  /* DŁUGIE WYRAZY I ADRESY NIE ROZPCHUJĄ KARTY (27.10.2026).
     Wcześniej nieprzerywalny adres rozpychał wiersz, a karta go obcinała. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* To samo dla wstępu wątku — to też treść od gracza. */
.forum-watek-intro{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Obrazy i bloki kodu w postach: nie szersze niż karta. */
.forum-wiersz-tresc img,
.forum-watek-intro img{
  max-width: 100%;
  height: auto;
}

.forum-wiersz-tresc pre,
.forum-watek-intro pre,
.forum-wiersz-tresc code,
.forum-watek-intro code{
  max-width: 100%;
  overflow-x: auto;
}

.forum-wiersz-tresc p{
  margin: 0 0 0.5rem;
}

.forum-wiersz-tresc p:last-child{
  margin-bottom: 0;
}

.forum-wiersz-stopka{
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

.forum-wiersz--nowy,
.forum-wiersz--szeryf{
  border-left-color: var(--akcent, #8b3a1e);
}

/* WSTĘP WĄTKU (poprawki 7): wpis zakładający NIE jest już wierszem z ramką.
   Właściciel: „Wpis otwierający bez ramki, większa czcionka”. Wygląda jak
   intro tematu — leży na papierze karty, większą czcionką, bez bolda
   (to długi tekst, pogrubienie męczy czytanie). */
.forum-watek-intro{
  padding: 1rem 1.5rem 0.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tekst);
  max-width: 75ch;
}

.forum-watek-intro .forum-wiersz-akcje{
  margin: 0.5rem 0 0;
}

/* Podświetlenie wpisu, do którego prowadzi odnośnik (#wpis-ID) — po usunięciu
   dawna klasa wpisu zniknęła, więc :target działa na nowym komponencie. */
.forum-wiersz:target{
  border-color: var(--linia-mocna);
  box-shadow: 0 0 0 2px rgb(139 111 69 / .25);
}

@media (max-width: 600px){
  /* Karta ma padding, ale TEMAT go nie potrzebuje: padding nosi nagłówek,
     a lista ma własny — inaczej linia pod nagłówkiem nie dochodziła do
     krawędzi (poprawki 7). */
  .forum-karta {
    padding: 1rem;
  }

  /* Ten sam skrócony bok co nagłówek, inaczej zdanie „Bądź pierwszy…"
     przyklejało się do krawędzi na telefonie. */
  .forum-brak-odpowiedzi {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .forum-temat {
    padding: 0;
  }

  .forum-temat-naglowek {
    padding: 0.9rem 1rem 0.8rem;
  }

  .forum-lista {
    padding: 0.75rem 1rem;
  }

  .forum-watek-intro,
  .forum-podtytul {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .forum-podtytul {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .forum-formularz {
    padding: var(--odst-3);
  }

  /* Wygodny cel dla palca. */
  .forum-emotikon {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* AKCJE WPISU POD NAGŁÓWKIEM (27.10.2026).
     Na telefonie „edytuj/kasuj” nie mieszczą się obok autora i daty — zamiast
     wypychać wiersz, przechodzą do własnej linii i wyrównują się do lewej. */
  .forum-wiersz-akcje {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}