/* ══ widgets/user/user_tile — ПЛИТКА ЛЮДИНИ, ЄДИНЕ ОПИСАННЯ ═══════════════════
   1.1.7.153.

   🔴 Файл зібраний із ДВОХ правил `.kp-users-card`, що стояли в
   modules/users/users.css одне під одним і сварились між собою:

     · перше (v1.1.5.190) — `display: flex` + `nowrap` + `overflow: hidden`,
       компактний рядок аватар|тіло|дії;
     · друге (v1.1.6.318) — `display: grid` + grid-areas, вертикальна форма за
       каноном, яке додали САМЕ ТОМУ, що flex-варіант обрізав імена й статистику;
     · плюс третій блок із `!important` для кнопок (1.1.7.077).

   Друге правило стояло в кінці файла й вигравало за рівної специфічності, тобто
   перше здебільшого було мертвим — але не повністю: усе, чого друге не
   перевизначало, далі бралося з першого. Форму плитки доводилось читати в трьох
   місцях, і саме там розходження накопичувались.

   Тут лишилось ОДНЕ описання. Файл підключають і сторінки (через @import з
   users.css), і сам віджет (renderWidget ставить сусідній CSS у <head>) — тому
   опис один на весь сайт, незалежно від того, хто малює плитку: PHP чи users.js.

   ── 1.1.7.153: РОЗМІР ЦІЛІ ДОТИКУ ─────────────────────────────────────────────
   На плитці стояло до ШЕСТИ цілей поруч: чотири дії 32 × 32 і два перемикачі
   вигляду 28 × 28, усі без підпису (назва жила лише в `title`, якого на телефоні
   не видно). Норма доступності — 44 × 44; не дотягувала жодна.
   Тепер: одна головна дія з підписом (44 px) + «Ще» (44 px), решта — рядками
   панелі по 44 px. Усі три числа нижче позначені як --kp-touch, щоб наступна
   правка не з'їла їх випадково.
   ═══════════════════════════════════════════════════════════════════════════ */

.kp-users-card {
  /* Мінімальна ціль дотику. Не токен канону — канон його не має; оголошено тут,
     бо саме ця плитка показала, чого бракує. */
  --kp-touch: 44px;
}

/* ── Сітка плитки ──────────────────────────────────────────────────────────── */
.kp-users-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar body badge"
    "side   side side";
  align-items: center;
  gap: 10px;
  /* grid item за замовчуванням має min-width:auto → довгий nowrap-чіп міг
     розпирати плитку ширше за колонку і давати горизонтальний скрол сторінки. */
  min-width: 0;
  padding: 14px;
  background: var(--kp-color-surface);
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  box-shadow: var(--kp-shadow-sm);
  transition: background var(--n-dur-base) var(--n-ease),
              border-color var(--n-dur-base) var(--n-ease);
}
.kp-users-card:hover { border-color: var(--kp-color-control-border); }

/* Cover прибрано ще у v1.1.5.190: він з'їдав 56px і не ніс інформації.
   Правило лишається, бо порожній `__cover` ще може приїхати зі стороннього
   шаблону, а в сітці він зайняв би клітинку. */
.kp-users-card__cover { display: none; }

.kp-users-card__avatar {
  grid-area: avatar;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: var(--kp-radius-lg);
  border: 0;
  object-fit: cover;
  background: var(--cell-h);
  /* <span> із першою літерою (коли URL аватара порожній) має виглядати як <img> */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--kp-text-md);
  color: var(--kp-color-text-muted);
}

.kp-users-card__body {
  grid-area: body;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp-users-card__name {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--kp-text-xs);
  color: var(--kp-color-text);
  text-decoration: none;
  /* Текст має повну ширину плитки, тож обрізати нема чого: ім'я переноситься. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.kp-users-card__name strong { font-weight: 800; }
.kp-users-card__name:hover { color: var(--kp-accent); }

.kp-users-card__meta:empty { display: none; }
.kp-users-card__meta {
  margin: 0;
  font-size: .72rem;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: .02em;
}

/* Чіпи → плаский інлайн-рядок (рамки й тло з'їдали висоту). */
.kp-users-card__stats {
  display: flex;
  gap: 6px;
  margin: 0;
  min-width: 0;
  flex-wrap: wrap;
}
.kp-users-card__stats span {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-3);
  font-family: var(--mono);
  min-width: 0;
}
/* [hidden] чіпи (mutual) не мають займати gap — `display:inline-flex` вище
   перебиває дефолтний `display:none` від атрибута hidden. */
.kp-users-card__stats span[hidden] { display: none; }
.kp-users-card__stats:empty { display: none; }

.kp-users-card__hint {
  margin: 0;
  min-width: 0;
  font-size: .68rem;
  line-height: 1.3;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.kp-users-card__hint:empty { display: none; }
.kp-users-card__hint.is-error { color: var(--red); }

/* Пілюля праворуч: «Закріплено», «Друзі», роль у спільноті. */
.kp-users-card__badge {
  grid-area: badge;
  align-self: center;
  padding: 4px 9px;
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface-muted);
  color: var(--n-text-soft);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ── Розкладка `row`: щільний рядок списку ─────────────────────────────────────
   1.1.7.153. Профіль і спільноти показували людей списком БЕЗ дій, і для цього
   існували дві окремі реалізації: віджет `profile/social_person_card` і розмітка
   `mbr-item` просто у шаблоні спільнот. Тепер це той самий віджет — лише інша
   розкладка: один рядок, роздільник замість рамки картки. */
.kp-users-card--layout-row {
  /* Другий рядок `side` оголошено НАВМИСНО, хоч списки профілю й спільнот ідуть
     у режимі `plain` (без дій). Без нього режим із діями в розкладці `row` поклав
     би `.__side` у неявний рядок — тобто рівно той дефект, через який плитки й
     розходились: елемент із `grid-area`, якої в шаблоні немає, сітка розміщує
     сама, і вигляд перестає відповідати описові. */
  grid-template-areas:
    "avatar body badge"
    "side   side side";
  padding: 10px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kp-color-border);
  border-radius: 0;
  box-shadow: none;
}
.kp-users-card--layout-row:hover { background: var(--cell-h); border-color: var(--kp-color-border); }
.kp-users-card--layout-row .kp-users-card__avatar { width: 40px; height: 40px; border-radius: 50%; }
.kp-users-card--layout-row .kp-users-card__name { font-size: var(--kp-text-sm); }

/* Рядок без дій — уся його площа веде на профіль (одне посилання, не вкладені).
   Приймач розтягується від імені на всю плитку; сама плитка лишається
   <article>, тож контракт сітки не змінюється. */
.kp-users-card--linked { position: relative; }
.kp-users-card--linked .kp-users-card__name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kp-users-card--linked .kp-users-card__name:focus-visible::after {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: 2px;
}

/* ── Дії ───────────────────────────────────────────────────────────────────── */
.kp-users-card__side {
  grid-area: side;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.kp-users-card__actions {
  display: flex;
  gap: 8px;
  margin: 0;
  align-items: stretch;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}
/* 1.1.7.152: форма однієї кнопки — елемент рядка, а не `display:contents`.
   Інлайн-стиль `style="display:contents"` стояв на всіх соцсторінках; Safari до
   16 не застосовує `contents` до <form>, тож кнопка випадала з рядка й з'їжджала
   під плитку. */
.kp-users-card__act {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── ГОЛОВНА ДІЯ: 44 px і підпис словами ───────────────────────────────────── */
.kp-users-card .kp-user-act--main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--kp-touch);
  padding: 0 14px;
  border: 0;
  border-radius: var(--kp-radius-md);
  font-size: var(--kp-text-sm);
  font-weight: var(--kp-weight-bold);
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--kp-accent) 62%, transparent);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-accent) 48%, var(--kp-color-border));
}
.kp-users-card .kp-user-act--main:hover,
.kp-users-card .kp-user-act--main:focus-visible {
  background: color-mix(in srgb, var(--kp-accent) 74%, transparent);
  transform: none;
  filter: none;
}
.kp-users-card .kp-user-act--main:focus-visible {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: var(--kp-focus-ring-offset);
}
/* Нейтральна головна дія («Профіль» у каталозі й на вкладці «Вихідні»):
   та сама геометрія, спокійніше тло. Відрізняється КОЛЬОРОМ, не розміром. */
.kp-users-card .kp-user-act--main.w-ui-button--ghost,
.kp-users-card .kp-user-act--main.w-ui-button--secondary {
  background: color-mix(in srgb, var(--kp-accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-accent) 16%, var(--kp-color-border));
}
.kp-users-card .kp-user-act--main.w-ui-button--danger {
  background: color-mix(in srgb, var(--kp-color-danger) 30%, transparent);
  color: var(--n-text-on-danger, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-color-danger) 38%, var(--kp-color-border));
}
/* v1.1.5.194, оновлено 1.1.7.153: кнопка «Додати» під час кулдауну показує
   секунди замість підпису. Компактно (0 зайвих рядків) і чесно — клік усе одно
   не пройде. Геометрія НЕ змінюється: інакше плитка «стрибала» б раз на секунду. */
.kp-users-card .kp-user-act--main.is-cooldown,
.kp-users-card .kp-user-act--main.is-disabled {
  opacity: .72;
  cursor: default;
}
.kp-users-card .kp-user-act--main.is-cooldown .kp-user-act__label { font-family: var(--mono); }
.kp-user-act__icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.kp-user-act__icon img.kp-menu-icon { width: 18px; height: 18px; display: block; object-fit: contain; filter: none; }
.kp-user-act__glyph { font-size: var(--kp-text-sm); font-weight: 800; line-height: 1; }
.kp-user-act__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── ПАНЕЛЬ «ЩЕ» ───────────────────────────────────────────────────────────── */
.kp-user-panel { position: relative; flex: 0 0 auto; min-width: 0; }
.kp-user-panel__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--kp-touch);
  min-width: var(--kp-touch);
  padding: 0 12px;
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface-muted);
  color: var(--kp-color-text);
  box-shadow: inset 0 0 0 1px var(--kp-color-border);
  font-size: var(--kp-text-sm);
  font-weight: var(--kp-weight-bold);
  cursor: pointer;
  user-select: none;
  list-style: none;              /* прибирає стандартний трикутник <summary> */
}
.kp-user-panel__trigger::-webkit-details-marker { display: none; }
.kp-user-panel__trigger::marker { content: ""; }
.kp-user-panel__trigger:hover { background: var(--cell-h); }
.kp-user-panel__trigger:focus-visible {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: var(--kp-focus-ring-offset);
}
.kp-user-panel__dots { letter-spacing: .06em; line-height: 1; }
.kp-user-panel__trigger-label { white-space: nowrap; }

/* Базовий стан — ЗВИЧАЙНИЙ БЛОК під кнопкою (гармошка).
   Саме він працює БЕЗ JavaScript: ні тла-завіси, ні плавання — тож панель
   завжди можна закрити тією самою кнопкою «Ще», яка нікуди не з'їхала.
   Спливаючою панель стає нижче, і лише коли скрипт справді є (він уміє її
   закрити по Esc, по кліку поза нею й хрестиком). */
.kp-user-panel__sheet {
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  background: var(--kp-color-surface);
  box-shadow: var(--kp-shadow-lg);
  min-width: 0;
}
.kp-user-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--kp-color-border);
  margin-bottom: 6px;
}
.kp-user-panel__ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.kp-user-panel__who {
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--kp-text-xs);
  color: var(--kp-color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-user-panel__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: var(--kp-touch);
  height: var(--kp-touch);
  border: 0;
  border-radius: var(--kp-radius-md);
  background: transparent;
  color: var(--kp-color-text-muted);
  font-size: var(--kp-text-md);
  cursor: pointer;
}
.kp-user-panel__close:hover { background: var(--cell-h); color: var(--kp-color-text); }
.kp-user-panel__close[hidden] { display: none; }
.kp-user-panel__rows { display: flex; flex-direction: column; gap: 2px; }
.kp-user-panel__act { display: block; margin: 0; padding: 0; border: 0; }

/* Рядок панелі: 44 px, значок + ПІДПИС СЛОВАМИ, на всю ширину. */
.kp-user-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--kp-touch);
  padding: 0 10px;
  border: 0;
  border-radius: var(--kp-radius-md);
  background: transparent;
  color: var(--kp-color-text);
  font-family: inherit;
  font-size: var(--kp-text-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.kp-user-panel__row:hover,
.kp-user-panel__row:focus-visible { background: var(--cell-h); color: var(--kp-color-text); }
.kp-user-panel__row:focus-visible {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: -2px;
}
.kp-user-panel__row.is-danger { color: var(--kp-color-danger); }
.kp-user-panel__row.is-danger:hover { background: color-mix(in srgb, var(--kp-color-danger) 12%, transparent); }

/* ── Спливаюча панель — ЛИШЕ коли є скрипт ─────────────────────────────────── */
/* Скрипт ставить `data-kp-user-panel-js` на <html>. Без нього все вище лишається
   гармошкою, яку видно й можна закрити без JavaScript. */
html[data-kp-user-panel-js] .kp-user-panel[open] { z-index: 90; }
html[data-kp-user-panel-js] .kp-user-panel[open] .kp-user-panel__sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 2;
  width: max-content;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 32px));
  margin-top: 0;
}

/* На телефоні — панель знизу на всю ширину, з іменем людини в заголовку: над ким
   дія, видно без здогадок. Завіса приглушує решту сторінки й ловить дотик поза
   панеллю (закриття робить скрипт — тому все це під тим самим гейтом). */
@media (max-width: 640px) {
  html[data-kp-user-panel-js] .kp-user-panel[open] .kp-user-panel__sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2;
    width: auto;
    max-width: none;
    min-width: 0;
    max-height: 72vh;
    overflow-y: auto;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--kp-color-border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
  }
  html[data-kp-user-panel-js] .kp-user-panel[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .5);
  }
  html[data-kp-user-panel-js] .kp-user-panel[open] .kp-user-panel__head { padding-top: 6px; }
  html[data-kp-user-panel-js] .kp-user-panel[open] .kp-user-panel__row { min-height: 52px; font-size: var(--kp-text-md); }
}

/* ── Сітка плиток ──────────────────────────────────────────────────────────── */
/* Канонні три колонки, що самі складаються на вузькому екрані. 260px, а не 240:
   головна дія тепер із підписом, і їй потрібна ширина, щоб не обрізатись. */
.kp-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
/* Список рядків (профіль, спільноти) — одна колонка без проміжків: роздільник
   малює сама плитка. */
.kp-users-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.kp-users-list .kp-users-card--layout-row:last-child { border-bottom: 0; }

@media (max-width: 540px) {
  .kp-users-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-users-card,
  .kp-users-card .kp-user-act--main,
  .kp-user-panel__trigger,
  .kp-user-panel__row { transition: none; }
}