/**
 * Search Styles
 * 
 * Search box, suggestions, and search console.
 */

/* Search Box Container */
.home-search {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-light) 100%);
  margin: 24px auto;
  padding: 24px;
  border-radius: var(--radius-xl);
  max-width: 800px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

/* Search Input Row - flex container for input + button */
.home-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Search Input */
#search {
  height: 56px;
  flex: 1;
  min-width: 200px;
  font-size: 1.25rem;
  font-weight: 400;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border: 2px solid var(--border-color);
  border-right: none;
  outline: none;
  padding: 0 16px;
  transition: var(--transition);
  background: var(--bg-card);
}

#search:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#search::placeholder {
  color: var(--text-secondary);
}

#search-label {
  display: none;
}

/* Search Suggestions - full width below input */
#search-suggests {
  flex-basis: 100%;
  margin-top: 12px;
}

#susie {
  display: none;
}

#search-suggests-details button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  color: var(--text-light);
  margin: 4px;
  padding: 6px 12px;
  display: inline-block;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: inherit;
  transition: var(--transition);
}

#search-suggests-details button:hover,
#search-suggests-details button:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Search Console */
#search-console {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
}

#search-console summary {
  padding: 4px 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

#search-console #menu {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 8px;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  border: none;
  max-height: 200px;
  overflow-y: auto;
}

/* Search Results Table */
.search-table {
  height: 300px !important;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Descriptions and references, which are read as prose and citations rather than as tables.
   Named with the box's own class as well, as .feature p is the more specific of the two. */
.feature .search-attribution {
  font-size: 0.8125rem;
  margin-top: 2px;
}

/* The line saying where a description came from belongs to the prose above it, not between it and
   the next one. Both margins give way, as the gap between them is the larger of the two. A
   browser without :has() spaces it as it would any other paragraph. */
.feature p:has(+ .search-attribution) {
  margin-bottom: 0;
}

.search-citation .search-holds {
  display: block;
  font-size: 0.8125rem;
}