/* Final visual polish for the Horizon/Stoppin surfaces.
   Keep these overrides narrow: they address contrast, discovery status chrome,
   and the desktop navigation rail without changing application behavior. */

.stoppin-social-invitation {
  position: relative;
  overflow: hidden;
  border-color: rgb(255 121 0 / 0.28) !important;
  background:
    radial-gradient(circle at 8% 0%, rgb(255 121 0 / 0.16), transparent 30%),
    linear-gradient(145deg, rgb(17 24 33 / 0.98), rgb(8 12 18 / 0.98));
  color: #f8fafc;
  box-shadow:
    0 20px 46px rgb(0 0 0 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.stoppin-social-invitation::after {
  position: absolute;
  right: -5rem;
  bottom: -6rem;
  width: 13rem;
  height: 13rem;
  border-radius: 999px;
  background: rgb(255 121 0 / 0.08);
  filter: blur(34px);
  pointer-events: none;
  content: "";
}

.stoppin-social-invitation > * {
  position: relative;
  z-index: 1;
}

.stoppin-social-invitation h2 {
  color: #ffffff;
}

.stoppin-social-invitation p,
.stoppin-social-invitation .text-muted-foreground {
  color: #c6d0dc !important;
}

.stoppin-social-invitation > div > :where(a, button) {
  min-height: 2.6rem;
  border-radius: 999px;
  font-weight: 800;
}

.stoppin-social-invitation > div > :where(a, button):nth-child(2) {
  border-color: rgb(255 255 255 / 0.2) !important;
  background: rgb(255 255 255 / 0.07) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.stoppin-social-invitation > div > :where(a, button):nth-child(2):hover {
  border-color: rgb(255 121 0 / 0.5) !important;
  background: rgb(255 121 0 / 0.12) !important;
  color: #ffffff !important;
}

/* Editorial surfaces are intentionally nocturnal even when the surrounding
   content palette is light. Pin their readable foregrounds explicitly. */
.stoppin-editorial-intro,
.stoppin-social-invitation {
  --color-foreground: #f8fafc;
  --color-muted-foreground: #c6d0dc;
  --color-border: rgb(255 255 255 / 0.13);
}

.stoppin-editorial-intro .text-muted-foreground {
  color: #c6d0dc !important;
}

#discovery-results {
  position: relative;
  isolation: isolate;
  min-height: 4.4rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 1.05rem;
  background:
    linear-gradient(120deg, rgb(13 20 29 / 0.94), rgb(8 12 18 / 0.91)),
    radial-gradient(circle at 92% 0%, rgb(255 121 0 / 0.12), transparent 34%);
  color: #f8fafc;
  box-shadow:
    0 16px 40px rgb(0 0 0 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

#discovery-results::before {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(255 121 0 / 0.9), rgb(255 121 0 / 0.15) 44%, transparent 78%);
  content: "";
}

#discovery-results > div:first-child {
  min-width: 0;
}

#discovery-results > div:first-child > p:first-child {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

#discovery-results > div:first-child > p:nth-child(2),
#discovery-results .text-muted-foreground {
  color: #bfc9d5 !important;
}

#discovery-results > button {
  min-height: 2.35rem;
  padding-inline: 0.9rem;
  border-color: rgb(255 121 0 / 0.28) !important;
  background: rgb(255 121 0 / 0.08);
  color: #ffd2ad !important;
  font-weight: 750;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

#discovery-results > button:hover {
  border-color: rgb(255 121 0 / 0.5) !important;
  background: rgb(255 121 0 / 0.16) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* There must be exactly one active desktop rail. Inactive links no longer
   paint an orange hover rail, which prevents the old and new routes from
   appearing active at the same time during navigation. */
.stoppin-header .stoppin-horizon-rail {
  transition: none !important;
}

@media (max-width: 767px) {
  #discovery-results {
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.72rem 0.78rem;
  }

  #discovery-results > div:first-child {
    flex: 1 1 12rem;
  }

  #discovery-results > button {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #discovery-results > button {
    transition: none;
  }
}