/* Styling for the Pagefind dialog in search.js. Mintlify's chrome is Tailwind
   with class-based dark mode (`dark` on <html>), so this follows the same
   switch and borrows the docs' primary colour from docs.json. */

:root {
  --mos-search-accent: #2264e6;
}
html.dark {
  --mos-search-accent: #5294ff;
}

.mos-search[hidden] {
  display: none;
}

.mos-search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 5.5rem 1rem 2rem;
  background: rgb(15 18 23 / 45%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mos-search__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 34rem;
  max-height: min(28rem, 70vh);
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / 35%);
  color: #14161a;
  font: 400 0.9375rem/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
html.dark .mos-search__panel {
  border-color: rgb(255 255 255 / 10%);
  background: #15181d;
  color: #f4f6f8;
}

/* Input */

.mos-search__bar {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  flex: none;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 8%);
}
html.dark .mos-search__bar {
  border-bottom-color: rgb(255 255 255 / 10%);
}

.mos-search__bar svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  opacity: 0.5;
}

.mos-search__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.mos-search__input::placeholder {
  color: currentColor;
  opacity: 0.45;
}

/* Results */

.mos-search__list {
  overflow-y: auto;
  flex: 1 1 auto;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
}

.mos-search__subs {
  margin: 0;
  padding: 0 0 0 0.875rem;
  list-style: none;
}

.mos-search__hit {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.mos-search__hit[aria-selected="true"] {
  background: rgb(34 100 230 / 9%);
}
html.dark .mos-search__hit[aria-selected="true"] {
  background: rgb(82 148 255 / 14%);
}

.mos-search__title {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mos-search__hit[aria-selected="true"] .mos-search__title {
  color: var(--mos-search-accent);
}
.mos-search__subs .mos-search__title {
  font-weight: 500;
  opacity: 0.85;
}
.mos-search__subs .mos-search__title::before {
  margin-right: 0.4rem;
  content: "\21B3"; /* ↳ — this hit is an anchor inside the page above */
  opacity: 0.5;
}

.mos-search__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.65;
}
.mos-search__excerpt mark {
  background: none;
  color: var(--mos-search-accent);
  font-weight: 600;
}

.mos-search__status {
  padding: 1.25rem 1rem;
  font-size: 0.875rem;
  opacity: 0.6;
  text-align: center;
}
.mos-search__status:empty {
  display: none;
}

/* Footer */

.mos-search__foot {
  display: flex;
  gap: 1rem;
  flex: none;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgb(0 0 0 / 8%);
  font-size: 0.75rem;
  opacity: 0.55;
}
html.dark .mos-search__foot {
  border-top-color: rgb(255 255 255 / 10%);
}
.mos-search__foot kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font: inherit;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .mos-search__panel {
    animation: mos-search-in 120ms ease-out;
  }
  @keyframes mos-search-in {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}