/* RIG-291: the search bar at the top of every page. Loaded after each page's
   own stylesheet and drawn in its palette, which every page duplicates and the
   tests hold identical. On a phone the header stacks two rows: the row it
   always held, laid out exactly as before, and the bar under it. The bar's
   list hangs below it without changing the header's height, which the sticky
   bars under the header measure. */

.site-header {
  flex-direction: column;
  align-items: stretch;
  row-gap: 8px;
}

.site-header-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  column-gap: inherit;
}

.break-search {
  position: relative;
  margin: 0;
}

.break-search::before,
.break-search::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

/* A magnifier drawn in CSS rather than typed, as the wind arrows are: a glyph
   is only as thick as the device's font. */
.break-search::before {
  top: 12px;
  left: 14px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(246, 242, 232, 0.82);
  border-radius: 50%;
}

.break-search::after {
  top: 25px;
  left: 25px;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: rgba(246, 242, 232, 0.82);
  transform: rotate(45deg);
  transform-origin: left center;
}

.break-search-label,
.break-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 16px, never less: iOS zooms the whole page into a field set smaller than
   that the moment it takes focus, and does not zoom back. */
.break-search-input {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 14px 0 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f6f2e8;
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.break-search-input::placeholder {
  color: rgba(246, 242, 232, 0.72);
  opacity: 1;
}

.break-search-input:focus-visible {
  border-color: var(--foam);
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

.break-search-input::-webkit-search-cancel-button {
  filter: invert(1);
}

.break-search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: min(60vh, 24rem);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(13, 39, 41, 0.24);
  color: var(--ink);
  list-style: none;
  overscroll-behavior: contain;
}

.break-search-results[hidden] {
  display: none;
}

.break-search-result,
.break-search-more {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.break-search-result:hover,
.break-search-result:focus-visible,
.break-search-more:hover,
.break-search-more:focus-visible {
  background: rgba(185, 230, 212, 0.5);
  outline: none;
}

.break-search-name {
  font-size: 0.95rem;
  font-weight: 750;
}

.break-search-where {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.break-search-more {
  color: var(--sea);
  font-size: 0.85rem;
  font-weight: 750;
}

.break-search-empty {
  padding: 9px 10px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (min-width: 64rem) {
  .site-header {
    flex-direction: row;
    align-items: center;
  }

  .site-header-row {
    flex: 1 1 auto;
  }

  .break-search {
    flex: 0 1 22rem;
  }
}