/* Search extends the existing help surfaces and color tokens in every collection. */
#search-open{display:grid;place-items:center;flex:none;width:44px;min-height:44px;padding:10px;margin-inline-start:auto;border-radius:6px;color:var(--muted);background:var(--surface)}
#search-open::before{content:none}
#search-open svg{display:block}
.site-header #search-open{margin-inline-start:0}
.site-nav:has(#search-open){align-items:center}
#search-dialog{width:min(700px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin-block:16px;margin-inline:auto;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-block:16px}
.search-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
#search-label{margin:0;padding:0;font-size:20px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.search-heading form{flex:none;margin:0}
#search-open,.search-close,.search-clear{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;padding:10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);-webkit-tap-highlight-color:transparent}
.search-field{display:flex;align-items:center;gap:8px;min-width:0;padding-inline:12px 4px;border:1px solid var(--muted);border-radius:6px;background:var(--surface);color:var(--muted)}
.search-field>svg{flex:none}
.search-field:focus-within{outline:2px solid var(--green);outline-offset:2px}
.search-field #search-input{flex:1;min-width:0;width:100%;min-height:48px;padding:10px 0;border:0;border-radius:0;outline:none;background:transparent;color:var(--ink);font-size:16px;box-shadow:none}
.search-field input::-webkit-search-cancel-button{display:none}
.search-suggestions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--muted)}
.search-suggestions>span{margin-inline-end:4px}
.search-suggestions button,#search-retry,#search-more{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--green);font:inherit;font-size:14px;overflow-wrap:anywhere}
.search-feedback{margin-top:20px}
#search-status{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 12px;overflow-wrap:anywhere}
#search-retry{margin-bottom:16px}
#results{display:grid;gap:8px;min-width:0}
#results a{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;text-align:start}
#results a:focus-visible{outline:2px solid var(--green);outline-offset:2px;background:var(--soft)}
#results a strong{font-size:16px;font-weight:600;line-height:1.4}
#results a small{font-size:12px;margin:0;color:var(--muted)}
#results a span{font-size:14px;line-height:1.55;color:var(--muted)}
#results mark{background:var(--accent);color:var(--ink);border-radius:2px}
#search-more{margin-top:16px;width:100%}
#search-dialog [hidden]{display:none}
#search-dialog button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(hover:hover){
  #results a:hover{background:var(--soft);border-color:var(--muted)}
  #search-open:hover,.search-close:hover,.search-clear:hover{background:var(--soft);color:var(--ink)}
  .search-suggestions button:hover,#search-retry:hover,#search-more:hover{border-color:var(--green)}
}
@media(prefers-reduced-motion:no-preference){
  #search-open,.search-close,.search-clear,.search-suggestions button,#search-retry,#search-more{transition:scale 150ms ease-out,background-color 100ms ease-out}
  :is(#search-open,.search-close,.search-clear,.search-suggestions button,#search-retry,#search-more):not(:disabled):active{scale:.96}
}
@media(max-width:480px){#search-dialog{padding:16px}#search-label{font-size:18px}#results a{padding:12px}}
@media(forced-colors:active){.search-field{border-color:ButtonText}#results mark{background:Highlight;color:HighlightText}}
/* Keep the query and close button in view while browsing a long result list. */
#search-dialog[open]{display:flex;flex-direction:column}
#search-dialog>:not(#results){flex:none}
#results{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-inline:-4px;padding:4px;scroll-padding-block:4px}

.search-feedback:has(#search-status:empty):has(#search-retry[hidden]){display:none}

.search-scope{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--muted)}
.search-scope select{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--muted);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.search-scope select:focus-visible{outline:2px solid var(--green);outline-offset:2px}