/*
 * search.css — Cmd+K typeahead modal. Centered panel, backdrop blur,
 * mirrors common dev-docs search affordances (Stripe, Vercel, Linear).
 *
 * Visibility is driven by the .is-open class on the .search-modal root,
 * toggled by static/js/search.js.
 */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  pointer-events: none;
}
.search-modal.is-open {
  display: block;
  pointer-events: auto;
}

.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(var(--background) / 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-modal-panel {
  position: relative;
  margin: 12vh auto 0 auto;
  max-width: 36rem;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -10px hsl(0 0% 0% / 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.search-modal-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}
.search-modal-icon {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.search-modal-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: hsl(var(--foreground));
  font-size: var(--text-base);
  font-family: var(--font-sans);
  padding: 0;
  min-width: 0;
}
.search-modal-input::placeholder {
  color: hsl(var(--muted-foreground));
}
.search-modal-close {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: var(--space-0_5) var(--space-1_5);
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  flex-shrink: 0;
}

.search-modal-results {
  overflow-y: auto;
  flex: 1 1 auto;
}

.search-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
}

.search-result {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  cursor: pointer;
  transition: background-color 100ms ease;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover,
.search-result.is-active {
  background: hsl(var(--accent));
}
.search-result-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: var(--leading-tight);
}
.search-result-snippet {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-snug);
}
.search-result-snippet mark {
  background: hsl(38 90% 65% / 0.25);
  color: hsl(var(--foreground));
  padding: 0 2px;
  border-radius: 2px;
}
.search-result-url {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground) / 0.7);
}

/* Load-more sentinel — also a visible button so keyboard / page-down
   users can advance manually. IntersectionObserver fires loadMore()
   when this scrolls into view. */
.search-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
}
.search-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 var(--space-4);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.search-load-more:hover {
  background: hsl(var(--accent));
}
.search-load-more.is-loading {
  color: hsl(var(--muted-foreground));
  cursor: wait;
}
.search-load-more.is-error {
  color: hsl(0 80% 70%);
  border-color: hsl(0 80% 50% / 0.4);
}