/* Колокольчик «Что нового» (engine/static/news.js). Цвета — роли токенов. */
@layer components {
  .news { position: relative; display: inline-flex; }
  .news-bell { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: inherit; text-decoration: none; }
  .news-bell__label { font-size: .9rem; }
  .news-bell__dot { position: absolute; top: 2px; left: 12px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font: 600 11px/18px var(--font-mono, monospace); text-align: center; }
  .news-panel { position: fixed; right: 16px; top: 72px; z-index: 30; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
    background: var(--surface-2); color: var(--text); border: var(--border-frame-width, 2px) solid var(--frame); border-radius: 14px;
    box-shadow: var(--shadow-hard, 4px 4px 0 var(--frame)); padding: 12px; }
  .news-h { margin: 0 0 8px; font-weight: 700; }
  .news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .news-list a { display: grid; gap: 2px; padding: 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
  .news-list a:hover, .news-list a:focus-visible { background: var(--surface-sunken); }
  .news-list .is-new .news-title { font-weight: 700; }
  .news-type { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  .news-date { font-size: .78rem; color: var(--text-muted); }
  .news-all { display: inline-block; margin-top: 8px; color: var(--link); }
  .news-empty { margin: 0; color: var(--text-muted); }
  @media (max-width: 640px) { .news-bell__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
}