.search-bar {
  position: relative;
  --search-gutter: max(1rem, calc((100% - 72rem) / 2));
  padding: .75rem var(--search-gutter);
  border-bottom: 1px solid var(--line);
}

.search-field {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(100%, 42rem);
  min-height: 2.6rem;
  padding: .45rem .75rem;
  border-radius: .4rem;
  background: rgb(183 206 158 / .055);
  color: var(--muted);
  font: 1rem/1.3 var(--interface);
}

.search-field:focus-within {
  background: var(--green);
  outline: 1px solid var(--sage);
}

.search-field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.search-field input::placeholder { color: var(--muted); opacity: .78; }

.search-icon {
  position: relative;
  flex: none;
  width: .8rem;
  height: .8rem;
  border: 1.5px solid var(--sage);
  border-radius: 50%;
}

.search-icon::after {
  position: absolute;
  inset: .61rem auto auto .59rem;
  width: .36rem;
  height: 1.5px;
  background: var(--sage);
  transform: rotate(45deg);
  transform-origin: left;
  content: "";
}

.search-shortcut {
  margin-inline-start: auto;
  color: var(--sage);
  font: .75rem var(--mono);
  white-space: nowrap;
}

.search-palette {
  position: absolute;
  z-index: 3;
  inset: calc(100% - .45rem) var(--search-gutter) auto;
  width: min(calc(100% - 2 * var(--search-gutter)), 42rem);
  max-height: 83vh;
  max-height: 83dvh;
  margin: 0;
  padding: clamp(.9rem, 4vw, 1.5rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--green);
  color: var(--ink);
  font: 1rem/1.4 var(--interface);
}

.search-palette :focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.search-palette button {
  padding: .3rem .65rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  background: transparent;
  color: var(--sage-light);
  font: inherit;
  cursor: pointer;
}

.search-palette button:hover { border-color: var(--line); }

.search-status { margin: .65rem 0 0; color: var(--muted); }
.search-results { margin: .45rem 0 0; padding: 0; list-style: none; }

.search-results a {
  display: grid;
  gap: .15rem;
  padding: .55rem .65rem;
  border-radius: .35rem;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.search-results a:hover, .search-results a:focus-visible { background: var(--forest); }
.search-results strong { color: var(--gold); }
.search-result-context { color: var(--sage); font-size: .875rem; }
#search-more { margin-top: .4rem; }

.search-results mark {
  padding-inline: .08em;
  border-radius: .15em;
  background: var(--sage);
  color: var(--forest);
}

.search-result-excerpt { color: var(--muted); }

.search-suggestions { margin-bottom: .65rem; }
.search-suggestions p { margin: 0 0 .25rem; color: var(--sage-light); }
.search-suggestions ul { margin: 0; padding: 0; list-style: none; }
.search-suggestions button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem .75rem;
  width: 100%;
  text-align: start;
}

.search-suggestions code {
  color: var(--gold);
  font: .84rem var(--mono);
  padding: .08rem .35rem;
  border-radius: .25rem;
  background: var(--forest);
}

.search-suggestions button span { color: var(--muted); }

.search-suggestions button:hover code,
.search-suggestions button:focus-visible code {
  color: var(--forest);
  background: var(--sage);
}