/* Search layout measured against the reference's 82688 component and
   f91ac48b58dfa31d / 5f479326fc7a6aa8 styles. Local content and theme remain ours. */
#site-search {
  --search-accent: #5345ff;
  padding: 32px max(32px, calc((100vw - 622px) / 2));
  min-height: 208px;
  max-height: 100svh;
  color: var(--fg);
}
html[data-theme="dark"] #site-search { --search-accent: #aaa3ff; }
#site-search::backdrop { background: color-mix(in srgb, var(--cloud-far, #b9ddeb) 40%, transparent); backdrop-filter: none; }
#site-search > .search-heading { position: static; display: block; margin: 0; }
#search-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#site-search #search-close { position: absolute; top: 0; right: 16px; width: 56px; height: 56px; padding: 16px; color: var(--fg); border-radius: 50%; animation: search-control-appear 400ms 300ms both; }
#site-search .search-input-row { position: relative; display: flex; width: 100%; min-width: 0; height: 40px; animation: search-control-appear 400ms 200ms both; }
#site-search .search-input-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--fg); border-radius: 10px; pointer-events: none; }
#site-search .search-input-row:focus-within::after { background: var(--search-accent); }
#site-search-input { min-width: 0; flex: 1; width: 100%; height: 40px; border: 0; border-radius: 1px; padding: 0 40px 0 30px; font: inherit; font-size: 18px; line-height: 40px; color: var(--fg); background: transparent; outline: none; box-shadow: none; }
#site-search-input::-webkit-search-decoration, #site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#site-search .search-input-icon { position: absolute; inset: 0 auto 0 0; display: grid; place-content: center; width: 20px; pointer-events: none; }
#site-search .search-input-icon svg { display: block; width: 20px; height: 20px; }
#site-search #search-clear { position: absolute; inset: 0 0 0 auto; display: grid; place-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; outline-offset: -4px; }
#site-search #search-clear[hidden] { display: none; }
#site-search #search-clear svg { display: block; width: 20px; height: 20px; }
#site-search #search-results { display: flex; flex-direction: column; gap: 48px; margin: 32px -24px 0; padding: 8px 24px; max-height: calc(100svh - 136px); overflow: auto; overscroll-behavior: contain; }
#site-search #search-results:empty { display: none; }
#site-search #search-results .search-result { position: relative; display: block; flex: none; padding: 0; border-radius: 0; background: transparent; color: var(--fg); text-decoration: none; transition: opacity 200ms; }
#site-search #search-results .search-result:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24.75px; border-bottom: 1.5px dotted var(--line); pointer-events: none; }
#site-search #search-results .search-result:hover strong { color: var(--search-accent); }
#site-search #search-results .search-result:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 7px; border-radius: 2px; }
#site-search #search-results .search-result-category { display: block; margin: 0; color: var(--search-accent); font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
#site-search #search-results strong { display: block; font-size: 18px; line-height: 28px; font-weight: 500; margin: 0 0 5.2px; }
#site-search #search-results .search-result > span { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; color: var(--fg); font-size: 16px; line-height: 24px; overflow-wrap: break-word; hyphens: auto; }
#site-search #search-results mark { color: inherit; background: rgb(255 238 153 / 33%); outline: 1px solid rgb(242 204 13 / 50%); border-radius: 4px; padding-inline: 4px; margin-inline: -4px; }
#site-search #search-empty { margin: 40px 0 0; color: var(--fg); font-size: 16px; line-height: 24px; font-style: italic; text-align: center; text-wrap: balance; animation: search-control-appear 400ms 450ms both; }
#site-search .search-hint { display: none; }
@keyframes search-control-appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) {
  #site-search { padding-inline: 32px; }
  #site-search .search-input-row { width: calc(100% - 40px); }
  #site-search #search-close { top: 40px; right: 32px; width: 24px; height: 24px; padding: 0; }
}
@media (max-width: 563px) {
  #site-search { padding-inline: 16px; }
  #site-search #search-close { right: 16px; }
  #site-search #search-results { margin-inline: -14px; padding-inline: 14px; }
  #site-search #search-empty { text-align: left; text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  #site-search #search-close, #site-search .search-input-row, #site-search #search-empty { animation: none; }
  #site-search #search-results .search-result { transition: none; }
}
/* The shell and its overflow cloud leave together; close on animationend. */
#site-search.is-closing { animation: search-shell-depart 500ms cubic-bezier(.56,.1,.85,.87) both; }
#site-search.is-closing::backdrop { animation: search-backdrop-depart 500ms ease-out both; }
#site-search.is-closing > :not(.search-cloud), #site-search.is-closing #search-empty { animation: search-control-disappear 300ms both; pointer-events: none; }
#site-search.is-closing > .search-cloud { animation: none; }
#site-search.is-closing .search-cloud > svg { animation: none; transform: var(--search-cloud-exit-transform); }
@keyframes search-shell-depart { from { transform: var(--search-exit-start, translateY(0)); opacity: var(--search-exit-opacity, 1); } to { transform: translateY(calc(-100% - var(--search-exit-overhang, 160px))); opacity: 1; } }
@keyframes search-backdrop-depart { to { opacity: 0; } }
@keyframes search-control-disappear { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #site-search.is-closing, #site-search.is-closing::backdrop, #site-search.is-closing > :not(.search-cloud), #site-search.is-closing #search-empty { animation: none; }
}