/* Keep expansion colour contained inside the active watcher tab. */
#hub-bar {
  border-bottom-color: rgba(167, 139, 250, .14) !important;
  background: linear-gradient(135deg, rgba(12, 15, 30, .98), rgba(8, 10, 21, .96)) !important;
}

#hub-bar::after {
  display: none !important;
}

#hub-logo::after {
  color: #6f7a92 !important;
}

#hub-panels,
.blocked {
  background: #050711 !important;
}

#hub-tabs .htab.on {
  box-shadow:
    0 7px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 22px color-mix(in srgb, var(--tab-accent) 14%, transparent) !important;
}

body.hub-switching #hub-tabs .htab.on {
  animation: selectedTabPulse .8s ease-in-out both;
}

@keyframes selectedTabPulse {
  0%, 100% {
    border-color: color-mix(in srgb, var(--tab-accent) 55%, transparent);
    filter: brightness(1);
  }
  50% {
    border-color: color-mix(in srgb, var(--tab-accent) 82%, white 5%);
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hub-switching #hub-tabs .htab.on {
    animation: none !important;
  }
}