.site-search-open{background:transparent;
  color:inherit;
  border:1px solid currentColor;
  border-radius:6px;
  padding:10px;
  min-width:44px;
  min-height:44px;
  cursor:pointer;
  flex-shrink:0}

.site-search-open[hidden]{display:none}
.site-search-open svg{display:block;
  width:22px;
  height:22px}

#site-search{background:#fff;
  color:var(--espresso);
  border:1px solid var(--outline);
  border-radius:12px;
  width:min(760px,calc(100% - 32px));
  max-height:85dvh;
  padding:28px;
  overflow:auto}

#site-search::backdrop{background:rgb(0 0 0 / .65)}
.search-top{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.search-top h2{font-size:1.8rem;
  margin:0}
.search-close{min-width:48px;
  min-height:48px;
  font-size:2rem;
  background:transparent;
  color:inherit;
  border:0;
  cursor:pointer}

#site-search label{display:block;
  margin:18px 0 8px}
.search-input-row{display:flex;
  gap:10px}
.search-input-row input{min-width:0;
  flex:1;
  padding:12px;
  border:1px solid var(--slate);
  border-radius:4px;
  font:inherit;
  background:#fff;
  color:var(--espresso)}
.search-input-row button{padding:12px 18px;
  border:0;
  background:var(--espresso);
  color:white;
  border-radius:4px;
  font:inherit;
  cursor:pointer}

#search-status{margin:16px 0}
#search-results{list-style:none;
  margin:0;
  padding:0}
#search-results li{padding:16px 0;
  border-top:1px solid var(--outline)}
#search-results small{display:block;
  color:var(--slate)}
#search-results a{display:block;
  font-weight:700;
  text-decoration:underline;
  padding:5px 0}
#search-results p{margin:4px 0 0}
h1[id^="find-"],h2[id^="find-"],h3[id^="find-"]{scroll-margin-top:130px}

@media(max-width:600px){#site-search{padding:16px}
.search-input-row{flex-wrap:wrap}
.search-input-row input{flex-basis:100%}
.site-search-open{padding:8px}
}

@media(prefers-color-scheme:dark){#site-search{background:#28221f;
  color:#f7f4f0}
#search-results small{color:var(--sand)}
.search-input-row input{background:var(--espresso);
  color:#fff;
  border-color:var(--outline)}
.search-input-row button{background:var(--amber);
  color:#28221f}
}

@media(forced-colors:active){#site-search,.search-input-row button,.site-search-open{border:1px solid ButtonText}
}


#site-search h2{color:inherit}


#site-search .search-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;color:inherit}
#site-search .search-close svg{display:block;width:26px;height:26px;pointer-events:none}