/* v1.1.6.312 (REV46): шар --n-* переведено на канонні імена.
   Обіцяно в .304 і зроблено окремо, щоб diff лишався читабельним.
   Рівність тут навіть простіша за минулий раз: канонні токени ВИЗНАЧЕНІ через
   ці ж --n-* (`--kp-color-surface: var(--n-bg-2)`), тож збіг не випадковий, а
   за побудовою. Однак я все одно звірив кожну пару після повного розкриття
   ланцюжка var() і ОКРЕМО у світлій та темній схемі — сім із семи.
   Жодне обчислене значення не змінюється. --n-* лишаються оголошеними в
   tokens.css: канонні токени спираються на них, і це шар значень під шаром імен. */
/* v1.1.6.300 (REV46): акцентний текст на власному м'якому тлі переведено на
   --n-accent-ink. Патерн узятий із канону, але я перевірив його на всіх десяти
   акцентах: у світлій схемі 9 із 10 не дотягують до WCAG AA (2.24-4.01 при
   порозі 4.5). Чорнило — той самий акцент, затемнений рівно до 4.5 і ні на крок
   далі; у темній схемі воно дорівнює акценту, бо там патерн і так проходить.
   Обґрунтування з числами — у tokens.css над оголошенням токена. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 0, pill 1,
   відступи 0, вага 0. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
.w-profile-social-person-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  color: var(--kp-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--kp-color-border);
}
.w-profile-social-person-card:hover .w-profile-social-person-card__login,
.w-profile-social-person-card:focus-visible .w-profile-social-person-card__login { color: var(--kp-accent); }
.w-profile-social-person-card:focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 3px; }
.w-profile-social-person-card__avatar { display: inline-flex; }
.w-profile-social-person-card__body { min-width: 0; display: grid; gap: 1px; }
.w-profile-social-person-card__body strong,
.w-profile-social-person-card__login,
.w-profile-social-person-card__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-profile-social-person-card__login { color: var(--n-text-soft); transition: color var(--n-dur-fast) var(--n-ease); }
.w-profile-social-person-card__body small { color: var(--n-text-muted); font-size: var(--n-fs-sm); }
.w-profile-social-person-card__vip,
.w-profile-social-person-card__badge { padding: 3px 6px; border-radius: var(--kp-radius-pill); font-size: 10px; font-weight: 800; }
.w-profile-social-person-card__vip { color: var(--n-accent-ink); background: var(--n-accent-soft); }
.w-profile-social-person-card__badge { color: var(--n-text-soft); background: var(--kp-color-surface-muted); }
.w-profile-social-person-card.is-compact { grid-template-columns: auto minmax(0, 1fr) auto; padding: 7px 0; }
.w-profile-social-person-card.is-compact .w-profile-social-person-card__vip { display: none; }
.w-profile-social-person-card.is-compact .w-profile-social-person-card__badge { display: inline-flex; }
.w-profile-social-person-card.is-compact .w-profile-social-person-card__body strong { display: none; }
@media (prefers-reduced-motion: reduce) {
  .w-profile-social-person-card__login { transition: none; }
}