/* ==========================================================================
   "Мир нейросетей" (news.html) — реакции, «Поделиться», подсветка якоря.
   Отдельный файл поверх style.css (2026-09-29): использует его токены.
   ========================================================================== */

/* Якорь news.html#<id>: карточка не прячется под липкой шапкой */
.news-card { scroll-margin-top: 185px; } /* шапка липкая, ~155px */
.news-card.is-highlighted { animation: news-highlight 4s var(--ease); }
@keyframes news-highlight {
  0%, 70% { box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.55), 0 14px 40px -18px rgba(var(--color-accent-rgb), 0.5); }
  100%    { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

/* Ряд действий: реакции слева, «Поделиться» справа */
.news-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}
.news-reactions { display: flex; flex-wrap: wrap; gap: 8px; }

.news-react-btn,
.news-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 980px;
  cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.news-react-emoji { font-size: 17px; line-height: 1; }
.news-react-count { min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.news-react-count:empty { display: none; }

.news-react-btn:hover,
.news-share-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.news-react-btn:active { transform: scale(0.94); }
.news-react-btn.is-mine {
  background: rgba(var(--color-accent-rgb), 0.10);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.news-react-btn:disabled { cursor: progress; }
.news-react-btn:focus-visible,
.news-share-btn:focus-visible,
.news-share-item:focus-visible,
.news-share-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.news-share-btn svg { flex: none; }

/* Меню «Поделиться» (одно на страницу, позиционируется из JS) */
.news-share-menu {
  position: absolute;
  z-index: 1000;
  width: 264px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -22px rgba(29, 29, 31, 0.35);
}
.news-share-menu[hidden], .news-share-backdrop[hidden] { display: none; }
.news-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.news-share-close {
  width: 28px; height: 28px;
  font-size: 20px; line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.news-share-close:hover { background: var(--color-bg-elevated); color: var(--color-text); }
.news-share-list { display: flex; flex-direction: column; gap: 2px; }
.news-share-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.news-share-item:hover { background: var(--color-bg-elevated); }
.news-share-item.is-done { color: #1e7a34; }
.news-share-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  border-radius: 50%;
}
.news-share-badge-telegram { background: #229ED9; }
.news-share-badge-whatsapp { background: #25A244; }
.news-share-badge-vk       { background: #0077FF; }
.news-share-badge-x        { background: #1D1D1F; font-size: 13px; }
.news-share-badge-copy     { background: var(--color-accent); font-size: 15px; }

/* Мобильные: меню — нижняя шторка */
.news-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(29, 29, 31, 0.35);
}
@media (max-width: 640px) {
  .news-share-menu.is-sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
  .news-share-item { min-height: 52px; font-size: 16px; }
  .news-react-btn, .news-share-btn { min-height: 40px; }
  .news-actions { gap: 12px; }
  .news-card { scroll-margin-top: 88px; }
}
body.news-share-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .news-card.is-highlighted { animation: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.55); }
  .news-react-btn:active { transform: none; }
}