/* <ad-search>: the form, the header's combobox popup, and the search page's results list. */
/* The search takes whatever the tools row has left after the settings groups. */
.site-search {
  position: relative;
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.site-search__form {
  display: flex;
  align-items: stretch;
  gap: var(--space-3xs);
}

.site-search__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The header row shares one 44 px height: input, button, theme toggle and
 * language pills. Heights include borders (border-box). */
.site-search__input {
  flex: 1;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--target-comfortable);
  min-block-size: 0;
  border-width: 1px;
  border-color: var(--border-strong);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-xs);
}

.site-search__button {
  block-size: var(--target-comfortable);
  min-block-size: 0;
  padding-inline: 0.9em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font-size: var(--text--1);
  font-weight: 600;
}

.site-search__button:hover {
  background: var(--bg-tint);
  border-color: var(--accent);
}

/* A narrow tools row (the settings are behind the gear then): the search
 * fills the row and leaves room for the gear after it. */
@container tools (width < 31em) {
  .site-search {
    flex-basis: 10rem;
  }
}

/* Status line: visible on the search page, screen-reader-only in the header. */
.search-status {
  font-size: var(--text--1);
  color: var(--text-muted);
}

.site-search:not([data-mode="page"]) .search-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Header: the results popup ------------------------------------------------- */
/* Floats under the header field. The list itself is never a Tab stop; the
 * highlighted option is driven from the field. */
.search-popup {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2xs));
  z-index: 50;
  inline-size: min(28rem, calc(100vw - 2 * var(--gutter)));
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3xs);
}

.search-popup .search-results {
  max-block-size: min(60vh, 30rem);
  overflow-y: auto;
  padding: var(--space-2xs);
}

.search-hint {
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  border-block-start: 1px solid var(--border);
  font-size: var(--text--1);
  color: var(--text-muted);
}

.search-results__item {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  border: 2px solid transparent;
}

.search-popup .search-results__item:hover {
  background: var(--bg-tint);
}

/* The option chosen with the arrow keys: unmistakable, like a focus ring. */
.search-results__item[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.search-results__item[aria-selected="true"] .search-results__title {
  text-decoration-thickness: 0.14em;
}

.search-results__title {
  font-weight: 650;
  display: block;
}

.search-results__excerpt {
  font-size: var(--text--1);
  color: var(--text-muted);
  margin: 0;
  max-inline-size: none;
}

.search-results__excerpt mark {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 650;
}

/* ---- Search page: heading, count, then a plain list of links ------------------- */
.search-results__heading {
  margin-block-start: var(--space-l);
}

/* The count sits under the heading once there is one (a hidden heading still
 * matches the sibling combinator, hence the :not). */
.search-results__heading:not([hidden]) + .search-status {
  margin-block-start: var(--space-xs);
}

[data-mode="page"] .search-results__item {
  padding: var(--space-xs) 0;
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
}

/* The focus ring hugs the link text instead of spanning the whole row. */
[data-mode="page"] .search-results__title {
  inline-size: fit-content;
}