/* Раздел «Что нового». */

/* --- «Что нового» ------------------------------------------------------ */

/* Подпись только для читалок экрана: «есть непрочитанное обновление». Точка
   сама по себе цветная и слепому человеку не говорит ничего. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.topbar .novosti { display: inline-flex; align-items: center; gap: 5px; }
/* Красная точка непрочитанного. Она НЕ охряная, как метка заявок у пульта:
   там сервис просит администратора что-то сделать, здесь — сообщает новость,
   и два разных смысла не должны выглядеть одинаково. */
.novosti-tochka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stop);
  vertical-align: 2px;
}

.novost {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 0 0 12px;
  box-shadow: var(--sh-1);
}
.novost-svezhaya { border-color: var(--accent-ring); }
.novost-shapka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.novost-versiya { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.novost-data { font-size: 13px; color: var(--fg-3); }
.novost-metka {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  padding: 1px 8px;
}
.novost-zagolovok { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.novost-punkty { margin: 0; padding-left: 20px; color: var(--fg-1); }
.novost-punkty li { margin: 0 0 4px; }
.novost-punkty li:last-child { margin-bottom: 0; }

/* --- полоса прокрутки: своя, спокойная, чуть толще системной ----------
   Тонкая системная полоса на длинных экранах (список обновлений, лист
   найденных цен) плохо ловится мышью. Берём 14 пикселей — заметно шире
   стандартных 8–10 и всё ещё не украшение. Цвета взяты токенами, поэтому
   тёмная тема получает свою полосу тем же правилом. */
* { scrollbar-color: var(--bd-2) transparent; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bd-2);
  border-radius: 8px;
  /* Прозрачная рамка внутрь бегунка: он выглядит уже дорожки и не липнет к
     краю окна. Фон рисуется от границы содержимого, иначе рамка была бы
     закрашена вместе с бегунком. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }