/* Header search (JFM-397): the kk-search field and its kk-suggest panel.
   Split from site.css (bloat-gate ceiling, 1000 lines) the same way
   web/explore/when.py's Wann bar keeps its styling beside its own markup;
   loaded unconditionally next to site.css since the field is on every page. */

.kk-site-header--search .kk-site-header__primary {
  flex-wrap: wrap;
}

.kk-search {
  position: relative;
  box-sizing: border-box;
  display: flex;
  order: 10;
  flex: 1 1 100%;
  max-width: 30rem;
  gap: 0.5rem;
}

.kk-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kk-search__input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: var(--kk-line-thin) solid var(--kk-color-border);
  border-radius: var(--kk-radius-control);
  background: var(--kk-color-surface);
  color: var(--kk-color-text);
  font: 1rem/1.2 var(--kk-font-body);
}

.kk-search__input::placeholder {
  color: var(--kk-color-text-muted);
  opacity: 0.8;
}

.kk-search__submit {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

.kk-suggest {
  position: absolute;
  z-index: 30;
  box-sizing: border-box;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  border: var(--kk-line-thin) solid var(--kk-color-border);
  border-radius: var(--kk-radius-card);
  background: var(--kk-color-surface);
  box-shadow: var(--kk-shadow-card);
}

.kk-suggest[hidden] {
  display: none;
}

.kk-suggest__heading {
  margin: 0;
  padding: 0.55rem 0.9rem 0.2rem;
  color: var(--kk-color-accent);
  font-family: var(--kk-font-label);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kk-suggest__count {
  color: var(--kk-color-text-muted);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.kk-suggest__option,
.kk-suggest__all,
.kk-suggest__empty {
  display: block;
  padding: 0.55rem 0.9rem;
  color: var(--kk-color-text);
  font-size: 0.92rem;
  text-decoration: none;
}

.kk-suggest__option b {
  font-weight: 900;
}

.kk-suggest__meta {
  margin-inline-start: 0.35rem;
  color: var(--kk-color-text-muted);
  font-size: 0.8rem;
}

.kk-suggest__all,
.kk-suggest__empty {
  border-top: var(--kk-line-thin) solid var(--kk-color-border);
  font-weight: 850;
}

.kk-suggest__option:hover,
.kk-suggest__option[aria-selected="true"],
.kk-suggest__all:hover,
.kk-suggest__all[aria-selected="true"],
.kk-suggest__empty:hover,
.kk-suggest__empty[aria-selected="true"] {
  background: var(--kk-color-highlight);
  color: var(--kk-color-on-highlight);
}

.kk-suggest__option[aria-selected="true"] .kk-suggest__meta {
  color: inherit;
}

@media (max-width: 58rem) {
  .kk-search {
    grid-row: 3;
    grid-column: 1 / -1;
    max-width: none;
  }
}