/* Сообщества: карточка, вкладки, участники, стол модератора.
 *
 * Отдельный файл, а не строки в app.css: всё здесь относится к экранам
 * сообщества, которые появились вместе и вместе же снимаются — достаточно
 * убрать одну строку из разметки. Ни одного нового цвета: только те, что уже
 * названы в токенах 2027, — иначе тёмная и светлая темы разойдутся ровно здесь.
 * Без этого файла экраны остаются рабочими: они собраны из общих карточек и
 * чипов, здесь только их расстановка и телефонные правила.
 */

/* ── Список ──────────────────────────────────────────────────────────────── */

.com-list-head {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 8px;
}
.com-list-head .card-note { flex: 1 1 260px; }
.com-list-actions { flex: none; gap: 8px; }
.com-list-filter { display: grid; gap: 8px; margin: 4px 0 12px; }

/* Строка списка — целиком нажимаемая, а не только название: цель под палец
 * это вся строка, и промах по ней ничего не стоит. */
.com-row { align-items: center; }
.com-row-open {
  border: 0; background: transparent; color: inherit; text-align: left;
  padding: 0; min-height: 44px; gap: 12px; cursor: pointer;
}
.com-row-open .avatar { flex: none; }

/* ── Карточка сообщества ─────────────────────────────────────────────────── */

.com-card { padding: 0; overflow: hidden; }

/* Соотношение задаётся заранее: без него карточка подпрыгивает в момент
 * загрузки обложки, и вкладки под ней уезжают из-под пальца. */
.com-cover {
  aspect-ratio: 3 / 1;
  background: var(--surface2);
  overflow: hidden;
}
.com-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.com-head { display: flex; gap: 16px; align-items: flex-start; padding: 16px 16px 0; }
.com-head .avatar { flex: none; }
.com-head-text { min-width: 0; }
.com-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.com-about { margin: 8px 16px 0; white-space: pre-wrap; line-height: 1.45; overflow-wrap: anywhere; }

/* Числа и двери — короткими словами со значком, а не одной строкой через
 * точки: строка «@имя · участников: 12 · открытое · пишут: участники ·
 * с проверкой» на телефоне превращалась в три строки без начала и конца. */
.com-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.com-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: var(--fs-sm);
  border: 0; background: transparent; padding: 0; min-height: 24px;
}
.com-meta-item .ic { color: var(--muted); }
button.com-meta-item { cursor: pointer; color: var(--text); }
button.com-meta-item:hover { color: var(--accent); }

/* Полоса действий: вступить, написать, уведомления, «ещё». Переносится, а
 * не прокручивается: кнопок здесь не больше четырёх, и все они должны быть
 * видны разом — это первое, что ищут на странице. */
.com-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px 16px;
}
.com-actions .btn { min-height: 44px; }
.com-state { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); }

/* Заявка подана: состояние, а не кнопка.
 *
 * Отличается от кнопки нарочно и не одним цветом: цвет часть людей не увидит.
 * Своя плашка с рамкой, часами и словами — по ним видно, что нажимать нечего и
 * что ответа ждут. Раньше на этом месте стояло «Вступить», и человек, уже
 * попросившийся, нажимал её снова. */
.com-pending {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background: var(--surface2); color: var(--muted);
  font-size: var(--fs-sm); white-space: nowrap;
}
.com-pending.tiny { padding: 4px 8px; font-size: var(--fs-xs); }
.com-pending svg { flex: none; opacity: .8; }

/* ── Вкладки ─────────────────────────────────────────────────────────────── */

.com-tabs { margin: 12px 0 8px; }
.com-tabs .chip { min-height: 40px; gap: 8px; }
.com-tabs .badge { margin-left: 2px; }
/* Вкладка, где ждут решения, отмечена и цветом, и числом: одним цветом
 * отличие не передать тому, кто его не различает. */
.com-tabs .chip.com-tab-alert { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.com-sections { margin-bottom: 8px; }

/* ── Участники ───────────────────────────────────────────────────────────── */

.com-people-head { gap: 8px; margin-bottom: 4px; }
.com-people-head .field { min-height: 44px; }
.com-person { align-items: center; }
.com-person.me { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.com-person-open {
  border: 0; background: transparent; color: inherit; text-align: left;
  padding: 0; min-height: 44px; gap: 12px; cursor: pointer;
}
.com-person-open .avatar { flex: none; }
.com-request { flex-wrap: wrap; }
.com-request-actions { gap: 8px; }

/* ── Правила ─────────────────────────────────────────────────────────────── */

.com-rules-text {
  margin: 0; padding: 4px 0;
  white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere;
}
.com-rules .btn { margin-top: 4px; }
.com-count { display: block; text-align: right; margin-top: 4px; }

/* ── Стол модератора ─────────────────────────────────────────────────────── */

.com-queue-item { margin-bottom: 12px; }
.com-queue-actions { gap: 8px; margin: -4px 0 0 16px; flex-wrap: wrap; }
.com-report.done { opacity: .7; }
.com-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.com-tools .btn { min-height: 44px; }

/* Ссылка-приглашение показывается один раз и целиком: усечённый ключ
 * скопировать нельзя, а это единственное, ради чего он на экране. */
.com-secret b { overflow-wrap: anywhere; font-family: var(--mono, monospace); font-size: var(--fs-sm); }

/* ── Окно карточки ───────────────────────────────────────────────────────── */

.com-check { gap: 8px; margin: 8px 0 0; min-height: 44px; cursor: pointer; }
.com-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.com-pick-square { flex: none; width: 56px; height: 56px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface2); }
.com-pick-wide { flex: none; width: 96px; height: 40px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface2); }
.com-pick-square img, .com-pick-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.com-shelf-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: var(--r-sm); flex: none; }

/* Кнопка-слово рядом со значком: на телефоне слово прячется, значок остаётся
 * — и остаётся aria-label, который его читает вслух. */
@media (max-width: 720px) {
  .com-cover { aspect-ratio: 2 / 1; }
  .com-head { padding: 12px 12px 0; gap: 12px; }
  .com-about { margin: 8px 12px 0; }
  .com-actions { padding: 12px 12px 12px; }
  .com-actions .btn .com-btn-word { display: none; }
  .com-actions .btn:has(.com-btn-word) { padding: 0 12px; }
  /* Вкладки липнут к верху под шапкой: со стола модератора и из длинного
   * списка участников возвращаются к записям, не листая назад. */
  .com-tabs {
    position: sticky; top: 0; z-index: 2;
    padding: 8px 0; margin: 8px 0;
    background: var(--bg);
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  .com-tabs::-webkit-scrollbar { display: none; }
  .com-tabs .chip { flex: none; }
  .com-list-head { margin-bottom: 8px; }
  .com-list-actions { width: 100%; }
  .com-list-actions .btn { flex: 1 1 0; }
  .com-request-actions { width: 100%; margin-top: 4px; padding-left: 44px; }
  .com-queue-actions { margin-left: 0; }
  .com-queue-actions .btn { flex: 1 1 0; }
}