/* Экран «Люди»: участники, рейтинг, команда, кто онлайн, о форуме.
   Каркас — Flarum IndexPage (Hero + sideNav), список — NodeBB Harmony users.tpl /
   FoF User Directory (сетка плиток .mtile), рейтинг — Flarum Table.
   Все правила скоуплены классами .people-hero / .people* / .mtile* / .lb* / .staff-* / .about*.
   Блок .ucard занят карточкой профиля (profile.css) — здесь не используется. */

/* ------------------------------------------------------------ Hero */
.people__online-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: color var(--transition), text-decoration-color var(--transition); }
.people__online-link:hover { color: var(--link-color); text-decoration-color: currentColor; }

/* ------------------------------------------- Панель инструментов (Users toolbar) */
.people-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}
.people-toolbar__filters,
.people-toolbar__search { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.people-toolbar .sel { width: auto; min-width: 170px; }
.people-toolbar__search .inp-icon { width: 220px; }
.people-toolbar__search .inp { width: 100%; }

.people-count {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: -5px 0 10px;
  font-size: var(--font-size-sm);
  color: var(--muted-color);
}
.people-count b { color: var(--text-color); font-weight: 600; }
.people-count__reset { color: var(--link-color); }
.people-count__reset:hover { text-decoration: underline; }

/* ------------------------------------------- Плитка участника (users/item.tpl) */
.mtiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 16px;
  /* Отступ под фон при наведении уходит за край — аватары стоят на линии контента */
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.mtiles > li { min-width: 0; }

.mtile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 10px;
  border-radius: var(--border-radius);
  transition: background-color var(--transition);
}
.mtile:hover { background: var(--control-bg); }
.mtile:has(.mtile__name:focus-visible) {
  background: var(--control-bg);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}
.mtile__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtile__name {
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--heading-color);
}
/* Ссылка на профиль растянута на всю плитку, как у плитки Harmony */
.mtile__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mtile__name:focus-visible { outline: none; }

/* Одна приглушённая строка с многоточием */
.mtile__line {
  display: block;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted-color);
}
.mtile__line--time { display: flex; align-items: center; gap: 4px; }
.mtile__line--time > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mtile__line--time .ic { flex-shrink: 0; width: 12px; height: 12px; }
.mtile__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: var(--font-size-sm);
  line-height: 18px;
  color: var(--muted-color);
}
.mtile__stats b { color: var(--text-color); font-weight: 600; font-variant-numeric: tabular-nums; }

.mtiles--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mtiles--compact .mtile { align-items: center; padding: 8px 10px; }
.mtiles--compact .mtile__name { font-size: var(--font-size); }

body.compact .mtile { padding: 6px 10px; }

.people .pag { margin-top: 20px; }

/* ---------------------------------------------------------------- Рейтинг */
.lb-mine { color: inherit; font-weight: 700; }

.lb { font-variant-numeric: tabular-nums; }
.lb th, .lb td { padding: 8px 15px; }
.lb thead th { padding-block: 10px; }
.lb th.lb__rank-h, .lb td.lb__rank { width: 56px; padding-inline: 8px; text-align: center; }
.lb__place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border-radius: 13px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--muted-color);
}
/* Первые три места: своя тонированная подложка у каждой пилюли (золото/серебро/бронза),
   тонкая обводка того же тона — видно и на подсвеченной строке «это вы». Без свечений. */
.lb__row--top .lb__place {
  font-weight: 700;
  color: var(--place-c);
  background: var(--place-bg);
  box-shadow: inset 0 0 0 1px var(--place-line);
}
.lb__row--1 { --place-c: #e8c35a; --place-bg: rgba(232, 195, 90, .14); --place-line: rgba(232, 195, 90, .32); }
.lb__row--2 { --place-c: #c3ccd6; --place-bg: rgba(195, 204, 214, .12); --place-line: rgba(195, 204, 214, .28); }
.lb__row--3 { --place-c: #d99a6c; --place-bg: rgba(217, 154, 108, .14); --place-line: rgba(217, 154, 108, .32); }
.lb__row--me > td { background: var(--control-bg-light); }

.lb__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.lb__id .uname { font-size: var(--font-size); }
.lb__you { font-size: var(--font-size-sm); color: var(--muted-color); }
.lb th.lb__extra-h, .lb td.lb__extra { width: 100px; text-align: right; color: var(--muted-color); }
.lb__score { white-space: nowrap; }
.lb__score b { font-size: var(--font-size-md); font-weight: 700; color: var(--heading-color); }
.lb__unit { font-size: var(--font-size-sm); color: var(--muted-color); }
.lb th.num { white-space: nowrap; }

body.compact .lb th, body.compact .lb td { padding-block: 5px; }

.lb-about { max-width: 75ch; margin-top: 30px; }
.lb-about__title { margin: 0 0 6px; font-size: var(--font-size-md); font-weight: 600; line-height: 1.4; color: var(--heading-color); }
.lb-about__text { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--muted-color); }

@media (max-width: 767.98px) {
  .lb th, .lb td { padding-inline: 8px; }
  .lb th.lb__rank-h, .lb td.lb__rank { width: 40px; padding-inline: 4px; }
  .lb__who { gap: 8px; }
}

/* ----------------------------------------------------------------- Команда */
.staff-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.staff-group__hd {
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.staff-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
}
.staff-group__mark { flex-shrink: 0; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--muted-color)); }
.staff-group__count { font-size: var(--font-size-sm); font-weight: 600; color: var(--muted-more-color); }
.staff-group__descr { margin: 3px 0 0 18px; font-size: 13px; color: var(--muted-color); }

.staff-contact { margin-top: 40px; padding: 20px; background: var(--control-bg); border-radius: var(--border-radius); }
.staff-contact__title { margin: 0 0 15px; font-size: var(--font-size-md); font-weight: 600; line-height: 1.4; color: var(--heading-color); }
.staff-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px; }
.staff-contact .btn { --button-bg: var(--body-bg); }
.staff-contact__item { display: flex; flex-direction: column; align-items: flex-start; }
.staff-contact__item h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--font-size); font-weight: 700; color: var(--heading-color); }
.staff-contact__item h3 .ic { color: var(--muted-color); }
.staff-contact__item p { flex: 1; margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--muted-color); }
@media (max-width: 991.98px) {
  .staff-contact__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- О форуме */
.about-hero .hero__sub { max-width: 70ch; }
/* Цифры — строкой info, как UserCard-info Flarum, без плиток */
.about-stats { margin-bottom: 0; padding: 0; list-style: none; gap: 4px 18px; }
.about-stats li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.about-stats .ic { width: 14px; height: 14px; flex-shrink: 0; }
@media (min-width: 768px) { .about-stats { margin-top: 15px; font-size: var(--font-size); } }

.about-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 1100px) {
  .about-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
}
.about-section h2,
.about-links h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
}
.about-section h2 .ic { width: 16px; height: 16px; color: var(--muted-color); }
.about-section p { max-width: 75ch; margin: 0 0 12px; line-height: 1.65; color: var(--text-color); }
.about-section .mono { font-family: var(--font-family-mono); font-size: 13px; }

.about-links { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.about-links__list { display: flex; flex-wrap: wrap; gap: 5px 25px; margin: 0; padding: 0; list-style: none; }
.about-links__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--muted-color);
  transition: color var(--transition);
}
.about-links__list a:hover { color: var(--link-color); }

/* ----------------------------------------------------------- Узкие экраны */
@media (max-width: 767.98px) {
  .people-toolbar { align-items: stretch; }
  .people-toolbar__filters,
  .people-toolbar__search { width: 100%; flex-wrap: nowrap; }
  .people-toolbar .sel { flex: 1 1 0; min-width: 0; }
  .people-toolbar__search .inp-icon { flex: 1 1 auto; width: auto; min-width: 0; }
  .mtiles, .mtiles--compact { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (pointer: coarse) {
  .about-links__list a { min-height: 44px; }
  .people-count__reset { display: inline-flex; align-items: center; min-height: 44px; }
}