/* ==========================================================================
   Site search — the masthead control and the dialog it opens.

   Two rules shape all of this.

   ONE: the dialog is a sheet of paper dropped on the page, not a panel welded
   into the masthead. It is centred near the top, the width of a reading
   measure plus a little, and it floats on the brand shadow. That is what lets
   it live on the homepage, where the masthead sits over a WebGL sky, without
   borrowing anything from the sky's compositing.

   TWO: nothing here touches the sky. No selector reaches a `.sky-` class, no
   rule sets transform, filter, opacity or contain on an element the sky's
   canvas sits inside — the dialog is a sibling of <main>, and `position:fixed`
   plus a plain alpha scrim is all the layering it needs. A backdrop-filter
   over a live canvas would have been the obvious choice and is exactly the
   kind of thing the sky lock exists to prevent.

   The prefix is `sq` (search query) because `s-` is spacing and `.search`
   collides with nothing but reads as though it might.
   ========================================================================== */

/* ---------------------------------------------------------- the control --
   Between the nav and the hamburger, so it survives the phone layout: the
   drawer collapses, this does not. A reader looking for glycine should never
   have to open a menu first. */
.sq-open {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 11px;
  background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  color: var(--steel-deep); cursor: pointer;
  font-family: var(--ui); font-size: .8125rem; font-weight: 500;
  transition: border-color var(--d-fast) ease, color var(--d-fast) ease,
              background-color var(--d-fast) ease;
}
.sq-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.sq-open:hover { color: var(--rust); border-color: var(--rust-pale); background: var(--rust-tint) }
.sq-open:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px }

/* The shortcut badge is a promise the script keeps, so it is drawn by the
   script (html.js-sq) rather than sitting in the markup as decoration. */
.sq-open-k {
  display: none;
  padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-family: var(--label-figures); font-size: .6875rem; color: var(--steel);
  line-height: 1.5;
}
.js-sq .sq-open-k { display: inline-block }

/* The nav already owns `margin-left:auto`; with two auto margins the pair
   would split the slack and the button would drift into the middle. */
.sq-open ~ .nav { margin-left: 0 }

@media (max-width: 880px) {
  /* Icon only. The word costs more than it earns once the lockup is tight. */
  .sq-open-t, .sq-open-k { display: none }
  .js-sq .sq-open-k { display: none }
  .sq-open { padding: 7px 9px }
}

/* ----------------------------------------------------------- the dialog --
   `hidden` in the markup and shown by the script: a dialog that cannot be
   closed because its script never arrived is worse than no dialog, and the
   form inside it still submits to /search.html either way. */
.sq[hidden] { display: none }
.sq {
  /* Above the masthead (z-index 100) and the ambience control (60), below the
     skip link (200). The masthead carries a backdrop-filter, so it is its own
     stacking context and a lower dialog is painted UNDER it — which put the
     search input behind the lockup at phone widths, where the sheet is
     full-height and the bar sits exactly where the masthead is. */
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(12px, 7vh, 96px) var(--gutter) var(--gutter);
}
.sq-scrim {
  position: absolute; inset: 0;
  background: rgba(17, 28, 46, 0.42);
}

.sq-box {
  position: relative; width: min(680px, 100%);
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* --- the input */
.sq-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 16px; border-bottom: 1px solid var(--line);
  flex: none;
}
.sq-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--steel); stroke-width: 1.7 }
.sq-in {
  flex: 1 1 auto; min-width: 0;
  padding: 17px 0; border: 0; background: transparent;
  font-family: var(--ui); font-size: 1.0625rem; color: var(--ink);
  line-height: 1.4;
}
.sq-in::placeholder { color: var(--steel); opacity: 1 }
.sq-in:focus { outline: none }
.sq-x {
  flex: none; display: inline-flex; padding: 8px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--steel); cursor: pointer;
}
.sq-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8 }
.sq-x:hover { color: var(--rust) }
.sq-x:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px }

/* --- the results */
.sq-out { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.sq-list { margin: 0; padding: 6px; list-style: none }

.sq-r {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 12px; padding: 10px 12px;
  border-radius: var(--r); cursor: pointer;
  scroll-margin: 8px;
}
.sq-r b {
  grid-column: 1; font-family: var(--ui); font-size: .9375rem; font-weight: 600;
  color: var(--ink); line-height: 1.35;
}
.sq-r mark { background: var(--rust-tint); color: inherit; padding: 0 1px; border-radius: 1px }
/* The kind, as a word rather than a colour: a reader should not have to learn
   a legend to know whether there is a page behind a result. */
.sq-k {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: var(--label); font-size: .625rem; font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--steel); white-space: nowrap;
}
.sq-r--ref .sq-k { color: var(--rust) }
.sq-r i {
  grid-column: 1 / -1; font-style: normal;
  font-family: var(--ui); font-size: .78125rem; color: var(--steel-deep);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sq-r i span { color: var(--steel) }
.sq-r i span::after { content: " · " }

.sq-r:hover { background: var(--sand) }
/* aria-selected, not :focus — focus stays in the input the whole time, which
   is what keeps typing and arrowing in the same place. */
.sq-r[aria-selected="true"] { background: var(--paper-alt) }
.sq-r[aria-selected="true"] b { color: var(--navy) }

.sq-empty, .sq-hint {
  margin: 0; padding: 18px 18px 22px;
  font-family: var(--ui); font-size: .84375rem; color: var(--steel-deep); line-height: 1.6;
}
.sq-hint b { font-weight: 600; color: var(--steel-deep) }
.sq-empty a { color: var(--rust); font-weight: 500 }

/* --- the footer legend */
.sq-foot {
  flex: none; margin: 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid var(--line); background: var(--sand);
  font-family: var(--ui); font-size: .71875rem; color: var(--sand-label);
}
.sq-foot kbd {
  display: inline-block; min-width: 18px; margin-right: 3px; padding: 1px 4px;
  background: var(--card); border: 1px solid var(--sand-line); border-radius: var(--r-sm);
  font-family: var(--label-figures); font-size: .6875rem; text-align: center;
  color: var(--steel-deep);
}
.sq-foot a { margin-left: auto; color: var(--rust); font-weight: 500 }

@media (max-width: 640px) {
  /* Full sheet. At 390px a centred card with gutters wastes a third of the
     screen on scrim, and the keyboard takes most of what is left. */
  .sq { padding: 0 }
  .sq-box { width: 100%; max-width: none; max-height: 100%; height: 100%; border: 0; border-radius: 0 }
  .sq-out { flex: 1 1 auto }
  .sq-foot { display: none }
  .sq-in { font-size: 1rem }     /* 16px: anything smaller makes iOS zoom */
}

/* -------------------------------------------------------- /search.html --
   The same index without a script: every destination, grouped, as a page that
   a crawler can read and a reader can browse. With the script it filters in
   place, which is why the rows carry the same classes as the dialog's. */
.sqp-head { margin-bottom: var(--s-4) }
.sqp-bar {
  display: flex; align-items: center; gap: 10px;
  max-width: 34rem; margin: var(--s-3) 0 0;
  padding: 0 12px 0 14px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r);
}
.sqp-bar .sq-ic { width: 16px; height: 16px }
.sqp-bar input {
  flex: 1 1 auto; min-width: 0; padding: 13px 0; border: 0; background: transparent;
  font-family: var(--ui); font-size: 1rem; color: var(--ink);
}
.sqp-bar input:focus { outline: none }
.sqp-bar:focus-within { border-color: var(--navy) }
.sqp-bar button {
  flex: none; padding: 8px 12px; margin: 4px 0;
  background: var(--navy); border: 0; border-radius: var(--r-sm);
  color: var(--paper); font-family: var(--label); font-size: var(--t-label);
  font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  cursor: pointer;
}
.js-sq .sqp-bar button { display: none }

.sqp-count { margin: var(--s-2) 0 0; font-family: var(--ui); font-size: .8125rem; color: var(--steel) }

.sqp-grp { margin: var(--s-6) 0 0 }
.sqp-grp > h2 {
  margin: 0 0 var(--s-2); padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-family: var(--label); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel);
}
.sqp-grp[hidden] { display: none }
.sqp-list { margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px }
.sqp-list .sq-r { cursor: default }
.sqp-list .sq-r[hidden] { display: none }
.sqp-list a { display: contents; color: inherit }

@media (prefers-reduced-motion: no-preference) {
  .sq-box { animation: sq-in var(--d-fast) var(--ease) both }
}
@keyframes sq-in { from { opacity: 0; translate: 0 -6px } to { opacity: 1; translate: 0 0 } }

@media print { .sq, .sq-open { display: none !important } }