/* ==========================================================================
   Site-wide search — the overlay opened by the header button, "/" or Ctrl-K.

   Two shapes, one piece of markup. Below 640px the panel IS the screen: a
   reader on a phone is holding a device the size of the panel, and floating a
   card in the middle of it wastes the only space there is. From 640px up it
   becomes a card near the top of the viewport with the page dimmed behind,
   because at that width the page is context worth keeping in view.

   Everything scrolls INSIDE .search-panel__results. The page behind is locked
   while the overlay is open (see body.has-search) and js/search.js restores
   the scroll position on close — a search that loses your place in the page
   you were reading is a search that costs more than it saves.

   Every colour here is a token from css/tokens.css. The one translucency is
   the scrim, which is --bg-ink at reduced opacity rather than a new value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The shell
   -------------------------------------------------------------------------- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
}

/* The overlay is display:flex, which beats the browser's own [hidden] rule.
   Without this line, hiding it does nothing at all. */
.search-overlay[hidden] {
  display: none;
}

.search-overlay__scrim {
  position: absolute;
  inset: 0;
  background: var(--bg-ink);
  opacity: 0.55;
  animation: search-scrim var(--duration-fast) var(--ease-out) both;
}

@keyframes search-scrim {
  from {
    opacity: 0;
  }
}

.search-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--bg-raised);
  color: var(--text);
  animation: search-panel-in var(--duration-fast) var(--ease-out) both;
}

@keyframes search-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-overlay__scrim,
  .search-panel {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   The bar
   -------------------------------------------------------------------------- */

.search-panel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-heavy) solid var(--text);
}

.search-panel__icon {
  flex: 0 0 auto;
  color: var(--text-subtle);
}

.search-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  /* 17px. Anything under 16 makes iOS Safari zoom the page on focus, and a
     search box that reflows the site behind it is a bad first impression. */
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.search-panel__input::placeholder {
  color: var(--text-subtle);
}

.search-panel__input:focus {
  outline: none;
}

/* The whole bar carries the focus ring instead of the bare input, because the
   input has no border of its own to draw one around. */
.search-panel__bar:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.search-panel__close {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.search-panel__close:hover {
  background: var(--bg-ink);
  border-color: var(--bg-ink);
  color: var(--text-on-ink);
}

@media (prefers-reduced-motion: reduce) {
  .search-panel__close {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   The results container — the only thing on this overlay that scrolls
   -------------------------------------------------------------------------- */

.search-panel__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Stops a flick past the end of the list from scrolling the page behind. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* A column so the source line can be pushed to the bottom of a short
     panel — on a phone the sheet is the whole screen, and a footnote
     stranded halfway up it looks like a rendering accident. */
  display: flex;
  flex-direction: column;
}

.search-panel__results > * {
  flex: 0 0 auto;
}

.search-panel__results:focus {
  outline: none;
}

.search-count {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.search-status {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Groups
   -------------------------------------------------------------------------- */

.search-group {
  border-top: var(--border-width) solid var(--border);
}

.search-group:first-of-type {
  border-top: 0;
}

.search-group__title {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.search-group__count {
  font-family: var(--font-mono);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  color: var(--text-subtle);
}

.search-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* base.css sets `li + li { margin-top: var(--space-2) }` for prose lists,
   which is right there and wrong here: these rows are separated by a rule,
   not by air, and 8px between every one of them turns a dense result list
   into a sparse one that fits three fewer answers on a phone. */
.search-group__item + .search-group__item {
  margin-top: 0;
  border-top: var(--border-width) solid var(--border);
}

.search-group__more {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   A result
   -------------------------------------------------------------------------- */

.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 44px of target even for a one-line result. */
  min-height: 44px;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

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

.search-result:focus-visible {
  /* Inset, so the ring is not clipped by the scrolling container. */
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  background: var(--accent-soft);
}

.search-result__title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text);
  /* County names and headlines run long, and a 375px panel must never push
     the page sideways. */
  overflow-wrap: anywhere;
}

/* Counts, case numbers, coordinates, years — this site sets data in mono, and
   a parcel number is data. */
.search-result__title--mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.search-result__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.search-result__out {
  margin-left: var(--space-2);
  vertical-align: -1px;
  color: var(--text-subtle);
}

.search-result mark {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 1px;
}

.search-result:focus-visible mark {
  background: var(--bg-raised);
}

/* --------------------------------------------------------------------------
   Empty query — real examples, drawn from the index itself
   -------------------------------------------------------------------------- */

.search-idle {
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.search-idle__lead {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.search-try {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

/* Same reason as the result rows: the gap is the flex gap, and base.css's
   prose margin on top of it staggers chips that ought to sit in a row. */
.search-try > li + li {
  margin-top: 0;
}

.search-try__btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.search-try__btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .search-try__btn {
    transition: none;
  }
}

.search-try__q {
  font-weight: var(--weight-semibold);
}

.search-try__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Nothing found
   -------------------------------------------------------------------------- */

.search-none {
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.search-none p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Element + class, so these beat `.search-none p` on specificity rather than
   on !important. */
p.search-none__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text);
}

p.search-none__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   The source line. Every figure on this site says where it came from, and a
   box that mixes county records with headlines is where that matters most.
   -------------------------------------------------------------------------- */

.search-foot {
  /* auto, so on a short panel it sits at the bottom rather than floating in
     the middle of the sheet. Has no effect once the results fill the box. */
  margin: auto 0 0;
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   The hint strip
   -------------------------------------------------------------------------- */

.search-panel__hint {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--border);
  background: var(--bg-sunken);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.search-panel__hint kbd {
  display: inline-block;
  min-width: 20px;
  margin-right: 2px;
  padding: 1px var(--space-1);
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}

/* A phone has no arrow keys and no Escape, and the strip costs a row of
   results to say so. */
@media (max-width: 639px) {
  .search-panel__hint {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Screen-reader-only. Local rather than base.css's .visually-hidden so this
   overlay works on any page, whatever else it has loaded.
   -------------------------------------------------------------------------- */

.search-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   The page behind
   -------------------------------------------------------------------------- */

body.has-search {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   From 640px: a card, not a screen
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .search-overlay {
    align-items: center;
    padding: max(6vh, var(--space-6)) var(--space-5) var(--space-5);
  }

  .search-panel {
    flex: 0 1 auto;
    width: min(640px, 100%);
    max-height: min(72vh, 620px);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .search-panel__bar {
    padding: var(--space-2) var(--space-4);
  }
}