/* News ticker (js/news.js): a bar flush with the top edge of the screen.
   It uses the dashboard's own colour variables, so day and night themes
   apply automatically. Loaded after styles.css. To drop the ticker, remove
   this file's <link>, the #ticker markup and js/news.js from index.html, and
   the .ticker rows in styles.css (grid areas and the :has() rule). */

.ticker {
  grid-area: ticker;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Full-bleed: pulled up over the page padding and out past the sides, with
     a little extra so the occasional burn-in pixel shift never shows a gap
     at the screen edge. The visible bar is 2.6rem tall. */
  margin: -2rem -2rem 0;
  padding: 0.5rem 2rem 0;
  height: 3.1rem;
  background: var(--panel);
  min-width: 0;
}

.ticker__label {
  flex: none;
  padding-left: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.ticker__window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 4rem), transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll var(--ticker-duration, 120s) linear infinite;
}

.ticker__set { display: flex; flex: none; }

.ticker__item {
  font-size: 1.4rem;
  color: var(--text);
}
.ticker__item::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 1.75rem;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.7;
  vertical-align: 0.18em;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Old headlines are dimmed (same idea as the panels) once the feed has been
   failing for a while. */
.ticker[data-stale="1"] .ticker__window { opacity: 0.5; }

[hidden].ticker { display: none !important; }