/* Shared palette tokens keep search in step with every site theme. */
.site-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
}
/* The ring is --petrol at a 1px offset, like every other focus ring on the
   site, and not the detached 2px of --ink it used to be. That mattered once
   the search page started placing the caret in the field on arrival: a ring
   a reader did not ask for is the first thing they see, and the old one read
   as a black slab across a quiet page. Hugging the border it reads as what
   it is — a field with the caret in it — and a keyboard reader still gets an
   unmistakable ring. */
.site-search-form:focus-within { outline: 2px solid var(--petrol); outline-offset: 1px; }
.site-search-form input {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.site-search-form input::placeholder { color: var(--vizon); opacity: 1; }
/* Chromium and Safari draw their own clear button inside a type="search"
   field, and Chromium draws it in a blue that belongs to no palette here.
   Redrawn as a mask it takes the field's own ink instead: the affordance
   stays — worth keeping on a phone, where backspacing a query is tedious —
   and the colour follows the theme. It is the browser that decides when the
   button appears (Chromium on focus or hover, Safari whenever the field has
   content); Firefox has no such button and still shows none. */
.site-search-form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
  background-color: currentColor;
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-search-form input::-webkit-search-cancel-button:hover { opacity: 1; }
.site-search-form button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.site-search-form button svg { width: 20px; height: 20px; }
.site-search-form button:hover { opacity: var(--select-dim); }
.site-search-form button:focus-visible { outline: 2px solid var(--petrol); outline-offset: -4px; }
/* The drawer's variant. The field sits under the brand, above the list of
   places, and is the only box on the panel you can type into — which is the
   point: a link says where to go, a field says what you can do. It posts to
   /search/, where site-search.js takes over with live results.

   The strip at the foot of the page carries the same field now (see
   --footer below), so a reader who never opens the menu still meets one —
   on every page but /search/, where the page is already the field. */
.site-search-form--drawer {
  max-width: none;
  margin: 0;
}
.site-search-form--drawer input { padding: 7px 10px; }
.site-search-form--drawer button { flex-basis: 40px; min-height: 40px; }
.site-search-form--drawer button svg { width: 18px; height: 18px; }
/* The field is the first item on the list and is spaced like one: the gap
   under it is .drawer-body's --drawer-row-gap, the same as between any two
   names below it. It used to carry a margin of its own here, which was one
   of the three sources that made the panel's spacing uneven — see
   .drawer-body in style.css.

   A phone held sideways has room for the field but none to spare above and
   below it: the panel is 320–430px tall and the list under it is nine names
   long. The rest of that rhythm is the landscape drawer block in style.css;
   this half lives here because the form's own rules do. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-search-form--drawer input { padding: 5px 10px; }
  .site-search-form--drawer button { flex-basis: 36px; min-height: 34px; }
}

/* The strip's variant — the bar at the head of the page's foot. Search was a
   glyph in that band among three others, with no name until it was hovered;
   a field carries its own. The auto right margin is what holds it left: the
   strip is justified to its end, so the contact links and the icon controls
   stay exactly where they were and only the free space between moves.

   Narrower than the page's own field on purpose. The strip is one row, and
   past about 18rem the bar starts taking the room the links need. It is also
   the one item on that row left able to shrink, so a wider palette or a
   longer address is paid for here rather than by breaking the row. Below
   768px it stops sharing altogether and takes a row of its own, full width —
   see .footer-strip-inner in style.css, which does the wrapping.

   It keeps --paper rather than the band, for the reason the theme menu does:
   in every light palette the two are the same colour and the border does all
   the work, and in Dark, Midnight and Follow the sky the band is the darkest
   surface on the page, where a field darker again would read as a hole. */
.site-search-form--footer {
  flex: 0 1 18rem;
  max-width: 18rem;
  margin: 0 auto 0 0;
}

/* Sized to sit level with the 36px icon buttons beside it: the input's own
   line box sets the height, and the button is kept under it so it cannot
   stretch the band's one row. */
.site-search-form--footer input {
  padding: 6px 10px;
  font-size: 0.95rem;
}

.site-search-form--footer button {
  flex-basis: 36px;
  min-height: 32px;
}

.site-search-form--footer button svg { width: 16px; height: 16px; }

/* On its own row there is no row left to protect, so the submit goes back to
   a comfortable target — this is the width where a reader is on a phone. */
@media (max-width: 767px) {
  .site-search-form--footer {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }

  .site-search-form--footer button { min-height: 38px; }
}

/* Except lying down. 768px is a width rule, and a phone in landscape is
   568–932px of width against 320–430px of height: it fails that rule on the
   one dimension it has plenty of, and spends the extra row on the one it
   does not. A bar running the full 740px of a phone's long edge is not a
   field a reader is any likelier to find — it is a 600px placeholder with an
   icon at the far end of it — and the row it was wrapped out of was wide
   enough to have held it.

   So the growth goes and the cap comes back, and .footer-strip-inner
   (style.css) puts the three of them back on one row from 600px of width up.
   Under that the strip still wraps, and the cap is what the bar keeps: even
   on its own row it stops well short of the far edge, which is the whole
   complaint. */
@media (max-width: 767px) and (orientation: landscape) {
  .site-search-form--footer {
    flex: 0 1 16rem;
    max-width: 16rem;
    margin: 0 auto 0 0;
  }

  .site-search-form--footer button { min-height: 34px; }
}

.search-page { max-width: 760px; }
.search-status { margin: 1.5rem 0; color: var(--vizon); font-size: 1rem; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { margin: 0; padding: 1.3rem 0; border-top: 1px solid var(--rule); }
.search-result-kind { color: var(--vizon); font-size: .85rem; }
.search-results h2 { margin: .25rem 0 .4rem; font-size: 1.55rem; line-height: 1.25; font-weight: 500; }
.search-results h2 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .2em; }
.search-results h2 a:hover { text-decoration-color: currentColor; }
.search-results p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }