/* AstroTown · Search Overlay + Search Results */

.at-search-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  background: rgba(7,8,16,0.88);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}

.at-search-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.at-search-inner {
  width: 100%;
  max-width: 600px;
  padding-inline: var(--s4);
}

.at-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-overlay);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: var(--s4);
}

.at-search-bar-icon {
  position: absolute;
  left: 18px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.at-search-input {
  flex: 1;
  padding: var(--s4) var(--s4) var(--s4) 52px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-xl);
  caret-color: var(--accent-glow);
  outline: none;
}
.at-search-input::placeholder { color: var(--text-muted); }

.at-search-cancel {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border-normal);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  margin-right: var(--s3);
  flex-shrink: 0;
  transition: background var(--t-fast) ease;
}
.at-search-cancel:hover { background: var(--bg-overlay); color: var(--text-secondary); }

.at-search-results {
  background: var(--bg-overlay);
  border: 1px solid var(--border-normal);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) ease;
  border-bottom: 1px solid var(--border-subtle);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item:focus { background: var(--bg-raised); outline: none; }

.sri-cover {
  width: 36px; height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.sri-cover img { width: 100%; height: 100%; object-fit: cover; }

.sri-info { flex: 1; min-width: 0; }
.sri-title  { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sri-author { font-size: var(--text-xs); color: var(--text-muted); }

.sri-fmt {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.sri-fmt.badge-xmp_single   { background: rgba(99,102,241,0.8); color: #fff; }
.sri-fmt.badge-xmp_cc       { background: rgba(99,102,241,0.8); color: #fff; }
.sri-fmt.badge-xmp_advanced { background: rgba(217,119,6,0.8);  color: #fff; }
.sri-fmt.badge-xmp_native   { background: rgba(139,92,246,0.8); color: #fff; }
.sri-fmt.badge-h5_pure      { background: rgba(6,182,212,0.8);  color: #fff; }

.at-search-hints {
  display: flex;
  gap: var(--s5);
  justify-content: center;
  margin-top: var(--s4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
