/* Most watched: viewer counts shown as small lit cabin signs (topbar and Explore panel). */
.topbar-watching,
.explore-watch-count {
  --watch-sign: linear-gradient(180deg, #2a2733 0%, #121019 100%);
  --watch-glow: #ffd27a;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  background: var(--watch-sign);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-family: var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.topbar-watching[hidden] { display: none; }
.topbar-watching svg,
.explore-watch-count svg { flex: none; color: var(--watch-glow); filter: drop-shadow(0 0 3px rgba(255, 196, 92, 0.7)); }

.topbar-watching { height: 24px; padding: 0 9px 0 7px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; text-shadow: none; }
.topbar-watching-label { font-weight: 600; color: rgba(255, 255, 255, 0.78); }
html.airshow-mobile-runtime .topbar-watching { order: -1; height: 18px; gap: 3px; padding: 0 6px 0 5px; font-size: 10px; border-radius: 4px; }
html.airshow-mobile-runtime .topbar-watching svg { width: 12px; height: 10px; }
html.airshow-mobile-runtime .topbar-watching-label { display: none; }

.topbar-watching-count,
.explore-watch-count b { display: inline-block; min-width: 1ch; text-align: right; }
.is-ticking { animation: watchTick 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes watchTick {
  0% { transform: translateY(55%); opacity: 0; color: var(--watch-glow, #ffd27a); }
  60% { color: var(--watch-glow, #ffd27a); }
  100% { transform: none; opacity: 1; }
}

/* Explore panel section (shown under the tracked flight while the search box is empty). */
.explore-watch {
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  margin: 2px 2px 0;
  padding-top: 10px;
  border-top: 1px solid var(--explore-line, rgba(255, 255, 255, 0.12));
}
/* With an empty search box the results hold only the tracked flight: keep it whole and let the list scroll. */
.explore-search-dock:not(.has-query) .explore-search-results { flex-shrink: 0; }
.explore-watch { min-height: 0; flex-shrink: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.explore-watch[hidden],
.explore-search-dock.has-query .explore-watch { display: none; }
.explore-watch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 2px 4px; }
.explore-watch-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--explore-text, #fff); }
.explore-watch-note { font-size: 11px; color: var(--explore-faint, rgba(150, 164, 186, 0.78)); }
.explore-watch-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.explore-watch-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--explore-text, #fff);
  text-align: left;
  transition: background-color 0.12s ease;
}
.explore-watch-row::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
}
.explore-watch-row:hover { background: rgba(255, 255, 255, 0.06); }
.explore-watch-row.is-selected { background: rgba(255, 223, 90, 0.06); }
.explore-watch-row.is-selected::before { background: var(--explore-accent, #ffdf5a); }
.explore-watch-rank { font-size: 12px; font-weight: 700; color: var(--explore-faint, rgba(150, 164, 186, 0.78)); font-variant-numeric: tabular-nums; text-align: center; }
.explore-watch-main { display: grid; gap: 2px; min-width: 0; }
.explore-watch-callsign,
.explore-watch-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-watch-callsign { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.explore-watch-meta { font-size: 12px; color: var(--explore-faint, rgba(150, 164, 186, 0.78)); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.explore-watch-count { height: 22px; padding: 0 8px 0 6px; font-size: 12px; font-weight: 700; }

html.airshow-mobile-runtime .explore-watch { padding-top: 6px; gap: 2px; }
html.airshow-mobile-runtime .explore-watch-row { padding: 4px 6px 4px 8px; gap: 6px; }
html.airshow-mobile-runtime .explore-watch-callsign { font-size: 12px; }
html.airshow-mobile-runtime .explore-watch-meta { font-size: 11px; }
html.airshow-mobile-runtime .explore-watch-count { height: 19px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .is-ticking { animation: none; }
  .explore-watch-row { transition: none; }
}