/* Header site search (typeahead). Pairs with search.js. Uses the site tokens on :root. */
.search { position: relative; flex: none; --sq-top: 40px; }
.search .sbtn { display: none; width: 32px; height: 40px; margin: 0 -4px 0 0; padding: 0; border: 0; background: none; color: #cfcfc8; cursor: pointer; align-items: center; justify-content: center; }
.search .sbtn:hover, .search .sbtn[aria-expanded="true"] { color: #fff; }
.search .sbtn[aria-expanded="true"] { box-shadow: inset 0 -2px 0 #7fd6a0; }
.search .sbtn:focus-visible, .search .sx:focus-visible { outline: 2px solid #7fd6a0; outline-offset: -3px; }

.search input { display: block; width: 266px; height: 26px; margin: 0; padding: 0 24px 0 8px; text-overflow: ellipsis; border: 1px solid #3a3a37; border-radius: 2px; background: #1f1f1d; color: #eee; font: 400 12.5px/24px var(--sans); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: #8b8b85; opacity: 1; font-size: 12px; }
.search input:hover { border-color: #55554f; }
.search input:focus { outline: none; border-color: #7fd6a0; box-shadow: 0 0 0 1px #7fd6a0; background: #232321; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .skey { position: absolute; right: 5px; top: 50%; margin-top: -8px; height: 16px; min-width: 14px; padding: 0 3px; border: 1px solid #4a4a45; border-radius: 2px; color: #9a9a93; font: 500 10px/14px var(--mono); text-align: center; pointer-events: none; }
.search input:focus ~ .skey, .search input:not(:placeholder-shown) ~ .skey { display: none; }
.search .sx { display: none; }
.search .s-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* results */
.search .sr { position: absolute; top: calc(100% + 7px); right: 0; z-index: 30; width: 470px; max-width: calc(100vw - 32px); max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-top: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); font: 400 13px/1.35 var(--sans); text-align: left; }
.search .sr[hidden] { display: none !important; }
.sr-g + .sr-g { border-top: 1px solid var(--line); }
.sr-h { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; padding: 5px 12px 4px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink-2); font: 600 10px/13px var(--sans); letter-spacing: 0.07em; text-transform: uppercase; }
.sr-c { font: 500 10px/13px var(--mono); letter-spacing: 0; color: var(--ink-3); text-transform: none; }
.sr-o { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 5px 12px; color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: inset 2px 0 0 transparent; }
.sr-o + .sr-o { border-top: 1px solid var(--line); }
.sr-o:hover { text-decoration: none; }
.sr-o.on { background: var(--hover, var(--panel)); box-shadow: inset 2px 0 0 var(--link); }
.sr-n { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sr-n b { font-weight: 700; color: var(--ink); }
.t-store .sr-n { font: 400 12.5px/1.35 var(--mono); }
.t-store .sr-n b { font-weight: 600; }
.sr-m { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 11.5px; }
.sr-k { margin-right: 8px; color: var(--ink-2); font: 500 11px var(--mono); }
.sr-v { flex: none; margin-left: auto; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-2); font: 500 10px/15px var(--mono); text-transform: lowercase; }
.sr-v.v-verified { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.sr-v.v-unverified { border-color: var(--mid); color: var(--mid); background: var(--mid-bg); }
.sr-v.v-shared { border-color: var(--line-2); color: var(--ink-2); background: var(--panel); }
/* Fixed red in both themes: white text on the dark-theme --bad (a light salmon) would not be readable. */
.sr-v.v-flagged { border-color: #b3261e; color: #fff; background: #b3261e; }
.sr-msg { padding: 9px 12px; color: var(--ink-3); font-size: 12px; }
.sr-msg b { color: var(--ink); font-weight: 600; }
.sr-ex { color: var(--link); cursor: pointer; font-family: var(--mono); font-size: 11.5px; }
.sr-ex:hover { text-decoration: underline; }
.sr-more { color: var(--link); border-top: 1px solid var(--line); font-size: 12.5px; }
.sr-more.on { text-decoration: underline; }

@media (max-width: 1100px) {
  .search input { width: 200px; }
}
@media (pointer: coarse) {
  .sr-o { min-height: 40px; }
}

/* phone and small tablet: icon in the bar, search panel fixed under it */
@media (max-width: 760px) {
  .search .sbtn { display: inline-flex; }
  .search input, .search .skey { display: none; }
  .search.open::before { content: ""; position: fixed; top: var(--sq-top); left: 0; right: 0; z-index: 29; height: 52px; background: #141414; border-bottom: 1px solid #2c2c29; }
  .search.open input { display: block; position: fixed; top: calc(var(--sq-top) + 8px); left: 12px; right: 56px; z-index: 31; width: auto; height: 36px; padding: 0 10px; font-size: 16px; line-height: 34px; }
  .search.open input::placeholder { font-size: 16px; }
  .search.open .sx { display: flex; position: fixed; top: calc(var(--sq-top) + 4px); right: 6px; z-index: 31; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #cfcfc8; cursor: pointer; align-items: center; justify-content: center; }
  .search.open .sx:hover { color: #fff; }
  .search .sr { display: none; }
  .search.open .sr { display: block; position: fixed; top: calc(var(--sq-top) + 52px); left: 0; right: 0; width: auto; max-width: none; max-height: calc(100vh - var(--sq-top) - 52px); max-height: calc(var(--svh, 100dvh) - var(--sq-top) - 52px); border: 0; border-bottom: 1px solid var(--line-2); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); }
  .search.open .sr-o { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "m m"; column-gap: 10px; row-gap: 1px; min-height: 44px; padding: 6px 16px; }
  .search.open .sr-n { grid-area: n; max-width: none; }
  .search.open .sr-m { grid-area: m; }
  .search.open .sr-v { grid-area: v; align-self: center; }
  .search.open .sr-h { padding: 6px 16px 5px; }
  .search.open .sr-msg { padding: 12px 16px; font-size: 13px; }
  .search.open .sr-ex { font-size: 13px; }
}