/* ═══════════════════════════════════════════
   SEARCH (js/search.js) — every public page
   The nav button and ⌘K / Ctrl+K / "/" open a search window over the page.
   Choosing a result goes to the place on its page: the page scrolls
   there, a marker sweeps across the words and a ring pulses once; a small
   chip steps through the other matches on that page.
   ═══════════════════════════════════════════ */

/* ── the nav button ── */
.nav-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 11px; margin-left: 6px;
  border-radius: var(--r-2); border: 0; cursor: pointer;
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
  font: 500 0.8rem 'Poppins', sans-serif;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}
#navbar .nav-search { color: var(--text2); box-shadow: inset 0 0 0 1px var(--border); }
#navbar.transparent .nav-search { color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.nav-search:hover { background: rgb(var(--red-rgb) / .06); }
#navbar .nav-search:hover { color: var(--red); box-shadow: inset 0 0 0 1px rgb(var(--red-rgb) / .4); }
#navbar.transparent .nav-search:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-search:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; }
.nav-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nav-search kbd {
  font: 500 0.66rem var(--font-mono); line-height: 1; padding: 3px 5px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px currentColor; opacity: .55;
}
.nav-search .ns-label { display: none; }
@media (min-width: 1280px) { .nav-search .ns-label { display: inline; } }
@media (max-width: 1150px) { .nav-search kbd { display: none; } }
/* phones: an icon next to the menu button instead */
.nav-search.is-mobile { display: none; }
@media (max-width: 900px) {
  .nav-links .nav-search { display: none; }
  .nav-search.is-mobile {
    display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; margin: 0 6px 0 auto;
    box-shadow: none; border-radius: 50%;
  }
  .nav-search.is-mobile svg { width: 20px; height: 20px; }
}

/* ── the window ── */
.sv-search {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(16px, 11vh, 120px) 16px 16px;
  visibility: hidden; pointer-events: none;
}
.sv-search.is-on { visibility: visible; pointer-events: auto; }
.sv-search-scrim {
  position: absolute; inset: 0; background: rgba(10, 12, 16, .5);
  backdrop-filter: blur(5px) saturate(.9); -webkit-backdrop-filter: blur(5px) saturate(.9);
  opacity: 0; transition: opacity .3s ease;
}
.sv-search.is-on .sv-search-scrim { opacity: 1; }
.sv-pal {
  position: relative; width: min(680px, 100%); max-height: min(640px, calc(100vh - 2 * clamp(16px, 11vh, 120px)));
  display: flex; flex-direction: column;
  background: #fff; color: var(--text); border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(10, 12, 20, .35), 0 0 0 1px rgba(10, 12, 20, .06);
  opacity: 0; transform: translateY(-10px) scale(.985);
  transition: opacity .28s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.sv-search.is-on .sv-pal { opacity: 1; transform: none; }
.sv-q { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sv-q svg { width: 20px; height: 20px; color: var(--red); flex: 0 0 auto; }
.sv-q input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text);
  font: 400 1.08rem 'Poppins', sans-serif;
}
.sv-q input::placeholder { color: var(--ink-400); }
.sv-q input::-webkit-search-cancel-button { display: none; }
.sv-esc {
  font: 500 .66rem var(--font-mono); color: var(--ink-400); border: 0; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border); border-radius: 5px; padding: 4px 7px;
}
.sv-esc:hover { color: var(--text); }
.sv-progress { height: 2px; background: transparent; overflow: hidden; }
.sv-progress i { display: block; height: 100%; width: 30%; background: var(--red); transform: translateX(-100%); opacity: 0; }
.sv-search.is-loading .sv-progress i { opacity: 1; animation: svLoad 1.1s ease-in-out infinite; }
@keyframes svLoad { to { transform: translateX(340%); } }
.sv-results { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; flex: 1; }
.sv-group { padding: 10px 10px 4px; display: flex; justify-content: space-between; align-items: baseline; font-size: .74rem; font-weight: 600; color: var(--ink-500); }
.sv-group span { font-weight: 400; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.sv-item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer;
  color: inherit; text-decoration: none; position: relative;
  transition: background .15s;
}
.sv-item.is-on { background: rgb(var(--red-rgb) / .065); }
.sv-item.is-on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--red); }
.sv-ic {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px;
  background: var(--ink-050); color: var(--ink-500);
}
.sv-ic svg { width: 16px; height: 16px; }
.sv-item.is-on .sv-ic { background: rgb(var(--red-rgb) / .1); color: var(--red); }
.sv-tx { min-width: 0; flex: 1; }
.sv-tx b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.sv-tx small { display: block; font-size: .72rem; color: var(--ink-400); margin-top: 1px; }
.sv-tx span { display: block; font-size: .8rem; line-height: 1.5; color: var(--ink-500); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-tx mark { background: none; color: var(--red-700); font-weight: 600; }
.sv-go { align-self: center; font-size: .72rem; color: var(--red); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.sv-item.is-on .sv-go { opacity: 1; }
.sv-empty { padding: 34px 20px 30px; text-align: center; color: var(--ink-500); font-size: .9rem; line-height: 1.6; }
.sv-empty b { color: var(--text); }
.sv-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 12px; }
.sv-quick a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: .8rem; color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .2s, color .2s;
}
.sv-quick a:hover, .sv-quick a:focus-visible { color: var(--red); box-shadow: inset 0 0 0 1px rgb(var(--red-rgb) / .45); outline: none; }
.sv-foot { display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--ink-400); }
.sv-foot kbd { font: 500 .64rem var(--font-mono); box-shadow: inset 0 0 0 1px var(--border); border-radius: 4px; padding: 2px 5px; margin-right: 5px; }
.sv-foot .sv-n { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .sv-search { padding: 0; }
  .sv-pal { max-height: 100vh; height: 100%; border-radius: 0; }
  .sv-foot { display: none; }
}

/* ── arrival: the found words ── */
mark.sv-hit {
  position: relative; color: inherit; border-radius: 3px; padding: 0 .08em; margin: 0 -.08em;
  background: linear-gradient(rgb(var(--red-rgb) / .24), rgb(var(--red-rgb) / .24)) no-repeat left 88% / 0% 42%;
  transition: background-size .9s cubic-bezier(.65,0,.35,1) .25s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.sv-hit.is-swept { background-size: 100% 42%; }
mark.sv-hit.is-current { background-image: linear-gradient(rgb(var(--red-rgb) / .34), rgb(var(--red-rgb) / .34)); }
mark.sv-hit.is-current::after {
  content: ""; position: absolute; inset: -.3em -.45em; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px rgb(var(--red-rgb) / .7);
  opacity: 0; animation: svRing 1.6s cubic-bezier(.16,1,.3,1) .15s;
}
@keyframes svRing {
  0% { opacity: 0; transform: scale(1.35); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}
mark.sv-hit.is-leaving { background-size: 100% 0%; transition: background-size .4s ease; }
.sv-chip {
  position: fixed; left: 50%; bottom: 22px; z-index: 1250; translate: -50% 0;
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: #14171C; color: #fff; font: 400 .8rem 'Poppins', sans-serif;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  transform: translateY(20px); opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.sv-chip.is-on { transform: none; opacity: 1; }
.sv-chip q { font-weight: 600; quotes: "»" "«"; }
.sv-chip .sv-chip-n { color: rgba(255,255,255,.55); margin: 0 6px 0 4px; font-variant-numeric: tabular-nums; }
.sv-chip button {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff;
}
.sv-chip button:hover { background: rgba(255,255,255,.18); }
.sv-chip button:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; }
.sv-chip button[disabled] { opacity: .35; cursor: default; }
.sv-chip svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
  .sv-pal, .sv-search-scrim, .sv-chip, mark.sv-hit { transition: none !important; }
  mark.sv-hit.is-current::after { animation: none; }
}