/* =====================================================================
   Community (moduł 9). Klasy z prefiksem .cm-. Kolory, odstępy i promienie
   wyłącznie ze zmiennych tokens.css; komponenty bazowe (.k-karta, .k-przycisk,
   .k-pigulka) pochodzą z app.css.
   ===================================================================== */
.cm-strona { min-width: 0; }
.cm-naglowek { margin-bottom: var(--o-4); }
.cm-naglowek h1 { margin-bottom: var(--o-1); }
.cm-naglowek p { margin-bottom: 0; }

.cm-uklad { display: grid; gap: var(--o-5); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.cm-glowna { min-width: 0; display: flex; flex-direction: column; gap: var(--o-4); }
.cm-boczna { display: flex; flex-direction: column; gap: var(--o-4); min-width: 0; }
@media (min-height: 860px) { .cm-boczna { position: sticky; top: calc(var(--wysokosc-naglowka) + var(--o-4)); } }

/* ---------- awatar, odznaki, drobne elementy ---------- */
.cm-awatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akcent-tlo); color: var(--akcent-tekst); border: 1px solid #ffd2a3; font-weight: 800; font-size: var(--t-s);
}
.cm-awatar--admin { background: var(--tekst); color: var(--akcent); border-color: var(--tekst); }
.cm-awatar--maly { width: 34px; height: 34px; font-size: var(--t-xs); }
.cm-awatar--pusty { background: var(--karta-2); border-color: var(--ramka); color: var(--tekst-3); }
.cm-autor { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cm-autor__nazwa { overflow-wrap: anywhere; }
.cm-odznaka { font-size: var(--t-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--r-pelny); background: var(--karta-2); border: 1px solid var(--ramka); color: var(--tekst-2); white-space: nowrap; }
.cm-odznaka--admin { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.cm-odznaka--ukryty { background: var(--blad-tlo); border-color: #f1c0bc; color: var(--blad); }
.cm-czas, .cm-edytowano { font-size: var(--t-xs); color: var(--tekst-2); }
.cm-czas time { white-space: nowrap; }
.cm-link, .cm-tresc a { color: var(--akcent-tekst); overflow-wrap: anywhere; }
.cm-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--karta-2); border: 1px solid var(--ramka); border-radius: 6px; padding: 0 5px; }
.cm-blad { color: var(--blad); font-size: var(--t-s); }
.cm-blad:empty { display: none; }
.cm-uwaga { background: var(--ostrz-tlo); border: 1px solid #f0dd9c; border-radius: var(--r-m); padding: var(--o-3) var(--o-4); font-size: var(--t-s); margin: 0; }
.cm-uwaga--maly { margin: var(--o-2) 0; padding: var(--o-2) var(--o-3); font-size: var(--t-xs); }
.cm-informacja { margin: 0; color: var(--tekst-2); font-size: var(--t-s); }
.cm-informacja:empty { display: none; }
.cm-link-przycisk { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--akcent-tekst); font-weight: 700; font-size: var(--t-s); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.cm-link-przycisk:hover { color: var(--akcent-ciemny); }

/* ---------- pola ---------- */
.cm-pole {
  width: 100%; padding: 10px 14px; background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m);
  line-height: 1.5; resize: none; display: block; font: inherit;
}
.cm-pole--linia { min-height: 44px; resize: none; }
textarea.cm-pole { min-height: 88px; }
.cm-form-komentarz textarea.cm-pole { min-height: 64px; }
.cm-pole:focus, .cm-szukaj__pole:focus, .cm-wybor-sortu:focus { outline: 3px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.cm-pole-opak { position: relative; }
.cm-licznik { text-align: right; font-size: var(--t-xs); color: var(--tekst-2); margin-top: 2px; }
.cm-wybor { width: auto; min-width: 150px; max-width: 100%; }
.cm-radia { display: flex; flex-direction: column; gap: var(--o-1); margin: var(--o-3) 0; }
.cm-radio { display: flex; align-items: center; gap: var(--o-2); min-height: 36px; cursor: pointer; }
.cm-radio input { width: 18px; height: 18px; accent-color: var(--akcent); }
.cm-form-akcje { display: flex; gap: var(--o-2); flex-wrap: wrap; align-items: center; }
.cm-form-komentarz { display: flex; flex-direction: column; gap: var(--o-2); margin-top: var(--o-3); }

/* ---------- kompozytor ---------- */
.cm-kompozytor { padding: var(--o-3) var(--o-4); }
.cm-kompozytor__zwiniety { display: flex; align-items: center; gap: var(--o-3); width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.cm-kompozytor__pole {
  flex: 1; min-width: 0; padding: 12px 18px; border-radius: var(--r-pelny); border: 1px solid var(--ramka-mocna); background: #fff; color: var(--tekst-2);
  transition: border-color var(--ruch);
}
.cm-kompozytor__zwiniety:hover .cm-kompozytor__pole { border-color: var(--akcent); }
.cm-kompozytor__formularz { display: flex; flex-direction: column; gap: var(--o-3); }
.cm-kompozytor__dol { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; }
.cm-kompozytor__opcje { display: flex; gap: var(--o-2); align-items: center; flex-wrap: wrap; }
.cm-podpowiedz { margin: 0; font-size: var(--t-xs); color: var(--tekst-2); }
.cm-zalacznik-podglad { display: flex; align-items: center; gap: var(--o-3); flex-wrap: wrap; }
.cm-zalacznik-podglad img { max-height: 120px; max-width: 100%; border-radius: var(--r-m); border: 1px solid var(--ramka); }

/* ---------- filtry i narzędzia ---------- */
.cm-filtry-opak { min-width: 0; }
.cm-filtry { gap: var(--o-2); }
.cm-pigulka { min-height: 36px; padding: 6px 14px; font-size: var(--t-s); }
.cm-pigulka__liczba { font-size: var(--t-xs); opacity: 0.75; font-weight: 600; }
.cm-narzedzia { display: flex; gap: var(--o-3); align-items: center; flex-wrap: wrap; }
.cm-szukaj { flex: 1 1 220px; min-width: 0; }
.cm-szukaj__pole {
  width: 100%; min-height: 44px; padding: 10px 16px; border-radius: var(--r-pelny); border: 1px solid var(--ramka-mocna); background: #fff; font: inherit;
}
.cm-sortuj { display: flex; align-items: center; gap: var(--o-2); font-size: var(--t-s); font-weight: 700; flex: 0 1 auto; }
.cm-wybor-sortu { min-height: 44px; padding: 8px 12px; border-radius: var(--r-m); border: 1px solid var(--ramka-mocna); background: #fff; font: inherit; font-weight: 500; max-width: 100%; }
.cm-moderacja-przycisk--aktywny { border-color: var(--akcent); background: var(--akcent-tlo); }

/* ---------- lista wpisów ---------- */
.cm-feed { display: flex; flex-direction: column; gap: var(--o-4); min-width: 0; }
.cm-wiecej-opak { display: flex; justify-content: center; }
.cm-wiecej-wpisow { min-width: 200px; }

.cm-post {
  background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-l); box-shadow: var(--cien-1);
  padding: var(--o-4) var(--o-5); min-width: 0;
}
.cm-post:focus { outline: none; }
.cm-post:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.cm-post--przypiety { border-color: #ffd2a3; box-shadow: inset 4px 0 0 var(--akcent), var(--cien-1); }
.cm-post--ukryty { background: var(--karta-2); border-style: dashed; }
.cm-post--wyrozniony { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-tlo), var(--cien-1); }
.cm-post__glowa { display: flex; gap: var(--o-3); align-items: flex-start; }
.cm-post__meta { flex: 1; min-width: 0; }
.cm-post__linia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--o-2); }
.cm-post__linia--druga { margin-top: 2px; }
.cm-kategoria { padding: 1px 10px; }
.cm-post__tytul { margin: var(--o-3) 0 var(--o-2); font-size: var(--t-l); overflow-wrap: anywhere; }
.cm-post__glowa + .cm-tresc, .cm-post__glowa + div > .cm-tresc, .cm-post__glowa + .cm-uwaga + .cm-tresc { margin-top: var(--o-3); }
.cm-tresc { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.6; }
.cm-tresc--zwiniety { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cm-wiecej { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--akcent-tekst); font-weight: 700; font-size: var(--t-s); min-height: 32px; }
.cm-obraz { display: block; margin-top: var(--o-3); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--ramka); background: var(--karta-2); }
.cm-obraz img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.cm-post__stopka { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; margin-top: var(--o-3); padding-top: var(--o-3); border-top: 1px solid var(--ramka); }
.cm-edycja { display: flex; flex-direction: column; gap: var(--o-2); margin-top: var(--o-3); }

/* ---------- reakcje ---------- */
.cm-reakcje { display: flex; gap: var(--o-1); flex-wrap: wrap; }
.cm-reakcja {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 44px; justify-content: center; padding: 4px 12px;
  border-radius: var(--r-pelny); border: 1px solid var(--ramka); background: var(--karta); cursor: pointer; font-size: var(--t-s); font-weight: 700; color: var(--tekst-2);
  transition: background var(--ruch), border-color var(--ruch);
}
.cm-reakcja:hover:not([disabled]) { background: var(--akcent-tlo); border-color: #ffd2a3; }
.cm-reakcja[disabled] { opacity: 0.55; cursor: not-allowed; }
.cm-reakcja--moja { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent-tekst); }
.cm-reakcja__liczba { font-variant-numeric: tabular-nums; }
.cm-komentarze-przycisk {
  min-height: 36px; padding: 4px 14px; border-radius: var(--r-pelny); border: 1px solid var(--ramka); background: var(--karta);
  cursor: pointer; font-weight: 700; font-size: var(--t-s); color: var(--tekst);
}
.cm-komentarze-przycisk:hover { background: var(--karta-2); }
.cm-komentarze-przycisk[aria-expanded="true"] { background: var(--tekst); border-color: var(--tekst); color: #fff; }

/* ---------- menu ---------- */
.cm-menu { position: relative; flex: none; }
.cm-menu__przycisk { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--tekst-2); display: grid; place-items: center; }
.cm-menu__przycisk:hover, .cm-menu__przycisk[aria-expanded="true"] { background: var(--karta-2); color: var(--tekst); }
.cm-menu__lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; background: var(--karta);
  border: 1px solid var(--ramka); border-radius: var(--r-m); box-shadow: var(--cien-2); padding: var(--o-1);
}
.cm-menu__pozycja { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: var(--r-s); cursor: pointer; font-size: var(--t-s); color: var(--tekst); }
.cm-menu__pozycja:hover, .cm-menu__pozycja:focus-visible { background: var(--karta-2); }
.cm-menu__pozycja--ostrzezenie { color: var(--blad); }

/* ---------- komentarze ---------- */
.cm-komentarze { margin-top: var(--o-4); padding-top: var(--o-4); border-top: 1px solid var(--ramka); }
.cm-komentarze__lista { display: flex; flex-direction: column; gap: var(--o-4); }
.cm-komentarze__pusto { color: var(--tekst-2); margin: 0; font-size: var(--t-s); }
.cm-komentarz { display: flex; gap: var(--o-3); align-items: flex-start; min-width: 0; }
.cm-komentarz--ukryty { opacity: 0.75; }
.cm-komentarz__ciało { flex: 1; min-width: 0; }
.cm-komentarz__glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--o-2); }
.cm-komentarz__tresc { margin-top: 2px; font-size: var(--t-s); }
.cm-komentarz__tresc .cm-tresc { line-height: 1.5; }
.cm-komentarz__ukryty { color: var(--tekst-2); font-style: italic; margin: 0; }
.cm-komentarz__akcje { display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; margin-top: var(--o-1); }
.cm-komentarz__akcje .cm-reakcja { min-height: 32px; padding: 2px 10px; font-size: var(--t-xs); }
.cm-odpowiedzi { display: flex; flex-direction: column; gap: var(--o-3); margin-top: var(--o-3); }
.cm-odpowiedzi:empty { display: none; }
.cm-komentarz--odpowiedz .cm-awatar { width: 28px; height: 28px; font-size: 0.7rem; }

/* ---------- kolumna boczna ---------- */
.cm-marka { background: linear-gradient(180deg, var(--akcent-tlo), var(--karta) 70%); border-color: #ffd2a3; }
.cm-marka h2 { font-size: var(--t-l); }
.cm-marka__przyciski { display: flex; flex-direction: column; gap: var(--o-2); margin-top: var(--o-4); }
.cm-marka__przycisk { width: 100%; }
.cm-zasady { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--o-2); font-size: var(--t-s); color: var(--tekst-2); }
.cm-zasady-karta__tytul { font-size: var(--t-m); }

/* ---------- moderacja ---------- */
.cm-moderacja__glowa { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; margin-bottom: var(--o-3); }
.cm-moderacja__glowa h2 { margin: 0; font-size: var(--t-l); }
.cm-moderacja__podtytul { margin-top: var(--o-4); font-size: var(--t-m); }
.cm-zgloszenie { border: 1px solid var(--ramka); border-radius: var(--r-m); padding: var(--o-3) var(--o-4); background: var(--karta-2); margin-bottom: var(--o-3); }
.cm-zgloszenie__glowa { display: flex; gap: var(--o-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--o-2); }
.cm-zgloszenie__tresc { margin: var(--o-2) 0; padding-left: var(--o-3); border-left: 3px solid var(--akcent); overflow-wrap: anywhere; font-size: var(--t-s); }
.cm-zgloszenie__opis { margin: 0 0 var(--o-2); font-size: var(--t-s); color: var(--tekst-2); }
.cm-blokada { display: flex; justify-content: space-between; align-items: center; gap: var(--o-3); flex-wrap: wrap; padding: var(--o-2) 0; border-bottom: 1px solid var(--ramka); font-size: var(--t-s); }

/* ---------- szkielet ładowania ---------- */
.cm-szkielet-post__glowa { display: flex; gap: var(--o-3); margin-bottom: var(--o-3); align-items: center; }
.cm-szkielet-post__awatar { width: 44px; height: 44px; border-radius: 50%; flex: none; margin: 0; }
.cm-szkielet-post__linie { flex: 1; }
.cm-pusty-opak { padding: 0; }

/* ---------- responsywność ---------- */
@media (max-width: 960px) {
  .cm-uklad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cm-post { padding: var(--o-4); border-radius: var(--r-m); }
  .cm-awatar { width: 40px; height: 40px; }
  .cm-sortuj { width: 100%; }
  .cm-wybor-sortu { flex: 1; }
  .cm-kompozytor__dol { flex-direction: column; align-items: stretch; }
  .cm-form-akcje { justify-content: flex-end; }
  .cm-post__stopka { flex-direction: column; align-items: stretch; }
  .cm-komentarze-przycisk { width: 100%; }
  .cm-odpowiedzi { margin-left: calc(var(--o-4) * -0.5); }
  .cm-menu__lista { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-reakcja, .cm-kompozytor__pole { transition: none; }
}