/* Site search (Pagefind) - the search box on help and blog pages and the
   /search results page. Loaded by bundle-less static pages only; the app
   never loads it. Tokens only, like every css/ file.

   The static pages that load this sheet do not all carry app.html's :root -
   blog pages get public/static/brand-tokens.css (no border/surface/shadow/
   focus tokens), help pages get help/help.css's own copy. The block below
   supplies the handful this component needs, SCOPED to the component so it
   never changes a page's own values, at app.html's exact current values
   (the same precedent help/help.css and blog/blog.css use). */
/* stylelint-disable color-no-hex, color-named, scale-unlimited/declaration-strict-value */
.sl-search,
.sl-search-page {
  --sl-border: #e0e4f0;
  --sl-surface: #ffffff;
  --sl-purple: #6c46e0;
  --sl-purple-deep: #5635c2;
  --sl-purple-soft: #ede7ff;
  --sl-purple-border: #c7d2fe;
  --sl-ink: #1a1b2e;
  --sl-ink-2: #3b3d54;
  --sl-ink-mute: #5e6173;
  --sl-bg: #f0f4ff;
  --sl-gold-soft: #faeeda;
  --sl-r-tile: 12px;
  --sl-r-card: 16px;
  --sl-r-pill: 999px;
  --sl-shadow-1: 0 1px 3px rgba(26, 27, 46, 0.08);
  --sl-shadow-2: 0 4px 12px rgba(26, 27, 46, 0.1);
  --sl-shadow-pop: 0 4px 12px rgba(26, 27, 46, 0.1), 0 12px 32px rgba(26, 27, 46, 0.12);
  --sl-focus: 3px solid #4f46e5;
  --sl-focus-offset: 2px;
}
/* stylelint-enable color-no-hex, color-named, scale-unlimited/declaration-strict-value */

/* ---- The box (both sizes) ---- */
.sl-search {
  position: relative;
  margin: 0;
  font: inherit;
}
.sl-search--compact {
  flex: 1 1 220px;
  max-width: 420px;
  min-width: 0;
}
.sl-search--wide {
  margin: 0 0 1.25rem;
}
.sl-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sl-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--sl-purple-border);
  border-radius: var(--sl-r-pill);
  background: var(--sl-surface);
  box-shadow: var(--sl-shadow-1);
}
.sl-search--wide .sl-search-field {
  min-height: 48px;
  padding: 0 0.6rem 0 1rem;
}
.sl-search-field:focus-within {
  border-color: var(--sl-purple);
  outline: var(--sl-focus);
  outline-offset: var(--sl-focus-offset);
}
.sl-search-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--sl-ink-mute);
}
.sl-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sl-ink);
}
.sl-search-input::-webkit-search-decoration,
.sl-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.sl-search-submit {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--sl-r-pill);
  background: var(--sl-purple);
  color: var(--sl-surface);
  font: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}
.sl-search-submit:hover {
  background: var(--sl-purple-deep);
}
.sl-search-submit:focus-visible {
  outline: var(--sl-focus);
  outline-offset: var(--sl-focus-offset);
}

/* ---- Instant results under the box ---- */
.sl-search-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(560px, calc(100vw - 2rem));
  padding: 6px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-card);
  box-shadow: var(--sl-shadow-pop);
  text-align: left;
}
.sl-search--wide .sl-search-pop {
  left: 0;
  width: auto;
}
.sl-search-pop[hidden] {
  display: none;
}
.sl-search-pop-head {
  padding: 8px 12px 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sl-ink-mute);
}
.sl-search-option {
  display: block;
  padding: 9px 12px;
  border-radius: var(--sl-r-tile);
  color: inherit;
  text-decoration: none;
}
.sl-search-option:hover,
.sl-search-option[aria-selected="true"] {
  background: var(--sl-purple-soft);
}
.sl-search-option-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--sl-ink);
}
.sl-search-option-excerpt,
.sl-search-result-excerpt {
  margin-top: 2px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--sl-ink-2);
}
.sl-search-option-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-search-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--sl-border);
  border-radius: 0 0 var(--sl-r-tile) var(--sl-r-tile);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--sl-purple-deep);
  text-decoration: none;
}
.sl-search-all:hover,
.sl-search-all[aria-selected="true"] {
  background: var(--sl-purple-soft);
}
.sl-search-pop-note {
  padding: 10px 12px;
  font-size: 0.88rem;
  color: var(--sl-ink-2);
}
.sl-search mark,
.sl-search-page mark {
  background: var(--sl-gold-soft);
  color: var(--sl-ink);
  padding: 0 2px;
}

/* ---- Type badge (shared) ---- */
.sl-search-type {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-pill);
  background: var(--sl-surface);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sl-ink-2);
  white-space: nowrap;
}
.sl-search-type--help {
  border-color: var(--sl-purple-border);
  color: var(--sl-purple-deep);
}

/* ---- /search page ---- */
.sl-search-page h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.32rem, 4.2vw, 2rem);
  line-height: 1.2;
}
.sl-search-page .sl-search-input {
  font-size: 1.1rem;
}
.sl-search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin-bottom: 0.9rem;
}
.sl-search-filters {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.sl-search-chip {
  min-height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-pill);
  background: var(--sl-surface);
  color: var(--sl-ink-2);
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.sl-search-chip[aria-pressed="true"] {
  background: var(--sl-purple-soft);
  border-color: var(--sl-purple-border);
  color: var(--sl-purple-deep);
}
.sl-search-chip:focus-visible {
  outline: var(--sl-focus);
  outline-offset: var(--sl-focus-offset);
}
.sl-search-chip-count {
  font-weight: 700;
  color: var(--sl-ink-mute);
}
.sl-search-status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sl-ink-mute);
}
.sl-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sl-search-result {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-card);
  box-shadow: var(--sl-shadow-1);
}
.sl-search-result > a {
  display: block;
  padding: 0.85rem 1.1rem;
  color: inherit;
  text-decoration: none;
}
.sl-search-result > a:hover .sl-search-result-title {
  text-decoration: underline;
}
.sl-search-result > a:focus-visible {
  outline: var(--sl-focus);
  outline-offset: var(--sl-focus-offset);
  border-radius: var(--sl-r-card);
}
.sl-search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sl-ink-mute);
}
.sl-search-result-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-search-result-title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sl-ink);
}
.sl-search-result-excerpt {
  font-size: 0.93rem;
  line-height: 1.45;
}
.sl-search-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.sl-search-more-btn {
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid var(--sl-purple-border);
  border-radius: var(--sl-r-pill);
  background: var(--sl-surface);
  color: var(--sl-purple-deep);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sl-search-more-btn:hover {
  background: var(--sl-purple-soft);
}
.sl-search-more-btn:focus-visible {
  outline: var(--sl-focus);
  outline-offset: var(--sl-focus-offset);
}
.sl-search-empty {
  padding: 1rem 0.9rem;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-card);
  box-shadow: var(--sl-shadow-1);
}
.sl-search-empty p {
  margin: 0 0 0.6rem;
  color: var(--sl-ink-2);
  line-height: 1.45;
}
.sl-search-empty p:first-child {
  font-weight: 800;
  color: var(--sl-ink);
}
.sl-search-empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.sl-search-empty-links a {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-pill);
  background: var(--sl-bg);
  color: var(--sl-ink-2);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.sl-search-skeleton {
  height: 12px;
  margin: 6px 0;
  border-radius: var(--sl-r-pill);
  background: var(--sl-border);
}
@media (max-width: 600px) {
  /* The compact box sits at the LEFT of the blog/pattern top bar (.blog-topbar,
     scripts/buildBlog.js), where a dropdown anchored to the box's right edge
     runs off the left of the screen. On a phone the dropdown is positioned by
     the bar instead, so it spans the bar's width whichever side the box is on.
     The help pages' box is at the right of its row and is unaffected. */
  .blog-topbar {
    position: relative;
  }
  .blog-topbar .sl-search--compact {
    position: static;
  }
  .sl-search-result-path {
    display: none;
  }
  .sl-search-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }
  .sl-search-chip {
    flex: 0 0 auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sl-search-skeleton {
    animation: sl-search-pulse 1.2s ease-in-out infinite;
  }
  @keyframes sl-search-pulse {
    50% {
      opacity: 0.55;
    }
  }
}