.search-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 520px;
  position: relative;
}
.search-form input[type="search"] { flex: 1; min-width: 0; }
.search-form button { flex: 0 0 auto; }

.search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  max-height: min(62vh, 420px);
  overflow-y: auto;
}

.search-suggest__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.search-suggest__item:last-child { border-bottom: none; }
.search-suggest__item:hover,
.search-suggest__item.is-active {
  text-decoration: none;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
}

.search-suggest__term {
  font-size: 16px;
  font-weight: 600;
  color: var(--amber);
  min-width: 0;
}
.search-suggest__meta {
  font-size: 11px;
  align-self: center;
  white-space: nowrap;
}
.search-suggest__snip {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest mark {
  background: color-mix(in srgb, var(--amber) 35%, transparent);
  color: var(--paper);
  border-radius: 2px;
  padding: 0 1px;
}