/* KNN ticker styles — shared by the OBS standalone page (?mode=obs) and the
   kerbalrealtime.com home-page embed (mode=embed). Colours mirror OBS_Ticker_v2. */

.knn-ticker {
  --knn-ticker-color: #7bb1bd;
  --knn-ticker-accent: #aaaaaa;
  --knn-ticker-date-color: #d8e4f0;
  --knn-ticker-bg: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(10, 10, 10, 1) 50%, rgba(0, 0, 0, 1) 100%);
  --knn-ticker-height: 60px;
  --knn-ticker-font: 24px;
  --knn-ticker-border: 5px;
  --knn-ticker-gap: 1.1em;
  --knn-ticker-duration: 60s;

  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--knn-ticker-height);
  box-sizing: border-box;
  overflow: hidden;
  color: var(--knn-ticker-color);
  background: var(--knn-ticker-bg);
  border-top: var(--knn-ticker-border) solid var(--knn-ticker-color);
  border-bottom: var(--knn-ticker-border) solid var(--knn-ticker-color);
  font-family: "Proxima Nova", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: var(--knn-ticker-font);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.knn-ticker *,
.knn-ticker *::before,
.knn-ticker *::after { box-sizing: border-box; }

/* Pinned brand badge + date chip (does not scroll). */
.knn-ticker__badge {
  flex: none;
  display: flex;
  align-items: center;
  gap: .55em;
  padding: 0 .9em 0 .8em;
  background: rgba(123, 177, 189, .14);
  border-right: 2px solid rgba(123, 177, 189, .55);
  letter-spacing: .08em;
  position: relative;
  z-index: 2;
}
.knn-ticker__brand {
  /* CNN-style red logo block (parody). */
  align-self: center;
  padding: .12em .32em .1em .4em;
  background: #cc0000;
  color: #ffffff;
  border-radius: 2px;
  font-weight: 900;
  letter-spacing: .14em;
}
.knn-ticker__date {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--knn-ticker-date-color);
  opacity: .9;
  padding: .25em .5em;
  border: 1px solid rgba(216, 228, 240, .35);
  border-radius: 3px;
}
.knn-ticker__date[hidden] { display: none; }
.knn-ticker__clock {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--knn-ticker-color);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  opacity: .95;
  padding-left: .55em;
  border-left: 1px solid rgba(123, 177, 189, .4);
}

/* Scrolling area with a soft fade on both edges. */
.knn-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5em, #000 calc(100% - 2.5em), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5em, #000 calc(100% - 2.5em), transparent 100%);
}
.knn-ticker__track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  will-change: transform;
  animation: knn-ticker-scroll var(--knn-ticker-duration) linear infinite;
}
.knn-ticker__run {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-left: var(--knn-ticker-gap);
}
.knn-ticker__item { flex: none; }
/* Date marker leading each day's group of headlines. */
.knn-ticker__item--date {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--knn-ticker-date-color);
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .16em;
  padding: .32em .7em .3em .7em;
  border: 1px solid rgba(216, 228, 240, .4);
  border-left: .35em solid var(--knn-ticker-color);
  border-radius: 3px;
  background: rgba(123, 177, 189, .14);
}
.knn-ticker__sep {
  flex: none;
  width: 2px;
  height: .95em;
  margin: 0 1.1em;
  background: rgba(123, 177, 189, .45);
}
.knn-ticker__item--event {
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.knn-ticker__event-badge {
  color: #ffffff;
  background: #cc0000;
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .32em .7em;
  border-radius: 3px;
}
.knn-ticker__dot {
  flex: none;
  margin: 0 .7em;
  color: var(--knn-ticker-accent);
}
.knn-ticker--fallback .knn-ticker__item { opacity: .75; }

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

/* Reduced motion: no scrolling — one headline at a time, cross-faded by ticker.js. */
.knn-ticker--static .knn-ticker__track { animation: none; }
.knn-ticker--static .knn-ticker__viewport { -webkit-mask-image: none; mask-image: none; }
.knn-ticker__run--static {
  padding: 0 1em;
  white-space: normal;
  line-height: 1.15;
  font-size: .8em;
  animation: knn-ticker-fade .5s ease-out;
}
@keyframes knn-ticker-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* ── OBS mode: full-width bar at the bottom of a transparent 1920×1080 page ─────── */
.knn-ticker-page,
.knn-ticker-page body {
  margin: 0;
  background: transparent;
  overflow: hidden;
  height: 100%;
}
.knn-ticker-host--standalone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.knn-ticker--obs .knn-ticker__close { display: none; }

/* ── Embed mode: compact bar overlaid on the website map ─────────────────────── */
.knn-ticker--embed {
  --knn-ticker-height: 40px;
  --knn-ticker-font: 15px;
  --knn-ticker-border: 2px;
  --knn-ticker-bg: rgba(5, 7, 13, .86);
  border-bottom: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
.knn-ticker--embed .knn-ticker__badge {
  padding: 0 .8em 0 .9em;
  gap: .5em;
}
.knn-ticker--embed .knn-ticker__date { font-size: .7em; }
.knn-ticker--embed .knn-ticker__clock { font-size: .7em; }
.knn-ticker--embed .knn-ticker__item--date { font-size: .78em; }
.knn-ticker--clickable { cursor: pointer; }
.knn-ticker--clickable:hover .knn-ticker__track { animation-play-state: paused; }
.knn-ticker--clickable:hover .knn-ticker__badge { background: rgba(123, 177, 189, .26); }
.knn-ticker__close {
  flex: none;
  width: 2.2em;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(123, 177, 189, .3);
  background: transparent;
  color: var(--knn-ticker-accent);
  font: inherit;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.knn-ticker__close:hover { color: #fff; background: rgba(123, 177, 189, .18); }
.knn-ticker__close:focus-visible { outline: 2px solid var(--knn-ticker-color); outline-offset: -3px; }

@media (max-width: 900px) {
  .knn-ticker--embed {
    --knn-ticker-height: 34px;
    --knn-ticker-font: 13px;
    --knn-ticker-gap: .9em;
  }
  .knn-ticker--embed .knn-ticker__badge { padding: 0 .6em; }
  .knn-ticker--embed .knn-ticker__date { display: none; }
  .knn-ticker--embed .knn-ticker__clock { display: none; }
  .knn-ticker--embed .knn-ticker__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.2em, #000 calc(100% - 1.2em), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.2em, #000 calc(100% - 1.2em), transparent 100%);
  }
}