/* News ticker bar (under the header menu) */
.nt-bar { display: flex; align-items: stretch; background: var(--nt-bg, #111827); color: var(--nt-text, #fff);
  min-height: 46px; font-family: inherit; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); }
.nt-label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 18px; background: var(--nt-label-bg, #e11d2e);
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; position: relative; z-index: 2; }
.nt-label::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 0; width: 20px; background: inherit; transform: skewX(-18deg); z-index: -1; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: nt-pulse 1.4s ease-in-out infinite; }
@keyframes nt-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.nt-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; margin-left: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.nt-track { display: flex; width: max-content; will-change: transform; }
.nt-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; }
.nt-item { display: flex; align-items: center; flex: 0 0 auto; }
.nt-item::after { content: ""; width: 6px; height: 6px; margin: 0 22px; border-radius: 50%; background: var(--nt-label-bg, #e11d2e); flex: 0 0 auto; }
.nt-link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: inherit; text-decoration: none; white-space: nowrap; font-size: 16px; font-weight: 500; }
a.nt-link:hover .nt-text { text-decoration: underline; }
.nt-img { width: 56px; height: 34px; object-fit: cover; border-radius: 5px; background: rgba(255,255,255,.12); flex: 0 0 auto; display: block; }

.nt-toggle { flex: 0 0 auto; width: 44px; border: 0; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; font-size: 13px; }
.nt-toggle:hover { background: rgba(255,255,255,.18); }

/* animation is driven by JS (sets --nt-dur); without JS the strip is simply scrollable */
.nt-bar.is-ready .nt-track { animation: nt-scroll var(--nt-dur, 40s) linear infinite; }
.nt-bar[data-dir="right"].is-ready .nt-track { animation-direction: reverse; }
.nt-bar.is-paused .nt-track,
.nt-bar.is-hover .nt-track { animation-play-state: paused; }
@keyframes nt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nt-bar:not(.is-ready) .nt-viewport { overflow-x: auto; scrollbar-width: none; }

@media (max-width: 640px) {
  .nt-bar { min-height: 42px; }
  .nt-label { padding: 0 12px; font-size: 12px; }
  .nt-label::after { right: -8px; width: 16px; }
  .nt-link { font-size: 14px; }
  .nt-img { width: 46px; height: 28px; }
  .nt-item::after { margin: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-bar.is-ready .nt-track { animation: none; }
  .nt-bar.is-ready .nt-viewport { overflow-x: auto; scrollbar-width: none; }
  .nt-dot { animation: none; }
}

/* headlines from websites */
.nt-bar.nt-empty { display: none; }
.nt-item.nt-feed .nt-img { background: rgba(255,255,255,.08); }