/* search.css — search overlay dialog and its results (11 s5). */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sp-4);
}

@media (min-width: 768px) {
  .search-overlay { padding-top: calc(var(--header-h) + var(--sp-5)); }
}

.search-overlay__backdrop { position: absolute; inset: 0; background: var(--overlay); }

.search-overlay__panel {
  position: relative;
  width: 100%;
  max-width: var(--w-prose);
  max-height: calc(100vh - 2 * var(--sp-6));
  overflow-y: auto;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: var(--border-w) solid var(--border);
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translateY(calc(var(--sp-2) * -1));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.search-overlay.is-open .search-overlay__panel { opacity: 1; transform: none; }

.search-overlay__form { display: flex; gap: var(--sp-2); align-items: center; }
.search-overlay__form .search-field { flex: 1; }
.search-overlay__hint { margin-top: var(--sp-3); color: var(--text-muted); }

.search-results__title { display: block; margin: var(--sp-4) 0 var(--sp-2); }
.search-results__list { margin: 0; padding: 0; list-style: none; }

.search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-strong);
}

.search-result:hover, .search-result:focus-visible { background: var(--primary-tint); color: var(--text-strong); text-decoration: none; }
.search-result__icon { flex: none; border-radius: var(--r-sm); }
.search-result__title { font-weight: var(--fw-medium); }
.search-result__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result mark { background: var(--brand-100); color: inherit; border-radius: var(--r-sm); }
.search-results__empty { margin-top: var(--sp-4); color: var(--text-muted); }
.search-results__all { margin-top: var(--sp-3); }