/* Search box in the fixed site header, just left of "Log in" (markup made by site-search.js). Over 960px the input is in the bar and the results drop down under it.
   At 960px and under only a 44px search button shows; it opens the input in a bar under the 56px header, and the results fill the width below that bar. */
.site-search { position: relative; display: flex; align-items: center; }
.site-search-input { display: block; width: 200px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--text-primary, #e6edf3); background: var(--bg-card, #11161d); border: 1px solid var(--border-light, #30363d); border-radius: 6px; }
.site-search-input:focus { outline: 2px solid var(--accent, #58a6ff); outline-offset: 1px; }
.site-search-toggle { display: none; position: relative; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 1px solid var(--border-light, #30363d); border-radius: 6px; color: var(--text-primary, #e6edf3); cursor: pointer; }
.site-search-icon { position: absolute; left: 13px; top: 12px; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; }
.site-search-icon::after { content: ""; position: absolute; left: 9px; top: 9px; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); transform-origin: 0 0; }
.site-search-panel { position: relative; }
.site-search-glass { left: 13px; top: 15px; pointer-events: none; color: var(--text-muted, #8b949e); }
.site-search-input { padding-left: 38px; }
.site-search-drop { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 88px); overflow-y: auto; padding: 4px 16px 8px; background: var(--bg-card, #161b22); border: 1px solid var(--border-light, #30363d); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.site-search.has-query .site-search-drop { display: block; }
.site-search-status { margin: 8px 0 0; font-size: 13px; color: var(--text-muted, #8b949e); min-height: 1.2em; }
.site-search-results { list-style: none; margin: 8px 0 0; padding: 0; }
.site-search-item, .site-search-none { padding: 12px 0; border-top: 1px solid var(--border, #30363d); }
.site-search-title { font-weight: 700; color: var(--accent, #58a6ff); text-decoration: none; }
.site-search-title:hover { text-decoration: underline; }
.site-search-section { margin-left: 8px; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted, #8b949e); border: 1px solid currentColor; border-radius: 4px; }
.site-search-snippet { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary, #9da7b3); }
.site-search-snippet strong { color: var(--text-primary, #e6edf3); }

/* wide screens (1100px and up have room): a roomier input, growing while it has focus, so a typed question is not clipped; below that it stays 200px so the header row never wraps */
@media (min-width: 1100px) {
  .site-search-input { width: 240px; }
  .site-search-input:focus { width: 320px; }
}

@media (max-width: 960px) {
  .site-search-toggle { display: inline-block; }
  .site-search-panel { display: none; }
  .site-search.is-open .site-search-panel { display: block; position: fixed; top: 56px; left: 0; right: 0; z-index: 105; box-sizing: border-box; padding: 8px 12px; background: #0a0e14; border-bottom: 1px solid var(--border-light, #30363d); }
  .site-search-input { width: 100%; }
  .site-search-glass { left: 25px; top: 23px; }
  .site-search:not(.is-open) .site-search-drop { display: none; }
  .site-search-drop { position: fixed; top: 116px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); }
}
/* phone: the header holds the logo, the search button, Log in, Beta access and Menu in one row, so the paddings and gaps tighten and the wordmark is read by screen readers only */
@media (max-width: 480px) {
  .snav.snav-has-search .snav-inner { gap: 0 6px; }
  .snav.snav-has-search .snav-actions { gap: 4px; }
  .snav.snav-has-search .snav-login, .snav.snav-has-search .snav-cta, .snav.snav-has-search .snav-toggle { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 430px) {
  .snav.snav-has-search .snav-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}