/* Neon edge rail left of the logo. Lights the joke chip. Intensity = glow wheel. */

.snet-gagrail {
  --n: var(--snet-night-neon, var(--snet-glow, 0));
  position: fixed;
  left: 0;
  top: 0;
  width: 7px;
  height: var(--snet-header-h, 160px);
  z-index: 10110;
  pointer-events: none;
  border-radius: 0 4px 4px 0;
  background:
    linear-gradient(180deg,
      #e7fbff 0%,
      #7af0ff 16%,
      #00d4ff 50%,
      #7af0ff 84%,
      #e7fbff 100%);
  box-shadow:
    0 0 calc(8px * var(--n)) #fff,
    0 0 calc(18px * var(--n)) #7af0ff,
    0 0 calc(36px * var(--n)) rgba(0, 212, 255, calc(0.95 * var(--n))),
    14px 0 calc(42px * var(--n)) rgba(0, 180, 255, calc(0.55 * var(--n))),
    36px 0 calc(64px * var(--n)) rgba(0, 160, 255, calc(0.28 * var(--n)));
  opacity: calc(0.2 + 0.8 * var(--n));
}

.snet-gagrail::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: min(280px, 42vw);
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 220, 255, calc(0.28 * var(--n))) 0%,
    rgba(0, 180, 255, calc(0.1 * var(--n))) 36%,
    transparent 78%);
}

html[data-glow="off"] .snet-gagrail {
  opacity: 0;
  box-shadow: none;
}

html[data-glow="off"] .snet-gagrail::after {
  opacity: 0;
}

/* Joke chip: no yellow. Glass, lit from the left rail. */
#header .snet-gagbar a.snet-hero-badge.snet-hero-gag.snet-lampgag,
.snet-gagbar a.snet-hero-badge.snet-hero-gag.snet-lampgag,
.snet-gagbar a.snet-lampgag,
a.snet-lampgag {
  --n: var(--snet-night-neon, var(--snet-glow, 0));
  color: #e8f4ff !important;
  -webkit-text-fill-color: #e8f4ff !important;
  border: 1px solid rgba(125, 211, 252, calc(0.22 + 0.45 * var(--n))) !important;
  background: rgba(6, 18, 32, 0.28) !important;
  background-image: linear-gradient(90deg,
    rgba(0, 220, 255, calc(0.22 * var(--n))) 0%,
    rgba(0, 180, 255, calc(0.06 * var(--n))) 42%,
    transparent 78%) !important;
  box-shadow:
    -16px 0 28px rgba(0, 200, 255, calc(0.32 * var(--n))),
    0 0 calc(18px * var(--n)) rgba(0, 212, 255, calc(0.2 * var(--n))),
    inset 8px 0 18px rgba(0, 220, 255, calc(0.12 * var(--n))) !important;
}

.snet-gagbar a.snet-lampgag::after {
  background: linear-gradient(90deg,
    rgba(0, 230, 255, calc(0.22 * var(--snet-night-neon, var(--snet-glow, 0)))) 0%,
    transparent 58%) !important;
}

html[data-theme="day"] .snet-gagbar a.snet-lampgag,
html[data-theme="day"] .snet-gagbar .snet-gagline {
  color: #062033 !important;
  -webkit-text-fill-color: #062033 !important;
  border-color: rgba(0, 120, 170, calc(0.28 + 0.35 * var(--snet-night-neon, var(--snet-glow, 0)))) !important;
}

html[data-theme="day"] .snet-gagbar a.snet-lampgag {
  background: rgba(255, 255, 255, 0.22) !important;
  background-image: linear-gradient(90deg,
    rgba(0, 200, 255, calc(0.18 * var(--snet-night-neon, var(--snet-glow, 0)))) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 80%) !important;
}

.snet-gagbar .snet-gagline {
  text-shadow:
    0 0 calc(10px * var(--snet-night-neon, var(--snet-glow, 0))) rgba(0, 220, 255, 0.55) !important;
}

html[data-theme="day"] .snet-gagbar .snet-gagline {
  text-shadow:
    0 0 calc(8px * var(--snet-night-neon, var(--snet-glow, 0))) rgba(0, 200, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.snet-gagbar .snet-lamp__aura,
.snet-gagbar .snet-lamp__bloom {
  opacity: 0 !important;
  display: none !important;
}

.snet-gagbar .snet-lamp__svg {
  filter:
    sepia(1) hue-rotate(158deg) saturate(2.1) brightness(1.2)
    drop-shadow(0 0 calc(8px * var(--snet-night-neon, var(--snet-glow, 0))) rgba(0, 220, 255, 0.9)) !important;
}

html[data-glow="off"] .snet-gagbar a.snet-lampgag,
html[data-glow="off"] .snet-gagbar a.snet-lampgag::after {
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  .snet-gagrail {
    width: 5px;
  }
  .snet-gagbar {
    padding-left: 12px !important;
  }
}

.snet-gagbar a.snet-lampgag {
  padding: 6px 16px 6px 14px !important;
  gap: 0 !important;
}

.snet-gagbar .snet-lamp {
  display: none !important;
}